/*
    نظام هویت بصری ادبراه — نسخه‌ی اول
    پالت: زرشکی تیره (پایه) + آجری گرم (میانی) + طلایی گرم (تاکید/اجرا) + کاغذی روشن (متن/جزئیات)
    این متغیرها فقط در site.css تعریف شده‌اند (پنل ادمین admin.css جدا و مستقل است و دست‌نخورده می‌ماند).
*/
:root {
    --primary-text        : #F3E9D2; /* کاغذی روشن، متن اصلی روی پس‌زمینه تیره */
    --secondary-text      : #C9B38A; /* کاغذی کم‌رنگ‌تر، متن ثانویه */
    --light-text          : #FFF;
    --background-main     : #FFF;
    --background-secondary: #2A1416; /* زرشکی تیره */
    --surface             : #3B1016; /* سطح کارت‌ها و پنل‌ها روی پس‌زمینه زرشکی */
    --surface-strong      : #4D1A1F;
    --border-subtle       : #5A2730;
    --accent-color        : #C9A227; /* طلایی گرم — تاکید و اجرا */
    --accent-color-strong  : #E8D48A;
    --accent-color-soft    : #C9A22733;
    --on-accent           : #1B2B45; /* رنگ متن روی دکمه‌های طلایی */
    --card-shadow         : 0 6px 22px #00000040;
    --button-primary      : #A23B2E; /* آجری گرم — پایه دکمه‌ها */
    --button-primary-hover: #8A2F24;
    --dash-bg-dark        : #1e2125;
    --dash-bg-hover       : #2c3138;
    --dash-text-color     : #adb5bd;
    --dash-text-hover     : #ffffff;
    --dash-active-bg      : #0d6efd;
    --dash-active-border  : #338dff;
    --dash-separator-color: #3e444a
}

/*
    تم‌های شخصی‌سازی (انتخاب کاربر، بدون نیاز به لاگین — ذخیره در localStorage).
    رنگ‌های هر تم دیگر اینجا ثابت نیستند؛ ادمین از پنل مدیریت (/Admin/Themes) قالب‌ها را
    می‌سازد/ویرایش می‌کند و _Layout.cshtml معادل این بلاک‌ها را به‌صورت پویا (برای هر
    data-theme موجود در دیتابیس) در یک <style> تزریق می‌کند. اینجا فقط تم پیش‌فرض (fallback
    قبل از بار شدن دیتابیس) باقی می‌ماند که همان مقادیر بالا در :root است.
*/

@font-face {
    font-family: Farhang;
    src: url(/fonts/Farhang2FaNum-Regular.TTF)
}

@font-face {
    font-family: BoldFarhang;
    src: url(/fonts/Farhang2FaNum-Bold.TTF)
}

* {
    font-family: Farhang;
}

.bold, b, h1, h2, h3, h4, h5, h6 {
    font-family: BoldFarhang !important;
    line-height: normal !important;
}

body {
    margin          : 0;
    font-family     : 'Farhang', sans-serif;
    background-color: var(--background-secondary) !important;
    color           : var(--primary-text) !important
}

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

    .nav-item-dropdown:hover .mega-menu-panel,
    .nav-item-dropdown:focus-within .mega-menu-panel {
        display: block;
    }

.mega-menu-panel {
    display         : none;
    position        : absolute;
    top             : calc(100% + 14px);
    right           : 0;
    background-color: var(--surface);
    border          : 1px solid var(--border-subtle);
    border-radius   : 14px;
    padding         : 1.5rem 1.5rem .5rem;
    min-width       : 560px;
    max-width       : 720px;
    box-shadow      : 0 16px 40px #00000059;
    z-index         : 50;
    animation       : mega-menu-in .18s ease-out
}

@keyframes mega-menu-in {
    from {
        opacity  : 0;
        transform: translateY(-6px)
    }

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

/* فلش کوچک بالای پنل، رو به لینک «محتواها» */
.mega-menu-panel::before {
    content         : '';
    position        : absolute;
    top             : -8px;
    right           : 28px;
    width           : 16px;
    height          : 16px;
    background-color: var(--surface);
    border-right    : 1px solid var(--border-subtle);
    border-top      : 1px solid var(--border-subtle);
    transform       : rotate(45deg);
    border-radius   : 3px 0 0 0
}

.mega-menu-grid {
    list-style            : none;
    margin                : 0;
    padding               : 0;
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(170px, 1fr));
    gap                   : .25rem 1.5rem
}

.mega-menu-grid li {
    margin-bottom: 2px
}

/* سرعنوان دسته‌بندی اصلی: کل ستون جدید را شروع می‌کند */
.mega-menu-grid li.fw-bold {
    grid-column  : 1 / -1;
    margin-top   : .75rem;
    padding-top  : .75rem;
    border-top   : 1px solid var(--border-subtle)
}

.mega-menu-grid li.fw-bold:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none
}

.mega-menu-grid li.fw-bold > a {
    color       : var(--accent-color) !important;
    font-size   : 1rem;
    font-family : 'BoldFarhang', sans-serif
}

.mega-menu-grid li a {
    display        : block;
    color          : var(--secondary-text) !important;
    font-size      : .9rem;
    padding        : .4rem .5rem;
    border-radius  : 6px;
    transition     : background-color .15s ease, color .15s ease
}

.mega-menu-grid li a:hover {
    background-color: var(--accent-color-soft);
    color           : var(--primary-text) !important
}

.mega-menu-view-all {
    display      : flex;
    align-items  : center;
    gap          : .4rem;
    margin-top   : .75rem;
    padding      : .75rem 0;
    border-top   : 1px solid var(--border-subtle);
    color        : var(--accent-color) !important;
    font-size    : .85rem;
    font-weight  : 700
}

@media (max-width: 992px) {
    .mega-menu-panel {
        display: none !important; /* در موبایل از منوی همبرگری استفاده می‌شود */
    }
}

.page-container {
    overflow-x: hidden
}

/* --- دسترس‌پذیری: لینک پرش به محتوای اصلی، فقط هنگام فوکوس کیبورد دیده می‌شود --- */
.skip-link {
    position        : fixed;
    top             : -60px;
    right           : 1rem;
    z-index         : 2000;
    background-color: var(--accent-color);
    color           : var(--background-secondary) !important;
    padding         : .75rem 1.5rem;
    border-radius   : 8px;
    font-weight     : 700;
    transition      : top .2s ease
}

.skip-link:focus {
    top: 1rem
}

.hero-section {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    background-color: var(--background-secondary);
    color           : var(--primary-text)
}

/* هدر صفحه‌ی خانه: صحنه‌ی مینیاتور (تصویر انتخاب‌شده بر اساس قالب فعال) */
.hero-section.is-home {
    overflow: hidden
}

.hero-section .overlay {
    display: none
}

