/* ==========================================================================
   قالب وب‌سایت بنیاد نهج‌البلاغه استان اردبیل — استایل بخش عمومی
   تم سبز اسلامی؛ طراحی رسمی و راست‌به‌چپ با پایه Bootstrap 5 (RTL)
   ========================================================================== */

:root {
    /* پالت رنگ اسلامی — سبز زمردی و طلایی */
    --color-primary: #0e6b4f;
    --color-primary-dark: #094b37;
    --color-primary-light: #e7f3ed;
    --color-accent: #c9a227;
    --color-accent-light: #f8f2df;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f8f5;
    --color-border: #dfe9e2;

    /* حاشیه پررنگ‌تر؛ برای دکمه‌های خطی و مرز کنترل‌های فرم */
    --color-border-strong: #c3d2c9;
    --color-text: #22332b;
    --color-text-muted: #5d7268;
    --color-heading: #0d3327;

    /* الگوی هندسی اسلامی (ستاره هشت‌پر) برای سطوح روشن، تیره و طلایی */
    --pattern-green: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%230E6B4F'%20stroke-opacity='.10'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-white: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%23FFFFFF'%20stroke-opacity='.08'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-gold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%23C9A227'%20stroke-opacity='.16'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");

    /* ابعاد و سایه */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(13, 51, 39, .06), 0 1px 3px rgba(13, 51, 39, .04);
    --shadow-md: 0 4px 16px rgba(13, 51, 39, .07);
    --shadow-lg: 0 12px 32px rgba(13, 51, 39, .10);
    --transition-base: 180ms ease-in-out;

    /* ارتفاع هدر چسبان؛ برای تنظیم فاصله پیمایش درون‌صفحه‌ای استفاده می‌شود. */
    --site-header-height: 73px;

    /* ---------- نشانه‌های معنایی حالت روشن ---------- */

    /* پس‌زمینه صفحه، جدا از سطح کارت‌ها تا عمق صفحه در حالت تاریک حفظ شود */
    --color-page: #ffffff;

    /* پس‌زمینه سربرگ چسبان (نیمه‌شفاف برای افکت شیشه‌ای) */
    --color-header-bg: rgba(255, 255, 255, .96);

    /* پس‌زمینه برچسب‌های روی تصاویر */
    --color-chip-bg: rgba(255, 255, 255, .95);

    /* رنگ متن/آیکون در حالت هاور پیوند‌ها و دکمه‌های متنی */
    --color-primary-hover: #094b37;

    /* رنگ متن روی زمینه پررنگ primary (دکمه‌ها و برچسب‌ها) */
    --color-on-primary: #ffffff;

    /* سبز پرمایه برای زمینه‌های تیره (اسلایدر، کارت حدیث، سربرگ کمک‌های خیریه) */
    --color-primary-strong: #094b37;

    /* زمینه دکمه اصلی در حالت هاور */
    --color-primary-hover-bg: #094b37;

    /* رنگ متن روی زمینه‌های کم‌رنگ (primary-light / accent-light) */
    --color-on-subtle: #094b37;

    /* رنگ حلقه فوکوس */
    --focus-ring: rgba(14, 107, 79, .35);

    /* رنگ هشدار و خطا (پس‌زمینه و متن) */
    --color-warning-bg: #fff6e5;
    --color-warning-border: #f2d6a2;
    --color-warning-text: #b45309;
    --color-warning-text-strong: #7a4c09;
    --color-danger-bg: #fdecea;
    --color-danger-text: #c0392b;

    /* رنگ متن روی زمینه طلایی (برچسب‌های accent) — روی طلا متن تیره خوانا است */
    --color-on-accent: #3a2b06;

    /* طلایی روشن برای متن روی زمینه‌های سبز پرمایه (کارت حدیث)، چون طلایی
       اصلی روی سبز تیره مرز خوانایی را رد می‌کند. در هر دو حالت روشن/تاریک
       همین رنگ استفاده می‌شود زیرا زمینه کارت در هر دو حالت سبز تیره است. */
    --color-accent-on-strong: #e8ce6a;

    /* گرادیان کارت دعوت به همکاری (CTA)؛ در حالت تاریک سبز تیره می‌ماند تا
       متن سفید روی آن خوانا باشد. */
    --cta-gradient: linear-gradient(120deg, #0e6b4f 0%, #116a4e 60%, #094b37 130%);

    /* گرادیان اسلایدر صفحه اصلی؛ در هر دو حالت تیره است تا متن سفید روی آن بخواند */
    --hero-gradient: linear-gradient(135deg, #0e6b4f 0%, #0d5c43 100%);

    /* ---------- پس‌زمینه یکدست کل سایت ---------- */
    /* یک گرادیان بسیار ملایم که روی کل ناحیه محتوا کشیده می‌شود تا هنگام
       اسکرول حس شود همه صفحه یک سطح پیوسته است (بدون باند و خط جداکننده.
       دو سر گرادیان با رنگ پس‌زمینه صفحه یکی است تا هیچ درزی دیده نشود. */
    --page-wash: linear-gradient(180deg, #ffffff 0%, #f9fcfb 42%, #f2f8f5 100%);

    /* لایه رنگی محو بخش‌های متمایز؛ در دو سر به شفاف می‌رسد و باند ایجاد نمی‌کند */
    --section-tint: rgba(14, 107, 79, .05);

    /* لایه رنگی سرصفحه صفحات داخلی که در پایین به شفاف می‌رسد */
    --page-header-tint: rgba(14, 107, 79, .07);

    /* ---------- سکشن «درباره ما» صفحه اصلی ---------- */
    /* فقط دو لایه محو رنگی؛ پس‌زمینه پایه از --page-wash می‌آید تا بخش
       با بقیه صفحه یکدست بماند. */
    --about-wash-primary: rgba(14, 107, 79, .07);
    --about-wash-accent: rgba(201, 162, 39, .12);
    --about-panel-bg: rgba(255, 255, 255, .82);
    --about-panel-border: #e2ece6;
    --about-panel-shadow: 0 18px 42px rgba(13, 51, 39, .07);
    --about-inner-line: rgba(201, 162, 39, .38);
    --about-ornament: #c9a227;
    --about-ornament-soft: rgba(201, 162, 39, .2);
    --about-ray: rgba(201, 162, 39, .17);
    --about-halo: rgba(201, 162, 39, .22);
    --about-frame-bg: #ffffff;
    --about-frame-shadow: 0 20px 44px rgba(13, 51, 39, .14);
    --about-chip-bg: rgba(255, 255, 255, .9);
    --about-chip-border: rgba(201, 162, 39, .45);
    --about-chip-text: #0d5c43;
    --about-cta-bg: rgba(255, 255, 255, .55);
    --about-cta-text: #0d5c43;
    --about-cta-shine: rgba(255, 255, 255, .6);
    --about-cta-shadow: rgba(201, 162, 39, .35);

    /* دکمه غیرفعال؛ دکمه‌های بوت‌استرپ در حالت disabled از بژ/آبی پیش‌فرض استفاده می‌کنند */
    --btn-disabled-bg: #eef2f0;
    --btn-disabled-border: #dae4df;
    --btn-disabled-text: #6d8179;

    /* ---------- نگاشت متغیرهای بوت‌استرپ به پالت قالب ---------- */
    /* تا اجزای آماده بوت‌استرپ (چک‌باکس، رادیو، اسپینر، آکاردئون، مودال،
       دراپ‌داون، کارت و کنترل‌های فرم) هم‌رنگ سبز/طلایی قالب بمانند. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 14, 107, 79;
    --bs-link-color-rgb: 14, 107, 79;
    --bs-link-hover-color-rgb: 9, 75, 55;
    --bs-body-bg: var(--color-surface);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-bg: var(--color-surface-muted);
    --bs-tertiary-bg: var(--color-surface-muted);
}

/* ==========================================================================
   حالت تاریک سایت
   با افزودن صفت data-theme="dark" به تگ <html> فعال می‌شود. همه رنگ‌های قالب
   از متغیرهای بالا خوانده می‌شوند تا هر بخش (هدر، اسلایدر، کارت‌ها، فرم‌ها،
   فوتر، صفحه‌های خبر/رویداد/تماس/کمک خیریه و پنل مدیریت) در حالت تاریک
   یکدست بماند. رنگ‌های روشنِ روی زمینه‌های سبز/تیره تغییر نمی‌کنند.
   ========================================================================== */

[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #3cc79a;
    --color-primary-dark: #17795c;
    --color-primary-light: #17332a;
    --color-accent: #d9b558;
    --color-accent-light: #2b2415;

    --color-page: #131b18;
    --color-surface: #1a2621;
    --color-surface-muted: #16211d;
    --color-header-bg: rgba(19, 27, 24, .92);
    --color-chip-bg: rgba(26, 38, 33, .94);
    --color-border: #2c3d36;
    --color-border-strong: #45594f;

    --color-text: #d6e3dd;
    --color-text-muted: #9cb0a8;
    --color-heading: #eef6f2;

    --color-primary-hover: #6fdcb2;
    --color-on-subtle: #cfe9dd;

    /* روی سبز روشن حالت تاریک، متن تیره خوانا است */
    --color-on-primary: #08150f;
    --color-primary-strong: #0f5c45;
    --color-primary-hover-bg: #63d9ac;
    --focus-ring: rgba(111, 220, 178, .45);

    /* گرادیان کارت CTA در حالت تاریک کاملاً سبز تیره است تا متن سفید بخواند */
    --cta-gradient: linear-gradient(120deg, #0f5c45 0%, #14654a 60%, #1d7a5c 130%);
    --hero-gradient: linear-gradient(135deg, #12694e 0%, #0b3f2f 100%);

    --color-warning-bg: #33280f;
    --color-warning-border: #5c4a17;
    --color-warning-text: #ffd479;
    --color-warning-text-strong: #ffe0a3;
    --color-danger-bg: #33191a;
    --color-danger-text: #ff9a92;

    /* سکشن «درباره ما» در حالت تاریک: لایه‌های محو روی پس‌زمینه پیوسته صفحه */
    --page-wash: linear-gradient(180deg, #131b18 0%, #111a17 45%, #0e1714 100%);
    --section-tint: rgba(60, 199, 154, .05);
    --page-header-tint: rgba(60, 199, 154, .05);

    --about-wash-primary: rgba(60, 199, 154, .06);
    --about-wash-accent: rgba(217, 181, 88, .1);
    --about-panel-bg: rgba(26, 38, 33, .78);
    --about-panel-border: #2b3d35;
    --about-panel-shadow: 0 18px 42px rgba(0, 0, 0, .4);
    --about-inner-line: rgba(217, 181, 88, .3);
    --about-ornament: #d9b558;
    --about-ornament-soft: rgba(217, 181, 88, .2);
    --about-ray: rgba(217, 181, 88, .13);
    --about-halo: rgba(217, 181, 88, .18);
    --about-frame-bg: #16211d;
    --about-frame-shadow: 0 20px 44px rgba(0, 0, 0, .5);
    --about-chip-bg: rgba(22, 33, 29, .85);
    --about-chip-border: rgba(217, 181, 88, .4);
    --about-chip-text: #d6e3dd;
    --about-cta-bg: rgba(217, 181, 88, .1);
    --about-cta-text: #e8ce6a;
    --about-cta-shine: rgba(255, 255, 255, .14);
    --about-cta-shadow: rgba(0, 0, 0, .45);

    /* دکمه غیرفعال در حالت تاریک: سطح کمی روشن‌تر با متن خاکستری روشن */
    --btn-disabled-bg: #253430;
    --btn-disabled-border: #33453e;
    --btn-disabled-text: #a9bcb4;

    /* نگاشت متغیرهای بوت‌استرپ به پالت تاریک قالب (رنگ‌های پیش‌فرض بوت‌استرپ
       آبی/خاکستری‌اند و با تم سبز سایت هم‌خوانی ندارند) */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 60, 199, 154;
    --bs-danger-rgb: 255, 143, 132;
    --bs-success-rgb: 111, 220, 178;
    --bs-warning-rgb: 255, 212, 121;
    --bs-link-color-rgb: 60, 199, 154;
    --bs-link-hover-color-rgb: 111, 220, 178;
    --bs-body-bg: var(--color-surface);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-bg: var(--color-surface-muted);
    --bs-tertiary-bg: var(--color-surface-muted);

    /* الگوها روی پس‌زمینه تاریک با خطوط روشن‌تر رسم می‌شوند */
    --pattern-green: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%233CC79A'%20stroke-opacity='.12'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-white: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%23FFFFFF'%20stroke-opacity='.07'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-gold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%23D9B558'%20stroke-opacity='.16'%20stroke-width='1.3'%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'/%3E%3Crect%20x='22'%20y='22'%20width='52'%20height='52'%20transform='rotate(45%2048%2048)'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%200%200)'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='-26'%20width='52'%20height='52'%20transform='rotate(45%2096%200)'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='-26'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%200%2096)'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'/%3E%3Crect%20x='70'%20y='70'%20width='52'%20height='52'%20transform='rotate(45%2096%2096)'/%3E%3C/g%3E%3C/svg%3E");

    /* سایه‌ها روی پس‌زمینه تاریک پررنگ‌تر دیده می‌شوند */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .38);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}

/* ---------- پایه ---------- */

html {
    scroll-behavior: smooth;
}

/* وقتی به یک بخش با پیوند درون‌صفحه‌ای می‌رویم، عنوانش زیر هدر چسبان پنهان نشود. */
[id] {
    scroll-margin-top: calc(var(--site-header-height) + .75rem);
}

.site-body {
    font-family: var(--font-family-fa);
    color: var(--color-text);
    background-color: var(--color-page);
    line-height: 1.85;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-fa);
    color: var(--color-heading);
    font-weight: 700;
    line-height: 1.55;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
    /* یک پس‌زمینه پیوسته برای کل ناحیه محتوا؛ همه بخش‌ها روی همین سطح
       می‌نشینند تا مرز بین سکشن‌ها دیده نشود. */
    background-image: var(--page-wash);
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: .75rem 1.25rem;
    z-index: 2000;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    inset-inline-start: 0;
}

/* ---------- کنترل‌های فرم بوت‌استرپ ----------
   رنگ فوکوس، چک‌باکس، رادیو و اسلایدر با پالت سبز قالب هم‌رنگ می‌شوند تا
   حالت تاریک و روشن هر دو یکدست بمانند (پیش‌فرض بوت‌استرپ آبی است). */

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--focus-ring);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--focus-ring);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* در حالت تاریک سبز روشن است، پس تیک و نقطه انتخاب باید تیره باشد */
[data-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2308150f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2308150f'/%3e%3c/svg%3e");
}

/* ---------- دکمه‌ها ---------- */

.btn {
    font-family: var(--font-family-fa);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: .6rem 1.4rem;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    /* متغیرهای بوت‌استرپ هم بازنویسی می‌شوند تا حالت‌های hover/active/disabled
       دکمه به رنگ پیش‌فرض آبی بوت‌استرپ برنگردد. */
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary-hover-bg);
    --bs-btn-hover-border-color: var(--color-primary-hover-bg);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-hover-bg);
    --bs-btn-active-border-color: var(--color-primary-hover-bg);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-border);
    --bs-btn-disabled-color: var(--btn-disabled-text);
}

