/* تعریف فونت اصلی فارسی */
    @font-face {
        font-family: "fa-main"; /* فونت اصلی فارسی برای متن ها */
        font-weight: 400;
        font-display: swap; /* بهبود UX با بارگذاری سریعتر فونت */
        src: url(../font/p.ttf) format("truetype");
      }
  
      :root {
        --main-bg-color: #e9edf7;
        --card-bg-color: #ffffff;
        --app-header-bg: #f5f8fe;
        --text-color-primary: #31404a;
        --text-color-secondary: #55768b;
        --accent-color-blue: #0059ff;
        --accent-color-lightblue: #09b1fa;
        --icon-color-default: #7a8a99;
        --border-color: #dde3ec;
        --download-btn-bg: rgba(0, 89, 255, 0.08);
        --download-btn-hover-bg: rgba(0, 89, 255, 0.15);
        --indicator-scoop-color: rgba(233, 237, 247, 0.6);
        --border-radius-main: 12px;
        --border-radius-small: 8px;
        --shadow-light: 0 4px 15px rgba(49, 64, 74, 0.07);
        --shadow-medium: 0 6px 20px rgba(49, 64, 74, 0.1);
        --transition-main: 0.25s ease-out;
        --font-family-persian-main: "fa-main";
        /* --font-family-persian-title: 'fa-title', 'fa-main', Arial, sans-serif; */ /* اگر فونت عنوان جداگانه دارید */
        --font-family-persian-title: "fa-main", Arial,
          sans-serif; /* استفاده از همان فونت اصلی برای عنوان فعلا */
        --font-family-english: "syne", Helvetica, sans-serif; /* فونت انگلیسی */
        --focus-outline-color: var(--accent-color-blue);
        --desktop-max-width: 1200px; /* حداکثر عرض برای نمایش دسکتاپ */
      }

      /* ریست کلی و تنظیمات پایه */
      * {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: currentColor;
        margin: 0;
        padding: 0;
        font-variation-settings: normal;
        font-feature-settings: "tnum"; /* نمایش اعداد فارسی به صورت استاندارد */
        tab-size: 4;
        font-family: var(--font-family-persian-main); /* فونت پیش‌فرض برای همه عناصر */
      }

      html {
        font-size: 14px; /* اندازه فونت پایه */
        line-height: 1.6; /* ارتفاع خط استاندارد */
        scroll-behavior: smooth; /* اسکرول نرم */
        direction: rtl; /* راست‌چین بودن کل صفحه */
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--text-color-secondary);
        font-family: var(--font-family-persian-main);
        transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 95px; /* فضا برای نویگیشن پایین ثابت در موبایل */
      }