/* --- هدر اصلی صفحه‌ی خانه: عنوان، توضیح و دکمه‌های فراخوان --- */
.home-hero-content {
    /* نکته RTL: برای فرزندان یک فلکس-کانتینر ستونی، flex-start/flex-end محور عرضی،
       معادل منطقی inline-start/inline-end هستند؛ در RTL یعنی flex-start = راست.
       برای موقعیت خودِ جعبه هم از margin-left فیزیکی استفاده شده تا همیشه سمت راست بچسبد،
       مستقل از اینکه چه گوشه‌ای «inline-start» تفسیر می‌شود. */
    position      : relative;
    z-index       : 5;
    flex-grow     : 1;
    display       : flex;
    flex-direction: column;
    justify-content: center;
    align-items   : flex-start;
    text-align    : right;
    gap           : 1.25rem;
    max-width     : 720px;
    margin-left   : auto;
    padding       : 0 3rem
}

/* عنوان اصلی (h1) خود «برند» است: نشان‌نوشته‌ی ادبراه با رنگ متن قالب (mask) */
.miniature-hero {
    position       : relative;
    z-index        : 2;
    flex-grow      : 1;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : clamp(2.5rem, 8vw, 8rem);
    padding        : 1.75rem 3rem 2.25rem
}

.miniature-hero-text {
    position      : relative;
    z-index       : 3;
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : .8rem;
    width         : min(480px, 46vw)
}

.miniature-title {
    margin: 0
}

.hero-tagline {
    margin     : 0;
    font-family: BoldFarhang, sans-serif;
    font-size  : 1.5rem;
    line-height: 1.7;
    color      : var(--primary-text)
}

/* قاب محرابی: تصویر داخل طاق‌نمای ایرانی با دو حاشیه‌ی طلایی (ماسک arch.svg به‌اندازه‌ی قاب کش می‌آید) */
.hero-arch {
    position        : relative;
    flex-shrink     : 0;
    width           : min(270px, 40vw);
    aspect-ratio    : 100 / 130;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat;
    mask            : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat
}

.hero-arch-wrap {
    position   : relative;
    z-index    : 2;
    flex-shrink: 0
}

/* هاله‌ی طاق: یک طاق بزرگ‌تر و کم‌رنگ پشت قاب اصلی (طاق دوتایی) */
.hero-arch-halo {
    position        : absolute;
    inset           : -16px -16px 0;
    background-color: var(--accent-color);
    opacity         : .3;
    -webkit-mask    : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat;
    mask            : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat
}

.hero-arch::before,
.hero-arch-art {
    position        : absolute;
    -webkit-mask    : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat;
    mask            : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat
}

.hero-arch::before {
    content         : '';
    inset           : 5px;
    background-color: var(--background-secondary)
}

.hero-arch-art {
    inset              : 10px;
    background-image   : var(--hero-art);
    background-size    : cover;
    background-position: 38% 40%
}

.hero-subtitle {
    font-size: 1.05rem;
    color    : var(--secondary-text);
    margin   : 0
}

.hero-cta-group {
    display   : flex;
    flex-wrap : wrap;
    gap       : .85rem;
    margin-top: .5rem
}

.btn-hero {
    display        : inline-flex;
    align-items    : center;
    gap            : .5rem;
    padding        : .8rem 1.75rem;
    border-radius  : 12px;
    font-weight    : 700;
    font-size      : 1rem;
    text-decoration: none !important;
    transition     : transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease
}

/* دکمه‌ی اصلی: پر و پررنگ؛ دکمه‌ی دوم: توخالی با حاشیه‌ی واضح — هر دو شبیه دکمه‌اند و روی هر قالب خوانا */
.btn-hero-primary {
    background-color: var(--button-primary);
    color           : #fff !important;
    border          : 2px solid var(--button-primary);
    box-shadow      : 0 6px 16px color-mix(in srgb, var(--button-primary) 35%, transparent)
}

.btn-hero-primary:hover {
    background-color: var(--button-primary-hover);
    border-color     : var(--button-primary-hover);
    transform        : translateY(-2px)
}

.btn-hero-outline {
    background-color: color-mix(in srgb, var(--surface) 70%, transparent);
    color           : var(--primary-text) !important;
    border          : 2px solid var(--primary-text)
}

.btn-hero-outline:hover {
    background-color: var(--primary-text);
    color           : var(--background-secondary) !important;
    transform       : translateY(-2px)
}

.btn-hero:focus-visible,
.main-nav a:focus-visible,
.main-nav button:focus-visible,
.gateway-card:focus-visible {
    outline       : 3px solid var(--accent-color);
    outline-offset: 3px
}

@media screen and (max-width: 900px) {
    .miniature-hero {
        flex-direction : column-reverse;
        justify-content: flex-end;
        gap            : 1.5rem;
        padding        : 0 1.25rem 2.25rem
    }

    .hero-arch {
        width: min(200px, 56vw)
    }

    .miniature-hero-text {
        align-items: center;
        text-align : center;
        width      : 100%;
        margin     : 0
    }

    .hero-tagline {
        font-size: 1.25rem
    }

    .hero-cta-group {
        justify-content: center
    }
}

/* --- بنر چرخشی صفحه اصلی (مدیریت‌شده از پنل ادمین) --- */
.hero-banner-section {
    padding: 2rem 3rem 0
}

.hero-banner-carousel .hero-banner-slide {
    border-radius: 16px;
    overflow     : hidden;
    box-shadow   : var(--card-shadow)
}

.hero-banner-carousel .hero-banner-slide img {
    display      : block;
    width        : 100%;
    aspect-ratio : 21 / 6;
    object-fit   : cover
}

@media (max-width: 768px) {
    .hero-banner-section {
        padding: 1.5rem 1rem 0
    }

    .hero-banner-carousel .hero-banner-slide img {
        aspect-ratio: 16 / 9
    }
}

/* --- دروازه‌های ادبراه: کارت‌های دسترسی سریع زیر هدر صفحه‌ی خانه --- */
.gateways-section {
    padding: 3rem 3rem 0
}

.gateways-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1.5rem
}

@media (max-width: 1000px) {
    .gateways-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 640px) {
    .gateways-grid { grid-template-columns: 1fr }
}

.gateway-card {
    display        : flex;
    align-items    : center;
    gap            : 1.1rem;
    padding        : 1.25rem 1.4rem;
    border-radius  : 14px;
    background     : var(--surface);
    border         : 2px solid var(--accent-color);
    /* قاب «جدول» ایرانی: خط دوم باریک داخل قاب اصلی */
    box-shadow     : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--border-subtle);
    text-decoration: none !important;
    color          : var(--primary-text) !important;
    transition     : transform .25s ease, border-color .25s ease, box-shadow .25s ease
}