/* دکمه‌های غیرفعال در همه رنگ‌ها یکدست و خوانا دیده شوند
   (بوت‌استرپ برای disabled از رنگ اصلی همان دکمه استفاده می‌کند). */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-text);
    box-shadow: none;
    opacity: 1;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover-bg);
    border-color: var(--color-primary-hover-bg);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-active-color: var(--color-on-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-link {
    color: var(--color-primary);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--color-primary-hover);
}

.btn-lg {
    padding: .8rem 1.9rem;
    font-size: 1.05rem;
}

/* دکمه خطی ثانویه؛ خاکستری پیش‌فرض بوت‌استرپ روی زمینه‌های کم‌رنگ (مانند
   پس‌زمینه پنل مدیریت) مرز خوانایی را رد می‌کند، پس رنگ متن قالب استفاده می‌شود. */
.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
    --bs-btn-color: var(--color-text-muted);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-text-muted);
    --bs-btn-hover-border-color: var(--color-text-muted);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-text-muted);
    --bs-btn-active-border-color: var(--color-text-muted);
}

/* ---------- دکمه‌های خطی ثانویه/خطر در حالت تاریک ----------
   بوت‌استرپ رنگ متن این دکمه‌ها را ثابت نگه می‌دارد (#6c757d / #dc3545) که روی
   زمینه تاریک کم‌کنتراست می‌شود؛ اینجا رنگ‌های روشن‌تر قالب جایگزین می‌گردد. */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-border-strong);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-border-strong);
    --bs-btn-active-border-color: var(--color-border-strong);
    --bs-btn-disabled-color: var(--btn-disabled-text);
    --bs-btn-disabled-border-color: var(--btn-disabled-border);
}

[data-theme="dark"] .btn-outline-danger {
    color: var(--color-danger-text);
    border-color: var(--color-danger-text);
    --bs-btn-color: var(--color-danger-text);
    --bs-btn-border-color: var(--color-danger-text);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-danger-text);
    --bs-btn-hover-border-color: var(--color-danger-text);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-danger-text);
    --bs-btn-active-border-color: var(--color-danger-text);
    --bs-btn-disabled-color: var(--btn-disabled-text);
    --bs-btn-disabled-border-color: var(--btn-disabled-border);
}

/* ---------- هدر و منو ---------- */

/* ---------- نوار بالایی سربرگ (فقط دسکتاپ) ---------- */

.site-topbar {
    display: none;
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
}

.site-topbar-list {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.site-topbar-link,
.site-topbar-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
}

.site-topbar-link:hover {
    color: #fff;
}

.site-topbar-link > i,
.site-topbar-note > i {
    color: var(--color-accent);
    font-size: .9rem;
}

.site-topbar-social {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-topbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.site-topbar-social-link:hover,
.site-topbar-social-link:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* در حالت تارک نوار بالایی کم‌رنگ‌تر می‌شود تا با صفحه هماهنگ بماند */
[data-theme="dark"] .site-topbar {
    background: var(--color-primary-strong);
    border-bottom-color: rgba(255, 255, 255, .08);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--color-header-bg);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition-base);
}

/* هنگام اسکرول، سربرگ با سایه ملایم از محتوا جدا می‌شود (کلاس با site-header.js) */
.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

/* نوار تزئینی اسلامی بالای سربرگ */
.site-header::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 42%, var(--color-primary-dark) 100%);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    position: relative;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-heading);
    /* برند هرگز فشرده نمی‌شود؛ فشردگی فضای کم را روی منو جبران می‌کنیم */
    flex: 0 0 auto;
}

.site-brand:hover {
    color: var(--color-primary);
}

.site-logo {
    max-height: 52px;
    width: auto;
}

/* لوگوی خوش‌نویسی پیش‌فرض برند در فوتر */
.site-footer-logo {
    max-height: 44px;
}

.site-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    white-space: nowrap;
}

.site-brand-name {
    font-weight: 800;
    font-size: 1.15rem;
}

.site-brand-slogan {
    font-size: .78rem;
    color: var(--color-text-muted);
}

.site-nav-toggle-state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
    background: var(--color-surface);
    transition: background-color var(--transition-base);
}

.site-nav-toggle:hover {
    background: var(--color-surface-muted);
}

/* ---------- کلید تغییر حالت روشن/تاریک ---------- */

.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.site-theme-toggle:hover,
.site-theme-toggle:focus-visible {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

/* آیکون خورشید فقط در حالت تاریک دیده می‌شود */
.site-theme-toggle .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .site-theme-toggle .theme-icon-light {
    display: none;
}

[data-theme="dark"] .site-theme-toggle .theme-icon-dark {
    display: inline-block;
}

/* روی دسکتاپ منوی اصلی از سمت راست (کنار برند) شروع می‌شود و کلید حالت تاریک
   با حاشیه خودکار به سمت چپ هدر می‌رود. */
.site-nav {
    margin-inline-end: auto;
}

.site-nav-list {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav-item {
    position: relative;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .95rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: 600;
    font-size: .98rem;
    white-space: nowrap;
}

.site-nav-link:hover,
.site-nav-link.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.site-nav-submenu {
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.site-nav-item.has-children:hover .site-nav-submenu,
.site-nav-item.has-children:focus-within .site-nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav-sublink {
    display: block;
    padding: .5rem 1rem;
    color: var(--color-text);
    font-size: .95rem;
}

.site-nav-sublink:hover,
.site-nav-sublink.active {
    background: var(--color-surface-muted);
    color: var(--color-primary);
}

/* ---------- هدر و منو در حالت دسکتاپ ----------
   سربرگ دسکتاپ دو لایه است: نوار اطلاعات تماس (که با اسکرول می‌رود) و
   ردیف چسبان اصلی. منو نیز خلوت‌تر و خواناتر تنظیم می‌شود. */

@media (min-width: 992px) {
    .site-topbar {
        display: block;
    }

    .site-nav-list {
        gap: .15rem;
    }

    /* آیتم‌های منو روی دسکتاپ بدون آیکون نمایش داده می‌شوند تا ردیف منو خلوت
       بماند؛ آیکون‌ها در پنل کشویی موبایل سر جای خود هستند. */
    .site-nav-link {
        gap: .3rem;
        padding: .5rem .85rem;
        border-radius: 11px;
        font-size: .95rem;
        font-weight: 600;
        transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
    }

    .site-nav-link > i.site-nav-icon {
        display: none;
    }

    .site-nav-link:hover {
        color: var(--color-primary);
        background: var(--color-primary-light);
    }

    /* صفحه فعال با قرص گرادیانی مشخص می‌شود تا کاربر جای خود را در سایت ببیند */
    .site-nav-link.active {
        color: var(--color-on-primary);
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
        box-shadow: 0 8px 18px -10px var(--color-primary-dark);
    }

    /* نشانه زیرمنو؛ هنگام هاور می‌چرخد تا باز شدن منو روشن باشد */
    .site-nav-caret {
        font-size: .62rem;
        opacity: .65;
        transition: transform var(--transition-base);
    }

    .site-nav-item.has-children:hover .site-nav-caret,
    .site-nav-item.has-children:focus-within .site-nav-caret {
        transform: rotate(180deg);
    }

    /* منوی زیرمجموعه: کارت بازشوی نرم با نشانگر کناری */
    .site-nav-submenu {
        min-width: 232px;
        padding: .35rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        transform: translateY(4px);
    }

    .site-nav-item.has-children:hover .site-nav-submenu,
    .site-nav-item.has-children:focus-within .site-nav-submenu {
        transform: translateY(0);
    }

    .site-nav-sublink {
        border-radius: var(--radius-sm);
        padding: .55rem .75rem;
        font-size: .93rem;
        font-weight: 500;
        transition: background-color var(--transition-base), color var(--transition-base), padding-inline-end var(--transition-base);
    }

    .site-nav-sublink:hover,
    .site-nav-sublink.active {
        padding-inline-end: 1.05rem;
    }

    /* حلقه فوکوس برای پیمایش با صفحه‌کلید */
    .site-nav-link:focus-visible,
    .site-nav-sublink:focus-visible,
    .site-topbar-link:focus-visible,
    .site-topbar-social-link:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* شعار کنار نام سایت فقط در عرض‌های بزرگ نمایش داده می‌شود تا ردیف منو
       در نمایشگرهای معمول جا داشته باشد. */
    .site-brand-slogan {
        display: none;
    }
}

@media (min-width: 1400px) {
    .site-brand-slogan {
        display: block;
    }
}

/* منوی پرتعداد (کلاس is-dense از خود کامپوننت سربرگ) جمع‌تر نمایش داده می‌شود */
@media (min-width: 992px) {
    .site-header-inner.is-dense .site-nav-list {
        gap: .1rem;
    }

    .site-header-inner.is-dense .site-nav-link {
        padding: .48rem .7rem;
        font-size: .92rem;
    }
}

/* پیش از لایه دسکتاپ، منو در عرض‌های میانی کمی جمع‌تر می‌شود */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .site-nav-link {
        padding: .45rem .65rem;
        font-size: .9rem;
    }

    .site-logo {
        max-height: 46px;
    }

    .site-brand-name {
        font-size: 1.05rem;
    }

    /* در عرض‌های میانی، نام سایت پنهان و فقط لوگو نمایش داده می‌شود تا منو
       جای کافی داشته باشد (لوگو خودش نام بنیاد را در بر دارد). */
    .site-header-inner.is-dense .site-brand-text {
        display: none;
    }
}

/* ---------- بخش Hero صفحه اصلی ---------- */

.hero-home {
    /* هدر متنی جایگزین (وقتی اسلایدی وجود ندارد): گرادیان ملایم که در پایین
       به شفاف می‌رسد تا به پس‌زمینه پیوسته صفحه وصل شود، بدون خط جداکننده. */
    background-image: linear-gradient(180deg, var(--color-primary-light) 0%, transparent 100%);
    padding: 4.5rem 0 3.5rem;
}

.hero-home-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 3rem;
}

/* ستون متنی هدر صفحه اصلی؛ برای کنترل عرض متن روی نمایشگرهای بزرگ */
.hero-home-text {
    max-width: 42rem;
}

.hero-home-text > :last-child {
    margin-bottom: 0;
}

.hero-eyebrow {
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    max-width: 42rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-home-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ---------- اسلایدر هدر صفحه اصلی ---------- */

.hero-slider {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary-strong);
    background-image: var(--pattern-white), var(--hero-gradient);
}

.hero-slider:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ---------- سربرگ صفحه اصلی: اسلایدر + لینک‌های مفید ----------
   این بخش تمام‌عرض نیست و داخل عرض قالب می‌نشیند؛ در سمت راست ستون
   «لینک‌های مفید» (تصویری) و در سمت چپ اسلایدر تصویری قرار می‌گیرد. */

.home-hero {
    padding-block: 1.5rem .5rem;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr);
    gap: 1rem;
    align-items: stretch;
}

