/* ============================================================
   نوای حسینی — Design System (نسخه‌ی ۲: حال‌وهوای حسینیه و مسجد)
   سبز زمردی + طلایی گرم روی زمینه‌ی پارچه‌ای؛ الهام‌گرفته از کاشی‌کاری،
   محراب و ضریح: ستاره‌ی هشت‌پر (خاتم)، قوس محرابی، لبه‌ی مقرنس در فوتر.
   موبایل‌محور: ناوبری پایین، مینی‌پلیر شناور و اسکرول افقی «چسبنده».
   ============================================================ */

@font-face {
    font-family: 'Vazirmatn Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/vazirmatn-arabic.woff2') format('woff2-variations'),
         url('../fonts/vazirmatn-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                   U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Vazirmatn Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/vazirmatn-latin.woff2') format('woff2-variations'),
         url('../fonts/vazirmatn-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
    /* ---- رنگ: زمرد + طلای گرم روی زمینه‌ی پارچه‌ای/کاغذی ---- */
    --color-primary: #0f5c46;
    --color-primary-dark: #0a4534;
    --color-forest: #0b3d30;          /* سبز عمیق: نوار پخش، نوار تازه‌ها، فوتر */
    --color-forest-deep: #06281f;
    --color-gold: #c9a24b;
    --color-gold-dark: #a9822f;
    --color-gold-soft: #e6cd82;
    --color-secondary: #1b2420;
    --color-bg: #f6f2e7;
    --color-surface: #ffffff;
    --color-surface-warm: #fbf8ef;
    --color-text: #201d17;
    --color-text-muted: #6c6455;
    --color-border: #e6ddc8;
    --color-link: #0f5c46;
    --color-breaking: #a9822f;
    --color-success: #1a7f37;
    --color-warning: #a5760a;

    /* شیشه‌ی مات (هدر / نوار پایین موبایل) */
    --glass: rgba(251, 248, 239, .86);
    --glass-strong: rgba(255, 253, 247, .90);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --shadow-sm: 0 1px 2px rgba(24, 23, 20, 0.06), 0 2px 8px rgba(24, 23, 20, 0.04);
    --shadow-md: 0 8px 24px rgba(24, 23, 20, 0.10);
    --shadow-lg: 0 20px 48px rgba(24, 23, 20, 0.18);

    --ease: cubic-bezier(.22, .8, .24, 1);

    --font-body: 'Vazirmatn Variable', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    --font-heading: 'Vazirmatn Variable', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;

    --container-width: 1180px;
    --header-height: 68px;
    --player-height: 80px;            /* نوار پخش دسکتاپ */
    --mini-h: 66px;                   /* مینی‌پلیر موبایل */
    --bottom-nav-height: 64px;        /* نوار ناوبری پایین موبایل */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* شکل محراب (قوس تیزه‌دار) — به‌عنوان ماسک برای کاشی‌ها و پوستر */
    --arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V54C0 36 22 24 38 13C44 9 48 5 50 0C52 5 56 9 62 13C78 24 100 36 100 54V125Z'/%3E%3C/svg%3E");
    --arch-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M3 122V55C3 39 24 27.500 39 17C45 13 49 9 50 6C51 9 55 13 61 17C76 27.500 97 39 97 55V122Z' fill='none' stroke='%23e6cd82' stroke-width='1.400' stroke-opacity='.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
    --color-primary: #35a380;
    --color-primary-dark: #24866a;
    --color-forest: #0a2e24;
    --color-forest-deep: #05191a;
    --color-gold: #d8b968;
    --color-gold-dark: #b6963f;
    --color-gold-soft: #ecd792;
    --color-secondary: #e9e6da;
    --color-bg: #0e1210;
    --color-surface: #161c18;
    --color-surface-warm: #1a211d;
    --color-text: #ece8db;
    --color-text-muted: #a3a193;
    --color-border: #2b332e;
    --color-link: #6fcbab;
    --glass: rgba(16, 22, 19, .84);
    --glass-strong: rgba(17, 23, 20, .88);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 92, 70, .35) transparent;
}
[hidden] { display: none !important; }
::selection { background: rgba(201, 162, 75, .38); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
    position: relative;
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    direction: rtl;
    line-height: 1.9;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease;
}
/* بافت ملایم کاشی‌کاری در بالای صفحه که کم‌کم محو می‌شود */
body:not(.admin-body)::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 620px; z-index: -1; pointer-events: none;
    background: url('../images/pattern-soft.svg') center top / 56px 56px repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
body.player-expanded { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 16px;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text); line-height: 1.45; margin: 0 0 12px; font-weight: 800; }
h1 { font-size: 30px; font-weight: 850; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 800; }
h3 { font-size: 17px; font-weight: 700; }

.skip-link {
    position: absolute; top: -60px; inset-inline-start: 12px; z-index: 200;
    background: var(--color-forest); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 10px; color: #fff; text-decoration: none; }

/* ---------------- عنوان بخش‌ها ---------------- */
.section-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 44px 0 20px;
    padding-bottom: 14px;
}
/* خط نازک طلایی که به سمت انتها محو می‌شود */
.section-title::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: linear-gradient(to left, var(--color-gold) 0, var(--color-border) 32%, transparent 100%);
}
.section-title h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
/* ستاره‌ی هشت‌پر (خاتم) پیش از هر عنوان */
.section-title h2::before {
    content: ""; flex: 0 0 auto; width: 22px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='1.700' stroke-linejoin='round'%3E%3Crect x='5.200' y='5.200' width='13.600' height='13.600'/%3E%3Crect x='5.200' y='5.200' width='13.600' height='13.600' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23c9a24b' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-title a {
    flex: 0 0 auto; font-size: 13px; color: var(--color-text-muted); font-weight: 650;
    padding: 5px 13px; border-radius: 999px; border: 1px solid var(--color-border);
    background: var(--color-surface); transition: color .2s, border-color .2s, background .2s;
}
.section-title a:hover { color: var(--color-primary); border-color: var(--color-gold); text-decoration: none; }

/* ---------------- افکت ظاهرشدن هنگام اسکرول ----------------
   فقط وقتی جاوااسکریپت فعال است پنهان می‌شوند (کلاس js روی <html>)،
   پس اگر JS کار نکرد هیچ محتوایی پنهان نمی‌ماند. */
.js [data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------- اسکرول افقی با «چسبیدن» ----------------
   روی موبایل، کاشی‌ها/مداحان/کارت‌های یک بخش به یک نوار افقی روان تبدیل می‌شوند
   که کارت بعدی کمی بیرون می‌زند (تا کاربر بفهمد می‌شود کشید) و هر کارت
   در جای خودش «می‌چسبد». روی دسکتاپ همان گرید معمولی است. */
@media (max-width: 720px) {
    .h-scroll.h-scroll {
        display: flex; gap: 12px;
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 16px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -16px; padding: 6px 16px 26px; margin-bottom: -14px;
    }
    .h-scroll.h-scroll::-webkit-scrollbar { display: none; }
    .h-scroll.h-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }
}

/* ---------------- هدر ---------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border-bottom: 1px solid var(--color-border);
    transition: transform .38s var(--ease), box-shadow .3s ease;
}
/* نوار باریک زمرد-طلایی بالای هدر */
.site-header::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold) 50%, var(--color-primary));
}
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(20, 18, 10, .10); }
.site-header.is-hidden { transform: translateY(-102%); box-shadow: none; }
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding-top: 3px;
    gap: 16px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 850;
    font-size: 23px;
    color: var(--color-text);
    flex-shrink: 0;
    letter-spacing: -.01em;
}
.logo:hover { text-decoration: none; }
.logo .dot, .logo-star { display: inline-flex; color: var(--color-gold); }
.logo-star svg { width: 26px; height: 26px; transition: transform .8s var(--ease); }
.logo:hover .logo-star svg { transform: rotate(90deg); }
.logo-image { height: 46px; width: auto; display: block; }
.mobile-nav-head .logo-image { height: 34px; }

.main-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
    position: relative;
    color: var(--color-text);
    padding: 7px 14px;
    font-size: 14.5px;
    font-weight: 650;
    white-space: nowrap;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
.main-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    bottom: 2px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-gold);
    transition: inset-inline .25s var(--ease);
}
.main-nav a:hover { background: rgba(15, 92, 70, .07); color: var(--color-primary); text-decoration: none; }
.main-nav a.active { color: var(--color-primary); }
.main-nav a.active::after { inset-inline: 38%; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s var(--ease);
}
.icon-btn:hover { border-color: var(--color-gold); color: var(--color-primary); text-decoration: none; }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 19px; height: 19px; }
.hamburger svg { width: 21px; height: 21px; }
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: block; }

.header-date { font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; }
.header-search-link { display: none; }

.search-box { position: relative; }
.search-box__icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; display: flex; }
.search-box__icon svg { width: 17px; height: 17px; }
.search-box input {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: 999px;
    padding: 9px 16px;
    padding-inline-start: 40px;
    font-size: 13.5px;
    width: 210px;
    color: var(--color-text);
    font-family: inherit;
    transition: width .3s var(--ease), border-color .2s, box-shadow .2s;
}
.search-box input:focus { outline: none; width: 290px; border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .16); }
.search-suggestions {
    position: absolute;
    top: 112%;
    inset-inline-end: 0;
    width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 60;
}
.search-suggestions.open { display: block; }
.search-suggestions a { display: block; padding: 11px 16px; font-size: 13.5px; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.search-suggestions a:last-child { border-bottom: none; }
.search-suggestions a:hover { background: var(--color-bg); text-decoration: none; }
#search-results { transition: opacity .15s ease; }
#search-results.is-loading { opacity: .5; }
.search-result-count { color: var(--color-text-muted); margin-bottom: 16px; }

.hamburger { display: none; }

/* ---------------- نوار «تازه منتشر شده» ---------------- */
.breaking-bar {
    position: relative;
    background: var(--color-forest);
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid rgba(201, 162, 75, .35);
}
.breaking-bar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
    background: url('../images/pattern-star.svg') center / 56px repeat;
}
.breaking-bar .container { position: relative; display: flex; align-items: center; gap: 14px; padding-top: 9px; padding-bottom: 9px; }
.breaking-label {
    background: var(--color-gold);
    color: #2b2108;
    padding: 3px 12px 3px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12.5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breaking-label .blink { width: 7px; height: 7px; border-radius: 50%; background: #0f5c46; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.breaking-items { display: flex; overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.breaking-items-track { display: flex; gap: 44px; flex-shrink: 0; padding-inline-end: 44px; animation: marquee 22s linear infinite; }
.breaking-bar:hover .breaking-items-track { animation-play-state: paused; }
/* از چپ به راست حرکت می‌کند تا متن‌های فارسی از سمت چپ وارد شوند و به راست خارج شوند؛
   سرعت کندتر شده تا خوانا بماند. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .breaking-items-track { animation: none; }
    .breaking-items { overflow-x: auto; }
}
.breaking-items a { color: #f4efe0; white-space: nowrap; font-weight: 600; opacity: .95; }
.breaking-items a:hover { color: var(--color-gold-soft); text-decoration: none; }

/* ---------------- Hero ---------------- */
.hero-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; margin-top: 26px; }
.hero-main {
    position: relative; height: 460px; border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-lg); background: var(--color-forest);
    isolation: isolate;
}
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }
.hero-slide > a, .hero-slide > a > img { display: block; width: 100%; height: 100%; }
.hero-slide > a { position: relative; overflow: hidden; }
.hero-slide > a > img { object-fit: cover; transform: scale(1.02); }
.hero-slide.active > a > img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