.gateway-card:hover {
    transform   : translateY(-4px);
    border-color: var(--accent-color-strong);
    box-shadow  : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--accent-color), var(--card-shadow)
}

.gateway-art {
    width      : 112px;
    height     : auto;
    flex-shrink: 0;
    filter     : drop-shadow(0 4px 8px #00000038)
}

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

.gateway-card h3 {
    margin   : 0;
    font-size: 1.15rem
}

.gateway-card p {
    margin   : 0;
    font-size: .9rem;
    color    : var(--secondary-text)
}

/* «ورود» + فلش: کل کارت لینک است و این نشانه‌ی ظاهری، کلیک‌پذیر بودنش را برای کاربر روشن می‌کند */
.gateway-go {
    display    : inline-flex;
    align-items: center;
    gap        : .35rem;
    margin-top : .35rem;
    font-size  : .9rem;
    font-weight: 700;
    color      : var(--accent-color-strong)
}

.gateway-go i {
    transition: transform .2s ease
}

.gateway-card:hover .gateway-go i {
    transform: translateX(-4px)
}

.hero-content {
    position       : relative;
    z-index        : 5;
    flex-grow      : 1;
    display        : flex;
    justify-content: center;
    align-items    : center
}

.hero-links {
    display   : flex;
    gap       : 3rem;
    margin-top: -50px
}

.hero-link-item {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-decoration: none;
    position       : relative
}

.hero-circle-image {
    width              : 160px;
    height             : 160px;
    border-radius      : 50%;
    border             : 4px solid #ffffffe6;
    margin-bottom      : 12px;
    background-size    : cover;
    background-position: center;
    box-shadow         : 0 4px 15px #0000004d;
    transition         : transform .3s ease, box-shadow .3s ease;
    z-index            : 2
}

.hero-link-item:hover .hero-circle-image {
    transform : scale(1.05);
    box-shadow: 0 6px 20px #0006
}

#circle-image-1 {
    background-image: url(/img/banners/1.png)
}

#circle-image-2 {
    background-image: url(/img/banners/2.png)
}

#circle-image-3 {
    background-image: url(/img/banners/3.png)
}

.hero-link-text-box {
    background-color: #000000b3;
    color           : #fff;
    padding         : .75rem 1.5rem;
    border-radius   : 8px;
    margin-top      : -25px;
    min-width       : 180px;
    text-align      : center;
    font-weight     : 700;
    font-size       : 1.1rem;
    z-index         : 1;
    box-shadow      : 0 2px 5px #0003
}

.main-nav {
    position       : relative;
    z-index        : 10;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 1.5rem 3rem
}

.nav-right .logo {
    font-size  : 1.8rem;
    font-weight: 700
}

/* لوگوی برند: نشان‌نوشته و گل‌نقش ادبراه به‌صورت mask با رنگ‌های قالب فعال (روی هر قالب خوانا) */
.brand-lockup {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 2px;
    text-decoration: none !important
}

.brand-wordmark {
    display         : block;
    background-color: var(--primary-text);
    -webkit-mask    : url(/img/miniature/logo-wordmark.png) center / contain no-repeat;
    mask            : url(/img/miniature/logo-wordmark.png) center / contain no-repeat
}

.brand-lockup .brand-wordmark {
    width       : 84px;
    aspect-ratio: 571 / 358
}

.brand-wordmark-hero {
    width       : min(230px, 62vw);
    aspect-ratio: 571 / 358
}

.brand-ornament {
    display         : block;
    width           : 18px;
    aspect-ratio    : 155 / 245;
    margin-inline-start: 38px;
    margin-bottom   : -6px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/logo-ornament.png) center / contain no-repeat;
    mask            : url(/img/miniature/logo-ornament.png) center / contain no-repeat
}

.brand-url {
    font-size     : .7rem;
    letter-spacing: .12em;
    color         : var(--secondary-text);
    direction     : ltr
}

.nav-center {
    display: flex;
    gap    : 2rem
}

.nav-center a,
.nav-right a,
.nav-left span {
    color          : var(--primary-text);
    text-decoration: none;
    font-size      : 1rem
}

/* لینک‌های ناوبری: زیرخط طلایی برای هاور و صفحه‌ی جاری (مثل طرح مینیاتوری) */
.nav-center a {
    padding      : .4rem 0;
    border-bottom: 2px solid transparent;
    transition   : border-color .2s ease, color .2s ease
}

.nav-center a:hover,
.nav-center a.is-active {
    border-bottom-color: var(--accent-color)
}

.nav-center a.is-active {
    font-family: BoldFarhang, sans-serif
}

.nav-left {
    display    : flex;
    align-items: center;
    gap        : 1.5rem
}

.search-form {
    display      : flex;
    align-items  : center;
    background   : color-mix(in srgb, var(--primary-text) 8%, transparent);
    border       : 1px solid color-mix(in srgb, var(--primary-text) 28%, transparent);
    padding      : 3px 5px;
    border-radius: 20px
}

.search-form input {
    background: transparent;
    border    : none;
    color     : var(--primary-text);
    padding   : 5px 10px
}

.search-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color-soft)
}

.search-form input::placeholder {
    color: var(--secondary-text)
}

.search-form button {
    background: none;
    border    : none;
    color     : var(--primary-text);
    font-size : 1.2rem;
    cursor    : pointer
}

.user-account {
    display    : flex;
    align-items: center;
    gap        : 8px
}

/* ورود/حساب کاربری: دکمه‌ی توخالی با حاشیه‌ی طلایی تا به‌وضوح قابل‌تشخیص و کلیک‌پذیر باشد */
.user-account > a {
    display      : inline-flex;
    align-items  : center;
    padding      : .3rem 1rem;
    border       : 1.5px solid var(--accent-color);
    border-radius: 999px;
    color        : var(--primary-text) !important;
    transition   : background-color .2s ease
}

.user-account > a:hover {
    background-color: var(--accent-color-soft)
}

.user-account img {
    width        : 50px;
    height       : 50px;
    border-radius: 50%
}

/* --- انتخاب‌گر تم شخصی‌سازی (سمت کاربر، بدون نیاز به لاگین) --- */
.theme-picker {
    position: relative
}

.theme-picker-toggle {
    background     : none;
    border         : 1px solid color-mix(in srgb, var(--primary-text) 35%, transparent);
    color          : var(--primary-text);
    width          : 38px;
    height         : 38px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 1.1rem;
    cursor         : pointer;
    transition     : border-color .2s ease, transform .2s ease
}

.theme-picker-toggle:hover {
    border-color: var(--accent-color);
    transform   : rotate(15deg)
}

