/*=== IRANSsansX font face ===*/
@font-face {
    font-family: 'IRANSansX';
    src: url('../font/IRANSansX-Regular.woff') format('woff'),
    url('../font/IRANSansX-Regular.woff2') format('woff2'),
    url('../font/IRANSansX-Bold.woff') format('woff'),
    url('../font/IRANSansX-Bold.woff2') format('woff2'),
    url('../font/IRANSansX-Light.woff') format('woff'),
    url('../font/IRANSansX-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

/* فونت کلی هدر */
.site-header,
.site-header nav a,
.site-header .logo {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600; /* پیش‌فرض هدر */
}

/* لوگو سنگین‌تر */
.site-header .logo {
    font-weight: 800;
    font-size: 1.4rem;
}

/* لینک‌های منو سبک‌تر */
.site-header nav a {
    font-weight: 500;
}

h1, h2 {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
}


/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('../font/IRANSansX-Bold.woff') format('woff'),*/
/*    url('../font/IRANSansX-Bold.woff2') format('woff2');*/
/*    font-weight: 700;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('../font/IRANSansX-Light.woff') format('woff'),*/
/*    url('../font/IRANSansX-Light.woff2') format('woff2');*/
/*    font-weight: 300;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('../font/IRANSansX-Medium.woff') format('woff'),*/
/*    url('../font/IRANSansX-Medium.woff2') format('woff2');*/
/*    font-weight: 500;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/


/* ===== Theme Tokens ===== */
:root{
    /* رنگ‌های پیش‌فرض (روز) */
    --text:#1c1d22;
    --muted:#5e6677;
    --brand:#00d991;
    --brand-dark:#00b678;

    /* شیشه/بلور و بک‌گراند */
    --bg-blur: 10px;
    --bg-brightness: 1;     /* روز روشن‌تر */
    --panel-bg: rgba(255,255,255,.65); /* کارت/سکشن روز */

    /* دکمه/منو */
    --menu-fg:#222;
    --menu-fg-active:#00d991;
    --panel-border: 1px solid rgba(0,0,0,.10);

    /* ارتفاع فوتر  */
    --footer-h: 64px;
}

/* حالت شب */
body.dark-mode{
    --text:#e6e9ef;
    --muted:#a7b0c0;
    --bg-blur: 12px;
    --bg-brightness: .6;    /* شب تیره‌تر */
    --panel-bg: rgba(0,0,0,.45);
    --menu-fg:#e6e9ef;
    --menu-fg-active:#00d991;
    --panel-border: 1px solid rgba(255,255,255,.14);
}


/* بدنه + بک‌گراند ثابت با بلور و روشنایی پویا */
html,body{height:100%}
body{
    margin:0;
    color:var(--text);
    font-family: 'IRANSansX', Vazirmatn, sans-serif;
    position:relative;
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed; inset:0; z-index:-1;
    background: url("../images/bk3.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: 1400px auto;      /* taiin size back site */
    filter: blur(var(--bg-blur)) brightness(var(--bg-brightness));
    transform: translateZ(0);           /* کمک به عملکرد */
}

/* شیشه‌ی عمومی روی هر سکشن/کارت */
.glass, .section.glass, .card{
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: var(--panel-border);
    padding: 20px;
}

/* هدر/منو رنگ‌ها را از توکن‌ها بگیرند */
.menu>li>a{ color: var(--menu-fg); }
.menu>li>a:hover{ color: var(--menu-fg-active); }
.menu>li>a.active{ color: var(--menu-fg-active); background: rgba(0,0,0,.06); }
.btn-ghost{ color: var(--menu-fg); border:1px solid rgba(0,0,0,.15) }
body.dark-mode .btn-ghost{ color:#e6e9ef; border-color: rgba(255,255,255,.22) }
.btn-ghost:hover{ background: rgba(225,225,225,08) }

/* دکمه تغییر تم */
.theme-toggle{
    border:1px solid rgba(0,0,0,.15);
    border-radius:12px;
    background: rgba(255,255,255,.6);
    padding:8px 12px;
    cursor:pointer; font-weight:700;
    transition:.2s;
}
.theme-toggle:hover{ filter: brightness(0.95) }
body.dark-mode .theme-toggle{
    border-color: rgba(255,255,255,.22);
    background: rgba(0,0,0,.35);
    color:#e6e9ef;
}

/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:1000;  padding: 10px 0px; padding-inline-start: 60px;  padding-inline-end: 60px;
    transition: box-shadow 0.3s ease, background 0.3s ease; font-family: 'IRANSansX'; font-weight: 600;  }
.site-header .container{ display:flex; align-items:center;  justify-content:space-between;  gap: 40px;
    height: 40px;}
.logo{ display:flex; align-items:center; gap:10px; font-weight:800 }
.logo img{ height:60px; display:block;  border-radius: 7px; }
.auth-actions{ margin-inline-start:auto; display:flex; gap:10px;}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px; border-radius:14px; border:1px solid transparent; font-weight:700; line-height:1; transition:.2s
}
.btn-primary{ background:var(--brand); color:#021018; border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-dark); }

/* ===== Menu + Submenu ===== */
.main-nav{ margin-inline-start:24px }
.menu{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0 }
.menu>li{ position:relative }
.menu>li>a{ display:block; padding:10px 12px; border-radius:10px; color: var(--menu-fg);  transition:.25s; }
.menu>li>a:hover{ color:var(--brand) }
.menu>li>a.active{ color:var(--brand); background:rgba(255,255,255,.06); }

/* زیرمنو */
.has-submenu::after{ content:""; position:absolute; top:100%; right:0; width:100%; height:12px; }
.submenu{
    position:absolute; top:100%; right:0; min-width:240px; margin-top:10px; padding:8px;
    list-style:none; border:1px solid var(--line); border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-1);
    opacity:0; visibility:hidden; pointer-events:none;
    transform: translateX(14px) translateY(10px);
    transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
    z-index:1000;
}
.submenu li{ border-bottom:1px solid rgba(255,255,255,.12) }
.submenu li:last-child{ border-bottom:none }
.submenu a{ display:block; padding:10px 12px; border-radius:10px; color: var(--menu-fg); transition:.25s }
.submenu a:hover{ color:var(--brand); background: rgba(255,255,255,.08) }
.has-submenu:hover>.submenu{
    opacity:1; visibility:visible; pointer-events:auto; transform: translateX(0) translateY(0);
    transition: transform .25s ease, opacity .25s ease, visibility 0s;
}
/* برا فاصله مطالب داخل بادی */
.container {
    width: calc(100% - 60px);   /* یعنی از هر طرف 5px فاصله */
    margin: 0 auto;
    padding-inline-start: 10px; /* فاصله داخلی از راست 10px */
    padding-inline-end: 10px;      /* از چپ فاصله نداشته باشه */
    padding: 10px;
}
.container .section.glass {
    border-radius: 15px;
}


/* موبایل */
/*nav ul { display:flex; gap:16px; list-style:none; }*/
/*.nav-toggle { display:none; }*/

/*@media (max-width:900px){*/
/*    .nav-toggle { display:block; background:none; border:none; font-size:1.6rem; cursor:pointer; }*/
/*    nav { display:none; position:absolute; top:60px; left:0; right:0; background:#fff; border-top:1px solid #eee; }*/
/*    nav.active { display:block; }*/
/*    nav ul { flex-direction:column; padding:12px; }*/
}
/* زیرمنو همیشه ستونی */
/*.submenu {*/
/*    display: flex;*/
/*    flex-direction: column; !* بچه‌ها زیر هم *!*/
/*    gap: 8px;               !* فاصله بین آیتم‌ها *!*/
/*    padding: 10px;*/
/*    background: #fff;*/
/*    border: 1px solid #eee;*/
/*    border-radius: 6px;*/
/*    position: absolute;*/
/*    top: 100%;  !* دقیقا زیر منو اصلی *!*/
/*    right: 0;   !* برای راست‌چین *!*/
/*    min-width: 160px;*/
/*    z-index: 99;*/
/*}*/
/*!* لینک‌های زیرمنو *!*/
/*.submenu li {*/
/*    list-style: none;*/
/*}*/
/*.submenu a {*/
/*    display: block;*/
/*    padding: 6px 10px;*/
/*    color: #333;*/
/*    white-space: nowrap;*/
/*}*/
/*.submenu a:hover {*/
/*    background: #f1f5f9;*/
/*    color: var(--brand, #10b981);*/
/*}*/

nav ul { display:flex; gap:16px; list-style:none; }
.nav-toggle{ display:none; border:1px solid rgba(255,255,255,.22); background:transparent; color:#e6e9ef; border-radius:10px;
    padding:8px 12px; font-size:18px; cursor:pointer }
@media (max-width:768px){
    .nav-toggle{ display:block; margin-inline-start:auto }
    .menu{ width:100%; display:none; flex-direction:column; gap:0; margin-top:10px }
    .menu.open{ display:flex }
    .menu>li>a{ padding:12px 14px }
    .submenu{ position:static; margin-top:6px; transform:none; opacity:1; visibility:visible; padding:6px; border-radius:12px; box-shadow:none; height:0; overflow:hidden; pointer-events:none; transition:height .2s ease }
    .has-submenu.open>.submenu{ height:auto; pointer-events:auto }
}

/* ===== Sections ===== */
.section{ padding-block:56px }
.section .glass{ padding:22px; border-radius: 15px; }

.cards{ display:grid; gap:16px }
.cards.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.card{
    padding:18px; border-radius:10px; border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .15s, border-color .2s;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.28) }