a {
    text-decoration: none; /* حذف خط زیر لینک */
}
      /* ساختار اصلی برای محدود کردن عرض در موبایل و مرکز کردن در دسکتاپ */
      .site-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1; /* برای پر کردن ارتفاع در body */
      }

      /* هدر اصلی سایت */
      .navbar {
        border-radius: 20px 20px 0 0;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        max-width: 380px; /* حداکثر عرض در موبایل */
        background-color: var(--app-header-bg);
        box-shadow: var(--shadow-light);
        height: 4.3rem;
        z-index: 10;
        position: sticky; /* چسبیدن هدر به بالای صفحه هنگام اسکرول */
        top: 0;
      }
      .navbar nav {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 1rem; /* استفاده از padding-inline برای سازگاری با جهت‌های مختلف */
      }
      /* SEO: استفاده از H1 برای لوگو/نام سایت */
      .navbar .site-title {
        color: var(--text-color-primary);
        font-weight: 700; /* افزایش خوانایی */
        font-size: 1.3rem; /* اندازه مناسب برای عنوان سایت */
        text-decoration: none;
        font-family: var(--font-family-persian-title);
      }
      .navbar .site-title:focus-visible {
        outline: 2px solid var(--focus-outline-color);
        outline-offset: 2px;
        border-radius: var(--border-radius-small);
      }
      .navbar .actions img {
        width: 40px; /* اندازه مناسب‌تر برای لوگوی کوچک یا آیکون */
        height: 40px;
        object-fit: contain;
        border-radius: var(--border-radius-small); /* اضافه کردن کمی گردی به گوشه‌ها */
        margin-top:10px;
      }

      /* کانتینر اصلی محتوا */
      .container {
        position: relative;
        width: 100%;
        max-width: 380px; /* حداکثر عرض در موبایل */
        transition: opacity 0.3s;
        display: flex;
        flex-direction: column;
        background-color: var(--card-bg-color);
        box-shadow: var(--shadow-light);
        overflow: hidden;
        flex-grow: 1; /* اجازه می‌دهد این بخش فضای خالی را پر کند */
        
      }

      .main-content-wrapper {
        flex-grow: 1;
        overflow-y: auto; /* اسکرول داخلی در صورت نیاز */
        width: 100%;
      }

      .main-content-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        padding: 15px; /* پدینگ داخلی برای محتوا */
      }

      /* ناحیه محتوای داینامیک */
      .dynamic-content-area {
        width: 100%;
        
      }

      /* انیمیشن ظاهر شدن محتوا */
      .content-section {
        animation: fadeIn 0.5s ease-out forwards;
        margin-bottom: 25px;
        width: 100%;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* بنر آلبوم جدید */
      .new-album{
        background: linear-gradient(135deg, #507a87, #2c3e50);
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--border-radius-main);
        box-shadow: var(--shadow-medium);
        color: #ffffff;
        width: 100%;
        margin-bottom: 20px;
      }
      .new-album .album-info .b-title {
        font-size: 1.2rem;
        font-weight: 700;
        display: block;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.95);
        font-family: var(--font-family-persian-title);
        margin-bottom: 8px;
      }
      .new-album .album-info .b-subtitle {
        margin-top: 5px;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.9);
        display: block;
        font-family: var(--font-family-persian-main);
        font-weight: 400;
        line-height: 1.5; /* بهبود خوانایی */
      }
      .new-album .album-art-large {
        width: 85px;
        height: 85px;
        background-size: cover;
        background-position: center;
        border-radius: var(--border-radius-small);
        margin-right: 15px; /* فاصله از متن */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.5);
        flex-shrink: 0; /* جلوگیری از کوچک شدن تصویر */
      }

      /* هدر بخش‌ها (مثلا: جدیدترین آلبوم‌ها) */
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 12px; /* افزایش فاصله */
      }
      .section-header .title h2 {
        /* SEO: استفاده از H2 برای عناوین بخش‌ها */
        font-weight: 700;
        font-size: 1.15rem; /* کمی بزرگتر */
        line-height: 1.5;
        color: var(--text-color-primary);
        font-family: var(--font-family-persian-title);
      }
      .section-header .show-all-button button {
        direction: ltr; /* برای هم‌راستایی آیکون و متن دکمه */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: transparent;
        border: none;
        color: var(--text-color-primary);
        font-size: 0.9rem; /* کمی بزرگتر */
        font-weight: 600; /* خواناتر */
        padding: 6px 0px; /* کمی پدینگ عمودی */
        text-decoration: none;
        outline: none;
        transition: opacity var(--transition-main);
        font-family: var(--font-family-persian-main);
        border-radius: var(--border-radius-small);
      }
      .section-header .show-all-button button:hover {
        opacity: 0.7;
      }
      .section-header .show-all-button button:focus-visible {
        opacity: 0.7;
        outline: 2px solid var(--focus-outline-color);
        outline-offset: 1px;
      }
      .section-header .show-all-button .titlesvg {
        display: block;
        width: 18px;
        height: 18px;
        fill: currentColor;
        margin-left: 6px; /* افزایش فاصله آیکون از متن */
      }

      /* اسکرولر کارت‌های آلبوم */
      .album-cards-scroller {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 0; /* پدینگ برای جلوگیری از چسبیدن کارت‌ها به لبه */
        gap: 15px;
        -ms-overflow-style: none; /* مخفی کردن اسکرول بار در IE/Edge */
        scrollbar-width: none; /* مخفی کردن اسکرول بار در Firefox */
        scroll-snap-type: x mandatory; /* اسنپ شدن کارت‌ها هنگام اسکرول */
      }
      .album-cards-scroller::-webkit-scrollbar {
        display: none; /* مخفی کردن اسکرول بار در Chrome/Safari/Opera */
      }
      .album-cards-scroller .card {
        background-color: var(--card-bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-main);
        width: 145px;
        flex-shrink: 0; /* جلوگیری از کوچک شدن کارت‌ها */
        padding: 10px;
        transition: transform var(--transition-main),
        box-shadow var(--transition-main);
        cursor: pointer;
        box-shadow: var(--shadow-light);
        scroll-snap-align: start; /* هم‌ترازی کارت‌ها با شروع اسکرولر */
        display: flex;
        flex-direction: column;
        outline: none;
      }
      .album-cards-scroller .card:hover,
      .album-cards-scroller .card:focus-within { /* focus-within برای والد */
        transform: translateY(-5px) scale(1.02);
        box-shadow: var(--shadow-medium);
      }
       .album-cards-scroller .card:focus-visible { /* استایل فوکوس واضح برای خود کارت */
        box-shadow: var(--shadow-medium), 0 0 0 2px var(--focus-outline-color);
      }
      .album-cards-scroller .card .card-image {
        width: 100%;
        height: 120px;
        background-color: #e0e0e0; /* رنگ Placeholder */
        border-radius: var(--border-radius-small);
        margin-bottom: 10px;
        position: relative;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
      .album-cards-scroller .card .play-button-overlay {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background-color: var(--accent-color-blue);
        color: #ffffff;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px; /* اندازه آیکون پخش */
        box-shadow: 0 2px 6px rgba(0, 89, 255, 0.35);
        opacity: 0;
        transform: translateY(8px) scale(0.8);
        transition: opacity var(--transition-main),
          transform var(--transition-main);
      }
      .album-cards-scroller .card:hover .play-button-overlay,
      .album-cards-scroller .card:focus-within .play-button-overlay {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .album-cards-scroller .card .card-info {
        text-align: right;
        flex-grow: 1; /* پر کردن فضای باقی‌مانده در کارت */
      }
      .album-cards-scroller .card .card-info .card-title {
        font-size: 0.9rem;
        margin: 0 0 3px 0;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* نمایش سه‌نقطه برای متن طولانی */
        color: var(--text-color-primary);
        display: block; /* برای اعمال text-overflow */
      }
      .album-cards-scroller .card .card-info p {
        font-size: 0.8rem;
        color: var(--text-color-secondary);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; /* برای اعمال text-overflow */
      }

      /* نویگیشن پایین صفحه (مخصوص موبایل) */
      .navigation {
        position: fixed; /* ثابت در پایین صفحه */
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 20px); /* کمی فاصله از لبه‌ها */
        max-width: 360px; /* کمی کوچکتر از کانتینر اصلی موبایل */
        height: 70px;
        background-color: var(--app-header-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--border-radius-main);
        box-shadow: var(--shadow-medium);
        z-index: 100; /* بالاتر از سایر عناصر */
      }
      .navigation ul {
        display: flex;
        width: 100%;
        justify-content: space-around; /* توزیع یکنواخت آیتم‌ها */
        padding: 0; /* حذف پدینگ پیش‌فرض ul */
        margin: 0; /* حذف مارجین پیش‌فرض ul */
      }
      .navigation ul li {
        position: relative;
        flex-grow: 1; /* رشد یکسان آیتم‌ها */
        max-width: 70px; /* حداکثر عرض هر آیتم */
        height: 70px;
        list-style: none; /* حذف نقاط لیست */
        z-index: 1; /* بالاتر از indicator برای کلیک‌پذیری */
      }
      .navigation ul li a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        font-weight: 500;
        text-decoration: none; /* حذف خط زیر لینک */
        border-radius: var(--border-radius-small); /* برای focus-visible */
        color: var(--icon-color-default); /* رنگ پیش‌فرض آیکون و متن */
      }
      .navigation ul li a:focus-visible {
        outline: 2px solid var(--focus-outline-color);
        outline-offset: -3px; /* نمایش outline در داخل آیتم */
      }
      .navigation ul li a .icon {
        position: relative;
        display: block;
        line-height: 1; /* جلوگیری از ارتفاع اضافه */
        font-size: 1.5em;
        text-align: center;
        transition: transform 0.5s, color 0.5s;
      }
      .navigation ul li.active a .icon {
        transform: translateY(-33px) translateX(1px); /* انیمیشن آیکون فعال */
        color: var(--text-color-primary); /* رنگ آیکون فعال */
      }
      .navigation ul li a .text {
        position: absolute;
        color: var(--text-color-primary);
        font-weight: 500;
        font-size: 0.9em;
        letter-spacing: 0.05em;
        opacity: 0; /* مخفی بودن متن در حالت عادی */
        transform: translateY(15px);
        transition: opacity 0.5s, transform 0.5s;
        transition-delay: 0.1s; /* تاخیر برای نمایش نرم‌تر */
      }
      .navigation ul li.active a .text {
        opacity: 1; /* نمایش متن در حالت فعال */
        transform: translateY(12px);
      }
      .navigation ul li a .circle {
        position: absolute;
        display: block;
        width: 50px;
        height: 50px;
        background: transparent;
        border-radius: 50%;
        border: 1px solid var(--text-color-secondary); /* ضخامت و رنگ دایره */
        transform: translateY(-37px) scale(0);
      }
      .navigation ul li.active a .circle {
        transition: 0.5s;
        transition-delay: 0.5s; /* هماهنگ با انیمیشن آیکون */
        transform: translateY(-37px) scale(1);
        border-color: var(--text-color-primary); /* رنگ دایره فعال */
      }

      /* نشانگر آیتم فعال در نویگیشن پایین */
      .indicator {
        position: absolute;
        top: -45%; /* تنظیم دقیق‌تر موقعیت */
        width: 60px;
        height: 60px;
        background-color: var(--app-header-bg);
        border: 5px solid var(--card-bg-color); /* همرنگ با پس‌زمینه کانتینر */
        border-radius: 50%;
        display: flex; /* برای هم‌ترازی‌های آینده احتمالی */
        justify-content: center;
        align-items: center;
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* انیمیشن نرم */
        z-index: 0; /* پایین‌تر از آیتم‌های li */
      }
      /* ایجاد "برش" در اطراف نشانگر */
      .indicator::before,
      .indicator::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px); /* تنظیم دقیق عمودی */
        width: 18px;
        height: 18px;
        background: transparent; /* برای ایجاد افکت برش */
        /* رنگ box-shadow باید با پس‌زمینه اصلی body یا کانتینر موبایل یکی باشد */
      }
      .indicator::before {
        left: -19px; /* تنظیم دقیق افقی */
        border-top-right-radius: 18px;
        box-shadow: 1px -9px 0 var(--card-bg-color); /* همرنگ با پس‌زمینه کانتینر */
      }
      .indicator::after {
        right: -19px; /* تنظیم دقیق افقی */
        border-top-left-radius: 18px;
        box-shadow: -1px -9px 0 var(--card-bg-color); /* همرنگ با پس‌زمینه کانتینر */
      }

      /* حرکت نشانگر بر اساس آیتم فعال */
      /* مقادیر translateX ممکن است نیاز به تنظیم دقیق بر اساس عرض آیتم‌ها و فاصله بین آنها داشته باشد */
      .navigation ul li:nth-child(1).active ~ .indicator {
        transform: translateX(calc(72px * 2));
      }
      .navigation ul li:nth-child(2).active ~ .indicator {
        transform: translateX(calc(71px * 1));
      }
      .navigation ul li:nth-child(3).active ~ .indicator {
        transform: translateX(calc(70px * 0));
      }
      .navigation ul li:nth-child(4).active ~ .indicator {
        transform: translateX(calc(71px * -1));
      }
      .navigation ul li:nth-child(5).active ~ .indicator {
        transform: translateX(calc(72px * -2));
      }

      /* فوتر سایت */
      .footer {
        margin-top: -90px; /* در حالت عادی مارجین بالا ندارد، توسط body کنترل می‌شود */
        width: 100%;
        max-width: 380px; /* حداکثر عرض در موبایل */
        border-radius: 0 0 20px 20px;
        background-color: var(--card-bg-color);
        box-shadow: var(--shadow-light);
        overflow: hidden;
        padding-bottom: 10px; /* فاصله برای محتوای داخلی از پایین */
      }
      .footer-section {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
    
      .footer-inner-container {
        padding: 10px; /* پدینگ یکسان از همه طرف */
        display: flex;
        flex-direction: column;
        gap: 0; /* حذف فاصله اضافی اگر لازم نیست */
        width: 100%;
      }
      .footer-image-widget {
        text-align: center;
        margin-bottom: -110px; /* تنظیم همپوشانی تصویر با بخش بعدی */
        position: relative;
        z-index: 3; /* پایین‌تر از محتوای همپوشان */
      }
      .footer-image-container img {
        aspect-ratio: 1258 / 793; /* حفظ نسبت تصویر */
        height: auto;
        max-width: 100%;
        width: 220px; /* اندازه کوچکتر برای موبایل */
      }
      .footer-section.overlap-section {
        position: relative;
        z-index: 2; /* بالاتر از تصویر */
      }
      .footer-content-full {
        gap: 20px; /* فاصله بین ستون‌ها */
        border-radius: var(--border-radius-main);
        padding: 65px 15px 15px 15px; /* پدینگ بالا برای همپوشانی تصویر */
        display: flex;
        flex-direction: column; /* چیدمان ستونی در موبایل */
        width: 100%;
        background: linear-gradient(135deg, #507a87, #2c3e50); /* پس‌زمینه گرادیانی */
        color: #fff; /* رنگ متن روشن برای خوانایی */
        justify-content: center;
        flex-basis: auto;
        flex-direction: row;       
        flex-wrap: wrap; 
      }
      
    
      .footer-details {
        display: flex;
        flex-direction: column;
        gap: 15px; /* فاصله کمتر بین آیتم‌ها */
        width: 100%;
        text-align: center; /* مرکزچین کردن متن در موبایل */
      }
      .footer-widget-container {
        width: 100%;
        margin-bottom: 8px; /* فاصله کمتر */
      }
    
      .footer-heading-title {
        font-size: 1.1rem; /* اندازه مناسب برای عنوان اصلی فوتر */
        font-weight: 700;
        color: #fff;
        font-family: var(--font-family-persian-title);
        margin-bottom: 5px;
      }
      .footer-text-editor-widget p {
        font-size: 0.95rem; /* اندازه مناسب برای متن کپی‌رایت */
        line-height: 1.7; /* بهبود خوانایی */
        text-align: justify; /* تراز کردن متن */
      }
      .footer-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* خط جداکننده روشن‌تر */
        margin: 10px auto; /* مرکز کردن جداکننده */
        width: 80%; /* عرض کمتر برای جداکننده */
      }
      .footer-quicks {
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        gap: 8px;
        text-align: center; /* مرکزچین کردن لینک‌ها در موبایل */
      }
      .quicks-heading-title {
        font-size: 1rem; /* اندازه مناسب برای عناوین لینک‌ها */
        font-weight: 600; /* کمی سبک‌تر از عنوان اصلی */
        color: #fff;
        font-family: var(--font-family-persian-title);
        margin-bottom: 5px;
      }
      .quicks-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .quicks-list .quick-item {
        margin-bottom: 5px; /* فاصله بین لینک‌ها */
      }
      .quicks-list .quick-item a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.85); /* رنگ لینک‌ها با شفافیت کم */
        font-size: 0.9rem;
        padding: 3px 5px;
        border-radius: var(--border-radius-small);
        transition: background-color var(--transition-main), color var(--transition-main);
      }
      .quicks-list .quick-item a:hover,
      .quicks-list .quick-item a:focus-visible {
        color: #fff; /* رنگ روشن‌تر در هاور/فوکوس */
        background-color: rgba(255, 255, 255, 0.1);
        text-decoration: underline; /* تاکید بیشتر */
        outline: none;
      }
      .footer-bottom {
        text-align: center;
        margin-top: 15px; /* فاصله از بخش‌های بالایی */
        padding-top: 10px; /* پدینگ برای جدا شدن بصری */
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* خط جداکننده محو */
      }
      .footer-bottom p,
      .footer-bottom span {
        font-size: 0.8rem; /* اندازه کوچکتر برای متن انتهایی */
        color: rgba(255, 255, 255, 0.7); /* رنگ متن با شفافیت */
        margin-bottom: 5px;
      }
      .footer-bottom a {
        color: var(--accent-color-lightblue);
        text-decoration: none;
        border-radius: var(--border-radius-small);
        font-weight: 500; /* کمی تاکید بیشتر */
      }
      .footer-bottom a:hover,
      .footer-bottom a:focus-visible {
        text-decoration: underline;
        outline: 1px dashed var(--accent-color-lightblue); /* فوکوس واضح‌تر */
        color: #fff;
      }       
   
      
      
      
      
      
      
      
       .card-body{
            width: 100%;
        }

   .card__img {
          height: 250px; /* تنظیم اندازه برای تناسب بهتر */
          width: 250px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-inline: auto;
          margin-top: 10px;
          margin-bottom: 20px;
          background: transparent; /* پس زمینه شفاف که پس زمینه کارت دیده شود */
          border-radius: 1002px; /* دایره بزرگ */
          /* box-shadow: 0 2px 8px 0 rgba(99,99,99,0.2), 0 85px 19px -60px rgba(53, 140, 203, 0.03); */ /* سایه خود کارت کافیست */
        }
        .card__img img {
          box-shadow: 0 2px 8px 0 rgba(99,99,99,0.2);
          width: calc(100% - 16px);
          height: calc(100% - 16px);
          border-radius: 1002px; /* دایره */
          animation-fill-mode: forwards;
          object-fit: cover; /* برای اطمینان از پر شدن تصویر */
        }
        @keyframes morph {
          0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1); }
          50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.02);}
          100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1);}
        }
        .animate{
          animation: morph 4s linear infinite alternate;
        }
        /* Song Info in Card */
        .c{
            position:relative;
            width: 100%;
            height:auto; /* ارتفاع خودکار */
            min-height: 60px; /* حداقل ارتفاع */
            margin-bottom: 15px;
            display: flex; /* برای هم ترازی بهتر */
            align-items: center;
        }
        .text-content {
            flex-grow: 1; /* اجازه می دهد متن فضا را پر کند */
            text-align:right; /* برای فارسی */
            padding-left: 45px; /* فضا برای آیکون قلب */
        }
        .song-title {
          margin: 0 0 3px 0;
          display:block;
          font-size: 18px;
          font-weight: 700; /* بولدتر */
          color: var(--text-color-primary);
        }
        .artist-name {
          display:block;
          font-size: 13px;
          margin: 0;
          color: var(--text-color-secondary);
        }
        .svg-right { /* Like icon */
          width:30px;
          height:30px;
          position:absolute;
          left: 0px; /* برای فارسی */
          top: 50%;
          transform: translateY(-50%);
          color: var(--text-color-secondary);
          cursor: pointer;
          transition: width 0.2s, opacity 0.2s, color 0.2s, transform 0.2s ease;
        }
        .svg-right:hover {
            color: #FD4F1A;
            transform: translateY(-50%) scale(1.1);
        }
        .svg-right.liked {
            color: #FD4F1A; /* رنگ قلب لایک شده */
            /* fill: #FD4F1A;  برای SVG fill */
        }
        /* Audio Player Progress Bar Styles (Kept from original as they are used) */