/* اگر یکی از دو بخش وجود نداشته باشد، دیگری تمام عرض را می‌گیرد */
.home-hero-grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.home-hero .hero-slider {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* ستون لینک‌های مفید: هر لینک یک تصویر کلیک‌پذیر هم‌ارتفاع با دیگران.
   تصویر داخل کارت مطلق است تا ارتفاع ستون را تعیین نکند؛ بنابراین ارتفاع
   ستون از اسلایدر (نسبت ۱۶:۶.۵) می‌آید و چهار لینک به‌طور مساوی در آن
   پخش می‌شوند. */
.home-links {
    display: grid;
    grid-auto-rows: 1fr;
    gap: .85rem;
    min-height: 0;
}

/* وقتی اسلایدری وجود ندارد، هر کارت نسبت خودش را می‌سازد */
.home-hero-grid--solo .home-links {
    grid-auto-rows: auto;
}

.home-hero-grid--solo .home-link-card {
    aspect-ratio: 3 / 1;
}

.home-link-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.home-link-card img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease-in-out;
}

.home-link-card:hover,
.home-link-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.home-link-card:hover img,
.home-link-card:focus-visible img {
    transform: scale(1.03);
}

.home-link-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.5rem;
}

/* نسبت تصاویر اسلاید: ۱۶ به ۶.۵ (مثلاً ۱۶۰۰×۶۵۰ پیکسل) */
.hero-slider-viewport {
    position: relative;
    aspect-ratio: 16 / 6.5;
    overflow: hidden;
}

.hero-slider-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.hero-slider.is-ready .hero-slider-track {
    transition: transform 650ms cubic-bezier(.4, 0, .2, 1);
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* پوشش شفاف روی تصویر اسلاید:
   اسلاید متنی ندارد؛ در صورت تعیین «لینک اسلاید»، همین پوشش کل تصویر را
   قابل کلیک می‌کند. */
.hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

/* دکمه‌های پیمایش */
.hero-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.85rem;
    height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(6, 32, 23, .38);
    color: #fff;
    font-size: 1.1rem;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.hero-slider-nav:hover,
.hero-slider-nav:focus-visible {
    background: rgba(6, 32, 23, .74);
    border-color: #fff;
}

.hero-slider-prev {
    inset-inline-start: 1.25rem;
}

.hero-slider-next {
    inset-inline-end: 1.25rem;
}

/* نقطه‌های انتخاب اسلاید (ناحیه لمس بزرگ‌تر از نشانگر دیداری) */
.hero-slider-dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: .5rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .1rem;
}

.hero-slider-dot {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-slider-dot::before {
    content: '';
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: width 220ms ease, border-radius 220ms ease, background-color 220ms ease;
}

.hero-slider-dot:hover::before,
.hero-slider-dot:focus-visible::before {
    background: rgba(255, 255, 255, .82);
}

.hero-slider-dot.is-active::before {
    width: 1.5rem;
    border-radius: 999px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider.is-ready .hero-slider-track {
        transition: none;
    }

    .hero-slider-dot::before {
        transition: none;
    }
}

/* ---------- بخش‌ها ---------- */

.section {
    padding: 3.5rem 0;
}

.section-surface {
    /* به‌جای پس‌زمینه متمایز و مرز بالا/پایین، فقط یک هاله ملایم که در دو سر
       به شفاف می‌رسد؛ بنابراین هیچ باند یا خطی بین سکشن‌ها دیده نمی‌شود. */
    background-image: linear-gradient(180deg, transparent 0%, var(--section-tint) 50%, transparent 100%);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.section-title {
    position: relative;
    font-size: 1.65rem;
    margin-bottom: 0;
    padding-bottom: .6rem;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-accent);
}

.section-link {
    font-weight: 600;
    white-space: nowrap;
}

.section-text {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-top: 1.25rem;
}

/* ---------- معرفی بنیاد در صفحه اصلی (سکشن «درباره ما») ----------
   طراحی اختصاصی این بخش: قاب کاغذی با خطوط طلایی و گوشه‌های تزئینی،
   شمسهٔ شعاعی کم‌رنگ در پس‌زمینه و تصویر در قاب «محرابی».
   این زبان بصری با الگوی ستارهٔ هشت‌پر سایر بخش‌ها (کارت حدیث و CTA) یکی نیست. */

.home-about {
    position: relative;
    padding: 4.5rem 0;
    overflow: hidden;
}

/*
    لایه رنگی این بخش روی یک شبه‌عنصر می‌نشیند و با ماسک عمودی در بالا و پایین
    به صفر می‌رسد؛ به همین دلیل لبه‌های سکشن هیچ گام رنگی (خط/باند) ایجاد نمی‌کنند
    و پس‌زمینه کل صفحه یکدست دیده می‌شود.
*/
.home-about::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(120% 90% at 82% 8%, var(--about-wash-accent) 0%, transparent 58%),
        radial-gradient(100% 80% at 10% 92%, var(--about-wash-primary) 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* شمسهٔ شعاعی: پرتوی ملایم طلایی که با ماسک دایره‌ای محو می‌شود */
.home-about-shine {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -6rem;
    width: 34rem;
    height: 34rem;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: repeating-conic-gradient(
        from 0deg,
        var(--about-ray) 0deg 3.2deg,
        transparent 3.2deg 9deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 70%);
    opacity: .55;
}

.home-about-panel {
    position: relative;
    padding: 3rem 3.25rem;
    border-radius: var(--radius-lg);
    background: var(--about-panel-bg);
    border: 1px solid var(--about-panel-border);
    box-shadow: var(--about-panel-shadow);
}

/* قاب داخلی طلایی: خط دوم داخل پنل، مثل حاشیهٔ نسخه‌های خطی */
.home-about-panel::before {
    content: "";
    position: absolute;
    inset: .7rem;
    border: 1px solid var(--about-inner-line);
    border-radius: calc(var(--radius-lg) - .5rem);
    pointer-events: none;
}

/* گوشه‌های تزئینی: براکت‌های L شکل طلایی */
.home-about-corner {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--about-ornament);
    pointer-events: none;
}

.home-about-corner--tl {
    inset-block-start: 1.45rem;
    inset-inline-start: 1.45rem;
    border-width: 2px 0 0 2px;
    border-start-start-radius: 6px;
}

.home-about-corner--tr {
    inset-block-start: 1.45rem;
    inset-inline-end: 1.45rem;
    border-width: 2px 2px 0 0;
    border-start-end-radius: 6px;
}

.home-about-corner--bl {
    inset-block-end: 1.45rem;
    inset-inline-start: 1.45rem;
    border-width: 0 0 2px 2px;
    border-end-start-radius: 6px;
}

.home-about-corner--br {
    inset-block-end: 1.45rem;
    inset-inline-end: 1.45rem;
    border-width: 0 2px 2px 0;
    border-end-end-radius: 6px;
}

.home-about-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 3.25rem;
}

.home-about-text > :last-child {
    margin-bottom: 0;
}

/* برچسب بالای عنوان: قرص کوچک با نشان شمسه */
.home-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .35rem 1rem .35rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--about-chip-border);
    background: var(--about-chip-bg);
    color: var(--about-chip-text);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2px;
}

.home-about-eyebrow::before {
    content: "";
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
    rotate: 45deg;
    border: 1.5px solid var(--about-ornament);
    background: var(--about-ornament-soft);
}

.home-about-title {
    font-size: 1.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* جداکنندهٔ طلایی با نگین لوزی در میانه */
.home-about-divider {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: min(15rem, 70%);
    margin: 1.1rem 0 1.4rem;
}

.home-about-divider::before,
.home-about-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
}

.home-about-divider::before {
    background: linear-gradient(90deg, var(--about-ornament), transparent);
}

.home-about-divider::after {
    background: linear-gradient(270deg, var(--about-ornament), transparent);
}

.home-about-divider span {
    width: .6rem;
    height: .6rem;
    flex: 0 0 auto;
    rotate: 45deg;
    border: 1.5px solid var(--about-ornament);
    background: var(--about-ornament-soft);
}

.home-about-body {
    color: var(--color-text-muted);
    font-size: 1.06rem;
    line-height: 2.05;
    margin-bottom: 1.9rem;
}

/* دکمهٔ اختصاصی این بخش: قاب طلایی با درخشش ملایم هنگام هاور */
.home-about-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .72rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--about-ornament);
    background: var(--about-cta-bg);
    color: var(--about-cta-text);
    font-weight: 700;
    font-size: .98rem;
    overflow: hidden;
    transition: background-color var(--transition-base), color var(--transition-base),
                box-shadow var(--transition-base), transform var(--transition-base);
}

.home-about-cta::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, var(--about-cta-shine), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start 620ms ease;
}

.home-about-cta i {
    transition: transform var(--transition-base);
}

.home-about-cta:hover,
.home-about-cta:focus-visible {
    background: var(--about-ornament);
    color: var(--color-on-accent);
    box-shadow: 0 10px 26px var(--about-cta-shadow);
    transform: translateY(-2px);
}

.home-about-cta:hover::after,
.home-about-cta:focus-visible::after {
    inset-inline-start: 115%;
}

.home-about-cta:hover i,
.home-about-cta:focus-visible i {
    transform: translateX(-4px);
}

/* ---------- قاب «محرابی» تصویر ---------- */