@media (max-width:992px){ .cards.cols-3{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .cards.cols-3{ grid-template-columns:1fr } }

.lead{ color:var(--muted); line-height:1.9 }

/* ===== Footer ===== */
.site-footer .container {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;   /* فاصله از پایین */
    width: 100%;          /* تمام عرض */
    gap: 20px;
    padding: 40px 0 24px;
}
.footer-grid{
    display:grid; gap:20px; padding:25px; border-radius:var(--r-xl);
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
}
.footer-col h4{ margin:0 0 12px; font-size:16px; }
.footer-desc{ color:var(--muted); line-height:1.9; margin:0 0 12px; }

.footer-logo{ display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:10px; }
.footer-logo img{ height:38px; display:block; }

.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-links a{ color:var(--text); opacity:.9; transition:.2s; }
.footer-links a:hover{ color:var(--brand); opacity:1; }

.footer-socials{ display:flex; gap:8px; margin-top:8px; }
.footer-socials a{
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.22); transition: .2s; color: inherit; font-size: 18px
}
.footer-socials a:hover{ background:rgba(255,255,255,.08); color:var(--brand); }

.footer-newsletter{ display:flex; gap:8px; margin-top:8px; }
.footer-newsletter input{
    flex:1; min-width:0; border:1px solid rgba(255,255,255,.22); border-radius:12px;
    background: rgba(255,255,255,.06); color:#fff; padding:10px 12px;
}
.footer-newsletter input::placeholder{ color:#cfd6df; }
.footer-newsletter input:focus{
    outline:none; border-color:var(--brand);
    box-shadow: 0 0 0 3px rgba(0,217,145,.15);
}

.footer-bottom{
    margin-top:16px; padding:12px 16px; border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer-bottom p{ margin:0; color:#cfd6df; }
.footer-legal{ display:flex; gap:14px; }
.footer-legal a{ color:var(--text); opacity:.9; }
.footer-legal a:hover{ color:var(--brand); opacity:1; }

/* فوتر – شبکه‌های اجتماعی ستونی با Tooltip */
.footer-socials{
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content:flex-start; /* ردیف کنار هم */
    align-items: center; /* وسط چین */
    margin-right: 20px;
}

.footer-socials a{
    position: relative;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    transition: .2s;
    font-size: 18px;
    color: inherit;
}

.footer-socials a:hover{
    background: rgba(255,255,255,.08);
    color: var(--brand);
}

/* Tooltip */
.footer-socials a::after{
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.footer-socials a:hover::after{
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* === neveshteham === */
a { text-decoration: none !important; color: inherit; -webkit-text-decoration-skip: objects; }
a:hover, a:focus { color: var(--brand); text-decoration: none; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none !important; color: inherit; }

/* === color logo/brand === */
.site-header .logo,
.site-header .logo *,
.site-header .logo span { color:#fff !important; fill:#fff !important; }
body:not(.dark-mode) .site-header .logo,
body:not(.dark-mode) .site-header .logo *,
body:not(.dark-mode) .site-header .logo span { color:#111 !important; fill:#111 !important; }

/* .site-header .logo img {
 max-height: 70px;
 filter: brightness(0) invert(1);
 } */
/* اگر جایه اینورست و رایتنس بالا عوض کنم رنگ لوگو فرق میکنه*/

/* === استایل آیتم‌های منو و زیرمنو === */
.nav .menu > li > a,
.submenu a {
    display:block;
    padding:.65rem 1rem;
    border-radius:10px;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.nav .menu > li > a:hover,
.submenu a:hover { color:var(--brand); background:rgba(255,255,255,.06); }

.submenu { margin-top:8px; }   /* کمی فاصله تا فرار نکند */


@media (max-width: 992px){
    .footer-grid{ grid-template-columns: 1.6fr 1fr; }
}
@media (max-width: 640px){
    .footer-grid{ grid-template-columns: 1fr; }
    .footer-newsletter{ flex-direction:column; }
    .footer-bottom{ flex-direction:column; text-align:center; }
}




/* === About Section === */
.about { padding-block: 32px; }

.about .about-card{
    /* اگر کلاس glass از قبل داری، همین کافیه. در غیر اینصورت خط زیر رو فعال کن */
    /* background: rgba(255,255,255,.06); backdrop-filter: blur(8px); */
        display: grid;
        grid-template-columns: 420px 1fr;
        align-items: start;
        gap: 52px;
        padding: 50px;
        border-radius: 16px;
}

.about .about-media img{
    width: 80%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.about .about-content h2{
    margin: 0 0 12px;
    font-size: clamp(24px, 2.4vw, 24px);
    line-height: 1.6;
}

.about .about-content h2 span{
    color: var(--brand, #00b678);
    font-weight: 700;
}

.about .about-content p{
    margin: 0 0 12px;
    opacity: .9;
}

.about .about-list{
    list-style: none;
    margin: 8px 0 20px;
    padding: 0;
}

.about .about-list li{
    position: relative;
    margin: 8px 0;
    padding-inline-start: 22px; /* جای آیکن تیک */
}

.about .about-list li::before{
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    transform: translateY(2px);
    color: var(--brand, #00b678);
    font-weight: bold;
}

/* دکمه اگر کلاس عمومی داری همون می‌مونه؛ اگر ندارم: */
.btn{
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-primary{
    background: var(--brand, #00b678);
    color: #fff;
}
.btn-primary:hover{ filter: brightness(1.05); }

/* --- ریسپانسیو --- */
@media (max-width: 1024px){
    .about .about-card{ grid-template-columns: 360px 1fr; }
}

@media (max-width: 768px){
    .about .about-card{
        grid-template-columns: 1fr;   /* استک عمودی در موبایل */
        text-align: center;
    }
    .about .about-media{
        order: -1;                    /* تصویر بره بالا */
        margin-inline: auto;
        max-width: 380px;
    }
    .about .about-list li{
        padding-inline-start: 0;
    }
}

/* ===== Contact page fix ===== */

/* کارت واحد داخل کانتینر */
.section.contact .contact-wrap{
    padding:24px;
    border-radius:16px;
}

/* عنوان سبز، قطعی */
.section.contact .contact-title{
    margin:0 0 8px;
    color: var(--brand) !important;
    font-weight: 800;
}

/* چیدمان دو ستونه: فرم (join-box) در دسکتاپ سمت چپ */
.section.contact .contact-grid{
    display: flex;
    gap: 24px;
    align-items: stretch;
}
@media (min-width:901px){
    /* چون صفحه RTL است، row-reverse باعث می‌شود اولین بچه (join-box) در سمت چپ قرار بگیرد */
    .section.contact .contact-grid{ flex-direction: row-reverse; }
}
@media (max-width:900px){
    .section.contact .contact-grid{ flex-direction: column; }
}

/* ===== CONTACT – نهایی ===== */

/* 1) باکس ثبت‌نام وسط کانتینر */
.section.contact .contact-grid{
    display:flex;
    justify-content:center;   /* وسط افقی */
    align-items:flex-start;   /* از بالا */
    gap:24px;
    flex-wrap:wrap;           /* تا در موبایل زیر هم بیاد */
}

/* خود باکس فرم ثبت‌نام */
.section.contact .join-box{
    margin-top:20px;
    margin-left:0;            /* هر فاصله قبلی لغو شود */
    max-width: 460px;         /* عرض منطقی فرم */
    width:100%;
    align-self:flex-start;
    border-radius:16px;
    border: var(--panel-border);
    background: var(--panel-bg);
    padding:20px;
    transition: box-shadow .2s, border-color .2s, transform .15s;
}
.section.contact .join-box:hover{ transform: translateY(-2px); }
.section.contact .join-box:focus-within{
    box-shadow:0 0 0 3px rgba(0,217,145,.28);
    border-color:rgba(0,217,145,.65);
}

/* تیتر بالای فرم */
.section.contact .join-title{
    margin:0 0 16px;
    text-align:center;
    color:var(--brand);
    font-weight:700;
}

/* فیلدها با آیکون کنارِ راست داخل فیلد */
.section.contact .join-form{ display:grid; gap:12px; }
.section.contact .join-form .form-group{ position:relative; }
.section.contact .join-form .form-group i{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    color:var(--brand); pointer-events:none;
}
.section.contact .join-form input{
    width:100%; max-width:100%; box-sizing:border-box;
    padding:12px 14px; padding-right:42px;  /* جا برای آیکون */
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px; background:rgba(255,255,255,.06); color:#fff;
}
.section.contact .join-form input:focus{
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(0,217,145,.15);
}

/* 2) ستون آیکون‌های راه ارتباطی: به‌شکل ستون زیر هم */
.section.contact .contact-pane{
    /* این ستون فقط نقش سایدبار آیکون‌ها را داشته باشد */
    padding:0;
}
.section.contact .contact-pane .social-links{
    display:flex;
    flex-direction:column;        /* زیر هم */
    gap:10px;
    align-items:center;           /* وسط ستون */
    justify-content:flex-start;
    margin-top:20px;
}
.section.contact .contact-pane .social-links a{
    width:40px; height:40px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    transition:.2s; font-size:18px; color:inherit;
}
.section.contact .contact-pane .social-links a:hover{
    background:rgba(255,255,255,.08); color:var(--brand);
}

/* 3) دکمه Login هماهنگ با لایت/دارک مود */
.btn-secondary{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 16px; border-radius:14px; font-weight:700;
    border:1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.6);
    color:#1c1d22;               /* متن تیره در لایت */
    transition:.2s;
}
.btn-secondary:hover{ filter:brightness(.96); }

/* در دارک مود به‌صورت خودکار هماهنگ شود */
body.dark-mode .btn-secondary{
    border-color: rgba(255,255,255,.22);
    background: rgba(0,0,0,.35);
    color:#e6e9ef;               /* متن روشن در دارک */
}

/* فاصله 50px بین ثبت‌نام و Login داخل فرم */
.section.contact .join-form .login-btn{
    margin-top:5px; width:100%;
}

/* ریسپانسیو: سایدبار آیکون‌ها برود زیر فرم و وسط بماند */
@media (max-width: 900px){
    .section.contact .contact-pane{
        width:100%; display:flex; justify-content:center;
    }
}
.social-links a{
    position: relative;
}

.social-links a::after{
    content: attr(title);
    position: absolute;
    bottom: 120%;           /* بالای آیکون */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-links a:hover::after{
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ===== Trades Album ===== */
.trades-wrap{ padding:24px; border-radius:16px; }
.trades-head h2{ margin:0 0 6px; color:var(--brand); font-weight:800; }

.filters{
    margin: 12px 0 18px; padding:10px; border-radius:14px;
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.filter-group{ display:flex; gap:8px; }
.chip{
    border:1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    color:#fff;
    padding:8px 12px; border-radius:999px;
    font-weight:600; cursor:pointer; transition:.2s;
}
.chip:hover{ filter:brightness(1.08); }
.chip.is-active{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,217,145,.18);
    color:#021018; background: var(--brand);
}
.filter-stats{ margin-inline-start:auto; opacity:.9; }

.trades-grid{
    display:grid; gap:14px;
    grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1200px){ .trades-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px){ .trades-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px){ .trades-grid{ grid-template-columns: 1fr; } }

.trade-item{
    position:relative; border-radius:14px; overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display:block;
}
.trade-item img{ display:block; width:100%; height:auto; transition: transform .35s ease; }
.trade-item:hover img{ transform: scale(1.03); }
.trade-item .badge{
    position:absolute; inset-inline-start:8px; inset-block-end:8px;
    background: rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:700;
    padding:4px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
}

/* Lightbox */
.lightbox{
    position:fixed; inset:0; background: rgba(0,0,0,.85);
    display:none; align-items:center; justify-content:center; flex-direction:column;
    z-index: 9999; padding:20px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width: min(1200px, 92vw); max-height: 80vh; border-radius:12px; }
.lb-cap{ color:#fff; margin-top:10px; opacity:.9; text-align:center; }
.lb-close{
    position:absolute; top:14px; inset-inline-end:14px; font-size:28px; line-height:1;
    background:transparent; color:#fff; border:none; cursor:pointer;
}
.lb-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer;
}
.lb-nav.prev{ inset-inline-start:16px; }
.lb-nav.next{ inset-inline-end:16px; }
.lb-nav:hover{ background: rgba(255,255,255,.18); }

/* حالت شب/روز با توکن‌های موجودت خودکار سینک می‌شود */

/* ===== Filter Toolbar ===== */
.filters{
    margin: 12px 0 18px;
    padding: 14px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;   /* دو ردیف زیر هم */
    gap: 12px;
}

.filter-group{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* استایل دکمه‌ها (پیش‌فرض روز = مشکی) */
.chip{
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
    border: 1px solid transparent;
    background: #111;   /* روز = مشکی */
    color: #fff;
}

/* دارک مود → سفید با متن مشکی */
body.dark-mode .chip{
    background: #fff;
    color: #111;
}

/* حالت فعال */
.chip.is-active{
    background: var(--brand);
    color: #021018;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,217,145,.18);
}

/* هاور */
.chip:hover{
    background: var(--brand);
    color: #021018;
}/* ===== فیلتر ===== */
.filters{
    margin: 12px 0 18px;
    padding: 14px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;   /* دو ردیف */
    gap: 12px;
    align-items: flex-start;    /* کل دکمه‌ها سمت راست */
}

.filter-group{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end; /* دکمه‌ها در هر ردیف سمت راست */
}

/* استایل دکمه‌ها (پیش‌فرض روز = مشکی) */
.chip{
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
    border: 1px solid transparent;
    background: #111;   /* روز = مشکی */
    color: #fff;
}

/* دارک مود → سفید با متن مشکی */
body.dark-mode .chip{
    background: #fff;
    color: #111;
}

/* فعال */
.chip.is-active{
    background: var(--brand);
    color: #021018;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,217,145,.18);
}

/* هاور – برای هر دو حالت روز و شب */
.chip:hover{
    background: var(--brand) !important;
    color: #021018 !important;
}

/* ===== گرید آلبوم ===== */
.trades-grid{
    display:grid;
    gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
}

.trade-item{
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: block;
    aspect-ratio: 4/3;   /* عرض و ارتفاع همه برابر (مثلاً 4:3) */
}

.trade-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* عکس پر میشه بدون کشیدگی */
    transition: transform .35s ease;
}
.trade-item:hover img{
    transform: scale(1.03);
}
/* کلماتِ قابل هاور */
.hover-green .hw{
    background-image: linear-gradient(
            0deg,
            rgba(0,217,145,.22),
            rgba(0,217,145,.22)
    );
    background-size: 0% 100%;      /* شروع: نامرئی */
    background-repeat: no-repeat;
    background-position: 0 100%;
    border-radius: 6px;
    transition: background-size .18s ease, color .18s ease, box-shadow .18s ease;
}

.hover-green .hw:hover{
    color: var(--brand);
    background-size: 100% 100%;    /* پر شدن زیر موس */
    box-shadow: 0 0 0 2px rgba(0,217,145,.15);
}

/* متن‌ لینک‌دار هم درست دیده شود */
.hover-green a .hw:hover{
    color: currentColor;           /* رنگ لینک را خراب نکند */
    box-shadow: none;
}
/* بخش معرفی آکادمی MQ */
.about-mq{
    text-align: center;         /* عنوان و متن وسط‌چین */
}

.about-mq .container{
    max-width: 900px;           /* عرض متن محدود بشه */
    margin: 0 auto;             /* مساوی از چپ و راست */
    padding: 0 20px;            /* فاصله داخلی برای موبایل */
}

.about-mq h2{
    font-size: 28px;
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
}

.about-mq p{
    text-align: justify;        /* متن منظم دو طرفه */
    line-height: 1.9;
    margin-bottom: 16px;
}

    /*===article.html===*/
.article-block{
    display:flex; flex-direction:row-reverse; gap:2rem;
    padding:24px 0; border-bottom:1px solid #e2e8f0;
}
.article-block:last-child{ border-bottom:none; }
.article-content{ flex:2; text-align:justify; }
.article-content h1,.article-content h2,.article-content h3{ color:var(--brand,#10b981); margin-top:0; }
.article-image{ flex:1; }
.article-image img{ width:100%; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08); }

.three-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; margin-top:1rem; }
.three-cols h3{ color:var(--brand,#10b981); margin:.2rem 0 .5rem; }

@media(max-width:992px){
    .article-block{ flex-direction:column; }
    .three-cols{ grid-template-columns:1fr; }
}
/* سه ستون */
.exchange-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: start;
}

/* ستون‌ها بدون پس‌زمینه */
.exchange-cols .col {
    padding: 0;   /* حذف فاصله داخلی کارت */
    border: none; /* حذف کادر */
    box-shadow: none; /* حذف سایه */
    background: none;
}


/* بازنویسی مخصوص سکشن صرافی‌ها */
.exchange-article {
    display: block;   /* فلکس از بین بره */
}

.exchange-title {
    text-align: center;
    color: var(--brand,#10b981);
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.exchange-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

/* تیترهای داخلی */
.exchange-cols h3 {
    margin-top: 0;
    color: var(--brand, #10b981);
}
.exchange-cols h4 {
    margin: .5rem 0;
    color: #333;
    font-size: 1rem;
}

.article-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

@media(max-width: 992px){
    .exchange-cols { grid-template-columns: 1fr; }
}
/* تیترهای داخلی (زیرمجموعه هر مقاله) */
.exchange-summary {
    display: block;
    width: 100%;
    margin-top: 2rem;
}

..exchange-summary .section-subtitle {
    display: block !important;       /* جلوگیری از رفتار inline قبلی */
    float: none !important;          /* حذف فلوت‌های قبلی */
    clear: both !important;          /* بیاد خط جدید */
    color: var(--brand, #10b981);    /* سبز برند */
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    text-align: right;               /* راست‌چین تمیز */
}

.exchange-summary .section-text {
    display: block !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 1.5rem;
    line-height: 1.9;
    text-align: justify;
    color: #333;
}