/* =========================================
   Variables (Light & Dark Theme)
========================================= */
:root {
    /* Core Colors */
    --color-navy: #0A192F;
    --color-copper: #B87333;
    --color-gold: #F5D68F;

    /* Light Theme (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;

    /* UI Elements */
    --pill-radius: 50px;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);
    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/*[data-theme="dark"] {*/
/*    !* Dark Theme *!*/
/*    --bg-primary: var(--color-navy);*/
/*    --bg-secondary: #061121;*/
/*    --text-primary: #ffffff;*/
/*    --text-secondary: #cbd5e0;*/
/*    --accent-primary: var(--color-gold);*/
/*    --accent-secondary: var(--color-copper);*/
/*    --border-color: #1a2a42;*/
/*    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);*/
/*}*/

/* =========================================
   Variables (Light & Dark Theme Melded)
========================================= */
:root {
    /* Core Colors */
    --color-navy: #0A192F;
    --color-copper: #B87333;
    --color-gold: #F5D68F;

    /* UI Elements */
    --pill-radius: 50px;
    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* متغیرهای تم لایت */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);

    /* برای ترکیب با سکشن قبلی (که دارک بوده) */
    --prev-bg: var(--color-navy);
}

/* متغیرهای تم دارک */
.theme-dark {
    --bg-primary: var(--color-navy);
    --bg-secondary: #061121;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e0;
    --accent-primary: var(--color-gold);
    --accent-secondary: var(--color-copper);
    --border-color: #1a2a42;
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

    /* برای ترکیب با سکشن قبلی (که لایت بوده) */
    --prev-bg: #ffffff;
}

/* اعمال خودکار رنگ‌ها به هر سکشن */
.theme-light, .theme-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

::-webkit-scrollbar {
    width: 7px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-navy) !important;
    border: 2px solid var(--color-navy) !important;
    border-radius: 500px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-copper) !important;
    border-color: var(--color-copper) !important;
}

/* از 0 تا 150 پیکسل به نرمی رنگ قبلی را به رنگ جدید تبدیل می‌کند */
/*.section-meld {*/
/*    background-image: linear-gradient(*/
/*            to bottom,*/
/*            var(--prev-bg) 0%,*/
/*            var(--bg-primary) clamp(15px, 12vw, 12px),*/
/*            var(--bg-primary) 100%*/
/*    ) !important;*/
/*    background-color: transparent !important;*/
/*}*/

/* =========================================
   SVG Shape Dividers (Inward Masking)
========================================= */

/* =========================================
   Animated SVG Wave Dividers (Parallax Effect)
========================================= */

/* استایل مشترک و ماسک‌گذاری لایه‌ها */
section.theme-dark.section-meld::before,
section.theme-dark.section-meld::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    /* ارتفاع موج متناسب با رسپانسیو */
    height: clamp(50px, 8vw, 120px);
    background-color: var(--prev-bg);
    pointer-events: none;
    z-index: 1; /* قرارگیری در پس‌زمینه تا مانع کلیک‌ها نشود */

    /* جدا کردن موج نیمه‌شفاف و موج اصلی به دو ماسک مجزا برای حرکت سه‌بعدی */
    -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' opacity='.5'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z'/%3E%3C/svg%3E");

    mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' opacity='.5'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z'/%3E%3C/svg%3E");

    /* سایزهای متفاوت ماسک (موج پشتی عریض‌تر است تا با سرعت متفاوتی حرکت کند) */
    -webkit-mask-size: 250% 100%, 200% 100%;
    mask-size: 250% 100%, 200% 100%;

    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
}

/* موج بالا (متصل به سقف سکشن دارک) */
section.theme-dark.section-meld::before {
    top: -1px;
    transform: none;
    /* انیمیشن ملایم 12 ثانیه‌ای */
    animation: sloshingWaves 12s ease-in-out infinite alternate;
}

/* موج پایین (متصل به کف سکشن دارک) */
section.theme-dark.section-meld::after {
    bottom: -1px;
    transform: rotate(180deg);
    /* انیمیشن 14 ثانیه‌ای معکوس برای ارگانیک‌تر شدن حرکت نسبت به موج بالا */
    animation: sloshingWaves 14s ease-in-out infinite alternate-reverse;
}