.theme-picker-panel {
    display         : none;
    position        : absolute;
    top             : calc(100% + 10px);
    left            : 0;
    background-color: var(--surface);
    border          : 1px solid var(--border-subtle);
    border-radius   : 10px;
    padding         : .75rem;
    min-width       : 190px;
    box-shadow      : 0 10px 30px #00000040;
    z-index         : 60
}

.theme-picker.open .theme-picker-panel {
    display: block
}

.theme-picker-title {
    font-size    : .8rem;
    color        : var(--secondary-text);
    margin-bottom: .5rem
}

.theme-picker-option {
    display      : flex;
    align-items  : center;
    gap          : .6rem;
    width        : 100%;
    background   : none;
    border       : none;
    color        : var(--primary-text) !important;
    padding      : .5rem;
    border-radius: 8px;
    cursor       : pointer;
    font-size    : .9rem;
    text-align   : right
}

.theme-picker-option:hover,
.theme-picker-option.active {
    background-color: var(--accent-color-soft)
}

.theme-picker-swatch {
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    flex-shrink  : 0;
    border       : 2px solid color-mix(in srgb, var(--primary-text) 30%, transparent)
}

.hero-content {
    position       : relative;
    z-index        : 5;
    flex-grow      : 1;
    display        : flex;
    justify-content: center;
    align-items    : center
}

.hero-links {
    display   : flex;
    gap       : 3rem;
    margin-top: -50px
}

.hero-circle {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 1rem;
    text-decoration: none;
    color          : var(--light-text);
    font-size      : 1.1rem;
    font-weight    : 700
}

.circle-image-wrapper {
    width          : 150px;
    height         : 150px;
    border-radius  : 50%;
    background     : #0006;
    border         : 3px solid var(--light-text);
    display        : flex;
    justify-content: center;
    align-items    : center;
    transition     : transform .3s ease
}

.hero-circle:hover .circle-image-wrapper {
    transform: scale(1.05)
}

.circle-image-wrapper img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 50%
}

main {
    padding: 2rem 3rem
}

.content-section {
    margin-bottom: 3rem
}

.section-header {
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 1.5rem;
    display        : flex
}

.section-header h2 {
    font-size: 1.8rem;
    color    : var(--primary-text)
}

.section-header-p {
    margin   : 0 20px 20px;
    font-size: 1rem;
    color    : var(--secondary-text)
}

.view-more {
    text-decoration: none;
    color          : var(--accent-color);
    font-weight    : 700
}

.cards-container {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 1.5rem
}

.event-card {
    background-color: var(--surface);
    border-radius   : 12px;
    box-shadow      : var(--card-shadow);
    overflow        : hidden;
    transition      : transform .3s ease, box-shadow .3s ease;
    text-align      : right
}

.event-card:hover {
    transform : translateY(-5px);
    box-shadow: 0 10px 20px #00000026
}

.card-image {
    position: relative;
    width   : 100%;
    height  : 180px
}

.card-image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.tag {
    position        : absolute;
    top             : 10px;
    left            : 10px;
    background-color: red;
    color           : #fff;
    padding         : 4px 10px;
    border-radius   : 5px;
    font-size       : .9rem;
    font-weight     : 700
}

.card-info {
    padding: 1rem
}

.card-info h3 {
    margin   : 0 0 .5rem;
    font-size: 1.2rem
}

.card-info .date-location {
    font-size    : .9rem;
    color        : var(--secondary-text);
    margin-bottom: 1rem
}

.card-info .price {
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--accent-color)
}

.large-card {
    grid-column: span 2;
    position   : relative;
    color      : var(--primary-text)
}

.live-action-container .btn-primary {
    background-color: var(--button-primary);
    border-color    : var(--button-primary)
}

.live-action-container .btn-primary:hover {
    background-color: var(--button-primary-hover);
    border-color    : var(--button-primary-hover)
}

.large-card .card-image {
    height: 300px
}

.card-info-overlay {
    position  : absolute;
    bottom    : 0;
    right     : 0;
    left      : 0;
    padding   : 1.5rem;
    background: linear-gradient(to top, #000c, transparent)
}

.ticket-button {
    background-color: var(--button-primary);
    color           : #fff;
    border          : none;
    padding         : 10px 20px;
    border-radius   : 5px;
    cursor          : pointer;
    font-weight     : 700;
    font-size       : 1rem;
    margin-top      : 1rem;
    transition      : background-color .2s ease
}

.ticket-button:hover {
    background-color: var(--button-primary-hover)
}

.main-footer {
    background-color: var(--background-secondary);
    color           : var(--primary-text);
    border-top      : 1px solid var(--border-subtle);
    padding         : 3rem 3rem 0
}

.footer-content {
    display  : flex;
    flex-wrap: wrap;
    gap      : 2rem
}

.footer-column {
    flex     : 1;
    min-width: 200px
}

.footer-column h4 {
    font-size    : 1.2rem;
    margin-bottom: 1rem
}

.footer-column ul {
    list-style: none;
    padding   : 0
}

.footer-column ul li a {
    color          : #ccc;
    line-height    : 2.2;
    text-decoration: none
}

.subscribe-column p {
    color    : #ccc;
    font-size: .9rem
}

.subscribe-form {
    display   : flex;
    margin-top: 1rem
}

.subscribe-form input {
    flex-grow    : 1;
    padding      : 10px;
    border       : 1px solid #555;
    background   : #333;
    color        : #fff;
    border-radius: 0 5px 5px 0
}

.subscribe-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color-soft)
}

.subscribe-form button {
    padding         : 10px 15px;
    border          : none;
    background-color: var(--button-primary);
    color           : #fff;
    cursor          : pointer;
    border-radius   : 5px 0 0 5px
}

.footer-bottom {
    text-align: center;
    padding   : 1.5rem 0;
    font-size : .9rem;
    color     : #888
}

.end-footer {
    border-bottom : 1px solid #444;
    padding-bottom: 2rem
}

.end-footer p {
    color      : var(--primary-text);
}

.blog-card {
    height             : 35vh !important;
    background-size    : cover;
    width              : 100%;
    height             : fit-content !important;
    background-position: center
}

.blog-card .card-title {
    font-size: x-large
}

.blog-card .card-text {
    background-color: color-mix(in srgb, var(--background-secondary) 80%, transparent);
    color           : #ccc;
    opacity         : 75%;
    font-size       : medium;
    padding         : 15px 5px;
    border-radius   : 10px
}

a {
    text-decoration: none !important;
    color          : var(--primary-text) !important
}















@media screen and (max-width: 768px) {
    main {
        padding: 0
    }




}

.hamburger-menu-button {
    display   : none;
    background: none;
    border    : none;
    color     : var(--primary-text);
    font-size : 2.5rem;
    cursor    : pointer;
    z-index   : 1001
}

.mobile-nav-panel {
    display: none
}