.hero-main .hero-overlay {
    position: absolute; inset: auto 0 0 0; z-index: 2; pointer-events: none;
    background: linear-gradient(0deg, rgba(4, 30, 23, .95) 4%, rgba(4, 30, 23, .62) 48%, rgba(4, 30, 23, 0) 100%);
    padding: 110px 34px 30px;
}
.hero-main .hero-overlay a, .hero-main .hero-overlay button { pointer-events: auto; }
.hero-main .cat-badge, .hero-side-poster .cat-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(201, 162, 75, .18); color: var(--color-gold-soft);
    border: 1px solid rgba(230, 205, 130, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 12px; padding: 3px 13px; border-radius: 999px; font-weight: 700;
}
.hero-main .hero-title { color: #fff; margin: 14px 0 8px; font-size: 32px; line-height: 1.5; text-shadow: 0 2px 14px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-main .hero-title a { color: #fff; }
.hero-main .hero-title a:hover { text-decoration: none; }
.hero-main p { color: #e8e4d8; font-size: 14.5px; margin: 0; max-width: 620px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-main .meta { color: #cfcabb; font-size: 12.5px; margin-top: 10px; }
.hero-main .meta a { color: var(--color-gold-soft); }

.hero-slide.active .hero-overlay > * { animation: heroUp .9s var(--ease) both; }
.hero-slide.active .hero-overlay > *:nth-child(2) { animation-delay: .08s; }
.hero-slide.active .hero-overlay > *:nth-child(3) { animation-delay: .16s; }
.hero-slide.active .hero-overlay > *:nth-child(4) { animation-delay: .24s; }
.hero-slide.active .hero-overlay > *:nth-child(5) { animation-delay: .32s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hero-play, .hero-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border-radius: 999px; font-family: inherit; font-size: 14.5px; font-weight: 800;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.hero-play { background: var(--color-gold); color: #2b2108; box-shadow: 0 8px 22px rgba(201, 162, 75, .38); }
.hero-play:hover { transform: translateY(-2px); background: var(--color-gold-soft); }
.hero-play svg { width: 19px; height: 19px; fill: currentColor; }
.hero-play .icon-pause, .hero-play .lbl-pause { display: none; }
.hero-play.is-playing .icon-play, .hero-play.is-playing .lbl-play { display: none; }
.hero-play.is-playing .icon-pause { display: block; }
.hero-play.is-playing .lbl-pause { display: inline; }
.hero-more { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-more:hover { background: rgba(255,255,255,.2); color: #fff; }
.hero-more svg { width: 16px; height: 16px; }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); cursor: pointer;
    background: rgba(6, 40, 31, .45); color: #fff; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s ease, background .2s ease, transform .2s var(--ease);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-slideshow:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: var(--color-gold); color: #2b2108; }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow-prev { right: 18px; }
.hero-arrow-next { left: 18px; }

/* نقطه‌های اسلاید؛ نقطه‌ی فعال هم‌زمان نوار زمان‌سنج پخش خودکار است */
.hero-dots { position: absolute; bottom: 34px; inset-inline-end: 34px; z-index: 4; display: flex; gap: 7px; align-items: center; }
.hero-dot {
    position: relative; overflow: hidden;
    width: 8px; height: 6px; border-radius: 4px; border: none; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.42); transition: width .35s var(--ease), background .3s;
}
.hero-dot.active { width: 34px; background: var(--color-gold-soft); }
.hero-slideshow.is-running .hero-dot.active { background: rgba(255,255,255,.35); }
.hero-dot::after { content: ""; position: absolute; inset: 0; background: var(--color-gold-soft); transform: scaleX(0); transform-origin: right; }
.hero-slideshow.is-running .hero-dot.active::after { animation: heroDot var(--hero-ms, 6000ms) linear forwards; }
@keyframes heroDot { to { transform: scaleX(1); } }

.hero-side { display: flex; filter: drop-shadow(0 18px 26px rgba(8, 44, 33, .28)); }
.hero-side-poster { position: relative; width: 100%; height: 460px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface); }
.hero-side-poster > a, .hero-side-poster img { display: block; width: 100%; height: 100%; }
.hero-side-poster img { object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-side-poster:hover img { transform: scale(1.05); }
.hero-side-poster .hero-overlay {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(0deg, rgba(4, 30, 23, .95) 10%, rgba(4, 30, 23, 0) 100%);
    padding: 90px 26px 34px;
}
.hero-side-poster h2 { color: #fff; margin: 12px 0 6px; font-size: 19px; line-height: 1.7; }
.hero-side-poster h2 a { color: inherit; }
.hero-side-poster .meta { color: #d3cfc1; font-size: 12px; margin-top: 8px; }
.hero-side-poster .meta a { color: var(--color-gold-soft); }

/* پوستر کنار اسلایدر به شکل «محراب» */
.hero-side-poster--arch {
    border-radius: 0; box-shadow: none;
    -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat;
    mask: var(--arch-mask) center / 100% 100% no-repeat;
}
.hero-side-poster--arch::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: var(--arch-outline) center / 100% 100% no-repeat;
}
.hero-side-poster--arch .hero-overlay { padding-bottom: 44px; }

/* ---------------- کارت آثار ---------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .25s ease, box-shadow .35s var(--ease), transform .35s var(--ease);
    display: flex;
    flex-direction: column;
}
.news-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.news-card.is-now-playing { border-color: var(--color-gold); box-shadow: 0 0 0 2px rgba(201, 162, 75, .35), var(--shadow-md); }
.news-card-thumb {
    position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(110deg, var(--color-border) 30%, var(--color-surface-warm) 50%, var(--color-border) 70%) 0 0 / 200% 100%;
    animation: shimmer 1.6s linear 5;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.news-card-thumb > a { display: block; height: 100%; }
/* گرادیان پایین تصویر برای خوانایی نشان‌ها */
.news-card-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; background: linear-gradient(0deg, rgba(4, 30, 23, .55), transparent); }
.news-card img { width: 100%; height: 100%; object-fit: cover; background: var(--color-border); transition: transform .8s var(--ease); }
.news-card:hover .news-card-thumb img { transform: scale(1.07); }
.video-badge {
    position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 30, 24, .55); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    pointer-events: none;
}
.video-badge svg { width: 18px; height: 18px; fill: #fff; margin-inline-start: 2px; }
.video-badge-sm { width: 28px; height: 28px; }
.video-badge-sm svg { width: 13px; height: 13px; }
.news-card .body { padding: 16px 16px 15px; flex: 1; display: flex; flex-direction: column; }
.news-card .cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-gold-dark); font-weight: 750; margin-bottom: 9px; }
.news-card .cat a { color: inherit; }
html[data-theme="dark"] .news-card .cat { color: var(--color-gold); }
.news-card h3 { font-size: 15.5px; margin: 0 0 8px; flex: 1; font-weight: 750; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card h3 a { color: var(--color-text); }
.news-card h3 a:hover { color: var(--color-primary); text-decoration: none; }
.news-card .excerpt { font-size: 13px; color: var(--color-text-muted); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .meta { font-size: 12px; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px dashed var(--color-border); }
.news-card .meta a { color: var(--color-text); font-weight: 650; }
.news-card .meta a:hover { color: var(--color-primary); }
.news-card .meta-dur { display: none; }
/* اثر خالص متنی (بدون تصویر/ویدیو/صوت): بدون باکس تصویر */
.news-card--text-only .body { padding-top: 20px; }
.news-card--text-only::before { content: ""; position: absolute; inset-inline-end: -26px; top: -26px; width: 92px; height: 92px; opacity: .5; pointer-events: none; background: url('../images/pattern-soft.svg') center / 56px repeat; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); }

/* ---------------- ردیف آثار (صفحات فهرست) ---------------- */
.news-list-row { display: flex; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); transition: border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease); }
.news-list-row:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-list-row.is-now-playing { border-color: var(--color-gold); box-shadow: 0 0 0 2px rgba(201, 162, 75, .35), var(--shadow-md); }
.news-list-row .news-card-thumb { flex: 0 0 210px; height: 136px; aspect-ratio: auto; border-radius: var(--radius-md); }
.news-list-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-list-row:hover .news-card-thumb img { transform: scale(1.06); }
.news-list-row .body { flex: 1; min-width: 0; }
.news-list-row h3 { margin: 0 0 8px; font-size: 17px; font-weight: 750; }
.news-list-row h3 a { color: var(--color-text); }
.news-list-row h3 a:hover { color: var(--color-primary); text-decoration: none; }
.news-list-row .excerpt { color: var(--color-text-muted); font-size: 14px; margin: 0 0 10px; }
.news-list-row .meta { font-size: 12.5px; color: var(--color-text-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.news-list-row .meta span { display: inline-flex; align-items: center; gap: 4px; }
.news-list-row .meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.news-list-row--text-only { align-items: center; padding: 22px 24px; }

/* ---------------- چیدمان صفحه: محتوا + ستون کناری ---------------- */
.page-layout > * { min-width: 0; }
.page-layout > div > .section-title:first-child { margin-top: 0; }
.page-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 30px; margin-top: 26px; align-items: start; }
.sidebar-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.sidebar-widget h3 { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 14px; }
.widget-list-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--color-border); }
.widget-list-item:last-child { border-bottom: none; }
/* شماره‌ی رتبه داخل یک لوزی طلایی */
.widget-list-item .num {
    flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--color-gold-dark); font-size: 14px;
    border: 1px solid var(--color-gold); border-radius: 9px; transform: rotate(45deg); margin: 3px 4px 0;
}
.widget-list-item .num > * { transform: rotate(-45deg); }
.widget-list-item h4 { font-size: 13.5px; margin: 0 0 4px; font-weight: 700; line-height: 1.7; }
.widget-list-item h4 a { color: var(--color-text); }
.widget-list-item h4 a:hover { color: var(--color-primary); text-decoration: none; }
.widget-list-item .meta { font-size: 11.5px; color: var(--color-text-muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; color: var(--color-text); transition: all .2s ease; }
.tag-chip:hover { border-color: var(--color-gold); color: var(--color-primary); text-decoration: none; transform: translateY(-1px); }

.newsletter-box { text-align: center; }
.newsletter-box form { display: flex; gap: 8px; margin-top: 10px; }
.newsletter-box input[type=email] { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-family: inherit; }
.newsletter-box input[type=email]:focus { outline: none; border-color: var(--color-primary); }


/* ---------------- Buttons / forms (shared, front + admin) ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color:#fff; text-decoration:none; }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration:none; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-danger { background: #fbe9ea; color: var(--color-breaking); }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.form-control {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 14px;
    transition: border-color .15s ease;
}
.form-control:focus { outline: none; border-color: var(--color-primary); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input { width: auto; }

.color-field { display: flex; align-items: center; gap: 10px; }
.color-field__swatch {
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: none; cursor: pointer;
}
.color-field__swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.color-field__swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-field__swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.color-field__hex { flex: 1 1 auto; font-family: "SF Mono", Consolas, monospace; letter-spacing: .03em; text-transform: uppercase; }

.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; }
.badge-published { background: #e6f6ea; color: var(--color-success); }
.badge-draft { background: #eeece5; color: var(--color-text-muted); }
.badge-scheduled { background: #fbf1dc; color: var(--color-warning); }
.badge-archived { background: #f3e6e6; color: #8a4a4a; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.alert-success { background: #e6f6ea; color: var(--color-success); border-color: #c7e9cf; }
.alert-error { background: #fbe9ea; color: var(--color-breaking); border-color: #f3c9cd; }

/* ---------------- Pagination ---------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); font-size: 13.5px; color: var(--color-text);
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pagination .active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ---------------- Article page ---------------- */
.breadcrumb { font-size: 13px; color: var(--color-text-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-text-muted); }
.article-header .cat-badge { display: inline-block; background: var(--color-primary); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: var(--radius-sm); font-weight: 700; margin-bottom: 13px; }
.article-header h1 { font-size: 29px; }
.article-summary { font-size: 17px; color: var(--color-text-muted); border-inline-start: 3px solid var(--color-primary); padding-inline-start: 15px; margin: 15px 0; }
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); padding: 15px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 22px; }
.article-meta .author { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-weight: 700; }
.author-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-border); object-fit: cover; }
.article-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px; }