/* کی‌فریم انیمیشن رفت و برگشت موج‌ها */
@keyframes sloshingWaves {
    0% {
        -webkit-mask-position: 0% 0%, 0% 0%;
        mask-position: 0% 0%, 0% 0%;
    }
    100% {
        /* ماسک‌ها تا انتهای عرضشان به سمت مخالف سر می‌خورند */
        -webkit-mask-position: 100% 0%, 100% 0%;
        mask-position: 100% 0%, 100% 0%;
    }
}

/* تضمین اینکه محتوای متنی سکشن‌ها روی موج‌های پس‌زمینه قرار بگیرند */
section.theme-dark .page-container {
    position: relative;
    z-index: 5;
}

/* =========================================
   Custom Top Wave Divider for .help-dark
========================================= */
.help-dark {
    position: relative;
    /* غیرفعال کردن بک‌گراند گردینتِ section-meld در صورت تداخل */
    background-image: none !important;
}

/* ایجاد موج فقط در قسمت بالای سکشن */
.help-dark::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: clamp(50px, 8vw, 120px);

    /* خواندن رنگ سکشن قبلی (که دارک است) برای یکپارچگی */
    background-color: var(--prev-bg);

    pointer-events: none;
    z-index: 1;

    /* دو لایه ماسک برای افکت پارالکس سه‌بعدی */
    -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' opacity='.5'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z'/%3E%3C/svg%3E");

    mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' opacity='.5'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z'/%3E%3C/svg%3E");

    -webkit-mask-size: 250% 100%, 200% 100%;
    mask-size: 250% 100%, 200% 100%;

    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;

    /* انیمیشن موج */
    animation: sloshingWaves 12s ease-in-out infinite alternate;
}

/* تضمین روی کار بودن محتوای سکشن نسبت به موج‌ها */
.help-dark .page-container {
    position: relative;
    z-index: 5;
}

body {
    background-color: var(--color-navy); /* بک‌گراند پایه */
}