.home-about-arch {
    position: relative;
    margin: 0 auto;
    width: min(22rem, 100%);
}

/* هالهٔ طلایی پشت قوس */
.home-about-arch::before {
    content: "";
    position: absolute;
    inset: -1.6rem -1.6rem -.9rem;
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 42% 42% 8% 8%;
    background: radial-gradient(60% 55% at 50% 22%, var(--about-halo) 0%, transparent 72%);
    pointer-events: none;
}

.home-about-arch-frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    padding: .55rem;
    border-radius: 46% 46% var(--radius-md) var(--radius-md) / 34% 34% 7% 7%;
    border: 1.5px solid var(--about-ornament);
    background: var(--about-frame-bg);
    box-shadow: var(--about-frame-shadow);
    overflow: hidden;
}

/* خط دوم داخل قوس، مانند حاشیهٔ محراب */
.home-about-arch-frame::after {
    content: "";
    position: absolute;
    inset: .55rem;
    border: 1px solid var(--about-inner-line);
    border-radius: 45% 45% 9px 9px / 33% 33% 6% 6%;
    pointer-events: none;
}

.home-about-arch-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 45% 45% calc(var(--radius-md) - .55rem) calc(var(--radius-md) - .55rem) / 33% 33% 6% 6%;
}

/* جای‌گزین تصویر: نگین شمسه در میانهٔ قوس */
.home-about-arch-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 45% 45% calc(var(--radius-md) - .55rem) calc(var(--radius-md) - .55rem) / 33% 33% 6% 6%;
    background:
        repeating-conic-gradient(from 0deg, var(--about-ray) 0deg 3.2deg, transparent 3.2deg 9deg),
        linear-gradient(160deg, var(--about-wash-primary) 0%, var(--about-wash-accent) 100%);
    color: var(--about-ornament);
    font-size: 2.6rem;
}

/* نگین لوزی زیر قوس */
.home-about-arch-gem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.15rem;
}

.home-about-arch-gem::before,
.home-about-arch-gem::after {
    content: "";
    width: 2.4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--about-ornament));
}

.home-about-arch-gem::after {
    background: linear-gradient(270deg, transparent, var(--about-ornament));
}

.home-about-arch-gem i {
    width: .55rem;
    height: .55rem;
    rotate: 45deg;
    border: 1.5px solid var(--about-ornament);
    background: var(--about-ornament-soft);
}

@media (prefers-reduced-motion: reduce) {
    .home-about-cta,
    .home-about-cta::after,
    .home-about-cta i {
        transition: none;
    }
}

/* ---------- بخش حدیث نهج‌البلاغه ---------- */

.home-quote {
    padding: 3rem 0;
}

.home-quote-card {
    position: relative;
    margin: 0;
    padding: 2.5rem 2.75rem;
    text-align: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-strong);
    background-image: var(--pattern-gold);
    color: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* دو خط تزئینی طلایی بالا و پایین کارت */
.home-quote-card::before,
.home-quote-card::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 72px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0), var(--color-accent), rgba(201, 162, 39, 0));
}

.home-quote-card::before {
    top: 1.4rem;
}

.home-quote-card::after {
    bottom: 1.4rem;
}

.home-quote-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(255, 255, 255, .05);
}

.home-quote-text {
    margin: 0 auto 1rem;
    max-width: 46rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 2.1;
    color: #fff;
}

.home-quote-source {
    margin-bottom: 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .78);
}

.home-quote-source b {
    color: var(--color-accent-on-strong);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .home-quote-card {
        padding: 2rem 1.4rem;
    }

    .home-quote-text {
        font-size: 1.12rem;
    }
}

/* ---------- کارت محتوا (خبر و رویداد) ---------- */

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
}

.content-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.content-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.content-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.content-card:hover .content-card-media img {
    transform: scale(1.03);
}

.content-card-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-on-subtle);
    font-size: 2.4rem;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
}

.content-card-date-badge {
    position: absolute;
    bottom: .75rem;
    inset-inline-start: .75rem;
    background: var(--color-chip-bg);
    border-radius: var(--radius-sm);
    padding: .35rem .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
    line-height: 1.3;
}

.content-card-date-day {
    font-weight: 700;
    font-size: .85rem;
    color: var(--color-primary);
}

.content-card-date-time {
    font-size: .75rem;
    color: var(--color-text-muted);
}

.content-card-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem 1.4rem 1.5rem;
    flex: 1 1 auto;
}

.content-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .82rem;
    color: var(--color-text-muted);
}

.content-card-meta i {
    margin-inline-end: .3rem;
    color: var(--color-accent);
}

.content-card-title {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.content-card-title a {
    color: var(--color-heading);
}

.content-card-title a:hover {
    color: var(--color-primary);
}

.content-card-summary {
    color: var(--color-text-muted);
    font-size: .95rem;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-card-link {
    margin-top: auto;
    font-weight: 600;
    font-size: .92rem;
}

.content-card-link i {
    transition: transform var(--transition-base);
}

.content-card-link:hover i {
    transform: translateX(-4px);
}

/* ---------- کاروسل محتوا (اخبار و رویدادها) ---------- */

/* تعداد کارت‌های قابل مشاهده در هر عرض صفحه؛ مقادیر اعشاری کارت بعدی را
   «نیمه‌نمایان» می‌کنند تا کاربر بفهمد موارد بیشتری وجود دارد. */
.content-carousel {
    --carousel-gap: 1.5rem;
    --carousel-per-view: 3;
    position: relative;
}

.section-header-carousel {
    align-items: center;
}

.section-header-text {
    min-width: 0;
}

.section-header-text .section-title {
    margin-bottom: 0;
}

.section-subtitle {
    color: var(--color-text-muted);
    font-size: .95rem;
    margin: .5rem 0 0;
}

.section-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
}

.content-carousel-nav {
    display: flex;
    gap: .4rem;
}

/* اگر همه کارت‌ها هم‌زمان دیده شوند (مثلاً سه خبر در دسکتاپ)، دکمه‌های پیمایش لازم نیستند */
.section:not(.is-carousel-scrollable) .content-carousel-nav {
    display: none;
}

.content-carousel-nav-button {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
}

.content-carousel-nav-button:hover:not(:disabled),
.content-carousel-nav-button:focus-visible:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.content-carousel-nav-button:disabled {
    opacity: .35;
    cursor: default;
}

/* ناحیه پیمایش: خود مرورگر اسکرول و snap را انجام می‌دهد تا روی موبایل کشیدن
   انگشت بدون جاوااسکریپت هم کار کند. نوار اسکرول پنهان می‌شود. */
.content-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* فضای عمودی برای سایه و حرکت کوتاه کارت‌ها هنگام هاور؛ فاصله افقی اضافه
       نمی‌شود تا لبه کارت اول دقیقاً با لبه محتوا هم‌تراز باشد (وگرنه این
       جابه‌جایی کوچک، محل توقف snap را به کارت بعدی می‌برد). */
    padding: .5rem 0 1.25rem;
    margin: -.5rem 0 -1.25rem;
}

.content-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.content-carousel-track {
    display: flex;
    align-items: stretch;
    gap: var(--carousel-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-carousel-item {
    flex: 0 0 calc((100% - (var(--carousel-gap) * (var(--carousel-per-view) - 1))) / var(--carousel-per-view));
    display: flex;
    scroll-snap-align: start;
}

.content-carousel-item > * {
    flex: 1 1 auto;
    height: 100%;
}

/* نقطه‌های وضعیت (روی موبایل و تبلت نمایش داده می‌شوند) */
.content-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .1rem;
    margin-top: .35rem;
}

.content-carousel-dots[hidden] {
    display: none;
}

.content-carousel-dot {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-carousel-dot::before {
    content: '';
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(14, 107, 79, .28);
    transition: width 200ms ease, border-radius 200ms ease, background-color 200ms ease;
}

.content-carousel-dot:hover::before,
.content-carousel-dot:focus-visible::before {
    background: rgba(14, 107, 79, .55);
}

.content-carousel-dot.is-active::before {
    width: 1.35rem;
    border-radius: 999px;
    background: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .content-carousel-dot::before {
        transition: none;
    }

    .content-carousel-viewport {
        scroll-behavior: auto;
    }
}

/* در دسکتاپ که سه کارت کامل دیده می‌شود، نقطه‌ها ضروری نیستند */
@media (min-width: 992px) {
    .content-carousel-dots {
        display: none;
    }
}

/* ---------- بنر CTA صفحه اصلی ---------- */

.cta-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    background-image: var(--pattern-gold), var(--cta-gradient);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 2.75rem;
    box-shadow: var(--shadow-lg);
}

.cta-title {
    color: #fff;
    font-size: 1.7rem;
    margin-bottom: .75rem;
}

.cta-text {
    min-width: 0;
}

.cta-description {
    color: rgba(255, 255, 255, .88);
    margin-bottom: 1.25rem;
}

.cta-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    font-size: .95rem;
}

.cta-contact-list a,
.cta-contact-list span {
    color: #fff;
}

.cta-contact-list i {
    margin-inline-end: .4rem;
    opacity: .85;
}

.cta-actions .btn {
    /* این دکمه همیشه روی کارت سبز قرار می‌گیرد؛ بنابراین در هر دو حالت روشن و
       تاریک سفید می‌ماند و متن آن سبز پرمایه است تا کنتراست کافی داشته باشد. */
    background: #fff;
    border-color: #fff;
    color: #094b37;
    font-weight: 700;
}

.cta-actions .btn:hover {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .9);
}

/* ---------- سرصفحه صفحات داخلی ---------- */

.page-header {
    /* سرصفحه صفحات داخلی: هاله‌ای که در هر دو سر به شفاف می‌رسد تا لبه بالا و
       پایین آن هیچ خط جداکننده‌ای نسازد. */
    background-image: linear-gradient(180deg, transparent 0%, var(--page-header-tint) 45%, transparent 100%);
    padding: 2.5rem 0;
}

.page-title {
    font-size: 2rem;
    margin-bottom: .5rem;
}

/* سربرگ صفحه‌های جزئیات (خبر و رویداد)؛ فاصله کمی بیشتر برای متادیتای زیر عنوان */
.page-header-details {
    padding-bottom: 2rem;
}

.page-header-details .page-title {
    margin-bottom: .85rem;
}

.page-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.page-breadcrumb .breadcrumb {
    font-size: .85rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: none;
    padding-inline: .5rem;
}

/* ---------- صفحه جزئیات خبر و رویداد ---------- */

.details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    margin-top: .75rem;
    color: var(--color-text-muted);
    font-size: .9rem;
}

.details-meta i {
    margin-inline-end: .35rem;
    color: var(--color-accent);
}

.article-content {
    max-width: 60rem;
    margin: 0 auto;
}

.article-media {
    margin: 0 0 1.75rem;
}

.article-media img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.contact-info-empty {
    color: var(--color-text-muted);
    font-size: .92rem;
    margin-bottom: 0;
}

.article-lead {
    font-size: 1.15rem;
    color: var(--color-heading);
    font-weight: 600;
    border-inline-start: 4px solid var(--color-accent);
    padding-inline-start: 1rem;
    margin-bottom: 1.75rem;
}

.rich-content {
    font-size: 1.05rem;
    line-height: 2.05;
}

.rich-content h2,
.rich-content h3,
.rich-content h4 {
    margin-top: 2rem;
    margin-bottom: .85rem;
}

.rich-content p {
    margin-bottom: 1.15rem;
}

.rich-content ul,
.rich-content ol {
    padding-inline-start: 1.6rem;
    margin-bottom: 1.15rem;
}

.rich-content li {
    margin-bottom: .45rem;
}

.rich-content blockquote {
    background: var(--color-surface-muted);
    border-inline-start: 4px solid var(--color-primary);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    margin: 1.5rem 0;
}

.rich-content img {
    border-radius: var(--radius-md);
    margin: 1rem 0;
}