/* ---------------- Custom video player ---------------- */
.video-player { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; margin-bottom: 22px; }
.video-player-el { width: 100%; display: block; max-height: 520px; background: #000; cursor: pointer; }
.video-controls {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.55) 70%, transparent);
    position: absolute; bottom: 0; left: 0; right: 0;
    opacity: 1; transition: opacity .2s ease;
}
.video-player.playing .video-controls { opacity: 0; }
.video-player.playing:hover .video-controls, .video-player.playing:focus-within .video-controls { opacity: 1; }
.video-play-btn, .video-volume-btn, .video-fullscreen-btn {
    background: none; border: none; color: #fff; cursor: pointer;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
}
.video-play-btn svg, .video-volume-btn svg, .video-fullscreen-btn svg { width: 20px; height: 20px; }
.video-player .icon-pause { display: none; }
.video-player.playing .icon-play { display: none; }
.video-player.playing .icon-pause { display: block; }
.video-player .icon-mute { display: none; }
.video-player.muted .icon-vol { display: none; }
.video-player.muted .icon-mute { display: block; }
.video-time { color: #fff; font-size: 12px; min-width: 38px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Sliders must stay left-to-right even though the page is RTL — otherwise
   the browser renders min on the right / max on the left and playback
   progress visually moves backwards as the video plays forward. */
.video-seek, .video-volume { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); cursor: pointer; direction: ltr; }
.video-seek { flex: 1; }
.video-volume { width: 70px; }
.video-seek::-webkit-slider-thumb, .video-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); cursor: pointer; }
.video-seek::-moz-range-thumb, .video-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: none; cursor: pointer; }
/* Desktop: button + popover sit inline in the controls row exactly like
   before — these wrappers generate no box of their own. */
.video-volume-wrap, .video-volume-popover { display: contents; }
@media (max-width: 640px) {
    .video-controls { padding: 8px 10px; gap: 6px; }
    /* Mobile: too little horizontal room for an inline slider, so the volume
       button now opens a small vertical slider that floats above it — kept
       upright (not squeezed sideways) via a CSS rotation of the range input. */
    .video-volume-wrap { position: relative; display: inline-flex; }
    .video-volume-popover {
        display: block;
        position: absolute;
        bottom: 40px; left: 50%; transform: translateX(-50%);
        background: rgba(20,20,20,.92);
        border-radius: var(--radius-sm);
        padding: 12px 8px;
        opacity: 0; pointer-events: none;
        transition: opacity .15s ease;
        z-index: 2;
    }
    .video-player.volume-open .video-volume-popover { opacity: 1; pointer-events: auto; }
    .video-volume { width: 84px; transform: rotate(-90deg); transform-origin: center; display: block; }
}
.article-body { font-size: 17px; line-height: 2.05; }
.article-body p { margin: 0 0 21px; }
.article-body img { border-radius: var(--radius-md); margin: 18px 0; }
.article-body h2, .article-body h3 { margin-top: 34px; }
.article-body blockquote { border-inline-start: 4px solid var(--color-primary); background: var(--color-bg); padding: 15px 19px; margin: 22px 0; border-radius: var(--radius-sm); }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-body th, .article-body td { border: 1px solid var(--color-border); padding: 8px 10px; }

/* دسترسی سریع به متنِ اثر — چیپِ کوچک داخل نوار متای مقاله */
.lyrics-quicklink {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; color: var(--color-gold-dark);
    padding: 5px 13px; border-radius: 999px; border: 1px solid var(--color-gold);
    background: var(--color-surface); transition: background .2s, color .2s;
}
.lyrics-quicklink svg { width: 13px; height: 13px; }
.lyrics-quicklink:hover { background: var(--color-gold); color: #fff; text-decoration: none; }
html[data-theme="dark"] .lyrics-quicklink { color: var(--color-gold-soft); }
/* دکمه‌ی «پخش نسخه‌ی صوتی» — وقتی اثر هم ویدیو و هم صوت دارد، کنار چیپ متن نمایش داده می‌شود */
button.audio-quicklink { font: inherit; cursor: pointer; }
.audio-quicklink.is-playing { background: var(--color-gold); color: #fff; }

/* باکسِ مجزای متنِ اثر (متن آهنگ / متن سخنرانی) */
.lyrics-box {
    background: var(--color-surface-warm); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 20px 22px; margin: 22px 0; scroll-margin-top: 96px;
}
.lyrics-box__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--color-border); padding-bottom: 12px; margin-bottom: 16px;
}
.lyrics-box__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 15.5px; color: var(--color-gold-dark);
}
html[data-theme="dark"] .lyrics-box__title { color: var(--color-gold-soft); }
.lyrics-box__title svg { width: 17px; height: 17px; }
.lyrics-box__content { font-size: 16.5px; }