@media screen and (max-width: 992px) {
    .main-nav {
        padding: 1rem 1.5rem
    }

    .desktop-menu {
        display: none !important
    }

    .hamburger-menu-button {
        display: block
    }

    .mobile-nav-panel {
        display         : flex;
        flex-direction  : column;
        gap             : 1.5rem;
        position        : fixed;
        top             : 0;
        left            : -100%;
        width           : 100%;
        height          : 100vh;
        padding         : 6rem 2rem 2rem;
        background-color: color-mix(in srgb, var(--background-secondary) 96%, transparent);
        backdrop-filter : blur(10px);
        transition      : left .3s ease-in-out;
        z-index         : 1000;
        text-align      : center
    }

    .mobile-nav-panel.active {
        left: 0
    }

    .mobile-nav-panel a {
        font-size  : 1.5rem;
        font-family: 'BoldFarhang', sans-serif;
        color      : var(--primary-text) !important
    }

    .mobile-nav-panel hr {
        border-color: var(--border-subtle)
    }

    .hamburger-menu-button.is-active .bi-list {
        display: none
    }

    .hamburger-menu-button:not(.is-active) .bi-x-lg {
        display: none
    }

    .hamburger-menu-button.is-active::before {
        content    : '\F62A';
        font-family: "bootstrap-icons";
        font-size  : 2rem
    }









    .main-nav .logo img {
        height    : 44px;
        width     : auto;
        transition: height .3s ease
    }

    .hero-section {
        height        : auto;
        padding-bottom: 4rem
    }

    .hero-links {
        gap      : 1.5rem;
        flex-wrap: wrap;
        padding  : 0 1rem
    }

    .hero-circle-image {
        width : 110px;
        height: 110px
    }

    .hero-link-text-box {
        min-width : 140px;
        padding   : .9rem 1rem .7rem;
        margin-top: -35px
    }

    .hero-link-text-box span {
        font-size: .9rem
    }

    .mobile-nav-panel a {
        font-size: 1.3rem
    }

    .hero-section .hero-links {
        display       : flex !important;
        flex-direction: column !important;
        align-items   : center !important;
        gap           : 2.5rem !important;
        width         : 100% !important;
        padding-top   : 2rem !important
    }

    .hero-section .hero-link-item {
        width         : auto !important;
        display       : flex !important;
        flex-direction: column !important;
        align-items   : center !important
    }

    .hero-section .hero-circle-image {
        width        : 140px !important;
        height       : 140px !important;
        margin-bottom: 0 !important;
        border-width : 3px !important;
        box-shadow   : 0 4px 10px #00000040 !important
    }

    .hero-section .hero-link-text-box {
        margin-top      : -10px !important;
        width           : 180px !important;
        border-radius   : 8px !important;
        padding         : .75rem 1rem !important;
        box-shadow      : none !important;
        background-color: #121212cc !important
    }

    .hero-section .hero-link-text-box span {
        font-size  : 1rem !important;
        font-weight: 700 !important;
        color      : #fff !important
    }
}

@media screen and (max-width: 480px) {
    .hero-links {
        gap: 2rem
    }

    .hero-circle-image {
        width : 100px;
        height: 100px
    }

    .hero-link-text-box {
        min-width : 130px;
        margin-top: -30px
    }

    .hero-link-text-box span {
        font-size: .85rem
    }
}

/* توجه: قانون body بالاتر (با var(--background-secondary)) مرجع اصلی است؛
   این بلوک قبلاً رنگ را با #121212 ثابت بازنویسی می‌کرد و فونت Vazirmatn
   که اصلاً در پروژه بارگذاری نمی‌شود را ست می‌کرد (هر دو حذف شدند). */

.content-section {
    padding: 60px 2rem
}

.section-header {
    text-align   : center;
    margin-bottom: 40px
}

.section-header h2 {
    font-size    : 2.5rem;
    margin-bottom: 10px
}

.section-header .section-header-p {
    max-width: 600px;
    margin   : 0 auto;
    color    : #aaa
}

.about-hero-section .hero-image-container {
    position       : relative;
    width          : 100%;
    height         : 60vh;
    display        : flex;
    justify-content: center;
    align-items    : end;
    margin         : 10px 0
}

.about-hero-section .hero-image-container img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.about-hero-section .hero-overlay {
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: #0006
}

.about-hero-section .play-button {
    position        : absolute;
    z-index         : 2;
    width           : 90px;
    height          : 90px;
    background-color: #ffffffe6;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    margin-left     : 30px;
    align-items     : center;
    text-decoration : none;
    transition      : transform .3s ease, background-color .3s ease
}

.about-hero-section .play-button:hover {
    transform       : scale(1.1);
    background-color: #fff
}

.about-hero-section .play-button .bi-play-fill {
    font-size   : 50px;
    color       : #121212;
    margin-top  : 13px;
    margin-right: -5px
}

.schedule-container {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 1.5rem;
    max-width            : 1200px;
    margin               : 0 auto
}

.schedule-item {
    background-color: #1e1e1e;
    padding         : 1.5rem;
    border-radius   : 8px;
    border-right    : 4px solid var(--accent-color);
    transition      : transform .2s ease
}

.schedule-item:hover {
    transform: translateY(-5px)
}

.schedule-day {
    font-size    : 1.5rem;
    font-weight  : 700;
    margin-bottom: .5rem
}

.schedule-time {
    font-size    : 1.1rem;
    color        : var(--accent-color);
    margin-bottom: 1rem
}

.schedule-details {
    color: #bbb
}

.team-cards-container {
    display        : flex;
    justify-content: center;
    gap            : 2rem;
    flex-wrap      : wrap
}

.team-card {
    background-color: #1e1e1e;
    border-radius   : 10px;
    overflow        : hidden;
    width           : 280px;
    text-align      : center;
    box-shadow      : 0 4px 15px #0003
}

.team-card img {
    width     : 100%;
    height    : 250px;
    object-fit: cover
}

.team-card-info {
    padding: 1.5rem
}

.member-name {
    font-size: 1.4rem;
    margin   : 0
}

.member-role {
    color : #aaa;
    margin: .25rem 0 1rem
}

.social-links a {
    color     : #ccc;
    font-size : 1.5rem;
    margin    : 0 .5rem;
    transition: color .2s ease
}

.social-links a:hover {
    color: var(--accent-color)
}

.join-us-section {
    display         : flex;
    background-color: #1e1e1e;
    align-items     : center;
    margin          : 4rem 0
}

.join-us-content {
    flex   : 1;
    padding: 4rem
}

.join-us-content h2 {
    font-size    : 2.5rem;
    margin-bottom: 1rem
}

.join-us-content p {
    color        : #aaa;
    margin-bottom: 2rem
}

.primary-button {
    background-color: #8a2be2;
    color           : #fff;
    border          : none;
    padding         : 12px 30px;
    border-radius   : 5px;
    font-size       : 1rem;
    font-weight     : 700;
    cursor          : pointer;
    transition      : background-color .3s ease
}