.article-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* ---------- گالری ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.15rem;
    margin-top: 1.75rem;
}

.gallery-item {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-item figcaption {
    padding: .65rem .85rem;
    font-size: .85rem;
    color: var(--color-text-muted);
}

/* ---------- صفحه درباره ما ---------- */

.about-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 3rem;
    align-items: start;
}

.about-content {
    font-size: 1.05rem;
    line-height: 2.05;
}

.about-content h2,
.about-content h3 {
    margin-top: 1.75rem;
}

.about-content ul,
.about-content ol {
    padding-inline-start: 1.6rem;
}

.about-media {
    margin: 0;
}

.about-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.about-media figcaption {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------- تب‌های معاونت‌ها (صفحه درباره ما) ---------- */

.about-tabs {
    margin-top: 2rem;
}

.about-tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.about-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-heading);
    font-weight: 600;
    font-size: .97rem;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.about-tab i {
    color: var(--color-primary);
    font-size: 1.05rem;
}

.about-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.about-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-sm);
}

.about-tab.is-active i {
    color: var(--color-accent);
}

.about-tabs-panels {
    margin-top: 1.5rem;
}

.about-tab-panel {
    padding: 1.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* پنهان کردن پنل‌های غیرفعال فقط زمانی که اسکریپت تب‌ها فعال شده است؛
   بدون جاوااسکریپت همه معاونت‌ها پشت‌سرهم نمایش داده می‌شوند. */
.about-tabs[data-about-tabs-enhanced] .about-tab-panel {
    display: none;
}

.about-tabs[data-about-tabs-enhanced] .about-tab-panel.is-active {
    display: block;
}

.about-unit-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
    margin-bottom: .85rem;
}

.about-unit-title i {
    color: var(--color-primary);
}

.about-unit-summary {
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 1rem;
}

.about-unit-content {
    line-height: 2;
}

.about-unit-content > :last-child {
    margin-bottom: 0;
}

.about-unit-empty {
    margin: 1.5rem 0 0;
    padding: .85rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: .92rem;
}

.about-people-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    margin: 1.9rem 0 1.1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--color-border);
}

.about-people-title i {
    color: var(--color-accent);
}

/* ---------- کارت معاون و کارشناس ---------- */

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem;
}

.people-grid-managers {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.person-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.person-card.is-manager {
    border-top: 3px solid var(--color-accent);
}

.person-photo {
    margin: 0;
    background: var(--color-primary-light);
}

.person-photo img {
    display: block;
    width: 100%;
    height: 200px;
    /* چهره افراد در تصاویر پرتره در مرکز بالا حفظ می‌شود */
    object-fit: cover;
    object-position: center 18%;
}

.person-card.is-manager .person-photo img {
    height: 320px;
}

.person-photo-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 200px;
    color: var(--color-primary);
    font-size: 3rem;
    opacity: .45;
}

.person-card.is-manager .person-photo-placeholder {
    height: 320px;
}

.person-body {
    padding: 1rem 1.1rem 1.2rem;
}

.person-name {
    font-size: 1rem;
    margin-bottom: .3rem;
}

.person-card.is-manager .person-name {
    font-size: 1.15rem;
}

.person-role {
    color: var(--color-primary);
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: .7rem;
}

.person-card.is-manager .person-role {
    color: #8a6d16;
}

.person-bio {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.95;
}

.person-bio > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .about-tab-panel {
        padding: 1.25rem;
    }

    .about-tab {
        flex: 1 1 100%;
        justify-content: center;
        padding: .65rem 1rem;
    }

    .people-grid,
    .people-grid-managers {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .person-photo img,
    .person-photo-placeholder {
        height: 165px;
    }

    .person-card.is-manager .person-photo img,
    .person-card.is-manager .person-photo-placeholder {
        height: 235px;
    }
}

/* ---------- جستجو و فیلتر ---------- */

.app-search {
    display: flex;
    gap: .75rem;
    margin-bottom: 2rem;
    max-width: 46rem;
}

.app-search .form-control {
    border-radius: var(--radius-sm);
}

.app-search-inline {
    margin-bottom: 0;
    margin-inline-start: auto;
    max-width: 24rem;
}