.share-bar { display: flex; gap: 8px; margin: 22px 0; flex-wrap: wrap; align-items: center; }
.share-icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg); border: 1px solid var(--color-border); color: #fff; flex-shrink: 0; }
.share-icon-btn svg { width: 18px; height: 18px; }
.share-icon-btn.share-twitter { background: #000; border-color: #000; }
.share-icon-btn.share-telegram { background: #26A5E4; border-color: #26A5E4; }
.share-icon-btn.share-whatsapp { background: #25D366; border-color: #25D366; }
.share-icon-btn:hover { opacity: .85; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }

.article-follow-us { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.article-follow-us-label { font-size: 13.5px; color: var(--color-text-muted, #777); }
.article-follow-us .footer-social { margin-top: 0; }
.article-follow-us .footer-social-link { width: 38px; height: 38px; background: var(--color-bg); border: 1px solid var(--color-border); }
.article-follow-us .footer-social-link svg { width: 18px; height: 18px; color: var(--color-text); }
.article-follow-us .footer-social-link:hover { background: var(--color-primary); border-color: var(--color-primary); }
.article-follow-us .footer-social-link:hover svg { color: #fff; }
/* Brand colors for the built-in glyphs — set per network via the CSS
   custom property below, then applied once through the shared
   [class*="social-brand-"] rules. Makes each icon instantly recognizable
   instead of the flat neutral circle every network shared before. Only
   applied when there's no admin-uploaded image (see socialLinkIconMarkup),
   so a custom logo is never boxed in behind an unrelated brand color. */
.article-follow-us .footer-social-link.social-brand-twitter { --brand: #000; }
.article-follow-us .footer-social-link.social-brand-telegram { --brand: #26A5E4; }
.article-follow-us .footer-social-link.social-brand-whatsapp { --brand: #25D366; }
.article-follow-us .footer-social-link.social-brand-youtube { --brand: #FF0000; }
.article-follow-us .footer-social-link.social-brand-linkedin { --brand: #0A66C2; }
.article-follow-us .footer-social-link.social-brand-facebook { --brand: #1877F2; }
.article-follow-us .footer-social-link.social-brand-instagram { --brand: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.article-follow-us .footer-social-link.social-brand-aparat { --brand: #ED1C24; }
.article-follow-us .footer-social-link.social-brand-eitaa { --brand: #009FE0; }
.article-follow-us .footer-social-link.social-brand-rubika { --brand: #FF8A00; }
.article-follow-us .footer-social-link.social-brand-bale { --brand: #0D5EFF; }
.article-follow-us .footer-social-link.social-brand-soroush { --brand: #6C3FC5; }
.article-follow-us .footer-social-link[class*="social-brand-"] { background: var(--brand); border-color: transparent; }
.article-follow-us .footer-social-link[class*="social-brand-"] svg { color: #fff; }
.article-follow-us .footer-social-link[class*="social-brand-"]:hover { background: var(--brand); border-color: transparent; opacity: .85; }
/* An admin-uploaded icon is already a finished logo — drop the neutral
   circle background/border and the heavy inner padding used for the
   built-in glyphs, so the uploaded image itself is what's visible instead
   of being shrunk down inside an unrelated ring. */
.article-follow-us .footer-social-link.has-custom-icon { background: transparent; border-color: transparent; }
.article-follow-us .footer-social-link.has-custom-icon:hover { background: var(--color-bg-muted, rgba(0,0,0,.05)); border-color: transparent; opacity: 1; }

.progress-bar { position: fixed; top: 0; right: 0; left: 0; height: 3px; background: var(--color-primary); width: 0; z-index: 100; transition: width .1s linear; }

/* ---------------- فوتر ---------------- */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
    color: #cfd8d3;
    margin-top: 84px;
    padding: 58px 0 24px;
    overflow: hidden;
}
/* لبه‌ی «مقرنس/کنگره» بالای فوتر */
.site-footer::before {
    content: ""; position: absolute; top: -1px; inset-inline: 0; height: 18px; z-index: 1;
    background: radial-gradient(circle at 50% 0, var(--color-bg) 12px, transparent 12.5px) 0 0 / 32px 18px repeat-x;
}
.site-footer::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09;
    background: url('../images/pattern-star.svg') center / 56px repeat;
}
.site-footer > .container { position: relative; z-index: 2; }
html[data-theme="dark"] .site-footer { background: linear-gradient(180deg, #08211a 0%, #050f0c 100%); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-grid h4 { position: relative; color: #fff; font-size: 15px; margin-bottom: 18px; padding-bottom: 10px; }
.footer-grid h4::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px; background: var(--color-gold); }
.footer-grid a { color: #b4c2bb; font-size: 13.5px; display: block; margin-bottom: 10px; transition: color .2s ease, transform .2s var(--ease); }
.footer-grid a:hover { color: var(--color-gold-soft); text-decoration: none; transform: translateX(-4px); }
.footer-salam { text-align: center; color: var(--color-gold-soft); font-size: 17px; font-weight: 700; margin: 40px 0 0; letter-spacing: .01em; }
.footer-salam::before, .footer-salam::after { content: "✦"; color: var(--color-gold); font-size: 13px; margin: 0 14px; opacity: .8; }
.footer-bottom { text-align: center; padding-top: 22px; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #90a49b; }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social-link { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; }
.footer-social-link svg { width: 17px; height: 17px; color: #cfd3dc; }
/* Admin-uploaded icon image: always contained (never stretched or cropped)
   inside the fixed circular badge, whatever the source image's own size or
   aspect ratio — keeps the footer/article icon row's height and spacing
   stable regardless of what the admin uploads. */
.footer-social-link img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.footer-social-link:hover { background: var(--color-primary); }
.footer-social-link:hover svg { color: #fff; }
/* Same reasoning as the article-page version above: a custom uploaded logo
   needs far less inner padding than the built-in glyphs to stay legible at
   this size, and doesn't need a colored circle behind it either. */
.footer-social-link.has-custom-icon { background: transparent; }
.footer-social-link.has-custom-icon:hover { background: rgba(255,255,255,.12); }
.footer-social-link.has-custom-icon img { padding: 2px; }

/* ---------------- 404 / error pages ---------------- */
.error-page { text-align: center; padding: 90px 16px; }
.error-page .code { font-size: 100px; font-weight: 900; color: var(--color-primary); margin: 0; line-height: 1; }

/* Visually hidden but still in normal flow — safe for honeypot fields and
   screen-reader-only text, unlike the old off-canvas `left:-9999px` trick
   which can blow out the page's scrollable width. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- واکنش‌گرا ---------------- */
@media (max-width: 1400px) {
    .header-date { display: none; }
}
@media (max-width: 1180px) {
    .search-box input { width: 180px; }
}
@media (max-width: 1000px) {
    /* روی تبلت فهرست دسته‌ها در هدر جا نمی‌شود؛ همان منوی کشویی موبایل استفاده می‌شود */
    .main-nav { display: none; }
    .hamburger { display: flex; }
    .header-top { gap: 12px; }
}
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-main { height: 420px; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .page-layout { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-side { filter: none; }
    .hero-side-poster--arch { -webkit-mask: none; mask: none; border-radius: var(--radius-xl); height: 200px; box-shadow: var(--shadow-md); }
    .hero-side-poster--arch::after { display: none; }
    .hero-side-poster--arch .hero-overlay { padding-bottom: 24px; }
}

@media (max-width: 720px) {
    :root { --header-height: 58px; }
    .main-nav, .search-box, .header-date { display: none; }
    .hamburger { display: flex; }
    .header-search-link { display: flex; }
    .header-actions { gap: 6px; }
    .icon-btn { width: 38px; height: 38px; }
    .logo { font-size: 20px; }
    .logo-star svg { width: 23px; height: 23px; }
    .logo-image { height: 38px; }
    .section-title { margin: 34px 0 16px; }
    h2 { font-size: 19px; }
    .section-title h2::before { width: 19px; height: 19px; }
    .breaking-bar { font-size: 13px; }
    .breaking-bar .container { gap: 10px; padding-top: 7px; padding-bottom: 7px; }
    .breaking-label { font-size: 11.5px; padding: 2px 11px 2px 12px; }
    .breaking-items-track { animation-duration: 26s; }

    .hero-grid { gap: 14px; margin-top: 14px; }
    .hero-main { height: 400px; border-radius: 24px; }
    .hero-main .hero-overlay { padding: 90px 20px 22px; }
    .hero-main .hero-title { font-size: 22px; margin: 12px 0 6px; }
    .hero-main p { font-size: 13px; -webkit-line-clamp: 2; }
    .hero-main .meta { font-size: 12px; }
    .hero-actions { margin-top: 14px; }
    .hero-play, .hero-more { height: 42px; padding: 0 18px; font-size: 13.5px; }
    .hero-arrow { display: none; }
    .hero-dots { bottom: auto; top: 16px; inset-inline-end: 16px; padding: 6px 9px; border-radius: 999px; background: rgba(4, 30, 23, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .hero-side-poster--arch { height: 168px; }
    .hero-side-poster h2 { font-size: 16px; }

    /* آخرین آثار: روی موبایل فهرست فشرده‌ی «کارت افقی» (مثل اپ‌های موسیقی) */
    .news-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    h1 { font-size: 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 22px; }
    .site-footer { margin-top: 64px; padding-top: 48px; }
}

/* ---------------- بازگشت به بالا ---------------- */
.back-to-top {
    position: fixed; bottom: 24px; left: 24px; z-index: 40;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--color-forest); color: var(--color-gold-soft); border: 1px solid rgba(201, 162, 75, .6); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none;
    transition: opacity .3s ease, transform .3s var(--ease), background .2s ease, bottom .35s var(--ease);
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary); }
body.has-player .back-to-top { bottom: calc(var(--player-height) + 18px); }
@media (max-width: 720px) {
    .back-to-top { bottom: calc(var(--bottom-nav-height) + var(--safe-b) + 14px); left: 14px; width: 42px; height: 42px; }
    body.has-player .back-to-top { bottom: calc(var(--bottom-nav-height) + var(--safe-b) + var(--mini-h) + 24px); }
}

/* ---------------- منوی کشویی موبایل ---------------- */
.mobile-nav {
    position: fixed; inset: 0; background: rgba(6, 22, 17, 0); z-index: 90;
    visibility: hidden; pointer-events: none;
    transition: background .35s ease, visibility 0s linear .4s;
}
.mobile-nav.open {
    background: rgba(6, 22, 17, .55); visibility: visible; pointer-events: auto;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: background .35s ease, visibility 0s linear 0s;
}
.mobile-nav-panel {
    position: absolute; top: 0; right: 0; width: 86%; max-width: 340px; height: 100%;
    background: var(--color-surface); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(24px + var(--safe-b));
    transform: translateX(100%);
    transition: transform .42s var(--ease);
    box-shadow: var(--shadow-lg);
    border-radius: 28px 0 0 28px;
}
.mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-head {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(18px + var(--safe-t)) 18px 20px; margin-bottom: 14px;
    background: linear-gradient(160deg, var(--color-primary), var(--color-forest));
    color: #fff;
}
.mobile-nav-head::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background: url('../images/pattern-star.svg') center / 56px repeat; }
.mobile-nav-head > * { position: relative; }
.mobile-nav-head .logo { font-size: 20px; color: #fff; }
.mobile-nav-head .logo-star { color: var(--color-gold-soft); }
.mobile-nav-head .logo-star svg { width: 24px; height: 24px; }
.mobile-nav-head .icon-btn { color: #fff; border-color: rgba(255,255,255,.35); }
.mobile-nav-head .icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.mobile-nav-label { padding: 6px 20px 8px; font-size: 12px; font-weight: 800; color: var(--color-gold-dark); letter-spacing: .02em; }
html[data-theme="dark"] .mobile-nav-label { color: var(--color-gold); }
.mobile-nav-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 10px; }
.mobile-nav-quick a {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 14px 8px; border-radius: 16px; background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text); font-weight: 700; font-size: 13.5px;
    transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.mobile-nav-quick a svg { width: 24px; height: 24px; color: var(--color-primary); }
.mobile-nav-quick a:active { transform: scale(.96); }
.mobile-nav-quick a:hover { border-color: var(--color-gold); text-decoration: none; }
.mobile-nav-list { padding: 0 10px; }
.mobile-nav-list a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin: 2px 0; border-radius: 12px; color: var(--color-text); font-weight: 600; font-size: 14.5px; }
.mobile-nav-list a svg { width: 20px; height: 20px; color: var(--color-gold-dark); flex-shrink: 0; }
html[data-theme="dark"] .mobile-nav-list a svg { color: var(--color-gold); }
/* فقط بخش «مناسبت‌ها» در منوی کناری: آیکن داخل محراب کوچک (همان ماسک --arch-mask کاشی‌های مناسبت).
   زمینه‌ی سبز تیره می‌گیرد تا قاب طلایی روی پس‌زمینه‌ی روشن منو هم خوانا بماند. */
.mobile-nav-list--occasions a { padding-block: 6px; }
.mobile-nav-list--occasions a svg {
    width: 30px; height: 36px; padding: 11px 7px 5px; box-sizing: border-box;
    color: var(--color-gold-soft);
    background: var(--arch-outline) center / 100% 100% no-repeat,
                radial-gradient(ellipse at 50% 0%, rgba(230, 205, 130, .38), transparent 65%),
                linear-gradient(180deg, #14705a, #0a3d30);
    -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat;
    mask: var(--arch-mask) center / 100% 100% no-repeat;
}
html[data-theme="dark"] .mobile-nav-list--occasions a svg { color: var(--color-gold-soft); }
.mobile-nav-list a:hover, .mobile-nav-list a:active { background: rgba(15, 92, 70, .08); color: var(--color-primary); text-decoration: none; }
.mobile-nav-sep { height: 1px; background: linear-gradient(to left, var(--color-gold), var(--color-border) 40%, transparent); margin: 12px 20px; }
.theme-seg { display: flex; gap: 4px; margin: 6px 16px 0; padding: 4px; border-radius: 14px; background: var(--color-bg); border: 1px solid var(--color-border); }
.theme-seg button { flex: 1; border: none; background: transparent; padding: 8px 4px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: background .2s, color .2s; }
.theme-seg button.active { background: var(--color-primary); color: #fff; }


/* ---------------- Toasts (AJAX form feedback) ---------------- */
/* Shown after any AJAX form submit (admin CRUD, contact form, newsletter
   signup) instead of the old full-page-reload + flash-message pattern. */
.toast-stack {
    position: fixed;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-inline-start: 5px solid var(--color-text-muted);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.04);
    padding: 13px 15px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast .toast-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px; }
.toast .toast-icon svg { width: 12px; height: 12px; }
.toast.toast-success { border-inline-start-color: #1a7f37; }
.toast.toast-success .toast-icon { background: #1a7f37; }

/* ---------- نوار پیشرفت آپلود ---------- */
.upload-progress {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(5, 12, 9, .55); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.upload-progress.is-visible { opacity: 1; pointer-events: auto; }
.upload-progress__card {
    width: min(420px, 100%);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 18px 18px 16px;
}
.upload-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.upload-progress__title { font-size: 15px; font-weight: 800; }
.upload-progress__pct { font-size: 20px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.upload-progress__track {
    height: 12px; border-radius: 999px; overflow: hidden;
    background: var(--color-border); position: relative;
}
.upload-progress__fill {
    height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
    transition: width .2s linear;
}
.upload-progress__meta {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 10px; font-size: 13px; color: var(--color-text-muted); min-height: 20px;
}
.upload-progress__note { margin: 10px 0 12px; font-size: 12.5px; color: var(--color-text-muted); }
.upload-progress__cancel { display: block; margin-inline-start: auto; }
.upload-progress.is-processing .upload-progress__fill,
.upload-progress.is-indeterminate .upload-progress__fill {
    width: 40% !important; animation: upload-progress-slide 1.1s ease-in-out infinite alternate;
}
@keyframes upload-progress-slide { from { margin-inline-start: 0; } to { margin-inline-start: 60%; } }
@media (prefers-reduced-motion: reduce) {
    .upload-progress__fill { transition: none; }
    .upload-progress.is-processing .upload-progress__fill,
    .upload-progress.is-indeterminate .upload-progress__fill { animation: none; width: 100% !important; }
}

.toast.toast-error { border-inline-start-color: var(--color-primary); }
.toast.toast-error .toast-icon { background: var(--color-primary); }
@media (max-width: 560px) {
    .toast-stack { top: auto; bottom: 16px; inset-inline: 16px; max-width: none; }
}

/* ============================================================
   بخش‌های اختصاصی سایت مداحی و سخنرانی:
   دکمه پخش، نشان‌ها، کاشی‌های مناسبت (محراب)، کارت مداحان،
   پخش‌کننده (فقط هنگام نیاز)، ناوبری پایین موبایل
   ============================================================ */

/* ---------------- دکمه پخش روی کارت‌ها ---------------- */
.play-btn {
    position: absolute;
    inset-inline-start: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--color-gold);
    color: #2b2108;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
    transition: transform .25s var(--ease), background .2s ease;
}
.play-btn::before {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid rgba(230, 205, 130, .85); opacity: 0; transform: scale(.85);
    transition: opacity .25s ease, transform .3s var(--ease);
}
.play-btn:hover { transform: scale(1.08); background: var(--color-gold-soft); }
.play-btn:hover::before { opacity: 1; transform: scale(1); }
.play-btn svg { width: 19px; height: 19px; fill: currentColor; }
.play-btn .icon-play { margin-inline-start: 2px; }
.play-btn .icon-pause { display: none; }
.play-btn.is-playing .icon-play { display: none; }
.play-btn.is-playing .icon-pause { display: block; }
.play-btn.is-playing::before { opacity: 1; animation: ring 1.8s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.play-btn--lg { width: 68px; height: 68px; position: static; }
.play-btn--lg svg { width: 28px; height: 28px; }

/* نشان نوع محتوا: مداحی / سخنرانی */
.content-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 75, .7);
    color: var(--color-gold-dark);
    background: rgba(201, 162, 75, 0.10);
    text-decoration: none;
}
html[data-theme="dark"] .content-badge { color: var(--color-gold); }
.content-badge svg { width: 12px; height: 12px; }

/* نشان مدت‌زمان روی تصویر؛ هنگام پخش به «موج‌سنج» تبدیل می‌شود */
.audio-badge {
    position: absolute; inset-inline-end: 10px; top: 10px; z-index: 2;
    background: rgba(6, 40, 31, .62); color: #fff; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 2px 10px; font-size: 11px; display: flex; align-items: center; gap: 5px;
}
.audio-badge svg { width: 12px; height: 12px; }
.eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { display: block; width: 2.5px; height: 100%; border-radius: 2px; background: var(--color-gold-soft); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.is-now-playing .audio-badge .eq { display: inline-flex; }
.is-now-playing .audio-badge > svg { display: none; }

/* دکمه علاقه‌مندی روی کارت */
.card-favorite-btn {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
    width: 34px; height: 34px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(6, 40, 31, .5); color: #fff; border: 1px solid rgba(255,255,255,.22); cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .25s var(--ease), color .2s, background .2s;
}
.card-favorite-btn:hover { transform: scale(1.1); }
.card-favorite-btn:active { transform: scale(.9); }
.card-favorite-btn svg { width: 16px; height: 16px; }
.card-favorite-btn.is-active { color: var(--color-gold); }
.card-favorite-btn.is-active svg { fill: var(--color-gold); animation: pop .4s var(--ease); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------------- صفحه‌ی علاقه‌مندی‌ها (/favorites، بدون ورود) ---------------- */
.favorites-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.favorites-head h1 { margin-bottom: 6px; }
.favorites-sub { color: var(--color-text-muted); font-size: 13.5px; display: flex; align-items: center; gap: 5px; margin: 0; }
.favorites-sub svg { width: 14px; height: 14px; fill: var(--color-gold); stroke: var(--color-gold); flex-shrink: 0; }
/* روی کارت بدون تصویر، دکمه‌ی قلب داخل بدنه (نه گوشه‌ی تصویر) جای می‌گیرد */
.news-card--favorite.news-card--text-only .body { flex-direction: row; align-items: center; gap: 12px; }
.news-card--favorite.news-card--text-only h3 { margin: 0; -webkit-line-clamp: 1; }
.news-card--favorite.news-card--text-only .card-favorite-btn { position: static; flex-shrink: 0; background: transparent; color: var(--color-gold); border: none; width: 30px; height: 30px; backdrop-filter: none; }
.news-card--favorite.news-card--text-only .card-favorite-btn svg { fill: var(--color-gold); }
.favorites-empty { text-align: center; padding: 60px 20px; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.favorites-empty__icon { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; background: var(--color-surface-warm); color: var(--color-gold); margin-bottom: 14px; }
.favorites-empty__icon svg { width: 24px; height: 24px; }
.favorites-empty p { margin: 0 0 16px; font-size: 14px; }

/* ---------------- کاشی‌های مناسبت (شکل محراب) ---------------- */
.occasion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin: 4px 0 8px; }
.occasion-cell { filter: drop-shadow(0 8px 10px rgba(6, 40, 31, .22)); transition: transform .45s var(--ease), filter .45s ease; }
.occasion-cell:hover { transform: translateY(-7px); filter: drop-shadow(0 14px 14px rgba(6, 40, 31, .3)); }
.occasion-card {
    --tone-a: #14705a; --tone-b: #0a3d30;
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 4 / 5; padding: 21% 12px 8%; text-align: center; color: #fff; overflow: hidden;
    background: linear-gradient(165deg, var(--tone-a), var(--tone-b));
    -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat;
    mask: var(--arch-mask) center / 100% 100% no-repeat;
}
.occasion-card:hover { text-decoration: none; }
.occasion-card::before { content: ""; position: absolute; inset: 0; opacity: .2; pointer-events: none; background: url('../images/pattern-star.svg') center / 56px repeat; transition: opacity .4s ease, transform .8s var(--ease); }
.occasion-card:hover::before { opacity: .34; transform: scale(1.08); }
.occasion-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--arch-outline) center / 100% 100% no-repeat, radial-gradient(circle at 50% 0%, rgba(230, 205, 130, .3), transparent 62%); }
.occasion-card > * { position: relative; z-index: 1; }
/* آیکن هر مناسبت داخل یک «محراب» کوچک (طاق تیزه‌دار با قاب طلایی دوخطی).
   شکل از همان ماسک --arch-mask کاشی‌ها می‌آید؛ کاشی‌های «مناسبت‌های نزدیک» هم همین قاب را دارند. */
.occasion-card__icon, .soon-card__icon {
    position: relative; flex: 0 0 auto; width: 54px; height: 68px; padding-top: 16px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
    color: var(--color-gold-soft); border: 0; border-radius: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(230, 205, 130, .38), transparent 62%), linear-gradient(180deg, rgba(4, 26, 20, .62), rgba(255, 255, 255, .1));
    -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat;
    mask: var(--arch-mask) center / 100% 100% no-repeat;
    transition: transform .5s var(--ease), filter .3s ease;
}
.occasion-card__icon::before, .soon-card__icon::before {
    content: ""; position: absolute; inset: 5px 5px 0; pointer-events: none; opacity: .5;
    background: var(--arch-outline) center / 100% 100% no-repeat;
}
.occasion-card__icon::after, .soon-card__icon::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--arch-outline) center / 100% 100% no-repeat;
}
.occasion-card:hover .occasion-card__icon, .soon-card:hover .soon-card__icon { transform: translateY(-3px); filter: brightness(1.25); }
.occasion-card__icon svg, .soon-card__icon svg { position: relative; z-index: 1; width: 26px; height: 26px; }
.occasion-card__icon img, .soon-card__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.occasion-card__name { display: block; font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.6; }
.occasion-card__count { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.occasion-card--moharram { --tone-a: #26332e; --tone-b: #0b1512; }
.occasion-card--arbaeen { --tone-a: #17765d; --tone-b: #093a2d; }
.occasion-card--ramadan { --tone-a: #14606f; --tone-b: #082f3a; }
.occasion-card--eid { --tone-a: #25865f; --tone-b: #0e5a44; }
.occasion-card--shahadat { --tone-a: #3a4a43; --tone-b: #131d19; }
.occasion-card--akhlagh { --tone-a: #7a672f; --tone-b: #3f3418; }

/* ---------------- مداحان و سخنرانان ---------------- */
.reciter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; margin: 4px 0 8px; }
.reciter-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 12px 18px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s ease;
}
.reciter-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-gold); text-decoration: none; }
.reciter-card__band {
    align-self: stretch; height: 64px; margin: 0 -12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-forest));
    position: relative; overflow: hidden;
}
.reciter-card__band::after { content: ""; position: absolute; inset: 0; opacity: .2; background: url('../images/pattern-star.svg') center / 56px repeat; transition: transform .8s var(--ease); }
.reciter-card:hover .reciter-card__band::after { transform: scale(1.15) rotate(3deg); }
.reciter-card__avatar {
    position: relative; z-index: 1; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; object-fit: cover;
    background: var(--color-border); border: 3px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-gold), 0 8px 18px rgba(0,0,0,.18);
    margin-bottom: 12px; transition: transform .5s var(--ease);
}
.reciter-card:hover .reciter-card__avatar { transform: scale(1.06); }
.reciter-card__name { font-size: 14.5px; font-weight: 800; color: var(--color-text); margin-bottom: 3px; line-height: 1.6; }
.reciter-card__role { font-size: 11.5px; color: var(--color-gold-dark); font-weight: 700; margin-bottom: 2px; }
html[data-theme="dark"] .reciter-card__role { color: var(--color-gold); }
.reciter-card__count { font-size: 11.5px; color: var(--color-text-muted); }

.public-role-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
    padding: 4px 11px; border-radius: 999px; background: rgba(15,92,70,.1); color: var(--color-primary);
    border: 1px solid rgba(15,92,70,.25);
}
html[data-theme="dark"] .public-role-badge { background: rgba(53,163,128,.14); color: var(--color-link); }

/* ---------------- ادامه‌ی شنیدن ---------------- */
.continue-listening { margin: 30px 0 0; }
.continue-listening .section-title { margin-top: 0; }
.continue-list { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.continue-list::-webkit-scrollbar { display: none; }
.continue-card {
    flex: 0 0 auto; width: 272px; display: flex; gap: 12px; align-items: center; text-align: right; scroll-snap-align: start;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-sm);
    padding: 10px 10px 10px 14px; cursor: pointer; font-family: inherit; color: var(--color-text);
    transition: transform .3s var(--ease), border-color .2s, box-shadow .3s;
}
.continue-card:hover { transform: translateY(-3px); border-color: var(--color-gold); box-shadow: var(--shadow-md); }
.continue-card img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--color-border); }
.continue-card__body { min-width: 0; flex: 1; }
.continue-card__title { font-size: 13px; font-weight: 750; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-card__artist { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-card__progress { height: 4px; background: var(--color-border); border-radius: 3px; margin-top: 8px; overflow: hidden; direction: ltr; }
.continue-card__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold)); border-radius: 3px; }
.continue-card::after {
    content: ""; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9 6 19 12 9 18' fill='%232b2108'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ============================================================
   پخش‌کننده — فقط پس از زدن دکمه پخش دیده می‌شود
   دسکتاپ: نوار پایین صفحه   |   موبایل: مینی‌پلیر شناور بالای نوار ناوبری
   که با لمس آن به صفحه‌ی کامل «در حال پخش» باز می‌شود.
   ============================================================ */
.audio-player-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 80;
    background: linear-gradient(180deg, rgba(12, 66, 52, .97), rgba(6, 40, 31, .985));
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: #f2efe6;
    border-top: 1px solid rgba(201, 162, 75, .65);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .3);
    /* حالت پنهان: کاملاً خارج از صفحه و غیرقابل فوکوس/کلیک */
    transform: translateY(115%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .5s var(--ease), opacity .3s ease, visibility 0s linear .5s;
}
.audio-player-bar.is-active { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.audio-player-bar::before { content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none; background: url('../images/pattern-star.svg') center / 56px repeat; }
body.has-player { padding-bottom: var(--player-height); }

.audio-player-bar__progress-track { position: absolute; top: -1px; inset-inline: 0; height: 3px; background: rgba(255,255,255,.14); direction: ltr; }
.audio-player-bar__progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-soft)); transition: width .25s linear; }

.audio-player-bar__inner {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    height: var(--player-height); padding: 0 16px;
}
.audio-player-bar__sheet-head { display: none; }
.audio-player-bar__art {
    position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px; overflow: hidden;
    background: #163d33; box-shadow: 0 0 0 1px rgba(230, 205, 130, .55);
}
.audio-player-bar__cover { width: 100%; height: 100%; object-fit: cover; }
.audio-player-bar__info { min-width: 0; width: 210px; flex-shrink: 0; }
.audio-player-bar__title { font-size: 14px; font-weight: 750; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-player-bar__artist { font-size: 12px; color: var(--color-gold-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.audio-player-bar .icon-btn { color: #f2efe6; border-color: transparent; width: 40px; height: 40px; }
.audio-player-bar .icon-btn:hover { color: var(--color-gold-soft); background: rgba(255,255,255,.09); border-color: transparent; }
.audio-player-bar .icon-btn.is-active { color: var(--color-gold-soft); }
.audio-player-bar__controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* در زبان راست‌به‌چپ، «بعدی» سمت چپ و «قبلی» سمت راست است؛ آیکن‌ها را آینه می‌کنیم تا جهت‌شان با صفحه هم‌خوان باشد */
#player-prev svg, #player-next svg { transform: scaleX(-1); }
.audio-player-bar__play {
    width: 50px; height: 50px; padding: 0; border-radius: 50%; background: var(--color-gold); color: #2b2108;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(201, 162, 75, .35); transition: transform .25s var(--ease), background .2s;
}
.audio-player-bar__play:hover { background: var(--color-gold-soft); transform: scale(1.07); }
.audio-player-bar__play:active { transform: scale(.94); }
.audio-player-bar__play svg { width: 21px; height: 21px; fill: currentColor; }
.audio-player-bar__play .icon-play { margin-inline-start: 2px; }
.audio-player-bar__play .icon-pause { display: none; }
.audio-player-bar__play.is-playing .icon-play { display: none; }
.audio-player-bar__play.is-playing .icon-pause { display: block; }

.audio-player-bar__seek-wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; direction: ltr; }
.audio-player-bar__time { font-size: 11.5px; color: rgba(242,239,230,.75); flex-shrink: 0; width: 40px; text-align: center; font-variant-numeric: tabular-nums; direction: rtl; }
.audio-player-bar__seek {
    --pct: 0%;
    -webkit-appearance: none; appearance: none; flex: 1; height: 22px; margin: 0; background: transparent; cursor: pointer; direction: ltr;
}
.audio-player-bar__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--color-gold-soft) var(--pct), rgba(255,255,255,.2) var(--pct)); }
.audio-player-bar__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--color-gold); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform .15s ease; }
.audio-player-bar__seek:hover::-webkit-slider-thumb, .audio-player-bar__seek:active::-webkit-slider-thumb { transform: scale(1.25); }
.audio-player-bar__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); }
.audio-player-bar__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-gold-soft); }
.audio-player-bar__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--color-gold); }

.audio-player-bar__extra { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
#player-favorite.is-active svg { fill: var(--color-gold); stroke: var(--color-gold); }
#player-speed { font-size: 12.5px; font-weight: 800; width: auto; min-width: 40px; padding: 0 8px; border-radius: 999px; font-family: inherit; }
.audio-player-bar__close { flex-shrink: 0; }

/* منوی تایمر خواب (موقعیتش را جاوااسکریپت کنار دکمه تنظیم می‌کند) */
.player-popover {
    position: absolute; bottom: calc(var(--player-height) + 8px); left: 16px; z-index: 6;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.4); overflow: hidden;
    display: flex; flex-direction: column; min-width: 190px; padding: 6px;
    animation: popIn .25s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.player-popover button { padding: 9px 14px; line-height: 1.6; text-align: right; background: none; border: none; border-radius: 10px; color: inherit; cursor: pointer; font-family: inherit; font-size: 13.5px; }
.player-popover button:hover { background: var(--color-bg); color: var(--color-primary); }

/* فهرست پخش */
.player-queue-panel {
    position: absolute; bottom: 100%; inset-inline: 0; max-height: 50vh; overflow-y: auto; z-index: 5;
    background: var(--color-surface); color: var(--color-text); border-top: 1px solid var(--color-border);
    box-shadow: 0 -12px 30px rgba(0,0,0,.25); border-radius: 22px 22px 0 0;
}
.player-queue-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; font-weight: 800; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: inherit; }
.player-queue-panel__head .icon-btn { color: var(--color-text); }
#player-queue-list { list-style: none; margin: 0; padding: 6px 8px 10px; }
.player-queue-item { padding: 10px 12px; line-height: 1.7; cursor: pointer; font-size: 13.5px; border-radius: 12px; }
.player-queue-item:hover { background: var(--color-bg); color: var(--color-primary); }
.player-queue-item.is-current { color: var(--color-primary); font-weight: 800; background: rgba(15, 92, 70, .09); }

/* ---------------- ناوبری پایین موبایل ---------------- */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; inset-inline: 0; z-index: 75;
    height: calc(var(--bottom-nav-height) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--color-border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 18, 10, .08);
}
.bottom-nav__inner { display: flex; height: var(--bottom-nav-height); padding: 0 6px; }
.bottom-nav__item {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--color-text-muted); font-size: 10.5px; font-weight: 650; border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 0; text-decoration: none; transition: color .25s ease;
}
.bottom-nav__item:hover { text-decoration: none; }
.bottom-nav__ico { width: 56px; height: 30px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background .35s var(--ease), transform .3s var(--ease); }
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item:active .bottom-nav__ico { transform: scale(.88); }
.bottom-nav__item.is-active { color: var(--color-primary); font-weight: 800; }
html[data-theme="dark"] .bottom-nav__item.is-active { color: var(--color-link); }
.bottom-nav__item.is-active .bottom-nav__ico { background: rgba(15, 92, 70, .14); }
html[data-theme="dark"] .bottom-nav__item.is-active .bottom-nav__ico { background: rgba(53, 163, 128, .2); }
.bottom-nav__item.is-active::before { content: ""; position: absolute; top: -1px; width: 26px; height: 3px; border-radius: 0 0 6px 6px; background: var(--color-gold); }

/* ---------------- فقط موبایل ---------------- */
@media (max-width: 720px) {
    .bottom-nav { display: block; }
    body { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-b)); }
    body.has-player { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-b) + var(--mini-h) + 18px); }

    /* --- مینی‌پلیر شناور --- */
    .audio-player-bar {
        inset-inline: 10px;
        bottom: calc(var(--bottom-nav-height) + var(--safe-b) + 8px);
        height: var(--mini-h);
        border: 1px solid rgba(201, 162, 75, .55);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
    }
    .audio-player-bar__progress-track { top: auto; bottom: 0; height: 3px; }
    .audio-player-bar__inner { max-width: none; height: 100%; padding: 0 12px 0 8px; gap: 11px; }
    .audio-player-bar__art { width: 46px; height: 46px; border-radius: 13px; cursor: pointer; }
    .audio-player-bar__info { flex: 1; width: auto; cursor: pointer; }
    .audio-player-bar__title { font-size: 13.5px; }
    .audio-player-bar__artist { font-size: 11.5px; }
    .audio-player-bar .pc-secondary, .audio-player-bar__seek-wrap, .audio-player-bar__extra { display: none; }
    .audio-player-bar__play { width: 44px; height: 44px; }
    .audio-player-bar__controls .icon-btn { width: 36px; height: 36px; }
    .audio-player-bar__close { width: 34px !important; height: 34px !important; opacity: .8; }
    .audio-player-bar__close svg { width: 17px; height: 17px; }
    .player-queue-panel, .player-popover { display: none; }

    /* --- صفحه‌ی کامل «در حال پخش» --- */
    .audio-player-bar.is-expanded {
        inset: 0; height: 100%; border: none; border-radius: 0; z-index: 95; overflow: hidden;
        background: radial-gradient(120% 68% at 50% 0%, #17806a 0%, #0b3d30 46%, #04170f 100%);
        box-shadow: none;
        animation: sheetIn .45s var(--ease);
    }
    @keyframes sheetIn { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
    .audio-player-bar.is-expanded::before { opacity: .06; }
    .audio-player-bar.is-expanded .audio-player-bar__progress-track { display: none; }
    .is-expanded .audio-player-bar__inner {
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px;
        height: 100%; max-width: 520px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain;
        padding: calc(var(--safe-t) + 12px) 24px calc(var(--safe-b) + 20px);
    }
    .is-expanded .audio-player-bar__sheet-head { display: flex; align-items: center; justify-content: center; position: relative; min-height: 44px; flex: 0 0 auto; order: 0; }
    .is-expanded .audio-player-bar__sheet-head .icon-btn { position: absolute; inset-inline-start: 0; border: 1px solid rgba(255,255,255,.2); }
    .audio-player-bar__sheet-label { font-size: 13px; font-weight: 800; color: var(--color-gold-soft); letter-spacing: .02em; }
    .is-expanded .audio-player-bar__close { position: absolute; top: calc(var(--safe-t) + 12px); inset-inline-end: 16px; z-index: 3; width: 40px !important; height: 40px !important; border: 1px solid rgba(255,255,255,.2); opacity: 1; }
    .is-expanded .audio-player-bar__art {
        order: 1; align-self: center; flex: 0 0 auto; cursor: default;
        height: min(42vh, 340px); height: min(42dvh, 340px); width: auto; aspect-ratio: 4 / 5; margin: 6px 0 4px;
        border-radius: 0; box-shadow: none; background: #163d33;
        -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat; mask: var(--arch-mask) center / 100% 100% no-repeat;
    }
    .is-expanded .audio-player-bar__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--arch-outline) center / 100% 100% no-repeat; }
    .is-expanded .audio-player-bar__info { order: 2; width: auto; flex: 0 0 auto; text-align: center; cursor: default; }
    .is-expanded .audio-player-bar__title { font-size: 19px; font-weight: 800; white-space: normal; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .is-expanded .audio-player-bar__artist { font-size: 14px; }
    .is-expanded .audio-player-bar__seek-wrap { display: flex; order: 3; flex: 0 0 auto; }
    .is-expanded .audio-player-bar__controls { order: 4; justify-content: center; gap: 8px; flex: 0 0 auto; }
    .audio-player-bar.is-expanded .pc-secondary { display: flex; }
    .is-expanded .audio-player-bar__controls .icon-btn { width: 46px; height: 46px; }
    .is-expanded .audio-player-bar__controls .icon-btn svg { width: 24px; height: 24px; }
    .is-expanded .audio-player-bar__play { width: 68px; height: 68px; margin: 0 6px; }
    .is-expanded .audio-player-bar__play svg { width: 28px; height: 28px; }
    .is-expanded .audio-player-bar__extra { display: flex; order: 5; justify-content: space-between; flex: 0 0 auto; margin-top: auto; padding: 8px 6px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
    .is-expanded .audio-player-bar__extra .icon-btn { width: 46px; height: 46px; }
    .is-expanded .player-queue-panel {
        display: block; position: absolute; inset: auto 0 0 0; height: 64%; max-height: none; z-index: 7;
        padding-bottom: var(--safe-b); box-shadow: 0 -20px 50px rgba(0, 0, 0, .5);
        animation: sheetIn .35s var(--ease);
    }
    .is-expanded .player-queue-panel[hidden] { display: none; }
    .is-expanded .player-popover { display: flex; }
    .is-expanded .player-popover[hidden] { display: none; }
}

/* ---------------- Playlist pages ---------------- */
.playlist-header { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.playlist-header img { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-bg); }
.playlist-header .meta-count { color: var(--color-text-muted); font-size: 13px; }
.play-all-btn {
    display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary); color: #fff;
    padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 700; border: none; cursor: pointer; font-family: inherit;
}
.play-all-btn:hover { background: var(--color-primary-dark); text-decoration: none; color: #fff; }
.playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.playlist-tile { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.playlist-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--color-bg); }
.playlist-tile .body { padding: 10px 12px; }
.playlist-tile h3 { font-size: 14px; margin: 0 0 4px; }
.playlist-tile .count { font-size: 12px; color: var(--color-text-muted); }


/* ---------------- تنظیمات نهایی (بعد از بخش‌های قدیمی‌تر) ---------------- */
.play-all-btn {
    display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
    background: var(--color-primary); color: #fff; border: 1px solid transparent; font-weight: 800;
    box-shadow: 0 8px 20px rgba(15, 92, 70, .25);
    transition: transform .25s var(--ease), background .2s, box-shadow .25s;
}
.play-all-btn svg { width: 16px; height: 16px; fill: currentColor; }
.play-all-btn:hover { transform: translateY(-2px); background: var(--color-primary-dark); box-shadow: 0 12px 26px rgba(15, 92, 70, .32); }
.playlist-header img, .playlist-tile { border-radius: var(--radius-md); }

@media (max-width: 720px) {
    /* --- آخرین آثار: کارت افقی فشرده --- */
    .news-grid:not(.h-scroll) .news-card { flex-direction: row; align-items: flex-start; border-radius: 20px; }
    .news-grid:not(.h-scroll) .news-card:hover { transform: none; }
    .news-grid:not(.h-scroll) .news-card-thumb { flex: 0 0 112px; width: 112px; height: 112px; aspect-ratio: auto; margin: 10px; border-radius: 15px; }
    .news-grid:not(.h-scroll) .news-card-thumb::after { display: none; }
    .news-grid:not(.h-scroll) .play-btn { width: 36px; height: 36px; inset-inline-start: 6px; bottom: 6px; }
    .news-grid:not(.h-scroll) .play-btn svg { width: 15px; height: 15px; }
    .news-grid:not(.h-scroll) .play-btn::before { display: none; }
    .news-grid:not(.h-scroll) .card-favorite-btn { width: 28px; height: 28px; top: 6px; inset-inline-start: 6px; }
    .news-grid:not(.h-scroll) .card-favorite-btn svg { width: 14px; height: 14px; }
    .news-grid:not(.h-scroll) .audio-badge { display: none; }
    .news-grid:not(.h-scroll) .video-badge { width: 34px; height: 34px; }
    .news-grid:not(.h-scroll) .news-card .body { padding: 12px 2px 12px 14px; min-width: 0; align-self: stretch; }
    .news-grid:not(.h-scroll) .news-card h3 { font-size: 14.5px; margin-bottom: 6px; flex: 0 0 auto; }
    .news-grid:not(.h-scroll) .news-card .excerpt { display: none; }
    .news-grid:not(.h-scroll) .news-card .cat { margin-bottom: 4px; font-size: 11px; }
    .news-grid:not(.h-scroll) .news-card .content-badge { padding: 1px 8px; font-size: 10.5px; }
    .news-grid:not(.h-scroll) .news-card .meta { border-top: none; padding-top: 0; margin-top: auto; justify-content: flex-start; gap: 10px; font-size: 11.5px; }
    .news-grid:not(.h-scroll) .news-card .meta-dur { display: inline-flex; align-items: center; gap: 3px; }
    .news-card--text-only .body { padding: 16px; }

    /* --- کارت‌های بخش‌های افقی --- */
    .news-grid.h-scroll > .news-card { width: min(76vw, 300px); }
    .news-grid.h-scroll .news-card-thumb { aspect-ratio: 16 / 11; }

    /* --- کاشی‌ها و مداحان --- */
    .occasion-grid.h-scroll > .occasion-cell { width: 142px; }
    .reciter-grid.h-scroll > .reciter-card { width: 146px; }
    .occasion-cell:hover { transform: none; }
    .reciter-card:hover { transform: none; }

    /* --- آیتم‌هایی که در نوار افقی‌اند بدون افکت ظاهرشدن نمایش داده شوند --- */
    .js .h-scroll [data-reveal] { opacity: 1; transform: none; transition: none; }

    /* --- پیام‌ها بالای ناوبری پایین --- */
    .toast-stack { bottom: calc(var(--bottom-nav-height) + var(--safe-b) + 14px); }
    body.has-player .toast-stack { bottom: calc(var(--bottom-nav-height) + var(--safe-b) + var(--mini-h) + 24px); }

    .news-list-row { flex-direction: column; padding: 12px; }
    .news-list-row .news-card-thumb { flex: none; width: 100%; height: 190px; }
    .news-list-row--text-only { padding: 18px 16px; }
}

@media (hover: none) {
    .news-card:hover, .occasion-cell:hover, .reciter-card:hover, .continue-card:hover { transform: none; }
}


/* ============================================================
   نسخه‌ی ۳ — مناسبت‌های نزدیک، فیلتر مداح/مناسبت، پنل «متن اثر»
   ============================================================ */

/* ---------------- مناسبت‌های نزدیک (کارت افقی با شمارش معکوس) ---------------- */
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 4px 0 8px; }
.soon-cell { display: block; }
.soon-card {
    --tone-a: #14705a; --tone-b: #0a3d30;
    position: relative; display: flex; align-items: center; gap: 14px; height: 100%;
    padding: 16px 18px; border-radius: var(--radius-lg); color: #fff; overflow: hidden;
    background: linear-gradient(150deg, var(--tone-a), var(--tone-b));
    border: 1px solid rgba(201, 162, 75, .55); box-shadow: var(--shadow-md);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s ease;
}
.soon-card::before {
    content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
    background: url('../images/pattern-star.svg') center / 52px repeat;
}
.soon-card > * { position: relative; }
.soon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-gold); text-decoration: none; color: #fff; }
.soon-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.soon-card__name { font-size: 15.5px; font-weight: 800; line-height: 1.6; color: #fff; }
.soon-card__date, .soon-card__count { font-size: 12px; color: rgba(255, 255, 255, .78); }
.soon-card__pill {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 11.5px; font-weight: 800; padding: 2px 11px; border-radius: 999px;
    background: rgba(230, 205, 130, .18); color: var(--color-gold-soft); border: 1px solid rgba(230, 205, 130, .5);
}
.soon-card__pill svg { width: 13px; height: 13px; }
.soon-card.is-live .soon-card__pill, .soon-card__pill.is-live { background: var(--color-gold); color: #2b2100; border-color: var(--color-gold); }
.soon-card.is-live .soon-card__pill::before, .soon-card__pill.is-live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2b2100; animation: soonPulse 1.6s ease-in-out infinite;
}
@keyframes soonPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.soon-card--moharram { --tone-a: #26332e; --tone-b: #0b1512; }
.soon-card--arbaeen { --tone-a: #17765d; --tone-b: #093a2d; }
.soon-card--ramadan { --tone-a: #14606f; --tone-b: #082f3a; }
.soon-card--eid { --tone-a: #25865f; --tone-b: #0e5a44; }
.soon-card--shahadat { --tone-a: #3a4a43; --tone-b: #131d19; }
.soon-card--akhlagh { --tone-a: #7a672f; --tone-b: #3f3418; }

/* ---------------- سرصفحه‌ی صفحه‌ی مناسبت ---------------- */
.occasion-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.occasion-head__icon {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--color-gold-soft); background: linear-gradient(150deg, var(--color-primary), var(--color-forest));
    border: 2px solid var(--color-gold); box-shadow: var(--shadow-sm);
}
.occasion-head__icon svg { width: 30px; height: 30px; }
.occasion-head__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.occasion-head__text { flex: 1; min-width: 200px; }
.occasion-head__text h1 { margin: 0 0 4px; }
.occasion-head__desc { margin: 0 0 8px; color: var(--color-text-muted); font-size: 14px; }
.occasion-head__when { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--color-text-muted); }
.occasion-head__when .soon-card__pill { background: var(--color-surface-warm); color: var(--color-gold-dark); border-color: var(--color-gold); }
.occasion-head__when .soon-card__pill.is-live { background: var(--color-gold); color: #2b2100; }
html[data-theme="dark"] .occasion-head__when .soon-card__pill { color: var(--color-gold-soft); }

/* ---------------- تب نوع اثر + فیلتر مداح / مناسبت ---------------- */
.seg {
    display: inline-flex; gap: 4px; padding: 4px; margin: 18px 0 4px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
}
.seg__item { padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--color-text); transition: background .2s, color .2s; }
.seg__item:hover { text-decoration: none; color: var(--color-primary); }
.seg__item.is-active { background: var(--color-primary); color: #fff; }
.seg__count { font-size: 11.5px; opacity: .7; margin-inline-start: 4px; }

.filter-block { margin: 14px 0 6px; }
.filter-block__label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 8px; }
.filter-block__label svg { width: 15px; height: 15px; color: var(--color-gold-dark); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pchip, .ochip {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
    color: var(--color-text); font-size: 13px; font-weight: 650; line-height: 1.4;
    transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.pchip { padding: 5px 14px 5px 6px; }
.ochip { padding: 6px 12px 6px 10px; }
.pchip:hover, .ochip:hover { border-color: var(--color-gold); color: var(--color-primary); text-decoration: none; transform: translateY(-1px); }
.pchip.is-active, .ochip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pchip:not(:has(.pchip__avatar)) { padding: 7px 14px; }
.pchip__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--color-border); border: 1.5px solid var(--color-gold); }
.pchip__count, .ochip__count {
    font-size: 11px; font-weight: 800; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px;
    background: var(--color-bg); color: var(--color-text-muted);
}
.pchip.is-active .pchip__count, .ochip.is-active .ochip__count { background: rgba(255, 255, 255, .22); color: #fff; }
.ochip__icon { width: 20px; height: 20px; display: inline-flex; color: var(--color-gold-dark); }
.ochip__icon svg, .ochip__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ochip.is-active .ochip__icon { color: var(--color-gold-soft); }
.ochip__soon { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--color-gold); color: #2b2100; }

.filter-note {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; padding: 10px 14px;
    background: var(--color-surface-warm); border: 1px dashed var(--color-gold); border-radius: var(--radius-md); font-size: 13.5px;
}
.filter-note__clear { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 12.5px; color: var(--color-primary); }
.filter-note__clear svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
    .soon-grid.h-scroll > .soon-cell { width: min(80vw, 300px); }
    .soon-card { padding: 14px 15px; }
    .seg { display: flex; }
    .seg__item { flex: 1; text-align: center; padding: 8px 6px; }
    /* چیپ‌ها روی موبایل یک نوار افقی قابل‌کشیدن‌اند (مثل بخش‌های h-scroll) */
    .chip-row {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin-inline: -16px; padding: 4px 16px 8px; scroll-padding-inline: 16px;
    }
    .chip-row::-webkit-scrollbar { display: none; }
    .occasion-head__icon { width: 54px; height: 54px; }
    .occasion-head .play-all-btn { width: 100%; justify-content: center; }
}

/* ---------------- دکمه‌های ورود به «متن» ---------------- */
.lyrics-chip {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.6; cursor: pointer;
    color: var(--color-gold-dark); background: transparent; border: 1px solid var(--color-gold); border-radius: 999px; padding: 1px 10px;
    transition: background .2s, color .2s, transform .15s;
}
.lyrics-chip svg { width: 12px; height: 12px; }
.lyrics-chip:hover { background: var(--color-gold); color: #fff; }
.lyrics-chip:active { transform: scale(.94); }
html[data-theme="dark"] .lyrics-chip { color: var(--color-gold-soft); }
html[data-theme="dark"] .lyrics-chip:hover { color: #2b2100; }
.news-list-row .meta .lyrics-chip { margin-inline-start: auto; }

.video-lyrics-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; color: #fff;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 4px 11px;
}
.video-lyrics-btn svg { width: 15px; height: 15px; }
.video-lyrics-btn:hover { background: rgba(255, 255, 255, .26); }

.audio-player-bar .icon-btn.player-lyrics-btn { color: var(--color-gold-soft); }

@media (max-width: 720px) {
    /* ۷ دکمه‌ی نوار پایین «در حال پخش» (با دکمه‌ی متن) کنار هم جا شوند */
    .is-expanded .audio-player-bar__extra .icon-btn { width: auto; flex: 1 1 0; min-width: 34px; }
}

/* ---------------- پنل «متن اثر» ---------------- */
@keyframes lyricsIn { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes lyricsFade { from { opacity: 0; } to { opacity: 1; } }
body.lyrics-modal { overflow: hidden; }
.lyrics-sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.lyrics-sheet[hidden] { display: none; }
.lyrics-sheet__backdrop { position: absolute; inset: 0; background: rgba(6, 22, 17, .58); animation: lyricsFade .25s ease; }
.lyrics-sheet__panel {
    position: relative; display: flex; flex-direction: column; outline: none;
    width: 100%; max-width: 640px; height: min(80vh, 740px); height: min(80dvh, 740px);
    background: var(--color-surface-warm); color: var(--color-text);
    border: 1px solid var(--color-gold); border-bottom: none; border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .35); animation: lyricsIn .35s var(--ease);
    padding-bottom: var(--safe-b);
}
.lyrics-sheet__panel::before {
    content: ""; position: absolute; top: 7px; inset-inline: 0; margin-inline: auto; width: 38px; height: 4px; border-radius: 4px; background: var(--color-border);
}
/* حالت «زنده» (ویدیو): پس‌زمینه ندارد و به لمس‌های بالای پنل اجازه می‌دهد برسد */
.lyrics-sheet.is-live { pointer-events: none; }
.lyrics-sheet.is-live .lyrics-sheet__backdrop { display: none; }
.lyrics-sheet.is-live .lyrics-sheet__panel { pointer-events: auto; height: 54vh; height: 54dvh; max-width: none; }

.lyrics-sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px dashed var(--color-border); }
.lyrics-sheet__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lyrics-sheet__kind { font-size: 11.5px; font-weight: 800; color: var(--color-gold-dark); }
html[data-theme="dark"] .lyrics-sheet__kind { color: var(--color-gold-soft); }
.lyrics-sheet__title { margin: 0; font-size: 16.5px; line-height: 1.7; }
.lyrics-sheet__artist { font-size: 12.5px; color: var(--color-text-muted); }
.lyrics-sheet__tools { display: flex; gap: 4px; flex: 0 0 auto; }
.lyrics-sheet__tools .icon-btn { width: 36px; height: 36px; font: 700 13px var(--font-body); }
.lyrics-sheet__tools .icon-btn svg { width: 17px; height: 17px; }
.lyrics-sheet__body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 16px 22px 26px; font-size: 18px; line-height: 2.2;
}
.lyrics-sheet__state { text-align: center; color: var(--color-text-muted); font-size: 14px; margin: 26px 0 12px; }
.lyrics-sheet__body .btn { display: block; margin: 0 auto; }
.lyrics-sheet__foot { padding: 9px 20px; border-top: 1px dashed var(--color-border); font-size: 13px; }
.lyrics-sheet__foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-weight: 700; }
.lyrics-sheet__foot svg { width: 14px; height: 14px; }

/* دسکتاپ: کشوی کناری به‌جای صفحه‌ی پایین‌آمده؛ بالای نوار پخش می‌ایستد */
@media (min-width: 900px) {
    .lyrics-sheet { align-items: stretch; justify-content: flex-end; }
    .lyrics-sheet__panel, .lyrics-sheet.is-live .lyrics-sheet__panel {
        width: 430px; max-width: 430px; height: auto; border-radius: 0 22px 22px 0; border: 1px solid var(--color-gold); border-inline-start: 1px solid var(--color-gold);
        box-shadow: 18px 0 50px rgba(0, 0, 0, .28); animation: lyricsFade .3s ease;
    }
    .lyrics-sheet__panel::before { display: none; }
    body.has-player .lyrics-sheet__panel { margin-bottom: var(--player-height); }
    .lyrics-sheet__head { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .lyrics-sheet__panel, .lyrics-sheet__backdrop { animation: none; }
}

/* ---------------- زیرمجموعه‌ی مناسبت (شب اول، شب دوم، ...) ---------------- */
.soon-card__parent { font-size: 11px; font-weight: 700; color: var(--color-gold-soft); opacity: .9; }
.ochip.is-open { border-color: var(--color-gold); background: var(--color-surface-warm); }
.chip-row--sub { margin-top: 10px; padding-inline-start: 14px; border-inline-start: 2px solid var(--color-gold); }
.ochip--sub { font-size: 12.5px; padding-block: 4px; }
@media (max-width: 720px) {
    .chip-row--sub { margin-inline: -16px; padding-inline: 30px 16px; border-inline-start: 0; }
}

/* ============================================================
   دکمه‌های «مشاهده اثر / مشاهده همه / متن / صفحه‌ی اثر» —
   تم تاریک، حالت کلیک (active) و لمس
   ============================================================ */
/* لینک‌های دکمه‌مانند با هاور زیرخط نگیرند (a:hover از .hero-more قوی‌تر بود) */
.hero-more:hover, .hero-play:hover, .section-title a:hover, .lyrics-sheet__foot a:hover { text-decoration: none; }
.hero-more, .hero-play, .section-title a, .lyrics-chip, .lyrics-sheet__foot a { -webkit-user-select: none; user-select: none; }
.hero-more:active, .hero-play:active, .section-title a:active, .lyrics-sheet__foot a:active { transform: scale(.96); }
.hero-more:active { background: rgba(255, 255, 255, .3); }

/* «مشاهده همه ›» در تم تاریک: طلایی ملایم، با کلیک پر می‌شود */
html[data-theme="dark"] .section-title a {
    color: var(--color-gold-soft); background: rgba(216, 185, 104, .08); border-color: rgba(216, 185, 104, .38);
}
html[data-theme="dark"] .section-title a:active { background: var(--color-gold); border-color: var(--color-gold); color: #2b2100; }
@media (hover: hover) {
    html[data-theme="dark"] .section-title a:hover { background: var(--color-gold); border-color: var(--color-gold); color: #2b2100; }
}

/* «صفحه‌ی اثر» زیر پنل متن: از لینک ساده به دکمه‌ی گِردِ هم‌سبک سایت تبدیل شد */
.lyrics-sheet__foot { display: flex; justify-content: center; padding: 12px 20px; }
.lyrics-sheet__foot a {
    justify-content: center; gap: 6px; min-height: 42px; padding: 0 24px; border-radius: 999px;
    border: 1px solid var(--color-gold); background: transparent; color: var(--color-gold-dark);
    font-size: 14px; font-weight: 800;
    transition: background .2s, color .2s, transform .15s var(--ease);
}
.lyrics-sheet__foot svg { width: 16px; height: 16px; }
html[data-theme="dark"] .lyrics-sheet__foot a { color: var(--color-gold-soft); background: rgba(216, 185, 104, .08); }
.lyrics-sheet__foot a:active, html[data-theme="dark"] .lyrics-sheet__foot a:active { background: var(--color-gold); color: #2b2100; }
@media (hover: hover) {
    .lyrics-sheet__foot a:hover, html[data-theme="dark"] .lyrics-sheet__foot a:hover { background: var(--color-gold); color: #2b2100; }
}

/* دکمه‌ی «متن» روی کارت‌ها: فقط هنگام فشردن پر شود */
.lyrics-chip:active, html[data-theme="dark"] .lyrics-chip:active { background: var(--color-gold); color: #2b2100; }

/* صفحه‌ی لمسی: حالت hover بعد از انگشت‌برداشتن «می‌چسبید» و ظاهر را خراب می‌کرد */
@media (hover: none) {
    .lyrics-chip:hover { background: transparent; color: var(--color-gold-dark); }
    html[data-theme="dark"] .lyrics-chip:hover { background: transparent; color: var(--color-gold-soft); }
    .hero-more:hover { background: rgba(255, 255, 255, .10); }
    .hero-play:hover { transform: none; background: var(--color-gold); }
    .section-title a:hover { color: var(--color-text-muted); border-color: var(--color-border); }
    html[data-theme="dark"] .section-title a:hover { color: var(--color-gold-soft); background: rgba(216, 185, 104, .08); border-color: rgba(216, 185, 104, .38); }
    .lyrics-chip:active, html[data-theme="dark"] .lyrics-chip:active { background: var(--color-gold); color: #2b2100; }
    html[data-theme="dark"] .section-title a:active { background: var(--color-gold); border-color: var(--color-gold); color: #2b2100; }
    .hero-more:active { background: rgba(255, 255, 255, .3); }
}

/* ============================================================
   منوی کناری (کشوی موبایل) — تم تاریک و حالت کلیک/لمس
   قبلاً هنگام لمس یک آیتم فقط یک لکه‌ی سبزِ تقریباً نامرئی و متن سبز می‌گرفت.
   ============================================================ */
.mobile-nav-list a, .mobile-nav-quick a, .theme-seg button { -webkit-user-select: none; user-select: none; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.mobile-nav-list a:active { transform: scale(.98); }
.theme-seg button:active { transform: scale(.95); }

/* آیتم‌های فهرست: طلایی ملایم به‌جای سبزِ کم‌رنگ */
html[data-theme="dark"] .mobile-nav-list a:active { background: rgba(216, 185, 104, .16); color: var(--color-gold-soft); }
html[data-theme="dark"] .mobile-nav-list a:active svg { color: var(--color-gold-soft); }
/* کارت‌های میان‌بر (مداحی/سخنرانی/…) */
.mobile-nav-quick a:active { border-color: var(--color-gold); background: rgba(201, 162, 75, .14); }
html[data-theme="dark"] .mobile-nav-quick a:active { background: rgba(216, 185, 104, .16); color: var(--color-gold-soft); }
html[data-theme="dark"] .mobile-nav-quick a svg { color: var(--color-gold); }
/* انتخاب حالت نمایش: گزینه‌ی فعال در تم تاریک طلایی با متن تیره (خوانایی بهتر از سفید روی سبز روشن) */
html[data-theme="dark"] .theme-seg button.active { background: var(--color-gold); color: #2b2100; }
html[data-theme="dark"] .theme-seg button:not(.active):active { background: rgba(216, 185, 104, .16); color: var(--color-gold-soft); }
.theme-seg button:not(.active):active { background: rgba(15, 92, 70, .12); color: var(--color-primary); }

/* فقط دستگاه‌هایی که ماوس دارند hover می‌گیرند */
@media (hover: hover) {
    html[data-theme="dark"] .mobile-nav-list a:hover { background: rgba(216, 185, 104, .12); color: var(--color-gold-soft); }
    html[data-theme="dark"] .mobile-nav-list a:hover svg { color: var(--color-gold-soft); }
    html[data-theme="dark"] .mobile-nav-quick a:hover { background: rgba(216, 185, 104, .1); }
    .theme-seg button:not(.active):hover { color: var(--color-text); }
}
@media (hover: none) {
    /* بعد از برداشتن انگشت، حالت hover نچسبد (تعریف قدیمی hover و active یکی بود) */
    .mobile-nav-list a:hover { background: transparent; color: var(--color-text); }
    .mobile-nav-quick a:hover { border-color: var(--color-border); }
    .mobile-nav-list a:active { background: rgba(15, 92, 70, .08); color: var(--color-primary); }
    html[data-theme="dark"] .mobile-nav-list a:active { background: rgba(216, 185, 104, .16); color: var(--color-gold-soft); }
    .mobile-nav-quick a:active { border-color: var(--color-gold); }
}

/* ============================================================
   نوار اسکرول — ‌scrollbar-color تعریف‌شده روی <html> به همه‌ی عناصر ارث می‌رسید
   و در اندروید کروم، منوی کناری یک نوار سبز کلفت و صاف کنار لبه‌ی گرد خود نشان می‌داد.
   ============================================================ */
html[data-theme="dark"] { scrollbar-color: rgba(216, 185, 104, .35) transparent; }
/* منوی کناری: بدون نوار اسکرول (با کشیدن انگشت اسکرول می‌شود) */
.mobile-nav-panel { scrollbar-width: none; }
.mobile-nav-panel::-webkit-scrollbar { display: none; }
/* بقیه‌ی بخش‌های اسکرول‌شونده: نوار باریک */
.lyrics-sheet__body, .player-queue-panel, .is-expanded .audio-player-bar__inner, .continue-list { scrollbar-width: thin; }

/* ============================================================
   آیکن‌های خطیِ هم‌سبک به‌جای ایموجی (صفحه‌ی اثر و دکمه‌های مرتب‌سازی)
   ============================================================ */
.article-meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .meta-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-gold-dark); }
html[data-theme="dark"] .article-meta .meta-item svg { color: var(--color-gold); }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; }
.tag-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.tabs .tag-chip:not(.is-active) svg { color: var(--color-gold-dark); }
html[data-theme="dark"] .tabs .tag-chip:not(.is-active) svg { color: var(--color-gold); }
.content-badge svg { flex-shrink: 0; }

/* ============================================================
   منوی بالای دسکتاپ: وقتی دسته‌ها جا نمی‌شوند، قابل اسکرول است
   (فِید کناره‌ها + دکمه‌ی جهت‌نما + چرخ ماوس + اسکرولِ خودکار به آیتم فعال)
   ============================================================ */
.main-nav-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; --fade-start: 0px; --fade-end: 0px; }
.main-nav-wrap .main-nav {
    flex: 1; min-width: 0; padding: 4px 2px; scroll-behavior: smooth; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
.main-nav-wrap.can-start { --fade-start: 46px; }
.main-nav-wrap.can-end { --fade-end: 46px; }
.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.nav-arrow svg { width: 16px; height: 16px; }
.nav-arrow--start { inset-inline-start: 0; }
.nav-arrow--end { inset-inline-end: 0; }
.nav-arrow:active { transform: translateY(-50%) scale(.9); background: var(--color-gold); border-color: var(--color-gold); color: #2b2100; }
@media (hover: hover) {
    .nav-arrow:hover { background: var(--color-gold); border-color: var(--color-gold); color: #2b2100; }
}
@media (max-width: 1000px) { .main-nav-wrap { display: none; } }

/* تم تاریک: آیتم فعال و hover منو */
html[data-theme="dark"] .main-nav a.active { color: var(--color-gold-soft); }
html[data-theme="dark"] .main-nav a:hover { background: rgba(216, 185, 104, .1); color: var(--color-gold-soft); }

/* ============================================================
   حالت «خالی» (جستجوی بی‌نتیجه و فهرست‌های بدون اثر) — آیکن کوچک در قاب گرد
   ============================================================ */
.empty-state {
    position: relative; overflow: hidden; text-align: center; padding: 42px 22px 38px;
    background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
}
.empty-state::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(60% 70% at 50% 0%, rgba(201, 162, 75, .14), transparent 70%);
}
.empty-state > * { position: relative; }
.empty-state__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 16px;
    border-radius: 50%; color: var(--color-gold-dark); background: var(--color-surface-warm);
    border: 1px solid rgba(201, 162, 75, .55); box-shadow: 0 0 0 8px rgba(201, 162, 75, .08);
}
html[data-theme="dark"] .empty-state__icon { color: var(--color-gold); }
.empty-state__icon svg { width: 26px; height: 26px; }
.empty-state__title { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; line-height: 1.8; }
.empty-state__text { margin: 0 auto; max-width: 400px; font-size: 13.5px; line-height: 2; color: var(--color-text-muted); }
.empty-state__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* نسخه‌ی صفحه‌ی سبک: آیکن کمی بزرگ‌تر + هاله‌ی ضربان‌دار + چیپ سبک‌های پیشنهادی */
.empty-state--style { padding: 46px 22px 34px; }
.empty-state--style .empty-state__icon {
    width: 72px; height: 72px; margin-bottom: 18px;
    animation: empty-state-pulse 2.6s ease-in-out infinite;
}
.empty-state--style .empty-state__icon svg { width: 30px; height: 30px; }
.empty-state--style .empty-state__text { margin-bottom: 4px; }
@keyframes empty-state-pulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(201, 162, 75, .08); }
    50% { box-shadow: 0 0 0 14px rgba(201, 162, 75, .14); }
}
.empty-state__chips { justify-content: center; margin: 18px 0 6px; }
@media (prefers-reduced-motion: reduce) { .empty-state--style .empty-state__icon { animation: none; } }