.audioplayer-bar {
    position: relative;
    display: flex;
    margin: 0 0 10px 0; /* Adjusted margin */
    height: 12px; /* Total clickable height */
    flex-basis: 0;
    flex-grow: 1;
    cursor: pointer;
}
.audioplayer-bar::before { /* Track background */
    content: '';
    position: absolute;
    top: 4px; /* Vertically center the 4px bar in 12px container */
    left:0;
    width: 100%;
    height: 4px;
    background-color: #DDE2E6;
    border-radius: 2px;
}
.audioplayer-bar > div { /* Common for loaded and played bars */
    position: absolute;
    left: 0;
    top: 4px; /* Align with track background */
    height: 4px;
    border-radius: 2px;
}
.audioplayer-bar-loaded {
    z-index: 1;
    background: #BEC8D2;
}
.audioplayer-bar-played {
    z-index: 2;
    background: -webkit-linear-gradient(left,#0059FF,#09B1FA);
    background: linear-gradient(to right,#0059FF,#09B1FA); /* Standard gradient */
}
.audioplayer-bar-played::after { /* Thumb */
    display: flex;
    position: absolute;
    content: '';
    box-sizing: border-box;
    top: -4px; /* Center the 12px thumb over the 4px bar */
    right: -6px; /* Center thumb */
    /* margin-right: -5px; Not needed if right is -6px */
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%; /* Circular thumb */
    border: 2px solid #0059FF; /* Default border color */
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

/* sub */ 
.sub{
 margin-right:auto;
 margin-left:auto;
 width:100%;
 margin-top: 10px;
}
.sub #subtitle{
  display: block;
  text-align:center; 
  padding: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #0f1923;
}
.sub {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: #0f1923;
  cursor: pointer;
  position: relative;
  padding: 2px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  transition: all .15s ease;
  text-align:center;
}

.sub::before,
.sub::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid #7D8082;
  transition: all .15s ease;
}

 .sub::before { top: 0; border-bottom-width: 0; border-radius: 5px 5px 0 0;}
        .sub::after { bottom: 0; border-top-width: 0; border-radius: 0 0 5px 5px;}
        .sub:active, .sub:focus { outline: none; }
        .sub:active::before, .sub:active::after { right: 3px; left: 3px; }
        .sub:active::before { top: 3px; }
        .sub:active::after { bottom: 3px; }
        .sub:hover { color: var(--accent-color-blue); }
        .sub:hover::before, .sub:hover::after { border-color: var(--accent-color-blue); }

        
.a{ /* Container for time displays */
    position:relative;
    width:100%;
    font-size: 12px; /* Consistent font size for time */
    color: #333;
    margin-bottom: 10px; /* Space before controls */
}
#currentTime {
    float: left; /* Align to left */
}
#durationTime{
    float: right; /* Align to right */
}
.control {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0; /* Adjusted padding */
  margin-top:35px;
}