.app-search-result {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.app-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.app-filter-link {
    padding: .45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    font-size: .92rem;
}

.app-filter-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.app-filter-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ---------- صفحه‌بندی ---------- */

.app-pagination {
    margin-top: 2.5rem;
}

.app-pagination .page-link {
    color: var(--color-primary);
    border-color: var(--color-border);
    min-width: 42px;
    text-align: center;
}

.app-pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.app-pagination-info {
    text-align: center;
    color: var(--color-text-muted);
    font-size: .85rem;
    margin-top: .75rem;
    margin-bottom: 0;
}

/* ---------- وضعیت خالی ---------- */

.app-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.app-empty-state i {
    font-size: 2.6rem;
    color: var(--color-primary);
    opacity: .65;
}

.app-empty-title {
    font-size: 1.2rem;
    margin: 1rem 0 .5rem;
}

.app-empty-description {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ---------- صفحه تماس با ما ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 2.5rem;
    align-items: start;
}

.contact-form-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.contact-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-info {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
}

.contact-info-title {
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact-info-list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.contact-info-list i {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-top: .25rem;
}

.contact-info-label {
    display: block;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.contact-info-value {
    display: block;
    font-weight: 600;
    color: var(--color-heading);
    word-break: break-word;
}

.contact-map {
    margin-top: 1.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.contact-map iframe {
    width: 100%;
    height: 240px;
    border: 0;
}

/* ---------- فوتر ---------- */

.site-footer {
    background-color: #0b3328;
    background-image: var(--pattern-white);
    border-top: 4px solid var(--color-accent);
    color: rgba(255, 255, 255, .82);
    padding: 3.5rem 0 1.5rem;
    margin-top: auto;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr 1.2fr;
    gap: 2.5rem;
}

/* ستون معرفی بنیاد در فوتر؛ کمی عریض‌تر از ستون‌های لینک است */
.site-footer-about {
    min-width: 0;
}

.site-footer-title {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.site-footer-logo {
    max-height: 44px;
}

.site-footer-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
}

.site-footer-text {
    font-size: .93rem;
    line-height: 1.95;
}

.site-footer-links,
.site-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .93rem;
}

.site-footer-links a {
    color: rgba(255, 255, 255, .82);
}

.site-footer-links a:hover {
    color: #fff;
    padding-inline-start: .25rem;
}

.site-footer-contact li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.site-footer-contact i {
    color: #86d3b0;
    margin-top: .25rem;
}

.site-footer-contact a {
    color: rgba(255, 255, 255, .82);
}

.site-footer-contact a:hover {
    color: #fff;
}

.site-social-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.site-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.05rem;
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.site-social-list a:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.site-footer-bottom {
    margin-top: 2.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem;
    text-align: center;
    color: rgba(255, 255, 255, .65);
}

/* ---------- حالت بارگذاری ---------- */

.page-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 4rem 1rem;
    color: var(--color-text-muted);
}

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

@media (max-width: 1199.98px) {
    .site-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .site-footer-column:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .site-nav-toggle {
        display: inline-flex;
        /* روی موبایل، دکمه منو به سمت چپ هدر می‌رود و کلید حالت تاریک در
           چپ‌ترین نقطه، کنار آن قرار می‌گیرد. */
        margin-inline-start: auto;
    }

    /* وقتی منو باز است، دکمه آن با رنگ اصلی برجسته می‌شود تا وضعیت باز/بسته
       از خود دکمه هم معلوم باشد. */
    .site-nav-toggle-state:focus-visible + .site-nav-toggle,
    .site-nav-toggle-state:checked + .site-nav-toggle {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* آیکون دکمه منو هنگام باز بودن به ضربدر تغییر می‌کند تا راه بستن منو
       روشن باشد (کد یونیکد آیکون bi-x-lg در فونت بوت‌استرپ). */
    .site-nav-toggle-state:checked + .site-nav-toggle .bi-list::before {
        content: "\f659";
    }

    .site-theme-toggle {
        width: 42px;
        height: 42px;
    }

    /* پنل کشویی منو؛ با انیمیشن کوتاه از بالا باز می‌شود. */
    .site-nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        margin-inline-end: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        display: none;
        padding: .85rem 1rem 1.35rem;
        max-height: calc(100vh - var(--site-header-height));
        max-height: calc(100dvh - var(--site-header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: site-nav-drop var(--transition-base) ease-out;
    }

    @keyframes site-nav-drop {
        from {
            opacity: 0;
            transform: translateY(-.5rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* فاصله پنل از لبه‌های گرد هدر تا محتوای منو از گوشه‌ها جدا بماند. */
    .site-nav-toggle-state:checked ~ .site-nav {
        display: block;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    /* هر آیتم منو یک قرص تمام‌عرض است؛ بنابراین حالت فعال و هاور
       به اندازه کل ردیف دیده می‌شود، نه فقط به اندازه متن. */
    .site-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
    }

    .site-nav-item {
        border-bottom: 0;
    }

    .site-nav-link {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: .7rem;
        min-height: 3rem;
        padding: .8rem 1.05rem;
        border-radius: var(--radius-md);
        font-size: 1rem;
        transition: background-color var(--transition-base), color var(--transition-base);
    }

    /* ستون باریک آیکون‌ها باعث می‌شود متن همه ردیف‌ها هم‌تراز بماند. */
    .site-nav-link > i {
        flex: 0 0 1.3rem;
        text-align: center;
        font-size: 1.15rem;
        color: var(--color-text-muted);
        transition: color var(--transition-base);
    }

    .site-nav-link:hover {
        background: var(--color-surface-muted);
        color: var(--color-primary);
    }

    .site-nav-link.active {
        background: var(--color-primary-light);
        color: var(--color-primary);
        font-weight: 700;
    }

    /* نشانگر طلایی کنار ردیف فعال (سمت شروع نوشتار در چیدمان راست‌به‌چپ). */
    .site-nav-link.active::before {
        content: "";
        position: absolute;
        inset-inline-start: .35rem;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 1.35rem;
        border-radius: 999px;
        background: var(--color-accent);
    }

    .site-nav-link:hover > i,
    .site-nav-link.active > i {
        color: var(--color-primary);
    }

    /* زیرمنوها روی موبایل همیشه باز و کمی تو رفته‌اند، قرص‌هایی کوچک‌تر با
       فاصله از لبه تا سلسله‌مراتب منو خوانا بماند. */
    .site-nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        margin: .15rem 0 .35rem;
        margin-inline-start: 1.6rem;
        padding: 0;
        min-width: 0;
    }

    .site-nav-sublink {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        padding: .55rem .85rem;
        border-radius: var(--radius-sm);
        font-size: .95rem;
        transition: background-color var(--transition-base), color var(--transition-base);
    }

    .site-nav-sublink:hover {
        background: var(--color-surface-muted);
        color: var(--color-primary);
    }

    .site-nav-sublink.active {
        background: var(--color-primary-light);
        color: var(--color-primary);
        font-weight: 600;
    }

    .hero-home {
        padding: 3rem 0 2.5rem;
    }

    .hero-home-inner,
    .home-about-grid,
    .about-grid,
    .contact-grid,
    .cta-card {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.05rem;
    }

    /* در تبلت و موبایل اسلایدر تمام‌عرض می‌شود و لینک‌های مفید در ستون‌هایی
       زیر آن و پس از اسلایدر قرار می‌گیرند. */
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
    }

    .home-hero-grid > .home-links {
        order: 2;
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        grid-auto-rows: auto;
        gap: .7rem;
    }

    .home-link-card {
        aspect-ratio: 3 / 1;
    }

    .content-carousel {
        --carousel-per-view: 2.25;
    }

    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .section {
        padding: 2.5rem 0;
    }

    /* سکشن «درباره ما» روی موبایل جمع‌تر می‌شود تا حاشیهٔ تزئینی جای محتوا را نگیرد */
    .home-about {
        padding: 3rem 0;
    }

    .home-about-panel {
        padding: 2.1rem 1.5rem;
    }

    .home-about-panel::before {
        inset: .5rem;
    }

    .home-about-corner {
        width: 1.1rem;
        height: 1.1rem;
    }

    .home-about-corner--tl,
    .home-about-corner--tr {
        inset-block-start: 1rem;
    }

    .home-about-corner--bl,
    .home-about-corner--br {
        inset-block-end: 1rem;
    }

    .home-about-corner--tl,
    .home-about-corner--bl {
        inset-inline-start: 1rem;
    }

    .home-about-corner--tr,
    .home-about-corner--br {
        inset-inline-end: 1rem;
    }

    .home-about-title {
        font-size: 1.6rem;
    }

    .home-about-shine {
        width: 22rem;
        height: 22rem;
        inset-inline-end: -8rem;
    }

    .home-about-arch {
        width: min(18rem, 100%);
    }

    /* روی موبایل اسلایدر کمی بلندتر از نسبت ۱۶:۶.۵ دیده می‌شود تا تصویر
       قابل تشخیص بماند و لینک‌ها در دو ستون می‌آیند. */
    .hero-slider-viewport {
        aspect-ratio: 16 / 10;
    }

    .home-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* دکمه‌های اسلاید روی موبایل تمام‌عرض و با ارتفاع لمسی کافی */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    .hero-actions .btn {
        width: 100%;
        padding-block: .75rem;
    }

    .hero-slider-nav {
        display: none;
    }

    /* نوار نقطه‌ها با پس‌زمینه نیمه‌شفاف تا روی تصویر دیده شود */
    .hero-slider-dots {
        bottom: .85rem;
        gap: 0;
        background: rgba(6, 32, 23, .38);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        padding: .1rem .45rem;
    }

    .hero-slider-dot {
        width: 2.25rem;
        height: 2.25rem;
    }

    .section-header,
    .section-header-carousel {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }

    .section-header-actions {
        justify-content: space-between;
        width: 100%;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .content-carousel {
        --carousel-per-view: 1.15;
        --carousel-gap: 1rem;
    }

    .app-search {
        flex-direction: column;
    }

    .app-search-inline {
        width: 100%;
        max-width: none;
    }

    .cta-card {
        padding: 1.75rem;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
    }

    .site-brand-slogan {
        display: none;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ---------- گوشی‌های کوچک ---------- */

@media (max-width: 575.98px) {
    .container {
        padding-inline: 1rem;
    }

    :root {
        --site-header-height: 67px;
    }

    .site-header-inner {
        min-height: 66px;
        gap: .5rem;
    }

    .site-brand {
        gap: .5rem;
    }

    /* لوگوی خوش‌نویسی در هدر گوشی‌های کوچک کوتاه‌تر می‌شود تا در ارتفاع هدر جا شود */
    .site-logo {
        max-height: 44px;
    }

    .site-brand-name {
        font-size: 1.02rem;
    }

    .site-nav-toggle {
        width: 42px;
        height: 42px;
        font-size: 1.35rem;
    }

    .site-nav-link {
        min-height: 2.85rem;
        padding: .7rem .85rem;
        font-size: .96rem;
    }

    .section {
        padding: 2.25rem 0;
    }

    .section-title {
        font-size: clamp(1.25rem, 5.6vw, 1.5rem);
    }

    .section-text {
        font-size: 1rem;
    }

    .section-link {
        font-size: .9rem;
    }

    .content-carousel-nav-button {
        width: 2.4rem;
        height: 2.4rem;
    }

    .content-carousel {
        --carousel-per-view: 1.08;
    }

    .content-card-body {
        padding: 1.1rem 1.15rem 1.25rem;
    }

    .cta-contact-list {
        flex-direction: column;
        gap: .6rem;
    }

    /* ---------- اندازه لمس راحت روی گوشی ---------- */

    /* فیلدهای فرم حداقل ۴۴ پیکسل ارتفاع می‌گیرند تا لمس آن‌ها راحت باشد
       (متن‌های ۱۶ پیکسلی هم مانع بزرگ‌نمایی خودکار iOS می‌شوند). */
    .form-control,
    .form-select {
        min-height: 2.85rem;
    }

    textarea.form-control {
        min-height: 9rem;
    }

    /* دکمه‌ها با افزایش فاصله عمودی بلندتر می‌شوند؛ متن هم مثل قبل وسط‌چین می‌ماند. */
    .btn {
        padding-block: .62rem;
    }

    .btn-sm {
        padding-block: .5rem;
    }

    .app-filter-link {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: 1.15rem;
    }

    /* صفحه‌بندی در صورت زیاد بودن شماره‌ها به خط بعد می‌رود و ارتفاع لمس‌پذیر می‌گیرد. */
    .pagination {
        flex-wrap: wrap;
        row-gap: .45rem;
    }

    .page-link {
        min-height: 2.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .donate-chip {
        padding: .58rem 1.05rem;
        font-size: .9rem;
        min-height: 2.75rem;
    }

    /* پیوندهای متنی فوتر و مسیر صفحه فضای لمس بزرگ‌تری می‌گیرند. */
    .site-footer-links a,
    .site-footer-contact a {
        display: inline-block;
        padding-block: .42rem;
    }

    .breadcrumb-item a {
        display: inline-block;
        padding-block: .25rem;
    }

    .site-social-list a {
        width: 44px;
        height: 44px;
    }

    /* باید بعد از قاعده عمومی .btn بیاید تا فاصله عمودی بزرگ‌تر را نگه دارد. */
    .btn-lg {
        padding: .72rem 1.4rem;
        font-size: 1rem;
    }
}

/* ---------- احترام به تنظیمات کاهش انیمیشن ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   صفحه کمک‌های خیریه (کارت‌های مبلغ، فرم کمک‌کننده و صفحه نتیجه پرداخت)
   ========================================================================== */

.donate-hero {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 0 2.75rem;
    color: #fff;
    /* سربرگ صفحه کمک‌ها: گرادیان سبز عمیق و آرام.
       عمداً از متغیرهای تم استفاده نمی‌کند؛ چون --color-primary در حالت تاریک
       به سبز روشن (#3cc79a) تبدیل می‌شود و این نوار درخشان چشم را می‌آزارد.
       هالهٔ طلایی هم از .55 به .22 کم شد تا رنگ ملایم و چشم‌نواز بماند. */
    background-image:
        var(--pattern-gold),
        radial-gradient(circle at 12% 18%, rgba(201, 162, 39, .22) 0%, rgba(201, 162, 39, 0) 46%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, #0b3a2b 0%, #0e5f47 58%, #10704f 100%);
}

.donate-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 90px;
    background: linear-gradient(to top, var(--color-surface), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.donate-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.donate-breadcrumb .breadcrumb-item a,
.donate-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .82);
}

.donate-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
}

.donate-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}

.donate-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .85rem;
}

.donate-title {
    color: #fff;
    font-size: clamp(1.75rem, 1.1rem + 2vw, 2.6rem);
    margin-bottom: .5rem;
}

.donate-subtitle {
    max-width: 62ch;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
}

.donate-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .9rem;
    max-width: 720px;
}

.donate-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(4px);
}

.donate-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
}

.donate-stat-label {
    font-size: .82rem;
    color: rgba(255, 255, 255, .82);
}

.donate-section {
    padding-top: 2.5rem;
}

.donate-intro {
    max-width: 78ch;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.03rem;
}

.donate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.75rem;
    align-items: start;
}

/* ---------- کارت‌های بخش‌بندی فرم ---------- */

.donate-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.donate-card-header {
    margin-bottom: 1.5rem;
}

.donate-step {
    display: inline-block;
    padding: .2rem .75rem;
    margin-bottom: .6rem;
    border-radius: 999px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: .8rem;
    font-weight: 700;
}

.donate-card-title {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}

.donate-card-hint {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: .92rem;
}

/* ---------- کارت‌های مبلغ ---------- */

.donate-amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 1rem;
}

.donate-amount-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.2rem 1.15rem 1.25rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
}

.donate-amount-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.donate-amount-card:has(input:focus-visible) {
    outline: 3px solid rgba(14, 107, 79, .35);
    outline-offset: 2px;
}

.donate-amount-card.is-selected,
.donate-amount-card:has(input:checked) {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 92%);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.donate-amount-card.is-featured::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

.donate-amount-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.donate-amount-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: .4rem;
}

.donate-amount-card.is-selected .donate-amount-icon,
.donate-amount-card:has(input:checked) .donate-amount-icon {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.donate-amount-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-heading);
    line-height: 1.25;
}

.donate-amount-unit {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin-top: -.25rem;
}

.donate-amount-title {
    font-weight: 700;
    color: var(--color-text);
    font-size: .95rem;
}

.donate-amount-desc {
    font-size: .82rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.donate-amount-badge {
    position: absolute;
    inset-block-start: .6rem;
    inset-inline-end: .6rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: .72rem;
    font-weight: 700;
}

.donate-amount-check {
    position: absolute;
    inset-block-start: .6rem;
    /* نشان انتخاب در سمت چپ کارت قرار می‌گیرد تا روی آیکون نیفتد */
    inset-inline-start: auto;
    inset-inline-end: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: .85rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.donate-amount-card.is-selected .donate-amount-check,
.donate-amount-card:has(input:checked) .donate-amount-check {
    opacity: 1;
    transform: scale(1);
}

/* در کارت‌های ویژه (دارای برچسب) برچسب زیر نشان انتخاب جابه‌جا می‌شود تا هم‌پوشانی نداشته باشند */
.donate-amount-card.is-selected .donate-amount-badge,
.donate-amount-card:has(input:checked) .donate-amount-badge {
    inset-block-start: 2.9rem;
}

.donate-amount-custom {
    border-style: dashed;
}

.donate-empty-amounts {
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* ---------- مبلغ دلخواه ---------- */

.donate-custom-field {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--color-border);
}

.donate-custom-input {
    position: relative;
    display: flex;
    align-items: center;
}

.donate-custom-input .form-control {
    padding-inline-end: 4.5rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.donate-custom-unit {
    position: absolute;
    inset-inline-end: .9rem;
    color: var(--color-text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.donate-quick-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
}

.donate-quick-label {
    font-size: .85rem;
    color: var(--color-text-muted);
}

.donate-chip {
    padding: .28rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-primary);
    font-size: .85rem;
    font-weight: 600;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.donate-chip:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.donate-range-hint {
    margin-bottom: 0;
}

/* ---------- اطلاعات کمک‌کننده ---------- */

.donate-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.donate-field-full {
    grid-column: 1 / -1;
}

.donate-phone-input {
    direction: ltr;
    text-align: center;
    letter-spacing: .06em;
}

.donate-terms {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}

.donate-terms-text {
    margin: .6rem 0 0;
    font-size: .85rem;
    color: var(--color-text-muted);
    line-height: 1.85;
}

.donate-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.donate-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.donate-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-shadow: var(--shadow-md);
}

.donate-submit:disabled {
    box-shadow: none;
}

.donate-submit-note {
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.donate-submit-note i {
    color: var(--color-accent);
}

.donate-trust-badge img {
    height: 46px;
    width: auto;
}

/* ---------- کارت خلاصه کمک ---------- */

.donate-summary {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.donate-summary-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.donate-summary-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.donate-summary-title i {
    color: var(--color-accent);
}

.donate-summary-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
    color: var(--color-on-subtle);
    font-size: 1.9rem;
    font-weight: 800;
}

.donate-summary-amount small {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.donate-summary-label {
    margin: .75rem 0 .25rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-heading);
}

.donate-summary-hint {
    margin-bottom: 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--color-text-muted);
}

.donate-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .9rem;
}

.donate-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.donate-summary-list i {
    color: var(--color-accent);
    margin-top: .2rem;
}

.donate-summary-thanks {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
    font-size: .88rem;
    color: var(--color-text-muted);
    line-height: 1.9;
}

.donate-contact-card {
    background: var(--color-surface-muted);
}

.donate-contact-text {
    font-size: .9rem;
    color: var(--color-text-muted);
}

.donate-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .92rem;
}

.donate-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.donate-contact-list i {
    color: var(--color-primary);
    margin-top: .2rem;
}

/* ---------- هشدار غیرفعال بودن درگاه ---------- */

.donate-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text-strong);
}