.primary-button:hover {
    background-color: #9932cc
}

.join-us-image {
    flex   : 1;
    display: none
}

@media (min-width: 768px) {
    .join-us-image {
        display: block
    }

    .join-us-image img {
        width     : 100%;
        height    : 100%;
        object-fit: cover
    }
}

.rubika-logo {
    height       : 28px !important;
    width        : 26px !important;
    margin-bottom: 4px
}

.breadcrumbs {
    padding   : 15px 0;
    min-height: 40px
}

.breadcrumbs a,
.breadcrumbs span {
    color: #adadad
}

.breadcrumbs ol {
    display   : flex;
    flex-wrap : wrap;
    list-style: none;
    padding   : 0;
    margin    : 0;
    font-size : 14px
}

@media (max-width:992px) {
    .breadcrumbs ol {
        margin-top: 10px
    }
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding: 0 7px;
    color  : #adadad;
    content: "/"
}

@media (max-width:768px) {
    .breadcrumbs .d-flex {
        display: block !important
    }

    .breadcrumbs ol {
        display: block
    }

    .breadcrumbs ol li {
        display: inline-block
    }
}

.share-btn {
    width           : 1.5rem;
    height          : 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    background-color: #3a83b254
}

.share-btn img {
    filter: invert(90%)
}

.cart-fab {
    position        : fixed;
    bottom          : 25px;
    left            : 35px;
    width           : 60px;
    height          : 60px;
    background-color: #192a3d;
    color           : #fff;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.8rem;
    text-decoration : none;
    box-shadow      : 0 4px 12px #0003;
    z-index         : 1000;
    transition      : transform .2s ease-in-out
}

.cart-fab:hover {
    transform: scale(1.1);
    color    : #fff
}

.cart-badge {
    position        : absolute;
    top             : -5px;
    right           : -5px;
    background-color: #dc3545;
    color           : #fff;
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    font-size       : .8rem;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 2px solid #fff;
    transition      : transform .2s ease;
    transform       : scale(0)
}

.cart-badge.visible {
    transform: scale(1)
}

.subscribe-form input {
    width: 75%
}

.dashboard-container {
    display       : flex;
    flex-direction: row-reverse;
    gap           : 20px;
    max-width     : 1200px;
    margin        : 20px auto;
    padding       : 0 15px
}

.dashboard-nav {
    flex            : 0 0 260px;
    background-color: var(--nav-bg);
    border-radius   : 8px;
    border          : 1px solid var(--border-color);
    padding         : 15px 0;
    height          : fit-content
}

.dashboard-nav ul {
    list-style: none;
    padding   : 0;
    margin    : 0
}

.dashboard-nav a {
    display        : flex;
    align-items    : center;
    padding        : 12px 20px;
    text-decoration: none;
    color          : var(--secondary-text);
    font-weight    : 500;
    transition     : all .2s ease-in-out;
    border-right   : 3px solid transparent
}

.dashboard-nav a:hover {
    background-color: var(--accent-color-light);
    color           : var(--primary-text)
}

.dashboard-nav a.active {
    background-color  : var(--accent-color-light);
    color             : #f6f1a8 !important;
    border-right-color: var(--accent-color)
}

.dashboard-nav a svg {
    width      : 20px;
    height     : 20px;
    margin-left: 10px
}

.nav-separator {
    height          : 1px;
    background-color: var(--border-color);
    margin          : 10px 20px
}

.dashboard-content {
    flex: 1
}

.dashboard-card {
    background-color: var(--content-bg);
    border-radius   : 8px;
    border          : 1px solid var(--border-color);
    padding         : 30px
}

@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column
    }

    .dashboard-nav {
        flex-basis: auto
    }
}

.avatar-selector {
    display  : flex;
    flex-wrap: wrap;
    gap      : 15px
}

.avatar-option {
    position: relative
}

.avatar-option .avatar-radio {
    position: absolute;
    opacity : 0;
    width   : 0;
    height  : 0
}

.avatar-option img {
    width        : 80px;
    height       : 80px;
    border-radius: 50%;
    border       : 3px solid transparent;
    cursor       : pointer;
    transition   : all .2s ease
}

.avatar-option img:hover {
    transform: scale(1.1)
}

.avatar-option .avatar-radio:checked+label img {
    border-color: var(--accent-color);
    box-shadow  : 0 0 10px #0d6efd80
}

.dashboard-nav {
    background-color: var(--dash-bg-dark);
    padding         : 1rem 0;
    border-radius   : 8px;
    width           : 280px;
    height          : 100%;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, .2)
}

.dashboard-nav ul {
    list-style-type: none;
    padding        : 0;
    margin         : 0
}

.dashboard-nav ul li a {
    display        : flex;
    align-items    : center;
    padding        : 12px 25px;
    color          : var(--dash-text-color);
    text-decoration: none;
    font-size      : 1rem;
    font-weight    : 500;
    transition     : background-color .3s, color .3s, border-right-color .3s;
    border-right   : 4px solid transparent
}

.dashboard-nav ul li a i {
    font-size  : 1.2rem;
    margin-left: 12px
}

.dashboard-nav ul li a:hover {
    background-color: var(--dash-bg-hover);
    color           : var(--dash-text-hover)
}

.dashboard-nav ul li a.active {
    background-color  : var(--dash-active-bg);
    color             : var(--dash-text-hover);
    font-weight       : 700;
    border-right-color: var(--dash-active-border)
}

.dashboard-nav ul li.nav-separator {
    height          : 1px;
    background-color: var(--dash-separator-color);
    margin          : 1rem 1.5rem
}

.dashboard-nav ul li a[href*=Logout]:hover {
    background-color: #dc3545;
    color           : #fff
}

/* --- انیمیشن سبک هنگام اسکرول (fade-up)، فقط CSS + IntersectionObserver کوچک، بدون کتابخانه --- */
.reveal-on-scroll {
    opacity  : 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease
}

.reveal-on-scroll.is-visible {
    opacity  : 1;
    transform: translateY(0)
}

/* استگرِ ظریف برای کارت‌هایی که با هم ظاهر می‌شوند، تا یک‌دفعه پاپ نزنند */
.reveal-stagger > * {
    opacity  : 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease
}

.reveal-stagger.is-visible > * {
    opacity  : 1;
    transform: translateY(0)
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .03s }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .13s }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .18s }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .23s }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .28s }

/* کاربرانی که حرکت کمتر را ترجیح می‌دهند (تنظیمات سیستم‌عامل) چیزی متحرک نمی‌بینند */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .reveal-stagger > * {
        opacity  : 1 !important;
        transform: none !important;
        transition: none !important
    }
}

