/* ============================================================
   نوای حسینی — 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;
    --color-danger: #c62828;          /* خطا: قرمز واقعی (جدا از طلایی «خبر فوری» و سبز موفقیت) */
    --color-danger-bg: #fdecec;
    --color-danger-border: #f2c0c0;

    /* شیشه‌ی مات (هدر / نوار پایین موبایل) */
    --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: #ebe085;
    --color-secondary: #e9e6da;
    --color-bg: #0f1a2e;              /* سرمه‌ای آرام */
    --color-surface: #0d1626;         /* کارت‌ها: کمی مشکی‌تر */
    --color-surface-warm: #1b2a42;
    --color-text: #e8ecf4;
    --color-text-muted: #a3aec3;
    --color-border: #2a3b57;
    --color-link: #6fcbab;
    --color-danger: #ff7b7b;
    --color-danger-bg: rgba(255, 123, 123, .12);
    --color-danger-border: rgba(255, 123, 123, .38);
    --glass: rgba(7, 12, 22, .9);      /* نوار پایین موبایل: کمی مشکی‌تر */
    --glass-strong: rgba(17, 29, 50, .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: 1500px; z-index: -1; pointer-events: none;
    opacity: .5; /* شفافیت پترن در تم روشن: ۵۰٪ */
    background: url('../images/pattern-soft.svg') center top / 64px repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
/* پترن تم تیره: خطوط طلایی، تک‌رنگ طلایی گرم (#deae42) با شدت کم */
html[data-theme="dark"] body:not(.admin-body)::before {
    opacity: .25; /* شفافیت پترن در تم تیره: حداکثر ۲۵٪ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22 fill=%22none%22 stroke=%22%23deae42%22 stroke-width=%221%22 stroke-opacity=%220.24%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M32.00,0.00 L41.37,9.37 L54.63,9.37 L54.63,22.63 L64.00,32.00 L54.63,41.37 L54.63,54.63 L41.37,54.63 L32.00,64.00 L22.63,54.63 L9.37,54.63 L9.37,41.37 L0.00,32.00 L9.37,22.63 L9.37,9.37 L22.63,9.37Z%22/%3E%3Cpath d=%22M32.00,8.00 L39.03,15.03 L48.97,15.03 L48.97,24.97 L56.00,32.00 L48.97,39.03 L48.97,48.97 L39.03,48.97 L32.00,56.00 L24.97,48.97 L15.03,48.97 L15.03,39.03 L8.00,32.00 L15.03,24.97 L15.03,15.03 L24.97,15.03Z%22 stroke-opacity=%220.18%22/%3E%3Cpath d=%22M41.24,35.83 L35.83,41.24 L28.17,41.24 L22.76,35.83 L22.76,28.17 L28.17,22.76 L35.83,22.76 L41.24,28.17Z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%222.6%22/%3E%3Cpath d=%22M35.83 22.76L39.03 15.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M41.24 28.17L48.97 24.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M41.24 35.83L48.97 39.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M35.83 41.24L39.03 48.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M28.17 41.24L24.97 48.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M22.76 35.83L15.03 39.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M22.76 28.17L15.03 24.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M28.17 22.76L24.97 15.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M-10 0Q-2 -2 0 -10Q2 -2 10 0Q2 2 0 10Q-2 2 -10 0Z%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%222%22/%3E%3Cpath d=%22M54 0Q62 -2 64 -10Q66 -2 74 0Q66 2 64 10Q62 2 54 0Z%22/%3E%3Ccircle cx=%2264%22 cy=%220%22 r=%222%22/%3E%3Cpath d=%22M-10 64Q-2 62 0 54Q2 62 10 64Q2 66 0 74Q-2 66 -10 64Z%22/%3E%3Ccircle cx=%220%22 cy=%2264%22 r=%222%22/%3E%3Cpath d=%22M54 64Q62 62 64 54Q66 62 74 64Q66 66 64 74Q62 66 54 64Z%22/%3E%3Ccircle cx=%2264%22 cy=%2264%22 r=%222%22/%3E%3Cpath d=%22M9.37 9.37L5.50 5.50%22/%3E%3Cpath d=%22M54.63 9.37L58.50 5.50%22/%3E%3Cpath d=%22M9.37 54.63L5.50 58.50%22/%3E%3Cpath d=%22M54.63 54.63L58.50 58.50%22/%3E%3C/svg%3E");
}
html[data-theme="dark"] .news-card--text-only::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22 fill=%22none%22 stroke=%22%23deae42%22 stroke-width=%221%22 stroke-opacity=%220.24%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M32.00,0.00 L41.37,9.37 L54.63,9.37 L54.63,22.63 L64.00,32.00 L54.63,41.37 L54.63,54.63 L41.37,54.63 L32.00,64.00 L22.63,54.63 L9.37,54.63 L9.37,41.37 L0.00,32.00 L9.37,22.63 L9.37,9.37 L22.63,9.37Z%22/%3E%3Cpath d=%22M32.00,8.00 L39.03,15.03 L48.97,15.03 L48.97,24.97 L56.00,32.00 L48.97,39.03 L48.97,48.97 L39.03,48.97 L32.00,56.00 L24.97,48.97 L15.03,48.97 L15.03,39.03 L8.00,32.00 L15.03,24.97 L15.03,15.03 L24.97,15.03Z%22 stroke-opacity=%220.18%22/%3E%3Cpath d=%22M41.24,35.83 L35.83,41.24 L28.17,41.24 L22.76,35.83 L22.76,28.17 L28.17,22.76 L35.83,22.76 L41.24,28.17Z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%222.6%22/%3E%3Cpath d=%22M35.83 22.76L39.03 15.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M41.24 28.17L48.97 24.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M41.24 35.83L48.97 39.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M35.83 41.24L39.03 48.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M28.17 41.24L24.97 48.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M22.76 35.83L15.03 39.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M22.76 28.17L15.03 24.97%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M28.17 22.76L24.97 15.03%22 stroke-opacity=%220.15%22/%3E%3Cpath d=%22M-10 0Q-2 -2 0 -10Q2 -2 10 0Q2 2 0 10Q-2 2 -10 0Z%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%222%22/%3E%3Cpath d=%22M54 0Q62 -2 64 -10Q66 -2 74 0Q66 2 64 10Q62 2 54 0Z%22/%3E%3Ccircle cx=%2264%22 cy=%220%22 r=%222%22/%3E%3Cpath d=%22M-10 64Q-2 62 0 54Q2 62 10 64Q2 66 0 74Q-2 66 -10 64Z%22/%3E%3Ccircle cx=%220%22 cy=%2264%22 r=%222%22/%3E%3Cpath d=%22M54 64Q62 62 64 54Q66 62 74 64Q66 66 64 74Q62 66 54 64Z%22/%3E%3Ccircle cx=%2264%22 cy=%2264%22 r=%222%22/%3E%3Cpath d=%22M9.37 9.37L5.50 5.50%22/%3E%3Cpath d=%22M54.63 9.37L58.50 5.50%22/%3E%3Cpath d=%22M9.37 54.63L5.50 58.50%22/%3E%3Cpath d=%22M54.63 54.63L58.50 58.50%22/%3E%3C/svg%3E");
}
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 / 40px repeat;
}
/* تم تیره: سبز یشمی نوار کمی روشن‌تر از --color-forest */
html[data-theme="dark"] .breaking-bar { background: #0f4535; }
.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-soft); }
.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: 104px; height: 104px; opacity: .5; pointer-events: none; background: url('../images/pattern-soft.svg') center / 64px 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: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); text-decoration: none; }

