/* =========================================================
   MOBILE/TABLET ONLY — All controls live here
   Viewports ≤ 1169.97px
========================================================= */
@media (max-width: 1169.97px){

  /* ---- Vars ---- */
  :root{
    --mm-width-min: 300px;
    --mm-width: 86vw;
    --mm-width-max: 460px;

    --mm-bg: #0e0e10;
    --mm-fg: #fff;
    --mm-muted: rgba(255,255,255,.72);
    --mm-border: rgba(255,255,255,.08);

    --mm-logo: 44px;       /* ارتفاع لوگو داخل پنل */
    --hdr-logo: 36px;      /* ارتفاع لوگوی هدر در موبایل */
    --hdr-h: 64px;         /* قد هدر موبایل */
  }

  /* ---------- Header: show hamburger, hide desktop nav ---------- */
  .header .container.header-grid{
    display:flex !important; align-items:center; justify-content:space-between;
    height: var(--hdr-h); gap: 12px; transform:none; top:0;
    padding-inline: 14px;
  }
  /* لوگوی هدر فقط موبایل */
  .header .header_logo-wrapper img{
    height: var(--hdr-logo); width:auto; display:block;
  }

  /* منوی دسکتاپ را پنهان کن */
  #headerMenu, .header_nav, .header_nav.collapse{
    display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important;
  }

  /* CTA اختیاری: اگر می‌خواهی مخفی شود، این خط را فعال کن */
  /* .header_user-btn{ display:none !important; } */

  /* ---------- Hamburger button ---------- */
  .df-hamburger{
    --size: 42px; --bar:2px; --gap:6px;
    position:relative; width:var(--size); height:var(--size);
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; padding:0; margin:0;
    -webkit-tap-highlight-color: transparent;
  }
  .df-hamburger .bar{
    position:absolute; width:22px; height:var(--bar); background:#fff; border-radius:2px;
    transition: transform .25s ease, opacity .2s ease, top .2s ease;
  }
  .df-hamburger .bar:nth-child(1){ top: calc(50% - (var(--gap) + var(--bar))); }
  .df-hamburger .bar:nth-child(2){ top: 50%; transform: translateY(-50%); }
  .df-hamburger .bar:nth-child(3){ top: calc(50% + var(--gap)); }
  .is-open .df-hamburger .bar:nth-child(1){ top:50%; transform: translateY(-50%) rotate(45deg); }
  .is-open .df-hamburger .bar:nth-child(2){ opacity:0; }
  .is-open .df-hamburger .bar:nth-child(3){ top:50%; transform: translateY(-50%) rotate(-45deg); }

  /* ---------- Backdrop & Panel ---------- */
  .df-mm-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
    z-index:110000;
  }
  .df-mobile-menu{
    position:fixed; top:0; right:0; bottom:0;
    width: clamp(var(--mm-width-min), var(--mm-width), var(--mm-width-max));
    background:var(--mm-bg); color:var(--mm-fg);
    transform:translateX(100%); transition:transform .28s ease;
    z-index:110001; display:flex; flex-direction:column;
    box-shadow:-8px 0 28px rgba(0,0,0,.35);
  }
  .is-open .df-mm-backdrop{ opacity:1; visibility:visible; }
  .is-open .df-mobile-menu{ transform:translateX(0); }
  html.is-open, body.is-open{ overflow:hidden; }

  /* ---------- Panel header ---------- */
  .df-mm-header{
    height:56px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; border-bottom:1px solid var(--mm-border);
  }
  .df-mm-logo img{ height: var(--mm-logo); width:auto; display:block; }
  .df-mm-close{
    appearance:none; border:0; background:transparent; color:#fff;
    font-size:28px; line-height:1; width:42px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ---------- Nav ---------- */
  .df-mm-nav{ padding:8px 0 10px; overflow:auto; -webkit-overflow-scrolling:touch; }
  .df-mm-nav ul{ list-style:none; margin:0; padding:0; }
  .df-mm-nav > ul > li{ border-bottom:1px solid var(--mm-border); }

  .df-mm-nav a{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:14px 14px; border-radius:12px;
    text-decoration:none; color:var(--mm-fg); font-size:16px; font-weight:700;
  }
  .df-mm-nav a:hover{ background:rgba(255,255,255,.06); }

  /* Submenus (accordion) */
  .df-mm-nav .has-sub > a{ position:relative; padding-right:36px; }
  .df-mm-nav .has-sub > a::after{
    content:""; border: solid currentColor; border-width:0 2px 2px 0; padding:3px;
    transform:rotate(-45deg); transition:transform .2s ease; opacity:.85; margin-left:8px;
  }
  .df-mm-nav .has-sub > ul{ max-height:0; overflow:hidden; transition:max-height .25s ease; background:#141417; }
  .df-mm-nav .has-sub > ul a{ font-size:15px; font-weight:600; color:var(--mm-muted); padding:12px 14px 12px 22px; border-radius:10px; }
  .df-mm-nav .has-sub.open > ul{ max-height:80vh; }
  .df-mm-nav .has-sub.open > a::after{ transform:rotate(135deg); }

  /* ---------- CTA ---------- */
  .df-mm-cta{ margin-top:auto; padding:12px; border-top:1px solid var(--mm-border); }
  .df-mm-cta .btn{
    display:block; width:100%; text-align:center; padding:13px 16px; border-radius:14px; font-weight:700;
    box-shadow:0 10px 30px rgba(155,91,255,.25);
  }
}

/* Desktop safety: هر اثری از منوی موبایل در دسکتاپ نباشد */
@media (min-width: 1169.98px){
  .df-mobile-menu, .df-mm-backdrop{ display:none !important; }
}
/* ===== Mobile/Tablet: header overlay + hide-on-scroll ===== */
@media (max-width: 1169.97px){
  /* هدر روی تصویر می‌نشیند (overlay) */
  .header{
    position: fixed; top:0; left:0; right:0;
    z-index: 10000;
    transform: translateY(0);
    background: transparent;           /* روی تصویر دیده می‌شود */
    box-shadow: none;
    backdrop-filter: none;
    transition: transform .24s ease, background-color .2s ease, backdrop-filter .2s ease;
  }

  /* هنگام اسکرول رو به پایین مخفی شو */
  .header.header--hidden{ transform: translateY(-100%); }

  /* وقتی از بالای صفحه رد شدیم کمی پس‌زمینه بگیر که خوانایی منو/همبرگری خوب بماند */
  .header.header--raised{
    background: rgba(10,10,10,.85);
    backdrop-filter: saturate(120%) blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
  }

  /* وقتی منوی موبایل باز است، هرگز مخفی نشو */
  .is-open .header{ transform: none !important; }

  /* همبرگری کمی برجسته‌تر برای دید روی تصویر */
  .df-hamburger{
    border-radius: 12px;
    padding: 6px;               /* تاچ‌تارگت بهتر */
  }
  .header.header--raised .df-hamburger{
    background: rgba(255,255,255,.06);
  }

  /* اگر می‌خوای هدر روی تصویر باشد و محتوای هیرو نرود زیرش، 
     می‌تونی پدینگ بالای هیرو بدهی. اگر نمی‌خوای، این بلوک را حذف کن. */
  /* .hero{ padding-top: 64px; } */
}
@media (max-width: 1169.97px){
  /* ... کل کدهای فعلی‌ات ... */

  /* ====== CONTROL KNOBS (copy–paste) ====== */

  /* 1) اندازه‌ها و فاصله‌ها */
  :root{
    --hdr-h: 64px;          /* قد هدر موبایل – بلند/کوتاه */
    --hdr-logo: 52px;       /* ارتفاع لوگو – بزرگ/کوچک */
    --hdr-gap: 12px;        /* فاصله بین آیتم‌ها */
    --hdr-pad: 14px;        /* فاصله دو طرف هدر */
  }
  .header .container.header-grid{
    gap: var(--hdr-gap);
    padding-inline: var(--hdr-pad);
  }
  .header .header_logo-wrapper img{
    height: var(--hdr-logo);
  }

  /* 2) جابه‌جایی افقی/عمودی با ترنسفورم (عدد بده، جابه‌جا میشه) */
  :root{
    --hamb-x: 0px;    /* + راست / - چپ برای همبرگری */
    --hamb-y: -10px;    /* + پایین / - بالا */
    --logo-x: 0px;    /* + راست / - چپ برای لوگو */
    --logo-y: -7px;    /* + پایین / - بالا */
  }
  .df-hamburger{ transform: translate(var(--hamb-x), var(--hamb-y)); }
  .header_logo{  transform: translate(var(--logo-x), var(--logo-y)); }

  /* 3) چیدمان کلی (فِلِکس) – با یک عدد کل جهت رو برگردون */
  :root{
    /* row = لوگو چپ، همبرگری راست | row-reverse = برعکس */
    --row-dir: row; /* یا row-reverse */
  }
  .header .container.header-grid{ flex-direction: var(--row-dir); }

  /* 4) نظم نمایش با order (عدد کمتر = جلوتر در چپِ ردیف) */
  :root{
    --hamb-order: 1;  /* 1 یا 2 */
    --logo-order: 2;  /* 1 یا 2 */
  }
  .df-hamburger{ order: var(--hamb-order); }
  .header_logo{  order: var(--logo-order); }

  /* 5) هل دادن با auto (یکی رو بچسبون به چپ/راست) */
  /* فعال/غیرفعال با صفر/auto */
  :root{
    --hamb-ml: 0;           /* 0 یا auto */
    --hamb-mr: 0;           /* 0 یا auto */
    --logo-ml: 0;           /* 0 یا auto */
    --logo-mr: 0;           /* 0 یا auto */
  }
  .df-hamburger{ margin-left: var(--hamb-ml); margin-right: var(--hamb-mr); }
  .header_logo{  margin-left: var(--logo-ml); margin-right: var(--logo-mr); }

  /* 6) «پین» کردن (اختیاری) — اگر می‌خوای ثابت به یک گوشه بچسبه، اینو آن‌کامنت کن و اعداد بده */
  /*
  .df-hamburger{
    position: fixed; z-index: 10001;
    top: 10px; left: 12px;   // یا right:12px
    transform: none !important;   // چون fixed شد
  }
  */
}
@media (max-width: 1169.97px){
  .header_user-btn{ 
    display: none !important; 
  }
}