/* ===================== پلیر سراسری ادبراه ===================== */
body.has-global-player {
    padding-bottom: 88px
}

.global-player-bar {
    position        : fixed;
    bottom          : 0;
    right           : 0;
    left            : 0;
    z-index         : 1500;
    display         : flex;
    align-items     : center;
    gap             : 1.25rem;
    height          : 80px;
    padding         : 0 1.5rem;
    background-color: var(--surface);
    border-top      : 1px solid var(--border-subtle);
    box-shadow      : 0 -8px 30px #00000059;
    animation       : gp-slide-up .25s ease-out
}

.global-player-bar[hidden] {
    display: none
}

@keyframes gp-slide-up {
    from {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

.gp-track-info {
    display    : flex;
    align-items: center;
    gap        : .75rem;
    min-width  : 180px;
    max-width  : 260px;
    overflow   : hidden
}

.gp-cover {
    width        : 52px;
    height       : 52px;
    border-radius: 8px;
    object-fit   : cover;
    flex-shrink  : 0;
    background-color: var(--surface-strong)
}

.gp-meta {
    display       : flex;
    flex-direction: column;
    overflow      : hidden
}

.gp-title {
    color        : var(--primary-text) !important;
    font-size    : .95rem;
    font-weight  : 700;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}

.gp-author {
    color        : var(--secondary-text);
    font-size    : .8rem;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}

.gp-center {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .4rem;
    max-width     : 640px;
    margin        : 0 auto
}

.gp-controls {
    display    : flex;
    align-items: center;
    gap        : 1rem
}

.gp-icon-btn {
    background: none;
    border    : none;
    color     : var(--primary-text);
    font-size : 1.1rem;
    cursor    : pointer;
    display   : flex;
    align-items: center;
    justify-content: center;
    width     : 36px;
    height    : 36px;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease
}

.gp-icon-btn:hover {
    background-color: var(--accent-color-soft);
    color           : var(--accent-color)
}

.gp-play-btn {
    background     : var(--accent-color);
    color          : var(--background-secondary);
    border         : none;
    width          : 42px;
    height         : 42px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 1.3rem;
    cursor         : pointer;
    transition     : transform .15s ease
}

.gp-play-btn:hover {
    transform: scale(1.06)
}

.gp-progress-wrap {
    display    : flex;
    align-items: center;
    gap        : .6rem;
    width      : 100%
}

.gp-time {
    font-size: .75rem;
    color    : var(--secondary-text);
    min-width: 36px;
    text-align: center
}

.gp-progress-bar {
    position        : relative;
    flex            : 1;
    height          : 5px;
    border-radius   : 3px;
    background-color: var(--border-subtle);
    cursor          : pointer
}

.gp-progress-buffered,
.gp-progress-fill {
    position     : absolute;
    top          : 0;
    right        : 0;
    height       : 100%;
    border-radius: 3px
}

.gp-progress-buffered {
    background-color: #ffffff26;
    width           : 0%
}

.gp-progress-fill {
    background-color: var(--accent-color);
    width           : 0%
}

.gp-progress-handle {
    position        : absolute;
    top             : 50%;
    right           : 0%;
    width           : 12px;
    height          : 12px;
    border-radius   : 50%;
    background-color: var(--accent-color-strong);
    transform       : translate(50%, -50%);
    opacity         : 0;
    transition      : opacity .15s ease
}

.gp-progress-bar:hover .gp-progress-handle {
    opacity: 1
}

.gp-extra {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    min-width  : 150px;
    justify-content: flex-end
}

.gp-speed-wrap {
    position: relative
}

.gp-speed-btn {
    border-radius: 8px;
    width        : auto;
    padding      : 0 .6rem;
    font-size    : .85rem;
    font-weight  : 700
}

.gp-speed-menu {
    position        : absolute;
    bottom          : calc(100% + 10px);
    left            : 50%;
    transform       : translateX(-50%);
    background-color: var(--surface-strong);
    border          : 1px solid var(--border-subtle);
    border-radius   : 10px;
    padding         : .4rem;
    display         : flex;
    flex-direction  : column;
    min-width       : 100px;
    box-shadow      : 0 10px 25px #00000059;
    z-index         : 10
}

.gp-speed-menu.hidden {
    display: none
}

.gp-speed-option {
    background   : none;
    border       : none;
    color        : var(--primary-text);
    text-align   : center;
    padding      : .4rem;
    border-radius: 6px;
    cursor       : pointer;
    font-size    : .85rem
}

.gp-speed-option:hover,
.gp-speed-option.active {
    background-color: var(--accent-color-soft);
    color           : var(--accent-color)
}

.gp-volume-wrap {
    display    : flex;
    align-items: center;
    gap        : .4rem
}

.gp-volume-slider {
    width   : 80px;
    accent-color: var(--accent-color)
}

@media (max-width: 900px) {
    .gp-track-info {
        min-width: 120px;
        max-width: 150px
    }

    .gp-extra .gp-volume-wrap {
        display: none
    }
}

@media (max-width: 600px) {
    .global-player-bar {
        gap    : .6rem;
        padding: 0 .75rem
    }

    .gp-time {
        display: none
    }

    .gp-speed-wrap {
        display: none
    }
}

/* =====================================================================
   لایه‌ی تزئینات ایرانی — کاشی خاتم، قاب محرابی، حاشیه‌ی جدول، ستاره‌ی هشت‌پر
   (همه‌ی تزئینات SVG هستند و با mask رنگ تم فعال را می‌گیرند)
   ===================================================================== */

/* نوار تزئینی زیر هدر (همه‌ی صفحات) */
.hero-section::after {
    content         : '';
    position        : absolute;
    left            : 0;
    right           : 0;
    bottom          : 0;
    height          : 18px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px;
    mask            : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px
}

/* پس‌زمینه‌ی کاشی‌کاری خاتم در هدر صفحه‌ی خانه، محو به سمت لبه‌ها */
.hero-section.is-home::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background-color: var(--accent-color);
    opacity         : .16;
    -webkit-mask    : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat,
                      radial-gradient(ellipse 70% 90% at 50% 55%, #000 25%, transparent 75%);
    -webkit-mask-composite: source-in;
    mask            : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat,
                      radial-gradient(ellipse 70% 90% at 50% 55%, #000 25%, transparent 75%);
    mask-composite  : intersect
}

/* سرعنوان بخش‌ها: ستاره‌ی هشت‌پر + عنوان + خط تزئینی که تا دکمه‌ی «بیشتر» ادامه دارد */
.content-section,
.gateways-section {
    padding-top   : 2.5rem;
    padding-bottom: 0
}

.section-header {
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    gap            : 1rem;
    text-align     : right;
    margin-bottom  : 1.75rem
}

.section-header h2 {
    display    : flex;
    flex       : 1;
    align-items: center;
    gap        : .85rem;
    margin     : 0;
    font-size  : 1.9rem;
    white-space: nowrap
}

.section-header h2 > i,
.section-header h2 > img {
    display: none
}

.section-header h2::before {
    content         : '';
    flex-shrink     : 0;
    width           : 36px;
    height          : 36px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/star8.svg) center / contain no-repeat;
    mask            : url(/img/miniature/orn/star8.svg) center / contain no-repeat
}

.section-header h2::after {
    content         : '';
    flex            : 1;
    height          : 12px;
    min-width       : 40px;
    background-color: var(--accent-color);
    opacity         : .75;
    -webkit-mask    : url(/img/miniature/orn/rule.svg) repeat-x center / auto 12px;
    mask            : url(/img/miniature/orn/rule.svg) repeat-x center / auto 12px
}

.view-more {
    flex-shrink  : 0;
    padding      : .35rem 1.1rem;
    border       : 1.5px solid var(--accent-color);
    border-radius: 999px;
    color        : var(--primary-text) !important;
    font-size    : .95rem;
    transition   : background-color .2s ease
}

.view-more:hover {
    background-color: var(--accent-color-soft)
}

/* ---------- چرا ادبراه؟ ---------- */
.why-section {
    position        : relative;
    margin          : 3.5rem -3rem 0;
    padding         : 4.25rem 3rem 4.75rem;
    background-color: var(--surface)
}

.why-section::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background-color: var(--accent-color);
    opacity         : .09;
    pointer-events  : none;
    -webkit-mask    : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat;
    mask            : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat
}

/* نوار بالا و پایین بخش */
.why-section::after {
    content         : '';
    position        : absolute;
    left            : 0;
    right           : 0;
    top             : 0;
    height          : 18px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px;
    mask            : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px
}

.why-band-bottom {
    position        : absolute;
    left            : 0;
    right           : 0;
    bottom          : 0;
    height          : 18px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px;
    mask            : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px
}

.why-head {
    position  : relative;
    text-align: center;
    margin    : 0 auto 3rem;
    max-width : 640px
}

.why-star {
    display         : block;
    width           : 64px;
    height          : 64px;
    margin          : 0 auto .6rem;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/star8-ring.svg) center / contain no-repeat;
    mask            : url(/img/miniature/orn/star8-ring.svg) center / contain no-repeat
}