.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: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); font-weight: 600; line-height: 1.8; }
.alert-error[hidden] { display: none; }
.alert-error::before, .alert-success::before {
    content: ""; display: inline-block; vertical-align: -4px; width: 20px; height: 20px; margin-inline-end: 8px; background: currentColor;
    -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat;
}
.alert-error { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='7.500' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.500' x2='12' y2='16.510'/%3E%3C/svg%3E"); }
.alert-success { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8 12.500 11 15.500 16 9'/%3E%3C/svg%3E"); }

/* خطای هر فیلد: کادر قرمز + پیام زیر فیلد */
.form-control.is-invalid { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.form-control.is-invalid:focus { border-color: var(--color-danger); }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.7; color: var(--color-danger); }
.field-error::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- 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 ---------------- */
/* قاب پلیر با نسبت واقعی ویدیو (متغیر --vr که JS پس از خواندن متادیتا
   می‌گذارد) ساخته می‌شود؛ ویدیوی عمودی از ۷۸٪ ارتفاع صفحه بلندتر نمی‌شود و
   دو طرفش به‌جای نوار سیاه، نسخه‌ی محوِ خودِ پوستر (ambient) را می‌بیند. */
.video-player {
    --vp-accent: var(--color-primary);
    position: relative; isolation: isolate; overflow: hidden;
    width: 100%; aspect-ratio: var(--vr, 16 / 9); max-height: 78vh; max-height: 78dvh;
    border-radius: var(--radius-lg); background: #050807; margin-bottom: 22px;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.video-ambient {
    position: absolute; inset: -30px; z-index: -1;
    background: var(--video-poster, linear-gradient(135deg, #0f2a20, #050807)) center / cover no-repeat;
    filter: blur(30px) brightness(.5) saturate(1.35); transform: scale(1.1);
}
.video-player-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; cursor: pointer; display: block; }

/* تمام‌صفحه: ویدیو کل قاب را می‌گیرد و وسط‌چین می‌شود (قبلاً max-height:520px
   باعث می‌شد به بالای صفحه بچسبد و پایین خالی بماند). */
.video-player:fullscreen, .video-player:-webkit-full-screen {
    width: 100vw; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; background: #000;
}
.video-player:fullscreen .video-player-el, .video-player:-webkit-full-screen .video-player-el { object-fit: contain; }
.video-player:fullscreen .video-controls, .video-player:-webkit-full-screen .video-controls {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px));
}

/* دکمه‌ی بزرگ پخش وسط قاب */
.video-big-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); transition: opacity .2s ease, transform .15s ease;
}
.video-big-play svg { width: 30px; height: 30px; margin-inline-start: 4px; fill: currentColor; }
.video-big-play:active { transform: translate(-50%, -50%) scale(.92); }
.video-player.playing .video-big-play, .video-player.is-waiting .video-big-play { opacity: 0; pointer-events: none; }

/* چرخ بارگذاری */
.video-spinner {
    position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 2;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
    opacity: 0; pointer-events: none; animation: vp-spin .8s linear infinite;
}
.video-player.is-waiting .video-spinner { opacity: 1; }
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* پیام کوتاه (۱۰+ ثانیه، سرعت ...) */
.video-toast {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
    background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.video-toast.show { opacity: 1; }

/* نوار کنترل */
.video-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 4px; padding: 26px 14px 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .5) 60%, transparent);
    opacity: 1; transition: opacity .25s ease; direction: rtl;
}
.video-player.controls-hidden .video-controls { opacity: 0; pointer-events: none; }
.video-player.controls-hidden { cursor: none; }
.video-progress-row, .video-buttons-row { display: flex; align-items: center; gap: 8px; }
.video-spacer { flex: 1; }
.video-play-btn, .video-volume-btn, .video-fullscreen-btn, .video-skip-btn {
    background: none; border: none; color: #fff; cursor: pointer; padding: 0; flex-shrink: 0;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    transition: background .15s ease;
}
.video-play-btn:hover, .video-volume-btn:hover, .video-fullscreen-btn:hover, .video-skip-btn:hover, .video-speed-btn:hover { background: rgba(255, 255, 255, .16); }
.video-play-btn svg, .video-volume-btn svg, .video-fullscreen-btn svg, .video-skip-btn svg { width: 22px; height: 22px; }
.video-skip-btn svg { width: 26px; height: 26px; }
.video-speed-btn {
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; flex-shrink: 0;
    font: inherit; font-size: 12px; font-weight: 700; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 999px;
}
.video-player .icon-pause, .video-player .icon-compress, .video-player .icon-mute { display: none; }
.video-player.playing .icon-play { display: none; }
.video-player.playing .icon-pause { display: block; }
.video-player.muted .icon-vol { display: none; }
.video-player.muted .icon-mute { display: block; }
.video-player.is-fullscreen .icon-expand { display: none; }
.video-player.is-fullscreen .icon-compress { display: block; }
.video-time { color: #fff; font-size: 12px; min-width: 40px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* اسلایدرها باید چپ‌به‌راست بمانند وگرنه در صفحه‌ی RTL پیشرفت پخش برعکس دیده می‌شود.
   --p = درصد پخش‌شده، --b = درصد بافرشده. */
.video-seek, .video-volume { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; cursor: pointer; direction: ltr; margin: 0; }
.video-seek {
    flex: 1; height: 5px; padding: 10px 0; background-clip: content-box;
    background-image: linear-gradient(to right, var(--vp-accent) 0 var(--p, 0%), rgba(255, 255, 255, .55) var(--p, 0%) var(--b, 0%), rgba(255, 255, 255, .25) var(--b, 0%) 100%);
    background-color: transparent; box-sizing: content-box;
}
.video-volume { width: 70px; background: rgba(255, 255, 255, .3); }
.video-seek::-webkit-slider-thumb, .video-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); cursor: pointer; }
.video-seek::-moz-range-thumb, .video-volume::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
.video-volume-wrap, .video-volume-popover { display: contents; }
@media (max-width: 640px) {
    .video-controls { padding: 22px 10px 8px; }
    .video-big-play { width: 60px; height: 60px; }
    .video-play-btn, .video-volume-btn, .video-fullscreen-btn, .video-skip-btn { width: 34px; height: 34px; }
    /* موبایل: جای اسلایدر صدا کم است؛ دکمه‌ی صدا یک اسلایدر عمودی بالای خودش باز می‌کند. */
    .video-volume-wrap { position: relative; display: inline-flex; }
    .video-volume-popover {
        display: block; position: absolute; bottom: 44px; 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: 6;
    }
    .video-player.volume-open .video-volume-popover { opacity: 1; pointer-events: auto; }
    .video-volume { width: 84px; transform: rotate(-90deg); transform-origin: center; display: block; }
}
/* حالت «متن زنده» کنار ویدیو: پنل متن ۵۴٪ ارتفاع را می‌گیرد، پس قاب ویدیو کوتاه‌تر می‌شود تا زیرش نرود. */
body.lyrics-open:not(.lyrics-modal) .video-player:not(:fullscreen) { max-height: 42vh; max-height: 42dvh; }
.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); }
html[data-theme="dark"] .lyrics-quicklink:hover, html[data-theme="dark"] .lyrics-quicklink:focus-visible { color: #2b2100; }
/* دکمه‌ی «پخش نسخه‌ی صوتی» — وقتی خبر هم ویدیو و هم صوت دارد، کنار چیپ متن نمایش داده می‌شود */
button.audio-quicklink { font: inherit; cursor: pointer; }
.audio-quicklink.is-playing { background: var(--color-gold); color: #fff; }
html[data-theme="dark"] .audio-quicklink.is-playing { color: #2b2100; }

/* باکسِ مجزای متنِ خبر (متن آهنگ / متن سخنرانی) */
.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 / 64px 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; }
    /* آیکون پلی ویدیو روی تصویر اسلاید، وسط صورت/متن می‌افتاد؛ روی موبایل به‌صورت نشان کوچک گوشه‌ی بالا-راست (روبه‌روی نقطه‌های اسلاید) */
    .hero-main .video-badge, .hero-side-poster .video-badge {
        inset: 14px 14px auto auto; margin: 0; width: 34px; height: 34px; z-index: 3;
        background: rgba(4, 30, 23, .5); border-color: rgba(255,255,255,.35);
    }
    .hero-main .video-badge svg, .hero-side-poster .video-badge svg { width: 14px; height: 14px; }

    /* آخرین اخبار: روی موبایل فهرست فشرده‌ی «کارت افقی» (مثل اپ‌های موسیقی) */
    .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 / 64px 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-soft); }