.control div { /* Clickable area for icons */
  cursor: pointer;
  padding: 0px; /* Add some padding for easier clicking */
  display: flex; /* Align icon within div */
  align-items: center;
  justify-content: center;
}
.control div ion-icon{
   width:24px;
   height:24px;
   color:#1A2948;
}
#ctrlIcon{
   width:44px;
   height:44px;
}
 .download{
            touch-action: manipulation;
            display: flex;
            width: 100%;
            cursor: pointer;
            user-select: none;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background-color: var(--download-btn-bg);
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: 15px; /* کمی کوچکتر */
            line-height: 25px;
            font-weight: 500;
            transition: background-color .15s ease, transform 0.1s ease;
            margin-top: 10px;
            color: var(--text-color-primary);
        }
        .download:hover {
            background-color: var(--download-btn-hover-bg);
        }
        .download:active {
            transform: scale(0.98);
        }
.text{
font-color:var(--text-color-primary);
font-size:15px;
text-align:center;
white-space: pre-line;
font-weight: 600;
}
      
      
      
      
      

      /* ------ Media Queries برای واکنش‌گرایی ------ */

      /* صفحه‌نمایش‌های خیلی کوچک (مثلا عرض کمتر از 360 پیکسل) */
      @media screen and (max-width: 360px) {
        html {
          font-size: 13px; /* کاهش اندازه فونت پایه */
        }
        .navigation ul li a .icon {
          font-size: 1.4em;
        }
        /* تنظیمات مجدد برای انیمیشن نویگیشن در این اندازه */
        .navigation ul li.active a .icon {
          transform: translateY(-28px); /* تنظیم دقیق‌تر */
        }
        .navigation ul li.active a .text {
          transform: translateY(10px);
        }
        .indicator {
          width: 55px;
          height: 55px;
          top: -40%;
        }
        .indicator::before {
          left: -17px;
          width: 16px;
          height: 16px;
          box-shadow: 1px -8px 0 var(--card-bg-color);
        }
        .indicator::after {
          right: -17px;
          width: 16px;
          height: 16px;
          box-shadow: -1px -8px 0 var(--card-bg-color);
        }
        .album-cards-scroller .card {
          width: 130px; /* کاهش عرض کارت‌ها */
        }
        .album-cards-scroller .card .card-image {
          height: 110px; /* کاهش ارتفاع تصویر کارت */
        }
        .new-album-banner .album-art-large {
          width: 75px;
          height: 75px;
        }
        .new-album-banner .album-info .banner-title {
          font-size: 1.1rem;
        }
        .new-album-banner .album-info .banner-subtitle {
          font-size: 0.8rem;
        }
        .footer-image-container img {
            width: 180px; /* کوچکتر کردن تصویر فوتر */
        }
        .footer-content-full {
            padding-top: 55px; /* تنظیم پدینگ برای تصویر کوچکتر */
        }
        .footer-image-widget {
            margin-bottom: -80px; /* تنظیم همپوشانی */
        }
      }

      /* تبلت و دسکتاپ‌های کوچک (مثلا عرض 768 پیکسل به بالا) */
      @media (min-width: 768px) {
        body {
          padding-bottom: 0; /* حذف پدینگ پایین در دسکتاپ (نویگیشن پایین مخفی می‌شود) */
        }
        .navbar,
        .container,
        .footer {
          max-width: var(--desktop-max-width); /* استفاده از متغیر برای عرض دسکتاپ */
          margin-right: auto; /* مرکز کردن در صفحه */
          margin-left: auto;
        }
        .navbar {
          border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
        }
        .container {
          /* در دسکتاپ نیازی به border-radius پایین نیست چون فوتر جداست */
           border-radius: 0;
        }
        .main-content-area {
          padding: 25px; /* افزایش پدینگ در دسکتاپ */
        }
        .new-album-banner {
          padding: 30px;
        }
        .new-album-banner .album-info .banner-title {
          font-size: 1.5rem;
        }
        .new-album-banner .album-info .banner-subtitle {
          font-size: 1rem;
        }
        .new-album-banner .album-art-large {
          width: 100px;
          height: 100px;
        }
         .album-cards-scroller .card {
            width: 160px; /* کمی بزرگتر کردن کارت‌ها */
        }
        .album-cards-scroller .card .card-image {
            height: 140px;
        }
        /* تنظیمات فوتر برای دسکتاپ */
    
        .footer-image-container img {
            width: 280px; /* بزرگتر کردن تصویر فوتر */
        }
        .footer-image-widget {
            margin-bottom: -120px; /* تنظیم همپوشانی برای تصویر بزرگتر */
        }
        .footer-content-full {
          flex-direction: row; /* چیدمان افقی ستون‌ها */
          justify-content: space-between; /* توزیع مناسب ستون‌ها */
          align-items: flex-start; /* هم‌ترازی از بالا */
          text-align: right; /* راست‌چین کردن پیش‌فرض متن ستون‌ها */
          padding-top: 80px; /* پدینگ برای همپوشانی */
        }
        .footer-details {
          width: 40%; /* عرض ستون اول */
          text-align: right;
        }
        .footer-quicks {
          width: auto; /* عرض خودکار بر اساس محتوا یا flex-grow */
          flex-grow: 1; /* اجازه رشد برای پر کردن فضا */
          max-width: 25%; /* محدودیت عرض برای هر بخش لینک */
          text-align: right;
        }
        .quicks-heading-title,
        .quicks-list {
            text-align: right; /* راست‌چین کردن عناوین و لینک‌ها */
        }
         .footer-divider {
            margin: 15px 0; /* تنظیم فاصله و حذف مرکز کردن خودکار */
            width: 100%;
        }
        .footer-bottom {
            margin-top: 20px;
            padding-top: 15px;
        }
      }

       /* دسکتاپ‌های بزرگتر (مثلا 1024 پیکسل به بالا) */
      @media (min-width: 1024px) {
          html {
              font-size: 15px; /* کمی افزایش فونت پایه */
          }
          .navbar .site-title {
              font-size: 1.5rem;
          }
          .section-header .title h2 {
              font-size: 1.3rem;
          }
      }