.why-head h2 {
    margin   : 0 0 .6rem;
    font-size: 2.4rem
}

.why-head p {
    margin: 0;
    color : var(--secondary-text);
    font-size: 1.1rem
}

.why-grid {
    position             : relative;
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 1.5rem;
    max-width            : 1200px;
    margin               : 0 auto
}

.why-panel {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    text-align      : center;
    gap             : .75rem;
    padding         : 2.25rem 1.4rem 1.75rem;
    background-color: var(--background-secondary);
    border          : 2px solid var(--accent-color);
    border-radius   : 14px;
    box-shadow      : inset 0 0 0 6px var(--background-secondary), inset 0 0 0 7px var(--border-subtle);
    transition      : transform .25s ease, box-shadow .25s ease
}

.why-panel:hover {
    transform : translateY(-5px);
    box-shadow: inset 0 0 0 6px var(--background-secondary), inset 0 0 0 7px var(--accent-color), var(--card-shadow)
}

.why-num {
    position   : absolute;
    top        : .55rem;
    right      : 1.1rem;
    font-family: BoldFarhang, sans-serif;
    font-size  : 2rem;
    line-height: 1;
    color      : var(--accent-color);
    opacity    : .55
}

/* طاقچه‌ی محرابی برای آیکون هر پنل */
.why-niche {
    position        : relative;
    width           : 88px;
    aspect-ratio    : 100 / 130;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat;
    mask            : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat
}

.why-niche::before {
    content         : '';
    position        : absolute;
    inset           : 4px;
    background-color: var(--surface-strong);
    -webkit-mask    : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat;
    mask            : url(/img/miniature/orn/arch.svg) 0 0 / 100% 100% no-repeat
}

.why-niche .bi {
    position : absolute;
    inset    : 0;
    display  : flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom : 24%;
    font-size: 2.2rem;
    color    : var(--accent-color-strong)
}

.why-panel h3 {
    margin   : .25rem 0 0;
    font-size: 1.3rem
}

.why-panel p {
    margin     : 0;
    font-size  : 1rem;
    line-height: 1.9;
    color      : var(--secondary-text)
}

@media (max-width: 1100px) {
    .why-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 640px) {
    .why-grid { grid-template-columns: 1fr }
}

@media (max-width: 768px) {
    .why-section { margin-inline: 0; padding-inline: 1.25rem }
    .content-section, .gateways-section { padding-inline: 1.25rem }
    .section-header h2 { font-size: 1.45rem; white-space: normal }
    .section-header h2::before { width: 28px; height: 28px }
}

/* نوار تزئینی بالای فوتر */
.main-footer {
    position: relative;
    margin-top: 0
}

.main-footer::before {
    content         : '';
    position        : absolute;
    left            : 0;
    right           : 0;
    top             : 0;
    height          : 18px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px;
    mask            : url(/img/miniature/orn/band.svg) repeat-x center / auto 18px
}

/* ---------- کارت مقالات: متن روی عکس با پرده‌ی تیره، مستقل از روشن/تیره بودن قالب ---------- */
.blog-card {
    min-height   : 300px;
    display      : flex;
    justify-content: flex-end;
    overflow     : hidden;
    border       : 2px solid var(--accent-color);
    border-radius: 14px
}

.blog-card .card-body {
    padding   : 4rem 1.25rem 1.25rem;
    background: linear-gradient(to top, #000000e6 0%, #000000b3 55%, transparent 100%)
}

.blog-card .card-title,
.blog-card .card-title a {
    color: #fff !important
}

.blog-card .card-text {
    background: none;
    opacity   : 1;
    color     : #e8e2d4;
    padding   : 0;
    font-size : 1rem
}

.blog-card .read-more.btn {
    background-color: var(--button-primary);
    border-color    : var(--button-primary);
    border-radius   : 10px
}

.blog-card .read-more a {
    color: #fff !important
}

/* فوتر روی قالب‌های روشن */
.subscribe-column p {
    color: var(--secondary-text)
}

.subscribe-form input {
    background  : var(--surface);
    color       : var(--primary-text);
    border-color: var(--border-subtle)
}

.subscribe-form input::placeholder {
    color: var(--secondary-text)
}

/* چرا ادبراه: طاقچه‌ی بزرگ‌تر و خواناتر */
.why-niche {
    width: 108px
}

.why-niche .bi {
    font-size    : 2.7rem;
    padding-bottom: 20%
}

.why-panel h3 {
    font-size: 1.45rem
}