.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-soft); }
/* فقط بخش «مناسبت‌ها» در منوی کناری: آیکن داخل محراب کوچک (همان ماسک --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; }

/* ---------------- Install-options modal (PWA / Android APK / iOS) ---------------- */
.install-modal-overlay {
    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 .2s ease;
}
.install-modal-overlay.is-visible { opacity: 1; pointer-events: auto; }
.install-modal {
    position: relative;
    width: min(440px, 100%);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: var(--shadow-lg); padding: 22px 20px 18px;
    transform: scale(.96) translateY(8px); transition: transform .22s var(--ease, ease);
}
.install-modal-overlay.is-visible .install-modal { transform: scale(1) translateY(0); }
.install-modal__close {
    position: absolute; inset-inline-end: 14px; top: 14px;
    width: 32px; height: 32px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-alt, var(--color-border)); color: var(--color-text-muted);
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.install-modal__close:hover { background: var(--color-border); color: var(--color-text); }
.install-modal__close svg { width: 16px; height: 16px; }
.install-modal__head { padding-inline-end: 36px; margin-bottom: 18px; }
.install-modal__head strong { display: block; font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.install-modal__head p { margin: 0; font-size: 13.5px; color: var(--color-text-muted); }
.install-modal__options { display: flex; flex-direction: column; gap: 10px; }
.install-option {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 12px 14px; transition: border-color .15s ease, background .15s ease;
}
.install-option:hover { border-color: var(--color-primary); background: var(--color-bg-alt, transparent); }
.install-option__icon {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-gold));
    color: #fff;
}
.install-option__icon svg { width: 22px; height: 22px; }
.install-option__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-option__body strong { font-size: 14.5px; font-weight: 700; }
.install-option__desc { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.6; }
.install-option__note { font-size: 11.5px; color: var(--color-danger, #c0392b); line-height: 1.6; }
.install-option__action { flex: none; white-space: nowrap; }
@media (max-width: 480px) {
    .install-option { flex-wrap: wrap; }
    .install-option__action { width: 100%; margin-inline-start: 54px; width: calc(100% - 54px); }
}
.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-danger); }
.toast.toast-error .toast-icon { background: var(--color-danger); }
@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-soft); }
.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; }
/* متن + آیکن قلب باید یک جمله‌ی پیوسته باشد؛ با display:flex هر تکه‌ی متن و آیکن یک آیتم جدا می‌شد و جمله به‌هم می‌ریخت. */
.favorites-sub { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.9; margin: 0; }
.favorites-sub svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-inline: 2px; fill: var(--color-gold); stroke: var(--color-gold); }
/* روی کارت بدون تصویر، دکمه‌ی قلب داخل بدنه (نه گوشه‌ی تصویر) جای می‌گیرد */
.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 / 64px 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; }
.occasion-card--forest { --tone-a: #1f4d33; --tone-b: #0c2318; }
.occasion-card--turquoise { --tone-a: #127f8a; --tone-b: #073f45; }
.occasion-card--sapphire { --tone-a: #1c4f7a; --tone-b: #0a2740; }
.occasion-card--navy { --tone-a: #23395a; --tone-b: #0d1e30; }
.occasion-card--indigo { --tone-a: #3a3e78; --tone-b: #1a1c3d; }
.occasion-card--wine { --tone-a: #6e2338; --tone-b: #38111c; }
.occasion-card--rose { --tone-a: #8a3b52; --tone-b: #4a1c2b; }
.occasion-card--bronze { --tone-a: #8a5a2e; --tone-b: #472c15; }
.occasion-card--amber { --tone-a: #b8862e; --tone-b: #6b4d17; }
.occasion-card--slate { --tone-a: #3c4a4a; --tone-b: #1c2424; }

/* ---------------- مداحان و سخنرانان ---------------- */
.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 / 64px 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-soft); }
.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 / 64px 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:empty { display: none; }
.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 / 64px 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; }
.soon-card--forest { --tone-a: #1f4d33; --tone-b: #0c2318; }
.soon-card--turquoise { --tone-a: #127f8a; --tone-b: #073f45; }
.soon-card--sapphire { --tone-a: #1c4f7a; --tone-b: #0a2740; }
.soon-card--navy { --tone-a: #23395a; --tone-b: #0d1e30; }
.soon-card--indigo { --tone-a: #3a3e78; --tone-b: #1a1c3d; }
.soon-card--wine { --tone-a: #6e2338; --tone-b: #38111c; }
.soon-card--rose { --tone-a: #8a3b52; --tone-b: #4a1c2b; }
.soon-card--bronze { --tone-a: #8a5a2e; --tone-b: #472c15; }
.soon-card--amber { --tone-a: #b8862e; --tone-b: #6b4d17; }
.soon-card--slate { --tone-a: #3c4a4a; --tone-b: #1c2424; }

/* ---------------- سرصفحه‌ی صفحه‌ی مناسبت ---------------- */
.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-soft); }
/* انتخاب حالت نمایش: گزینه‌ی فعال در تم تاریک طلایی با متن تیره (خوانایی بهتر از سفید روی سبز روشن) */
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); }
/* دکمه‌های سبک مداحی (همه سبک‌ها، نوحه، مارش، ...): حالت فعال قبلاً با استایل inline در view ست می‌شد */
.tabs .tag-chip.is-active { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }
html[data-theme="dark"] .tabs .tag-chip { background: var(--color-surface); border-color: rgba(216, 185, 104, .22); }
html[data-theme="dark"] .tabs .tag-chip:hover { background: var(--color-surface-warm); border-color: var(--color-gold); color: var(--color-gold-soft); }
html[data-theme="dark"] .tabs .tag-chip.is-active {
    background: linear-gradient(180deg, rgba(216, 185, 104, .24), rgba(216, 185, 104, .12));
    border-color: var(--color-gold); color: var(--color-gold-soft); font-weight: 800;
    box-shadow: 0 0 0 1px rgba(216, 185, 104, .18), 0 4px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .tabs .tag-chip.is-active svg { color: var(--color-gold-soft); }
.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; } }


/* ---------------- Confirm modal (replaces window.confirm) — shared by public site + admin ---------------- */
.confirm-modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 14, 12, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    z-index: 3000; opacity: 0; transition: opacity .18s ease;
}
.confirm-modal-overlay.is-visible { opacity: 1; }
.confirm-modal {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    max-width: 360px; width: 100%; padding: 26px 22px 20px; text-align: center;
    transform: scale(.94) translateY(6px); transition: transform .18s ease;
}
.confirm-modal-overlay.is-visible .confirm-modal { transform: scale(1) translateY(0); }
.confirm-modal-icon {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(192, 57, 43, .12); color: #c0392b;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.confirm-modal-icon svg { width: 28px; height: 28px; flex: none; }
.confirm-modal-message { font-size: 15px; font-weight: 700; line-height: 1.9; color: var(--color-text); margin-bottom: 22px; }
.confirm-modal-actions { display: flex; gap: 10px; }
.confirm-modal-actions .btn { flex: 1; justify-content: center; padding: 11px 14px; border-radius: 12px; font-weight: 700; }
.confirm-modal-actions .btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.confirm-modal-actions .btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }
.confirm-modal-actions .btn-outline { background: var(--color-surface-warm); }
@media (max-width: 480px) {
    .confirm-modal { padding: 22px 18px 18px; }
}

/* ---------------- نوار طلاییِ دانلود (پایین هر کارت/ردیف خبر) ---------------- */
@keyframes dlArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
.dl-bar {
    position: relative; display: flex; align-items: stretch; flex: 0 0 auto; width: 100%; min-width: 0; overflow: hidden;
    /* آبی فیروزه‌ای ملایم و کم‌اشباع */
    background: #d6ebe7;
    border-top: 1px solid rgba(30, 130, 120, .22);
    color: #0f4b47;
}
/* حالت تاریک: سطح تیره با رگه‌ی محو فیروزه‌ای و متن فیروزه‌ای روشن */
html[data-theme="dark"] .dl-bar {
    background: rgba(94, 200, 188, .13);
    border-top-color: rgba(94, 200, 188, .22);
    color: #9fded5;
}
.dl-bar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
    background: url('../images/pattern-soft.svg') center / 52px repeat;
}
html[data-theme="dark"] .dl-bar::before { display: none; }
.dl-bar__btn {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 5px 12px; color: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.5; text-decoration: none;
    transition: background .2s, filter .2s; -webkit-tap-highlight-color: transparent;
}
.dl-bar__btn:hover { background: rgba(255, 255, 255, .3); text-decoration: none; color: inherit; }
.dl-bar__btn:active { background: rgba(15, 100, 92, .1); }
html[data-theme="dark"] .dl-bar__btn:hover { background: rgba(94, 200, 188, .12); }
html[data-theme="dark"] .dl-bar__btn:active { background: rgba(94, 200, 188, .2); }
.dl-bar__btn:focus-visible { outline: 2px solid #167a72; outline-offset: -3px; }
.dl-bar__btn + .dl-bar__btn { border-inline-start: 1px solid rgba(20, 110, 100, .2); }
.dl-bar__icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: #1f8f85; color: #f2fffc;
    box-shadow: 0 1px 3px rgba(6, 50, 46, .25);
}
.dl-bar__icon svg { width: 13px; height: 13px; }
.dl-bar__btn:hover .dl-bar__icon svg, .dl-bar__btn:focus-visible .dl-bar__icon svg { animation: dlArrow .9s ease-in-out infinite; }
html[data-theme="dark"] .dl-bar__size { background: rgba(94, 200, 188, .1); border-color: rgba(94, 200, 188, .24); }
html[data-theme="dark"] .dl-bar__icon { background: #2aa79b; color: #062724; }
.dl-bar__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-bar__size {
    flex: 0 0 auto; margin-inline-start: auto; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px;
    background: rgba(15, 100, 92, .07); border: 1px solid rgba(15, 100, 92, .16);
}
@media (max-width: 380px) {
    .dl-bar__btn { padding-inline: 10px; gap: 7px; font-size: 12.5px; }
    .dl-bar--split .dl-bar__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dl-bar__btn:hover .dl-bar__icon svg { animation: none; } }

/* صفحه‌ی جزئیات خبر: نوار مستقل و گرد، زیر پوستر/ویدیو */
.dl-bar--detail {
    border: 1px solid rgba(30, 130, 120, .25); border-radius: var(--radius-lg); margin: 0 0 22px;
}
/* پس‌زمینه‌ی شفاف: الگوی پس‌زمینه‌ی سایت از پشت دیده می‌شود (محو‌شدگی خیلی کم، رنگ بسیار کم‌غلظت) */
.dl-bar--detail {
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(214, 235, 231, .12));
    -webkit-backdrop-filter: saturate(1.3) blur(1.5px); backdrop-filter: saturate(1.3) blur(1.5px);
    border: 1px solid rgba(30, 130, 120, .35);
    box-shadow: 0 4px 14px rgba(15, 75, 71, .08), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* الگوی ریز داخلی نوار در حالت شفاف نباید روی الگوی سایت بیفتد */
.dl-bar--detail::before { display: none; }
html[data-theme="dark"] .dl-bar--detail {
    background: linear-gradient(135deg, rgba(94, 200, 188, .09), rgba(94, 200, 188, .03));
    border-color: rgba(94, 200, 188, .28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.dl-bar--detail .dl-bar__btn { padding: 8px 14px; font-size: 13.5px; }
.dl-bar--detail .dl-bar__icon { width: 28px; height: 28px; }
.video-player:has(+ .dl-bar--detail) { margin-bottom: 12px; }

/* کارت‌های افقی موبایل: نوار به‌صورت ردیف دوم و تمام‌عرض */
@media (max-width: 720px) {
    .news-grid:not(.h-scroll) .news-card { flex-wrap: wrap; }
    .news-grid:not(.h-scroll) .news-card .dl-bar { flex: 0 0 100%; width: auto; }
    .news-grid.h-scroll .news-card .dl-bar { flex: 0 0 auto; }
    .news-grid:not(.h-scroll) .news-card--text-only .body { flex: 1 1 100%; }
}
/* ردیف‌های لیست (دسته‌بندی، مداح، جستجو ...) */
.news-list-row { --row-px: 14px; --row-py: 14px; flex-wrap: wrap; overflow: hidden; }
.news-list-row--text-only { --row-px: 24px; --row-py: 22px; }
.news-list-row > .dl-bar {
    flex: 0 0 calc(100% + var(--row-px) * 2); width: auto;
    margin: 2px calc(var(--row-px) * -1) calc(var(--row-py) * -1);
}
@media (max-width: 720px) {
    .news-list-row { --row-px: 12px; --row-py: 12px; flex-wrap: nowrap; }
    .news-list-row--text-only { --row-px: 16px; --row-py: 18px; }
    .news-list-row > .dl-bar { flex: none; }
}

/* ---------- صفحه‌ی ورود برنامه (فقط وقتی PWA نصب‌شده باز می‌شود، یک‌بار در هر نشست) ---------- */
.app-splash { display: none; }
html.app-launch .app-splash {
    position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 42%, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000) 100%);
    color: #f3ead0; transition: opacity .55s ease, transform .55s ease;
}
html.app-launch .app-splash.is-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.app-splash__glow {
    position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -62%);
    background: radial-gradient(circle, rgba(232, 214, 160, .22) 0%, rgba(232, 214, 160, 0) 65%); animation: splashGlow 2.4s ease-in-out infinite alternate;
}
.app-splash__logo { position: relative; width: 132px; height: 132px; display: grid; place-items: center; animation: splashIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.app-splash__logo img { position: relative; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.app-splash__ring {
    position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(232, 214, 160, .55);
    animation: splashRing 1.8s ease-out infinite;
}
.app-splash__name { position: relative; font-size: 22px; font-weight: 800; letter-spacing: .2px; animation: splashUp .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.app-splash__bar { position: relative; width: 96px; height: 3px; border-radius: 3px; background: rgba(243, 234, 208, .18); overflow: hidden; animation: splashUp .9s .4s both; }
.app-splash__bar span { position: absolute; inset-block: 0; width: 40%; border-radius: 3px; background: #e8d6a0; animation: splashBar 1.2s ease-in-out infinite; }
@keyframes splashIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes splashUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes splashRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes splashGlow { from { opacity: .6; } to { opacity: 1; } }
@keyframes splashBar { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .app-splash *, .app-splash { animation: none !important; transition-duration: .01s !important; }
}

/* آیکون ویدیو روی کارت/ردیف اخبار: به‌جای وسط تصویر (که صورتِ مداح/سخنران را می‌پوشاند)
   یک نشان کوچک در گوشه‌ی پایین-انتهای تصویر؛ گوشه‌ی پایین-ابتدا دکمه‌ی پخش و
   بالا-ابتدا قلب علاقه‌مندی است. */
.news-card-thumb .video-badge {
    inset: auto; inset-inline-end: 10px; bottom: 10px; margin: 0;
    width: 30px; height: 30px; z-index: 2;
    background: rgba(6, 40, 31, .6); border-color: rgba(255,255,255,.3);
}
.news-card-thumb .video-badge svg { width: 14px; height: 14px; margin: 0; }
@media (max-width: 720px) {
    /* فهرست فشرده‌ی موبایل: نشان صوتی پنهان است، پس گوشه‌ی بالا-انتها آزاد است */
    .news-grid:not(.h-scroll) .news-card-thumb .video-badge {
        inset: auto; inset-inline-end: 6px; top: 6px; bottom: auto; width: 26px; height: 26px;
    }
    .news-grid:not(.h-scroll) .news-card-thumb .video-badge svg { width: 12px; height: 12px; }
}

/* جستجوی مداحان و سخنرانان */
.performer-search { position: relative; max-width: 420px; margin: 0 0 16px; }
.performer-search input {
    width: 100%; height: 44px; padding: 0 44px 0 14px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    font-family: inherit; font-size: 14px;
}
.performer-search input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.performer-search > svg { position: absolute; inset-inline-start: auto; right: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-muted); pointer-events: none; }
.performer-search-empty { display: none; }


/* ==========================================================================
   تم «امام جمعه» (v57): کاشی‌کاری گره‌چینی هشت‌پر، آیکن‌های مسجدی/محرابی،
   قاب ستاره‌ای آیکن‌ها و خط آسمان مسجد بالای فوتر.
   ========================================================================== */
:root {
    --color-bg: #f1f4ec;
    --color-surface-warm: #f8faf3;
    --color-border: #dbe2cf;
    --color-turquoise: #1d8a86;
    --star-clip: polygon(50.0% 0.0%,66.5% 10.3%,85.4% 14.6%,89.7% 33.5%,100.0% 50.0%,89.7% 66.5%,85.4% 85.4%,66.5% 89.7%,50.0% 100.0%,33.5% 89.7%,14.6% 85.4%,10.3% 66.5%,0.0% 50.0%,10.3% 33.5%,14.6% 14.6%,33.5% 10.3%);
    --skyline-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 56%22 preserveAspectRatio=%22none%22 fill=%22%230b3d30%22%3E%3Crect x=%220%22 y=%2248%22 width=%22480%22 height=%228%22/%3E%3Cpath d=%22M82 48C82 34 97.2 28 120 12C142.8 28 158 34 158 48Z%22/%3E%3Crect x=%22119.1%22 y=%223%22 width=%221.8%22 height=%2210%22/%3E%3Ccircle cx=%22120%22 cy=%223%22 r=%222%22/%3E%3Crect x=%2257%22 y=%2214%22 width=%226%22 height=%2234%22/%3E%3Crect x=%2254%22 y=%2220%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M56 14 L60 0 L64 14Z%22/%3E%3Crect x=%22177%22 y=%2214%22 width=%226%22 height=%2234%22/%3E%3Crect x=%22174%22 y=%2220%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M176 14 L180 0 L184 14Z%22/%3E%3Crect x=%2270%22 y=%2240%22 width=%22100%22 height=%228%22/%3E%3Cpath d=%22M312.64 48C312.64 37.92 323.584 33.6 340 22.080000000000002C356.416 33.6 367.36 37.92 367.36 48Z%22/%3E%3Crect x=%22339.1%22 y=%2215.600000000000001%22 width=%221.8%22 height=%227.199999999999999%22/%3E%3Ccircle cx=%22340%22 cy=%2215.600000000000001%22 r=%222%22/%3E%3Crect x=%22293.8%22 y=%2222%22 width=%226%22 height=%2226%22/%3E%3Crect x=%22290.8%22 y=%2228%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M292.8 22 L296.8 8 L300.8 22Z%22/%3E%3Crect x=%22380.2%22 y=%2222%22 width=%226%22 height=%2226%22/%3E%3Crect x=%22377.2%22 y=%2228%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M379.2 22 L383.2 8 L387.2 22Z%22/%3E%3Crect x=%22304.0%22 y=%2240%22 width=%2272.0%22 height=%228%22/%3E%3Cpath d=%22M225 48C225 42 230 40 235 34C240 40 245 42 245 48Z%22/%3E%3Cpath d=%22M460 48C460 42 465 40 470 34C475 40 480 42 480 48Z%22/%3E%3Cpath d=%22M0 48C0 42 5 40 10 34C15 40 20 42 20 48Z%22/%3E%3C/svg%3E");
    --skyline-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 56%22 preserveAspectRatio=%22none%22 fill=%22%230a2e24%22%3E%3Crect x=%220%22 y=%2248%22 width=%22480%22 height=%228%22/%3E%3Cpath d=%22M82 48C82 34 97.2 28 120 12C142.8 28 158 34 158 48Z%22/%3E%3Crect x=%22119.1%22 y=%223%22 width=%221.8%22 height=%2210%22/%3E%3Ccircle cx=%22120%22 cy=%223%22 r=%222%22/%3E%3Crect x=%2257%22 y=%2214%22 width=%226%22 height=%2234%22/%3E%3Crect x=%2254%22 y=%2220%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M56 14 L60 0 L64 14Z%22/%3E%3Crect x=%22177%22 y=%2214%22 width=%226%22 height=%2234%22/%3E%3Crect x=%22174%22 y=%2220%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M176 14 L180 0 L184 14Z%22/%3E%3Crect x=%2270%22 y=%2240%22 width=%22100%22 height=%228%22/%3E%3Cpath d=%22M312.64 48C312.64 37.92 323.584 33.6 340 22.080000000000002C356.416 33.6 367.36 37.92 367.36 48Z%22/%3E%3Crect x=%22339.1%22 y=%2215.600000000000001%22 width=%221.8%22 height=%227.199999999999999%22/%3E%3Ccircle cx=%22340%22 cy=%2215.600000000000001%22 r=%222%22/%3E%3Crect x=%22293.8%22 y=%2222%22 width=%226%22 height=%2226%22/%3E%3Crect x=%22290.8%22 y=%2228%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M292.8 22 L296.8 8 L300.8 22Z%22/%3E%3Crect x=%22380.2%22 y=%2222%22 width=%226%22 height=%2226%22/%3E%3Crect x=%22377.2%22 y=%2228%22 width=%2212%22 height=%223%22/%3E%3Cpath d=%22M379.2 22 L383.2 8 L387.2 22Z%22/%3E%3Crect x=%22304.0%22 y=%2240%22 width=%2272.0%22 height=%228%22/%3E%3Cpath d=%22M225 48C225 42 230 40 235 34C240 40 245 42 245 48Z%22/%3E%3Cpath d=%22M460 48C460 42 465 40 470 34C475 40 480 42 480 48Z%22/%3E%3Cpath d=%22M0 48C0 42 5 40 10 34C15 40 20 42 20 48Z%22/%3E%3C/svg%3E");
}
html[data-theme="dark"] { --color-bg: #0f1a2e; --color-surface-warm: #1b2a42; --color-border: #2a3b57; }

/* قاب ستاره‌ای (گره هشت‌پر نرم) به‌جای دایره برای نشان‌های بی‌حاشیه */
.footer-social-link, .share-icon-btn, .toast .toast-icon, .favorites-empty__icon {
    border-radius: 0; -webkit-clip-path: var(--star-clip); clip-path: var(--star-clip);
}
.share-icon-btn { border: 0; }
.empty-state__icon {
    border-radius: 0; border: 0; box-shadow: none; -webkit-clip-path: var(--star-clip); clip-path: var(--star-clip);
    background: linear-gradient(150deg, rgba(201, 162, 75, .28), rgba(201, 162, 75, .08));
}
/* آیکن مناسبت (مثلاً پرچم) دایره‌ای است، نه ستاره‌ای؛ آیکن دانلود (.dl-bar__icon) هم دایره‌ی خودش را دارد */
.occasion-head__icon {
    border-radius: 50%; overflow: hidden; -webkit-clip-path: none; clip-path: none;
    background: linear-gradient(150deg, var(--color-primary), var(--color-forest)); position: relative;
}
.occasion-head__icon img { border-radius: 50%; }
.icon-btn { border-radius: 12px 12px 12px 4px; }
.icon-btn:hover { border-radius: 4px 12px 12px 12px; }
.audio-player-bar .icon-btn, .mobile-nav-head .icon-btn { border-radius: 12px; }
.bottom-nav__ico { border-radius: 4px 16px 4px 16px; }
.install-option__icon { border-radius: 4px 14px 4px 14px; }
.logo-star svg { filter: drop-shadow(0 0 6px rgba(201, 162, 75, .35)); }

/* خط آسمان مسجد (گنبد و دو مناره) بالای فوتر؛ به رنگ خود فوتر تا بدون درز بچسبد */
.site-footer { overflow: visible; }
.site-footer::before {
    top: -47px; height: 48px; z-index: 1; pointer-events: none;
    background: var(--skyline-light) center bottom / 480px 100% repeat-x;
}
html[data-theme="dark"] .site-footer::before { background-image: var(--skyline-dark); }
@media (max-width: 640px) { .site-footer::before { top: -35px; height: 36px; background-size: 360px 100%; } }

/* تم تیره: لهجه‌ی زرد ملایم #EBE085 برای ستاره‌ی لوگو و علاقه‌مندی فعال */
html[data-theme="dark"] .logo .dot, html[data-theme="dark"] .logo-star { color: #ebe085; }
html[data-theme="dark"] .card-favorite-btn.is-active { color: #ebe085; }
html[data-theme="dark"] .card-favorite-btn.is-active svg, html[data-theme="dark"] #player-favorite.is-active svg { fill: #ebe085; stroke: #ebe085; }

/* ============================================================
   گالری تصاویر خبر — ردیف کارتیِ افقی زیر متن خبر + مودال نمایش
   ============================================================ */
.news-gallery { margin: 30px 0 10px; }
.news-gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.news-gallery__title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; font-weight: 800; color: var(--color-text); }
.news-gallery__title > svg { width: 22px; height: 22px; color: var(--color-gold-dark); flex-shrink: 0; }
html[data-theme="dark"] .news-gallery__title > svg { color: var(--color-gold); }
.news-gallery__count { font-size: 12px; font-weight: 700; color: var(--color-text-muted); background: var(--color-surface-warm); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 11px; }
.news-gallery__nav { display: none; gap: 8px; }
.news-gallery.has-overflow .news-gallery__nav { display: flex; }
.news-gallery__arrow {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.news-gallery__arrow svg { width: 19px; height: 19px; }
.news-gallery__arrow:hover:not(:disabled) { border-color: var(--color-gold); color: var(--color-primary); transform: translateY(-1px); }
.news-gallery__arrow:disabled { opacity: .35; cursor: default; }

.news-gallery__track {
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 16px; margin: 0 -2px;
    scroll-snap-type: x proximity; scroll-padding-inline: 2px; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(201, 162, 75, .5) transparent;
}
.news-gallery__track::-webkit-scrollbar { height: 6px; }
.news-gallery__track::-webkit-scrollbar-thumb { background: rgba(201, 162, 75, .5); border-radius: 6px; }
.news-gallery__track::-webkit-scrollbar-track { background: transparent; }

.gallery-card {
    position: relative; flex: 0 0 clamp(200px, 36%, 270px); aspect-ratio: 4 / 3; padding: 0; margin: 0;
    overflow: hidden; cursor: zoom-in; scroll-snap-align: start; text-align: start; font: inherit; color: #fff;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s ease;
}
.gallery-card__media { position: absolute; inset: 0; display: block; background: var(--color-surface-warm); }
.gallery-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.gallery-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 12, 9, .0) 55%, rgba(5, 12, 9, .0) 100%); transition: background .3s ease; }
.gallery-card:hover { transform: translateY(-3px); border-color: var(--color-gold); box-shadow: var(--shadow-md); }
.gallery-card:hover .gallery-card__media img, .gallery-card:focus-visible .gallery-card__media img { transform: scale(1.07); }
.gallery-card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.gallery-card:active { transform: scale(.985); }
.gallery-card__zoom {
    position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff;
    background: rgba(8, 14, 26, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease;
}
.gallery-card__zoom svg { width: 16px; height: 16px; }
.gallery-card:hover .gallery-card__zoom, .gallery-card:focus-visible .gallery-card__zoom { opacity: 1; transform: scale(1); }
@media (hover: none) { .gallery-card__zoom { opacity: .9; transform: none; } }
.gallery-card__num {
    position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 10px; min-width: 24px; padding: 0 8px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; font-weight: 800;
    color: #2b2100; background: var(--color-gold-soft); line-height: 1;
}
.gallery-card__caption {
    position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; padding: 30px 12px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.7;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 12, 9, .78) 100%);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- مودال ---- */
html.gallery-open, html.gallery-open body { overflow: hidden; }
.gallery-lightbox {
    position: fixed; inset: 0; z-index: 10020; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    opacity: 0; transition: opacity .22s ease; color: #fff;
}
.gallery-lightbox.is-open { opacity: 1; }
.gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gallery-lightbox__top, .gallery-lightbox__stage, .gallery-lightbox__bottom { position: relative; z-index: 1; }
.gallery-lightbox__top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.gallery-lightbox__count { font-size: 13px; font-weight: 800; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.gallery-lightbox__actions { display: flex; gap: 8px; }
.gallery-lightbox__btn, .gallery-lightbox__nav {
    display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; cursor: pointer; text-decoration: none;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent;
}
.gallery-lightbox__btn { width: 42px; height: 42px; }
.gallery-lightbox__btn svg { width: 20px; height: 20px; }
.gallery-lightbox__btn:hover, .gallery-lightbox__nav:hover { background: rgba(255, 255, 255, .2); border-color: var(--color-gold-soft); color: #fff; text-decoration: none; }
.gallery-lightbox__btn:focus-visible, .gallery-lightbox__nav:focus-visible, .gallery-lightbox__thumb:focus-visible { outline: 2px solid var(--color-gold-soft); outline-offset: 2px; }
.gallery-lightbox__stage { position: relative; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: zoom-out; }
.gallery-lightbox__figure { position: absolute; inset: 0 76px; margin: 0; display: flex; align-items: center; justify-content: center; }
.gallery-lightbox__img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 14px; cursor: default;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55); opacity: 0; transform: scale(.97);
    transition: opacity .28s ease, transform .35s var(--ease); -webkit-user-drag: none;
}
.gallery-lightbox__img.is-ready { opacity: 1; transform: scale(1); }
.gallery-lightbox__spinner {
    position: absolute; width: 40px; height: 40px; border-radius: 50%; opacity: 0; transition: opacity .2s ease;
    border: 3px solid rgba(255, 255, 255, .18); border-top-color: var(--color-gold-soft); animation: gallery-spin .8s linear infinite;
}
.gallery-lightbox.is-loading .gallery-lightbox__spinner { opacity: 1; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery-lightbox__nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; z-index: 2; }
.gallery-lightbox__nav svg { width: 24px; height: 24px; }
.gallery-lightbox__nav--prev { inset-inline-start: 14px; }
.gallery-lightbox__nav--next { inset-inline-end: 14px; }
.gallery-lightbox__nav:hover { transform: scale(1.08); }
.gallery-lightbox__bottom { min-width: 0; padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gallery-lightbox__caption { margin: 0; max-width: 760px; text-align: center; font-size: 14.5px; font-weight: 600; line-height: 1.9; color: rgba(255, 255, 255, .94); }
.gallery-lightbox__thumbs { display: flex; gap: 8px; max-width: 100%; min-width: 0; overflow-x: auto; padding: 4px 2px; justify-content: safe center; scrollbar-width: none; }
.gallery-lightbox__thumbs::-webkit-scrollbar { display: none; }
.gallery-lightbox__thumb {
    flex: 0 0 auto; width: 64px; height: 48px; padding: 0; overflow: hidden; cursor: pointer; border-radius: 9px; opacity: .5;
    background: rgba(255, 255, 255, .06); border: 2px solid transparent; transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.gallery-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gallery-lightbox__thumb:hover { opacity: .85; }
.gallery-lightbox__thumb.is-active { opacity: 1; border-color: var(--color-gold-soft); transform: translateY(-2px); }

@media (max-width: 640px) {
    .news-gallery__title { font-size: 16.5px; }
    .gallery-card { flex-basis: clamp(180px, 62%, 250px); }
    .gallery-lightbox__figure { inset: 0 8px; }
    .gallery-lightbox__nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(10, 16, 28, .5); }
    .gallery-lightbox__nav svg { width: 20px; height: 20px; }
    .gallery-lightbox__nav--prev { inset-inline-start: 8px; }
    .gallery-lightbox__nav--next { inset-inline-end: 8px; }
    .gallery-lightbox__thumb { width: 52px; height: 40px; }
    .gallery-lightbox__caption { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-card, .gallery-card__media img, .gallery-lightbox, .gallery-lightbox__img { transition: none; }
}
@media print { .news-gallery__nav, .gallery-lightbox { display: none !important; } .gallery-card { box-shadow: none; } }

/* ============================================================
   استفتائات — پرسش و پاسخ شرعی (فهرست، صفحه‌ی تک‌پرسش، فرم تماس)
   ============================================================ */
.istifta-hero {
    position: relative; overflow: hidden; display: grid; gap: 22px; margin: 6px 0 20px; padding: 30px 28px; color: #fff;
    border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
    border: 1px solid rgba(230, 205, 130, .25); box-shadow: var(--shadow-md);
}
.istifta-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(520px 220px at 12% -10%, rgba(230, 205, 130, .28), transparent 70%), radial-gradient(420px 260px at 105% 120%, rgba(230, 205, 130, .16), transparent 70%);
}
.istifta-hero > * { position: relative; }
.istifta-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .2px; color: var(--color-gold-soft); background: rgba(230, 205, 130, .12); border: 1px solid rgba(230, 205, 130, .3); border-radius: 999px; padding: 4px 13px; }
.istifta-hero__eyebrow svg { width: 16px; height: 16px; }
.istifta-hero h1 { margin: 12px 0 8px; font-size: clamp(26px, 4.4vw, 36px); line-height: 1.4; color: #fff; }
.istifta-hero p { margin: 0; max-width: 620px; font-size: 14.5px; line-height: 2; color: rgba(255, 255, 255, .82); }
.istifta-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.istifta-hero__actions .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-gold); color: #2b2100; border-color: var(--color-gold); font-weight: 800; }
.istifta-hero__actions .btn:hover { background: var(--color-gold-soft); border-color: var(--color-gold-soft); color: #2b2100; }
.istifta-hero__actions .btn svg { width: 18px; height: 18px; }
.istifta-hero__stat { font-size: 13px; color: rgba(255, 255, 255, .78); }
.istifta-hero__stat strong { color: var(--color-gold-soft); font-size: 16px; }
.istifta-search {
    display: flex; align-items: center; gap: 8px; max-width: 560px; padding: 6px 8px 6px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.istifta-search:focus-within { border-color: var(--color-gold-soft); background: rgba(255, 255, 255, .16); }
.istifta-search__icon { display: flex; padding-inline-start: 10px; color: rgba(255, 255, 255, .7); }
.istifta-search__icon svg { width: 19px; height: 19px; }
.istifta-search__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 14px; padding: 8px 4px; }
.istifta-search__input::placeholder { color: rgba(255, 255, 255, .6); }
.istifta-search .btn { border-radius: 999px; }

.istifta-topics { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 -2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.istifta-topics::-webkit-scrollbar { display: none; }
.istifta-topic {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
    color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.istifta-topic span { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--color-text-muted); background: var(--color-surface-warm); }
.istifta-topic:hover { border-color: var(--color-gold); transform: translateY(-1px); text-decoration: none; }
.istifta-topic.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.istifta-topic.is-active span { color: var(--color-primary); background: #fff; }

.istifta-filterbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 4px 0 14px; padding: 9px 16px; font-size: 13px; color: var(--color-text-muted); background: var(--color-surface-warm); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.istifta-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 12px; }
.istifta-toolbar__count { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.istifta-toolbar__btn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 14px; color: var(--color-primary); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.istifta-toolbar__btn:hover { border-color: var(--color-gold); background: var(--color-surface-warm); }

.istifta-list { display: flex; flex-direction: column; gap: 14px; }
.istifta-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: 90px; transition: border-color .25s ease, box-shadow .3s var(--ease); }
.istifta-card:hover { border-color: var(--color-gold); }
.istifta-card[open] { border-color: var(--color-gold); box-shadow: var(--shadow-md); }
.istifta-card.is-target { animation: istifta-flash 1.8s ease; }
@keyframes istifta-flash { 0%, 100% { box-shadow: var(--shadow-sm); } 25% { box-shadow: 0 0 0 4px rgba(201, 162, 75, .45); } }
.istifta-card__q { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.istifta-card__q::-webkit-details-marker { display: none; }
.istifta-card__q:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -3px; border-radius: var(--radius-lg); }
.istifta-card__badge {
    flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 17px; font-weight: 900; line-height: 1; color: #2b2100; background: linear-gradient(135deg, var(--color-gold-soft), var(--color-gold));
    box-shadow: 0 2px 8px rgba(201, 162, 75, .35);
}
.istifta-card__badge--a { color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-forest)); box-shadow: 0 2px 8px rgba(15, 92, 70, .35); }
.istifta-card__qbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.istifta-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.istifta-card__topic { display: inline-block; padding: 2px 12px; font-size: 12px; font-weight: 800; color: var(--color-primary); background: rgba(15, 92, 70, .08); border: 1px solid rgba(15, 92, 70, .18); border-radius: 999px; text-decoration: none; }
html[data-theme="dark"] .istifta-card__topic { color: var(--color-gold-soft); background: rgba(230, 205, 130, .1); border-color: rgba(230, 205, 130, .25); }
.istifta-card__date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); }
.istifta-card__date svg { width: 14px; height: 14px; }
.istifta-card__qtext { font-size: 15.5px; font-weight: 700; line-height: 2; color: var(--color-text); }
.istifta-card__chev { flex: 0 0 auto; align-self: center; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text-muted); background: var(--color-surface-warm); transition: transform .3s var(--ease), background .2s ease, color .2s ease; }
.istifta-card__chev svg { width: 18px; height: 18px; }
.istifta-card[open] .istifta-card__chev { transform: rotate(180deg); color: #2b2100; background: var(--color-gold-soft); }
.istifta-card__a { padding: 0 20px 18px; animation: istifta-open .35s var(--ease); }
@keyframes istifta-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.istifta-answer { display: flex; gap: 14px; padding: 18px; background: var(--color-surface-warm); border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-primary); border-radius: var(--radius-md); }
.istifta-answer__body { flex: 1; min-width: 0; }
.istifta-answer__text p, .istifta-block__text p, .istifta-answer__fullq p { margin: 0 0 10px; font-size: 15px; line-height: 2.2; color: var(--color-text); }
.istifta-answer__text p:last-child, .istifta-block__text p:last-child { margin-bottom: 0; }
.istifta-answer__fullq { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--color-border); color: var(--color-text-muted); }
.istifta-answer__fullq strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.istifta-answer__fullq p { font-size: 14px; color: var(--color-text-muted); }
.istifta-answer__by { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px; font-size: 13px; color: var(--color-text-muted); border-top: 1px dashed var(--color-border); }
.istifta-answer__by svg { width: 16px; height: 16px; color: var(--color-gold-dark); }
.istifta-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.istifta-card__views { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); }
.istifta-card__views svg { width: 15px; height: 15px; }
.istifta-card__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.istifta-act { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.istifta-act svg { width: 15px; height: 15px; }
.istifta-act:hover { border-color: var(--color-gold); color: var(--color-primary); text-decoration: none; }
.istifta-act.is-done { color: var(--color-success); border-color: var(--color-success); }

.istifta-empty { text-align: center; padding: 46px 20px; margin: 10px 0; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.istifta-empty__icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 50%; color: var(--color-gold-dark); background: var(--color-surface-warm); }
.istifta-empty__icon svg { width: 30px; height: 30px; }
.istifta-empty h2 { margin: 6px 0; font-size: 18px; }
.istifta-empty p { margin: 0 auto 16px; max-width: 420px; font-size: 14px; line-height: 2; color: var(--color-text-muted); }

.istifta-note { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 8px; padding: 14px 18px; font-size: 13px; line-height: 2; color: var(--color-text-muted); background: var(--color-surface-warm); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.istifta-note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 6px; color: var(--color-gold-dark); }
.istifta-note p { margin: 0; }

/* ---- صفحه‌ی تک‌پرسش ---- */
.istifta-single__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.istifta-block { display: flex; gap: 16px; padding: 22px; margin-bottom: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.istifta-block > div { flex: 1; min-width: 0; }
.istifta-block--a { background: var(--color-surface-warm); border-inline-start: 5px solid var(--color-primary); }
.istifta-block__label { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--color-text-muted); }
.istifta-block--q .istifta-block__text p { font-size: 17px; font-weight: 700; }
.istifta-cta p { margin: 0 0 14px; font-size: 13.5px; line-height: 2; color: var(--color-text-muted); }
.istifta-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.istifta-more li + li { border-top: 1px solid var(--color-border); }
.istifta-more a { display: block; padding: 11px 0; font-size: 13.5px; line-height: 1.9; color: var(--color-text); text-decoration: none; }
.istifta-more a:hover { color: var(--color-primary); }
.istifta-more .istifta-card__topic { display: table; margin-bottom: 4px; font-size: 11px; padding: 0 9px; }

/* ---- کادر موافقت در فرم تماس ---- */
.istifta-consent { margin: 0 0 18px; padding: 16px 18px; background: linear-gradient(135deg, rgba(201, 162, 75, .12), rgba(201, 162, 75, .04)); border: 1px solid rgba(201, 162, 75, .45); border-radius: var(--radius-md); }
.istifta-consent[hidden] { display: none; }
.istifta-consent__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--color-gold-dark); }
html[data-theme="dark"] .istifta-consent__head { color: var(--color-gold-soft); }
.istifta-consent__head svg { width: 20px; height: 20px; }
.istifta-consent p { margin: 0 0 12px; font-size: 13.5px; line-height: 2; color: var(--color-text); }
.istifta-consent__check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.istifta-consent__check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 6px; accent-color: var(--color-primary); }
.istifta-consent__check input.is-invalid { outline: 2px solid var(--color-danger); outline-offset: 2px; }

@media (max-width: 640px) {
    .istifta-hero { padding: 24px 18px; border-radius: var(--radius-lg); }
    .istifta-card__q { padding: 15px 14px; gap: 11px; }
    .istifta-card__badge { width: 32px; height: 32px; font-size: 15px; }
    .istifta-card__qtext { font-size: 14.5px; }
    .istifta-card__a { padding: 0 12px 14px; }
    .istifta-answer { padding: 14px; gap: 10px; }
    .istifta-answer .istifta-card__badge { display: none; }
    .istifta-block { padding: 16px; gap: 10px; }
    .istifta-block .istifta-card__badge { width: 30px; height: 30px; font-size: 14px; }
    .istifta-card__foot { flex-direction: column; align-items: stretch; }
    .istifta-card__actions { justify-content: stretch; }
    .istifta-act { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .istifta-card, .istifta-card__a, .istifta-card__chev, .istifta-card.is-target { animation: none; transition: none; } }
@media print { .istifta-hero, .istifta-topics, .istifta-toolbar, .istifta-card__actions, .istifta-search, .share-bar, .istifta-cta { display: none !important; } .istifta-card { box-shadow: none; } .istifta-card:not([open]) .istifta-card__a { display: block; } }

/* ---- هدر موبایل: سرریز افقی ----
   همبرگر + لوگو + سه دکمه (جستجو، علاقه‌مندی، تم) در ۳۹۰px حدود ۱۹px از عرض صفحه بیشتر
   می‌شد؛ دکمه‌ی تم از لبه‌ی صفحه بیرون می‌زد و کل صفحه اسکرول افقی می‌گرفت.
   حالا لوگو اجازه‌ی کوچک‌شدن دارد (متن با «…» کوتاه می‌شود) و فاصله‌ها کمتر است. */
@media (max-width: 720px) {
    .header-top { gap: 8px; }
    .logo { flex-shrink: 1; min-width: 0; }
    .logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .logo-star { flex-shrink: 0; }
}
@media (max-width: 400px) {
    .logo { font-size: 18px; gap: 6px; }
    .icon-btn { width: 36px; height: 36px; }
    .header-actions { gap: 5px; }
}

/* ---- کارت خبر بدون تصویر داخل اسلایدر افقی ----
   کارت‌های هم‌ردیف هم‌قد کشیده می‌شوند؛ پس به‌جای فاصله‌ی خالی بین تیتر و چکیده،
   تیتر بزرگ‌تر و چکیده‌ی بلندتر می‌شود و متای پایین کارت به انتها می‌چسبد. */
.news-grid.h-scroll > .news-card--text-only .body { padding: 22px 18px 16px; }
.news-grid.h-scroll > .news-card--text-only .cat { margin-bottom: 12px; }
.news-grid.h-scroll > .news-card--text-only h3 {
    flex: 0 0 auto; font-size: 18px; line-height: 1.85; margin-bottom: 12px;
    -webkit-line-clamp: 4;
}
.news-grid.h-scroll > .news-card--text-only .excerpt {
    flex: 1 1 auto; font-size: 13.5px; line-height: 2; margin: 0 0 14px;
    -webkit-line-clamp: 7;
}
.news-grid.h-scroll > .news-card--text-only .meta { margin-top: auto; }

/* کارت بدون تصویر در «آخرین اخبار» (موبایل): پدینگ متن به لبه‌ی کارت نچسبد.
   قانون عمومی .body در این حالت padding-inline را به ۲px می‌رساند. */
@media (max-width: 720px) {
    .news-grid:not(.h-scroll) .news-card--text-only .body { padding: 16px 18px; }
}