.donate-notice i {
    font-size: 1.25rem;
    margin-top: .15rem;
}

.donate-notice strong {
    display: block;
    margin-bottom: .2rem;
}

.donate-notice-link {
    font-weight: 700;
    color: var(--color-warning-text-strong);
    text-decoration: underline;
}

/* ---------- بخش شفافیت و اعتماد ---------- */

.donate-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.donate-feature {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.donate-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 1.3rem;
    margin-bottom: .85rem;
}

.donate-feature-title {
    font-size: 1.02rem;
    margin-bottom: .4rem;
}

.donate-feature-text {
    margin-bottom: 0;
    font-size: .89rem;
    color: var(--color-text-muted);
    line-height: 1.9;
}

/* ---------- صفحه نتیجه پرداخت ---------- */

.donate-result-header {
    padding-bottom: 1.5rem;
}

.donate-result-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.25rem;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.donate-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 2.1rem;
}

.donate-result-success .donate-result-icon {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.donate-result-pending .donate-result-icon {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.donate-result-failed .donate-result-icon {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.donate-result-title {
    font-size: 1.35rem;
    margin-bottom: .5rem;
}

.donate-result-text {
    max-width: 60ch;
    margin: 0 auto 1.5rem;
    color: var(--color-text-muted);
    line-height: 1.95;
}

.donate-result-details {
    display: grid;
    gap: .1rem;
    margin: 0 auto 1.5rem;
    padding: 0;
    max-width: 520px;
    text-align: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.donate-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.1rem;
    background: var(--color-surface);
}

.donate-result-row:nth-child(even) {
    background: var(--color-surface-muted);
}

.donate-result-row dt {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .88rem;
}

.donate-result-row dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-heading);
}

.donate-status-pill {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.donate-status-pill.is-success {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.donate-status-pill.is-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.donate-status-pill.is-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.donate-status-pill.is-muted {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.donate-result-thanks {
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-accent-light);
    color: var(--color-on-subtle);
    line-height: 1.95;
}

.donate-result-failure {
    margin-bottom: 1.25rem;
    font-size: .9rem;
    color: var(--color-text-muted);
}

.donate-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.donate-result-note {
    margin: 1.25rem 0 0;
    font-size: .82rem;
    color: var(--color-text-muted);
}

/* ---------- واکنش‌گرایی صفحه کمک ---------- */

@media (max-width: 991.98px) {
    .donate-layout {
        grid-template-columns: 1fr;
    }

    .donate-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .donate-hero {
        padding: 1.5rem 0 2rem;
    }

    .donate-card {
        padding: 1.25rem;
    }

    .donate-amount-grid {
        grid-template-columns: 1fr;
    }

    .donate-fields {
        grid-template-columns: 1fr;
    }

    .donate-result-card {
        padding: 1.5rem;
    }

    .donate-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }
}

/* ==========================================================================
   صفحه ثبت‌نام دوره تربیت مربی نهج‌البلاغه
   ========================================================================== */

.coach-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 2.5rem 0 5rem;
    border-radius: 0 0 28px 28px;
    background-image: var(--pattern-white), linear-gradient(135deg, #0b3a2b 0%, #0e6b4f 58%, #128162 100%);
}

/* هاله تزئینی گوشه سربرگ برای عمق بیشتر */
.coach-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -6rem;
    bottom: -8rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .30) 0%, rgba(201, 162, 39, 0) 70%);
    pointer-events: none;
}

.coach-hero .breadcrumb-item,
.coach-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, .82);
}

.coach-hero .breadcrumb-item a:hover {
    color: #fff;
}

.coach-hero .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .55);
}

.coach-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
    align-items: center;
    gap: 2rem;
    margin-top: .5rem;
}

.coach-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    margin-bottom: 1.1rem;
}

.coach-hero-title {
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: .85rem;
    color: #fff;
}

.coach-hero-subtitle {
    font-size: 1.05rem;
    line-height: 2;
    max-width: 62ch;
    margin-bottom: 1.35rem;
    color: rgba(255, 255, 255, .92);
}

.coach-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.5rem;
}

.coach-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .9rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    background: rgba(6, 32, 23, .35);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}

.coach-hero-chip-open {
    background: rgba(60, 199, 154, .22);
    border-color: rgba(120, 231, 194, .65);
    color: #eafff6;
}

.coach-hero-chip-closed {
    background: rgba(201, 162, 39, .20);
    border-color: rgba(233, 205, 124, .60);
    color: #fff4d4;
}

.coach-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.coach-hero-actions .btn-light {
    color: var(--color-heading);
    font-weight: 700;
}

.coach-hero-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    text-align: center;
    padding: 1.75rem 1rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(2px);
}

.coach-hero-art .bi-mortarboard {
    font-size: 3.4rem;
    color: #f3dd97;
}

.coach-hero-art-ring {
    position: absolute;
    inset: .6rem;
    border: 1px dashed rgba(255, 255, 255, .30);
    border-radius: calc(var(--radius-lg) - 6px);
    pointer-events: none;
}

.coach-hero-art-caption {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

/* چون سربرگ سایت چسبان است، هنگام پرش به هر سکشن فاصله‌ای در نظر گرفته می‌شود
   تا تیتر بخش زیر سربرگ پنهان نماند. */
.coach-hero,
.coach-facts-section,
.coach-intro-section,
.coach-topics-section,
.coach-register-section {
    scroll-margin-top: calc(var(--site-header-height) + .75rem);
}

/* ---------- کارت‌های اطلاعات کلیدی ---------- */

.coach-facts-section {
    position: relative;
    z-index: 2;
    margin-top: -3.25rem;
}

.coach-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.coach-fact-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.coach-fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.coach-fact-icon-open {
    color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.coach-fact-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.coach-fact-label {
    font-size: .82rem;
    color: var(--color-text-muted);
}

.coach-fact-value {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-heading);
}

.coach-fact-hint {
    font-size: .8rem;
    color: var(--color-text-muted);
}

/* ---------- معرفی دوره ---------- */

.coach-eyebrow {
    margin-bottom: .85rem;
}

.coach-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .95fr);
    gap: 2.25rem;
    align-items: start;
}

.coach-intro-text {
    font-size: 1.02rem;
    line-height: 2.1;
    color: var(--color-text-muted);
    margin-bottom: .9rem;
}

.coach-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.75rem;
}

.coach-step {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.coach-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-on-primary, #fff);
    background: var(--color-primary);
}

.coach-step-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.coach-step-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-heading);
}

.coach-step-text {
    font-size: .85rem;
    line-height: 1.9;
    color: var(--color-text-muted);
}

.coach-side-card {
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
    padding: 1.5rem 1.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.coach-side-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.coach-side-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.coach-side-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--color-text);
}

.coach-side-list li .bi {
    color: var(--color-primary);
    margin-top: .35rem;
}

.coach-side-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    font-size: .86rem;
    line-height: 1.95;
    color: var(--color-text);
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.coach-side-note .bi {
    color: var(--color-accent);
    margin-top: .3rem;
}

/* ---------- محورهای آموزشی ---------- */

.coach-topics-section {
    /* بخش محورهای آموزشی: بدون مرز بالا/پایین تا به پس‌زمینه پیوسته صفحه وصل شود */
    background-image: linear-gradient(180deg, transparent 0%, var(--section-tint) 50%, transparent 100%);
}

.coach-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.coach-topic-card {
    position: relative;
    padding: 1.25rem 1.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.coach-topic-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.coach-topic-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.coach-topic-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
    margin: 0;
    color: var(--color-heading);
}

/* ---------- ناحیه ثبت‌نام ---------- */

.coach-register-section {
    /* ناحیه ثبت‌نام: هاله‌ای که در هر دو سر به شفاف می‌رسد تا به پس‌زمینه پیوسته
       صفحه وصل شود و لبه بالای آن خط/باند رنگی نسازد. */
    background-image: linear-gradient(180deg, transparent 0%, var(--color-surface-muted) 30%, var(--color-surface-muted) 70%, transparent 100%);
}

.coach-register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: 1.5rem;
    align-items: start;
}

.coach-form-card {
    padding: 1.85rem 1.9rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.coach-form-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.coach-form-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    color: var(--color-accent);
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
}

.coach-form-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.coach-form-subtitle {
    font-size: .9rem;
    line-height: 1.95;
    color: var(--color-text-muted);
    margin: 0;
}

.coach-fee-callout {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.35rem;
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.coach-fee-amount {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
}

.coach-fee-note {
    font-size: .86rem;
    line-height: 1.95;
    color: var(--color-text-muted);
}

.coach-location-hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .84rem;
    line-height: 1.9;
    color: var(--color-text-muted);
    margin: 0;
}

.coach-location-hint .bi {
    color: var(--color-primary);
    margin-top: .3rem;
}

.coach-terms {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.coach-terms summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}

.coach-terms summary::-webkit-details-marker {
    display: none;
}

.coach-terms summary::after {
    content: "\F282";
    font-family: bootstrap-icons !important;
    margin-inline-start: auto;
    font-size: .85rem;
    transition: transform var(--transition-base);
}

.coach-terms[open] summary::after {
    transform: rotate(180deg);
}

.coach-terms-body {
    padding: 0 1rem .85rem;
    border-top: 1px dashed var(--color-border-strong);
}

.coach-terms-body p {
    font-size: .87rem;
    line-height: 2;
    color: var(--color-text-muted);
    margin: .65rem 0 0;
}

.coach-terms-check {
    padding: .9rem 1rem .9rem 1rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.coach-terms-check .form-check-label {
    font-size: .9rem;
    line-height: 1.95;
    color: var(--color-text);
}

.coach-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}

.coach-form-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--color-text-muted);
}

.coach-form-note .bi {
    color: var(--color-primary);
}

.coach-help-card {
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
    padding: 1.5rem 1.6rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
}

.coach-help-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.coach-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.coach-help-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .87rem;
    line-height: 1.95;
    color: var(--color-text);
}

.coach-help-list li .bi {
    color: var(--color-primary);
    margin-top: .3rem;
}

.coach-support {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--color-border-strong);
}

.coach-support-title {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .6rem;
}

.coach-support-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.coach-support-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .87rem;
}

.coach-support-list li .bi {
    color: var(--color-primary);
}

.coach-support-list a {
    color: var(--color-text);
    text-decoration: none;
}

.coach-support-list a:hover {
    color: var(--color-primary);
}

/* ---------- حالت‌های پیام (موفق، بسته، بدون دوره) ---------- */

.coach-success,
.coach-closed,
.coach-empty-card {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.coach-success-icon,
.coach-closed-icon,
.coach-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    font-size: 2.1rem;
}