/* =========================================
   Typography & Fonts
========================================= */
@font-face {
    font-family: 'dana';
    src: url('../fonts/DanaFaNum-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'dana';
    src: url('../fonts/DanaFaNum-ExtraBlack.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'gofteh';
    src: url('../fonts/GoftehFaNumWeb-Heavy.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'dana', sans-serif !important;
    margin: 0;
    direction: rtl;
    text-align: right;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'gofteh' !important;
    color: var(--text-primary);
    font-weight: bold;
}

h1 { font-size: 40px; margin-bottom: 0; }
h2 { font-size: 44px; text-align: center; }
h3 { font-size: 48px; }
h4 { font-size: 30px; margin-bottom: 0; }
h5 { font-size: 20px; margin-bottom: 0; }
h6 { font-size: 18px; margin-bottom: 0; }

p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8em;
    font-weight: normal;
}

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

a:hover {
    color: var(--accent-secondary);
}

/* =========================================
   Layout & Utilities
========================================= */
/* ⚠ پدینگ افقی هیچ‌وقت صفر نمی‌شود.
   قاعدهٔ قبلی از ۹۹۲ پیکسل به بالا پدینگ را صفر می‌کرد؛ روی لپ‌تاپ با زوم ۱۲۵ یا ۱۵۰ درصد،
   عرض منطقی صفحه به همان بازه می‌افتد و محتوا (از جمله چپ و راست هدر) به لبهٔ پنجره
   می‌چسبید. حالا پدینگ با عرض صفحه نسبت دارد و در همهٔ زوم‌ها متناسب می‌ماند. */
.page-container {
    max-width: 1550px;
    margin: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

.img-wrapper {
    width: 100%;
    height: 100%;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pill-radius);
}

.text-wrap {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 14px;
}

.accented {
    color: var(--accent-secondary) !important;
}

.head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

/* =========================================
   Components
========================================= */
.breadcrumb {
    margin-bottom: 0;
    justify-content: center;
}

.breadcrumb-wrapper li {
    padding: 0;
    font-size: 13px;
    color: var(--text-primary);
}

.breadcrumb-wrapper a {
    padding-left: 0.5rem; /* RTL adjusted */
    color: var(--accent-secondary);
    font-weight: 600;
}

.breadcrumb-wrapper li.active {
    font-size: 12px;
    color: var(--accent-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
    padding: 0 5px;
    font-weight: 500;
    color: var(--accent-primary);
}

/* Primary Button with 3D Hover Effect */
.primary-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    height: 45px;
    min-width: 176px !important;
    max-width: fit-content;
    padding: 0 16px;
    border: none;
    background-image: linear-gradient(to right, var(--accent-primary), var(--accent-secondary), var(--accent-secondary), var(--accent-primary));
    background-size: 300% 100%;
    color: #ffffff !important;
    border-radius: var(--pill-radius);
    transition: all var(--transition-slow);
    cursor: pointer;
}

.primary-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(184, 115, 51, 0.3); /* Copper shadow for luxury feel */
}

.primary-btn:active {
    transform: scale(0.95) translateY(0);
    transition: 0.1s;
    box-shadow: none;
}

/* =========================================
   Hero Section Base
========================================= */
.full-width-hero {
    position: relative;
    background-image: url("https://rainbowit.net/html/histudy/assets/images/bg/bg-g1.webp");
    min-height: 100vh;
    background-color: var(--bg-primary);
}

.full-width-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    background: url("https://rainbowit.net/html/histudy/assets/images/bg/banner-bg-shape-1.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 145px;
    z-index: 9;
}

.full-width-hero .text-wrap {
    width: 50%;
    padding: 20px 60px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 22px;
}

.full-width-hero .text-wrap h3 {
    font-size: 40px;
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.8em;
}

@media (max-width: 992px) {
    .full-width-hero .text-wrap {
        width: 100%;
        padding: 20px 24px; /* Integrated mobile padding logic */
    }

    .full-width-hero .text-wrap h3 {
        font-size: 22px;
    }
}

/* =========================================
   Swiper Slider Base
========================================= */
.swiper-button-next:after, .swiper-button-prev:after {
    content: '' !important;
}

.swiper-button-next, .swiper-button-prev {
    width: 45px;
    height: 45px;
    background-color: var(--accent-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: var(--accent-primary);
    transform: scale(1.05);
}

.swiper-button-next:before, .swiper-button-prev:before {
    content: '';
    width: 20px;
    height: 20px;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"%3E%3Cpath d="M7,24a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l8.17-8.17a3,3,0,0,0,0-4.24L6.29,1.71A1,1,0,0,1,7.71.29l8.17,8.17a5,5,0,0,1,0,7.08L7.71,23.71A1,1,0,0,1,7,24Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center center;
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"%3E%3Cpath d="M7,24a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l8.17-8.17a3,3,0,0,0,0-4.24L6.29,1.71A1,1,0,0,1,7.71.29l8.17,8.17a5,5,0,0,1,0,7.08L7.71,23.71A1,1,0,0,1,7,24Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center center;
    mask-size: contain;
    background-color: var(--bg-primary);
    -webkit-mask-size: contain;
}

/* Swapped rotation for RTL logic */
.swiper-button-next:before {
    transform: rotate(180deg);
}

/* =========================================
   Global Primary CTA (Shine Button)
========================================= */
.dm-btn-wrapper .btn-shine {
    position: relative;
    margin: 0;
    padding: 15px;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid var(--accent-primary); /* حاشیه مسی رنگ */
    border-radius: var(--pill-radius); /* استفاده از متغیر شعاع یکپارچه */
    color: var(--accent-primary);
    font-weight: 700;
    font-family: inherit;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.dm-btn-wrapper .btn-shine span {
    color: var(--text-primary); /* هماهنگ با تم دارک/لایت */
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    z-index: 2;
    position: relative;
    transition: color 0.3s ease;
}

.dm-btn-wrapper .btn-shine:hover {
    animation: rotate624 0.7s ease-in-out both;
    border-color: var(--accent-secondary); /* تغییر حاشیه به طلایی در هاور */
}

.dm-btn-wrapper .btn-shine:hover span {
    animation: storm1261 0.7s ease-in-out both;
    animation-delay: 0.06s;
    color: var(--accent-secondary); /* تغییر رنگ متن به طلایی در هاور */
}

@keyframes rotate624 {
    0% { transform: rotate(0deg) translate3d(0, 0, 0); }
    25% { transform: rotate(3deg) translate3d(0, 0, 0); }
    50% { transform: rotate(-3deg) translate3d(0, 0, 0); }
    75% { transform: rotate(1deg) translate3d(0, 0, 0); }
    100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes storm1261 {
    0% { transform: translate3d(0, 0, 0) translateZ(0); }
    25% { transform: translate3d(4px, 0, 0) translateZ(0); }
    50% { transform: translate3d(-3px, 0, 0) translateZ(0); }
    75% { transform: translate3d(2px, 0, 0) translateZ(0); }
    100% { transform: translate3d(0, 0, 0) translateZ(0); }
}

.dm-btn-wrapper .btn-shine:after {
    background: var(--accent-secondary); /* هاله درخشان طلایی */
    content: "";
    height: 155px;
    right: -75px; /* شروع از راست به دلیل ساختار RTL */
    opacity: 0.3;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: 0;
}

.dm-btn-wrapper .btn-shine:hover:after {
    right: 120%; /* حرکت هاله به سمت چپ */
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* =========================================
   Global section eyebrow (small label above a heading)
   ⚠ مرجع، صفحهٔ اصلی است: همان برچسب کوچکِ بالای عنوان سکشن‌های صفحهٔ اصلی
   (brands-subtitle / s-subtitle / c-subtitle / w-top-subtitle) که هر چهارتا دقیقاً
   همین چهار خصوصیت را دارند. عمداً قرص و حاشیه و نقطه ندارد؛ در قالب‌های کدی نسخه‌های
   محلی به شکل قرص درآمده بودند و همان بود که چهار صفحه را ناهمگون می‌کرد.
========================================= */
.dm-eyebrow {
    display: inline-block;
    margin-block-end: 14px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--accent-primary);
}

/* =========================================
   Global Secondary CTA (Ghost Button)
   ⚠ کنار دکمهٔ اصلی می‌نشیند و عمداً همین‌جا تعریف شده، نه در شیوه‌نامهٔ هر قالب: تا
   امروز هر قالب کدی نسخهٔ خودش را داشت و دکمهٔ ثانویه در چهار صفحه چهار شکل بود.
   ابعاد و شعاع دقیقاً با دکمهٔ اصلی هم‌خوان است تا دو دکمه کنار هم هم‌قد باشند.
========================================= */
.dm-btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 15px 26px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius);
    background-color: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast),
                background-color var(--transition-fast);
}

/* ⚠ نام کلاس عمداً دوبار آمده و این یک ترفند بی‌دلیل نیست. دو چیز به رنگ این دکمه
   حمله می‌کنند: قاعدهٔ صورتیِ سطح سایت که رنگ هر پیوند را با اجبار می‌نشاند، و قاعدهٔ
   خنثی‌سازِ خودِ قالب‌ها که آن را با اجبارِ قوی‌تری خنثی می‌کند. تکرار کلاس، وزن این
   قاعده را از هر دو بالاتر می‌بَرَد، بی‌آنکه لازم باشد هر قالب نام این دکمه را در
   فهرست استثناهای خودش بنویسد. مؤلفهٔ سراسری باید رنگ خودش را خودش نگه دارد. */
.dm-btn-ghost.dm-btn-ghost,
.dm-btn-ghost.dm-btn-ghost:visited {
    color: var(--text-primary) !important;
}

.dm-btn-ghost.dm-btn-ghost:hover,
.dm-btn-ghost.dm-btn-ghost:focus-visible {
    border-color: var(--accent-primary);
    background-color: rgba(184, 115, 51, .08);
    color: var(--accent-primary) !important;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-5px);
}

/* هماهنگی با دارک مود */
[data-theme="dark"] .back-to-top {
    background-color: var(--accent-secondary);
    color: var(--color-navy);
}

[data-theme="dark"] .back-to-top:hover {
    background-color: var(--accent-primary);
    color: #ffffff;
}