.coach-success-icon {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.coach-closed-icon {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.coach-empty-icon {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}

.coach-success-title,
.coach-closed-title,
.coach-empty-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.coach-success-text,
.coach-closed-text,
.coach-empty-text {
    font-size: .98rem;
    line-height: 2.05;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.coach-success-note,
.coach-closed-date {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
    line-height: 1.95;
    text-align: start;
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.coach-success-actions,
.coach-closed-actions,
.coach-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

/* ---------- کد تأیید پیامکی شماره موبایل ---------- */

.coach-verify-box {
    padding: 1.15rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.coach-verify-head {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
}

.coach-verify-head .bi {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex: 0 0 auto;
}

.coach-verify-head strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--color-heading);
}

.coach-verify-head span {
    font-size: .88rem;
    line-height: 1.9;
    color: var(--color-text-muted);
}

.coach-verify-input {
    letter-spacing: .35rem;
    font-weight: 700;
    text-align: center;
}

.coach-verify-status {
    margin: 0;
    font-size: .88rem;
    line-height: 1.9;
    color: var(--color-text-muted);
}

.coach-verify-status.is-error {
    color: var(--color-danger-text);
}

.coach-verify-status.is-success {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---------- صفحه نتیجه پرداخت هزینه دوره ---------- */

.coach-result-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.25rem;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.coach-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 2.1rem;
}

.coach-result-success .coach-result-icon {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.coach-result-pending .coach-result-icon {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.coach-result-failed .coach-result-icon {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.coach-result-title {
    font-size: 1.35rem;
    margin-bottom: .5rem;
}

.coach-result-text {
    max-width: 62ch;
    margin: 0 auto 1.5rem;
    color: var(--color-text-muted);
    line-height: 1.95;
}

.coach-result-thanks {
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-accent-light);
    color: var(--color-on-subtle);
    line-height: 1.95;
}

.coach-result-details {
    display: grid;
    gap: .1rem;
    margin: 0 auto 1.5rem;
    padding: 0;
    max-width: 540px;
    text-align: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coach-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.1rem;
    background: var(--color-surface);
}

.coach-result-row:nth-child(even) {
    background: var(--color-surface-muted);
}

.coach-result-row dt {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .88rem;
}

.coach-result-row dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-heading);
}

.coach-result-meta {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.coach-result-failure {
    margin-bottom: 1.25rem;
    font-size: .9rem;
    color: var(--color-text-muted);
}

.coach-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.coach-result-note,
.coach-result-footnote {
    margin: 1.25rem 0 0;
    font-size: .82rem;
    color: var(--color-text-muted);
    line-height: 1.9;
}

/* ---------- حالت تاریک ---------- */

[data-theme="dark"] .coach-hero {
    background-image: var(--pattern-white), linear-gradient(135deg, #08160f 0%, #113129 58%, #17463a 100%);
}

[data-theme="dark"] .coach-fact-card,
[data-theme="dark"] .coach-form-card {
    background: var(--color-surface);
}

[data-theme="dark"] .coach-fee-callout,
[data-theme="dark"] .coach-side-note,
[data-theme="dark"] .coach-success-note,
[data-theme="dark"] .coach-closed-date {
    color: var(--color-text);
}

[data-theme="dark"] .coach-hero-actions .btn-light {
    background: #f4fbf7;
    border-color: #f4fbf7;
    color: #0b2b20;
}

[data-theme="dark"] .coach-result-thanks {
    color: var(--color-text);
}

/* ---------- واکنش‌گرایی صفحه ثبت‌نام ---------- */

@media (max-width: 1199.98px) {
    .coach-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .coach-hero {
        padding: 2rem 0 4.5rem;
        border-radius: 0 0 22px 22px;
    }

    .coach-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .coach-hero-art {
        display: none;
    }

    .coach-intro-grid,
    .coach-register-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .coach-side-card,
    .coach-help-card {
        position: static;
    }

    .coach-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .coach-hero-title {
        font-size: 1.75rem;
    }

    .coach-hero-subtitle {
        font-size: .98rem;
    }

    .coach-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .coach-hero-actions .btn {
        width: 100%;
    }

    .coach-form-card {
        padding: 1.4rem 1.15rem 1.6rem;
    }

    .coach-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .coach-form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .coach-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .coach-facts-section {
        margin-top: -2rem;
    }

    .coach-success,
    .coach-closed,
    .coach-empty-card {
        padding: 2rem 1.25rem;
    }

    .coach-result-card {
        padding: 1.5rem;
    }

    .coach-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }

    .coach-success-actions .btn,
    .coach-closed-actions .btn,
    .coach-empty-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   بخش «فایل‌های صوتی هفتگی» — سربرگ، فهرست هفتگی، دسته‌بندی درختی و پخش‌کننده چسبان
   ========================================================================== */

.audio-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 2.25rem 0 2.5rem;
    background-image: var(--pattern-white), linear-gradient(135deg, #0b3a2b 0%, #0e6b4f 58%, #128162 100%);
}

/* هاله طلایی برای عمق سربرگ */
.audio-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -7rem;
    top: -9rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .32) 0%, rgba(201, 162, 39, 0) 70%);
    pointer-events: none;
}

.audio-hero .container {
    position: relative;
    z-index: 1;
}

.audio-hero .breadcrumb-item a,
.audio-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, .82);
}

.audio-hero .breadcrumb-item a:hover {
    color: #fff;
}

.audio-hero .page-title {
    color: #fff;
    margin-bottom: .5rem;
}

.audio-hero .page-subtitle {
    color: rgba(255, 255, 255, .85);
    max-width: 60rem;
    margin-bottom: 0;
}

.audio-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.audio-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .85rem;
    backdrop-filter: blur(3px);
}

.audio-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.audio-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
}

.audio-sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}

.audio-sidebar-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    margin: 0 0 .85rem;
    color: var(--color-heading);
}

.audio-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .2rem;
}

.audio-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: .92rem;
    transition: background var(--transition-base), color var(--transition-base);
}

.audio-category-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.audio-category-link.is-active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
}

.audio-category-link.is-depth-1 {
    padding-inline-start: 1.5rem;
}

.audio-category-link.is-depth-2 {
    padding-inline-start: 2.2rem;
}

.audio-category-link.is-depth-3 {
    padding-inline-start: 2.9rem;
}

.audio-category-count {
    font-size: .78rem;
    opacity: .8;
    white-space: nowrap;
}

.audio-search {
    display: grid;
    gap: .5rem;
}

.audio-sidebar-tip p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.95;
    color: var(--color-text-muted);
}

.audio-main {
    min-width: 0;
}

.audio-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: .9rem;
}

.audio-filter-count {
    color: var(--color-text-muted);
}

.audio-empty {
    padding: 1rem 0;
}

.audio-week {
    margin-bottom: 2.25rem;
}

.audio-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .6rem;
    margin-bottom: .9rem;
    border-bottom: 2px solid var(--color-border);
}

.audio-week-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 1.02rem;
}

.audio-week-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: .85rem;
    font-weight: 700;
}

.audio-week-badge.is-current {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.audio-week-range {
    color: var(--color-heading);
    font-weight: 700;
}

.audio-week-count {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* نشانگر زنده «این هفته» */
.audio-week-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #d64545;
    animation: audio-pulse 1.6s ease-in-out infinite;
}

@keyframes audio-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

.audio-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.audio-track {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.audio-track:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.audio-track.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.audio-track-play {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #128565 100%);
    box-shadow: 0 6px 14px rgba(14, 107, 79, .28);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.audio-track-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(14, 107, 79, .34);
}

.audio-track-icon-pause,
.audio-track-equalizer {
    display: none;
}

.audio-track.is-active .audio-track-icon-play {
    display: none;
}

.audio-track.is-active .audio-track-icon-pause {
    display: block;
}

/* در حال پخش: نشانگر اکولایزر متحرک جای دکمه توقف را می‌گیرد */
.audio-track.is-playing .audio-track-icon-pause {
    display: none;
}

.audio-track.is-playing .audio-track-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.audio-track-equalizer span {
    display: block;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    transform-origin: bottom;
    animation: audio-equalizer 900ms ease-in-out infinite;
}

.audio-track-equalizer span:nth-child(2) { animation-delay: 160ms; }
.audio-track-equalizer span:nth-child(3) { animation-delay: 320ms; }

@keyframes audio-equalizer {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

.audio-track-body {
    flex: 1 1 auto;
    min-width: 0;
}

.audio-track-title {
    margin: 0 0 .3rem;
    font-size: 1rem;
    line-height: 1.6;
}

.audio-track-number {
    display: inline-block;
    margin-inline-end: .4rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--color-accent-light);
    color: #7a5c00;
    font-size: .74rem;
    font-weight: 700;
    vertical-align: middle;
}

.audio-track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin: 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.audio-track-meta i {
    margin-inline-end: .2rem;
}

.audio-track-description {
    margin: .45rem 0 0;
    font-size: .85rem;
    color: var(--color-text-muted);
    line-height: 1.9;
}

.audio-track-actions {
    flex: 0 0 auto;
}

.audio-track-download {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text);
    font-size: .82rem;
    text-decoration: none;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.audio-track-download:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* ---------- پخش‌کننده چسبان پایین صفحه ---------- */

.audio-player {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1045;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 30px rgba(13, 51, 39, .16);
}

.audio-player[hidden] {
    display: none;
}

.audio-player.is-open {
    animation: audio-player-in 220ms ease-out;
}

@keyframes audio-player-in {
    from { transform: translateY(100%); opacity: .6; }
    to { transform: translateY(0); opacity: 1; }
}

.audio-player-inner {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) minmax(200px, 2.2fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .65rem 0;
}

.audio-player-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #128565 100%);
    box-shadow: 0 6px 16px rgba(14, 107, 79, .3);
    cursor: pointer;
}

.audio-player-icon-pause {
    display: none;
}

.audio-player.is-playing .audio-player-icon-play {
    display: none;
}

.audio-player.is-playing .audio-player-icon-pause {
    display: block;
}

.audio-player-info {
    min-width: 0;
}

.audio-player-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-speaker {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-timeline {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.audio-player-time {
    font-size: .78rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.audio-player-seek {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    height: 22px;
    cursor: pointer;
    touch-action: none;
}

.audio-player-seek-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.audio-player-seek-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.audio-player-seek-handle {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    margin-inline-start: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-primary);
    transform: translateY(-50%);
    pointer-events: none;
}

.audio-player-seek:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.audio-player-controls {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.audio-player-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.audio-player-button:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.audio-player-button-hint {
    position: absolute;
    bottom: 6px;
    font-size: .5rem;
    font-weight: 700;
}

.audio-player-volume {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.audio-player-volume-range {
    width: 84px;
    accent-color: var(--color-primary);
}

.audio-player-rate {
    width: auto;
    min-width: 44px;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.audio-player-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: #7a5c00;
    text-decoration: none;
}

.audio-player-download:hover {
    background: var(--color-accent);
    color: #fff;
}

.audio-player-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.audio-player-close:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

/* فضای انتهای صفحه تا پخش‌کننده روی محتوا نیفتد */
body:has(.audio-player.is-open) .site-footer {
    padding-bottom: 5.5rem;
}

@media (max-width: 1199.98px) {
    .audio-player-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "toggle info controls"
            "timeline timeline timeline";
        row-gap: .6rem;
    }

    .audio-player-toggle { grid-area: toggle; }
    .audio-player-info { grid-area: info; }
    .audio-player-timeline { grid-area: timeline; }
    .audio-player-controls { grid-area: controls; }
}

@media (max-width: 991.98px) {
    .audio-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .audio-sidebar {
        position: static;
    }

    .audio-player-volume-range {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .audio-track {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .audio-track-actions {
        width: 100%;
    }

    .audio-track-download {
        width: 100%;
        justify-content: center;
    }

    .audio-player-controls .audio-player-button[data-audio-prev],
    .audio-player-controls .audio-player-button[data-audio-next] {
        display: none;
    }
}

/* ---------- حالت تاریک ---------- */

[data-theme="dark"] .audio-hero {
    background-image: var(--pattern-white), linear-gradient(135deg, #08160f 0%, #113129 58%, #17463a 100%);
}

[data-theme="dark"] .audio-track.is-active {
    background: rgba(18, 133, 101, .16);
}

[data-theme="dark"] .audio-track-number {
    color: #f0d98a;
}

[data-theme="dark"] .audio-player-download {
    color: #f0d98a;
}