/*
=======================================================================
  DU FIRST — HEADER (DESKTOP) — FINAL BUILD V11 (REVISED)
=======================================================================
*/

/* ===================================================================
   1) VARIABLES & SETTINGS
   =================================================================== */
:root {
  --accent-color: #9B5BFF;
  --text-color: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-glass-hover: rgba(255, 255, 255, 0.15);

  --header-v-offset: 30px;
  --content-padding-x: 50px;

  --thread-gap: 20px;
  --thread-color: rgba(255, 255, 255, 0.5);

  --nav-h: 46px;          /* default pill height */
  --nav-h-compact: 38px;  /* compact height after scroll up */
  --nav-radius: 12px;
}

/* ===================================================================
   2) ANIMATIONS
   =================================================================== */
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-100vh); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   3) BULLETPROOF LAYOUT & Z-INDEX
   =================================================================== */
@media (min-width: 992px) {
  header.header{
    position: fixed; inset: 0 0 auto 0; width:100%;
    z-index: 10000 !important;
    pointer-events:none;
  }
  main#main{ position:relative; z-index:1; }

  .header .container{
    pointer-events:auto;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:100%;
    padding: var(--header-v-offset) var(--content-padding-x) 0;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
  }

  .header.is-hidden .container{ transform: translateY(-250%); }

  .header-left,.header-right{ flex:0 0 auto; }
  .header-center{ flex:1 1 auto; display:flex; justify-content:center; }

  .header_logo,.header_nav,.header_user-btn{ margin:0; }
}

/* ===================================================================
   4) ENTER ANIMATIONS & THREADS
   =================================================================== */
@media (min-width: 992px){
  .header_logo,.headernav-listitem,.header_user-btn{
    opacity:0; transform-origin:top center; position:relative;
    animation: drop-in .8s cubic-bezier(.175,.885,.32,1.275) forwards;
  }
  .header_logo{ animation-delay:0s; }
  .headernav-listitem:nth-child(1){ animation-delay:.1s; }
  .headernav-listitem:nth-child(2){ animation-delay:.2s; }
  .headernav-listitem:nth-child(3){ animation-delay:.3s; }
  .headernav-listitem:nth-child(4){ animation-delay:.4s; }
  .headernav-listitem:nth-child(5){ animation-delay:.5s; }
  .headernav-listitem:nth-child(6){ animation-delay:.6s; }
  .header_user-btn{ animation-delay:.7s; }

  .header_logo::before,
  .headernav-listitem::before,
  .header_user-btn::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    width:1px; z-index:-1; pointer-events:none;
    top:-200vh; bottom:40%; margin-bottom:var(--thread-gap);
    background:linear-gradient(to bottom, transparent 0%, var(--thread-color) 80%);
    transition: bottom .4s ease;
  }

  .header.is-at-top .headernav-listitem::before,
  .header.is-at-top .header_logo::before,
  .header.is-at-top .header_user-btn::before{ bottom:90%; }
}

/* ===================================================================
   5) COMPONENTS
   =================================================================== */
@media (min-width: 992px){
  /* Logo */
  .header_logo-wrapper{
    display:block; width:50px; height:50px; background:#000;
    border-radius:50%; padding:2px; border:1px solid rgba(255,255,255,.3);
  }
  .header_logo img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }

  /* Nav list */
  .header_nav .headernav-list{
    display:flex; align-items:center; gap:10px;
    margin:0; padding:0; list-style:none;
  }

  /* Pills */
  .header_nav .nav-link{
    position:relative; /* برای فلشِ مرکزی */
    display:flex; align-items:center; justify-content:center;
    height: var(--nav-h);
    padding: 0 24px;
    background: var(--bg-glass);
    border:1px solid rgba(255,255,255,.1);
    border-radius: var(--nav-radius);
    color: var(--text-color); text-decoration:none;
    font-weight:600; font-size:15px; white-space:nowrap;
    backdrop-filter: blur(8px);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, height .2s ease, padding .2s ease;
  }
  .header_nav .nav-link:hover,
  .headernav-listitem.open .nav-link{
    background: var(--bg-glass-hover);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
  }

  /* ======  فلش مرکزیِ واضح برای آیتم‌های دارای زیرمنو  ====== */
 .headernav-listitem.dropdown .nav-link::after{
  content:""; position:absolute; left:50%; bottom:-4px;
  width:20px; height:2px; border-radius:2px;
  background: var(--accent-color);
  animation: slideLine 2s linear infinite;
}
@keyframes slideLine{
  0%   { transform:translateX(-60%); }
  50%  { transform:translateX(-40%); }
  100% { transform:translateX(-60%); }
}


  /* CTA */
  .header_user-btn{
    display:flex !important; align-items:center; justify-content:center;
    height: var(--nav-h);
    padding: 0 28px;
    background-color: var(--accent-color);
    color:#fff; border-radius:30px; text-decoration:none; font-weight:700; font-size:14px;
    box-shadow: 0 4px 15px rgba(155,91,255,.4);
    transition: transform .2s ease, box-shadow .2s ease, height .2s ease, padding .2s ease;
    white-space:nowrap;
  }
  .header_user-btn:hover{
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(155,91,255,.6);
  }

  /* Dropdown panel (centered under the pill) */
  .header_subnav{
    position:absolute; top:100%; left:50%;
    transform: translateX(-50%) translateY(20px);
    min-width:220px;
    background: rgba(20,20,20,.95);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:8px;
    box-shadow: 0 20px 40px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: all .3s cubic-bezier(.2,.8,.2,1);
  }
  .headernav-listitem.open > .header_subnav{
    opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(10px);
  }
  .dropdown-list{ list-style:none; margin:0; padding:0; }
  .dropdown-item{
    display:block; padding:10px 16px; color:#ccc; text-decoration:none; font-size:14px; font-weight:500;
    border-radius:8px; transition: all .2s;
  }
  .dropdown-item:hover{ background: rgba(255,255,255,.1); color:#fff; padding-left:20px; }

  /* Active state */
  .headernav-listitem.is-active > .nav-link,
  .headernav-listitem.has-active-child > .nav-link{
    background: var(--accent-color);
    border-color: rgba(255,255,255,.3);
    color:#fff;
    box-shadow: 0 8px 25px rgba(155,91,255,.6);
  }
}

/* ===================================================================
   6) COMPACT MODE AFTER SCROLL (آیکون‌ها بالا می‌چسبند؛ فعلی کمی پایین‌تر)
   =================================================================== */
@media (min-width: 992px){
  .header.is-compact .nav-link,
  .header.is-compact .header_user-btn{
    height: var(--nav-h-compact);
    padding: 0 18px;
  }

  /* همه صعود کنند… */
  .header.is-compact .headernav-listitem .nav-link{ transform: translateY(-30px); }
  /* …اما آیتم فعال کمی پایین‌تر بایستد تا هایلایت بماند */
  .header.is-compact .headernav-listitem.is-active .nav-link,
  .header.is-compact .headernav-listitem.has-active-child .nav-link{
    transform: translateY(10px);
  }

  /* فلش‌ها در حالت کامپکت نزدیک‌تر به قرصِ منو */
  .header.is-compact .headernav-listitem.dropdown .nav-link::after{
    top:-10px;
  }
}
@media (min-width:992px){
  .header_nav .nav-link,
  .header_user-btn{
    background: #000000;        /* مشکی خالص */
    border: 1px solid rgba(255,255,255,0.15);
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  .header_nav .nav-link:hover,
  .headernav-listitem.open .nav-link{
    background: #111111;        /* کمی روشن‌تر برای هاور */
    border-color: rgba(255,255,255,0.35);
  }

  .header_user-btn{
    background-color: var(--accent-color); /* دکمه CTA هم می‌تونه بنفش بمونه */
  }
}
@media (min-width:992px){
  /* خودِ ساب‌لینک فعال */
  .dropdown-item.is-active{
    background: rgba(155,91,255,0.22);
    color: #fff;
    font-weight: 600;
  }
  .dropdown-item.is-active:hover{
    background: rgba(155,91,255,0.32);
  }

  /* پدرِ دارای فرزندِ فعال همین حالا در کدت هست:
     .headernav-listitem.has-active-child > .nav-link { ... } */
}
/* ================= BIG DU FIRST LETTERS (keep dropdown line) ================= */
@media (min-width: 992px){
  /* مطمئن شو چیزی بریده نشه */
  .header,
  .header .container,
  .header-center,
  .header_nav,
  .header_nav .headernav-list,
  .header_nav .headernav-listitem,
  .header_nav .nav-link{
    overflow: visible !important;
  }

  /* برچسب حرف برای هر قرص */
  .header_nav .headernav-list > .headernav-listitem > .nav-link{
    position: relative;
  }

  .header_nav .headernav-list > .headernav-listitem > .nav-link::before{
    /* حرف بزرگ — میاد بین بند و قرص می‌ایسته */
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0px); /* فاصله تا خود قرص */
    transform: translateX(-50%);
    font-weight: 900;
    font-size: clamp(28px, 3.5vw, 54px); /* بزرگ و ریسپانسیو */
    line-height: 1;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,.92);
    text-shadow: 0 6px 24px rgba(0,0,0,.5);
    pointer-events: none;
    z-index: 2; /* روی بند دیده شود، زیر منو مشکلی ایجاد نمی‌کند */
    white-space: nowrap;
  }

  /* مپِ حروف روی آیتم‌های سطح اول — ترتیب فعلی منو */
  .header_nav .headernav-list > .headernav-listitem:nth-child(1) > .nav-link::before { content: "D"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(2) > .nav-link::before { content: "U"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(3) > .nav-link::before { content: "F"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(4) > .nav-link::before { content: "I"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(5) > .nav-link::before { content: "R"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(6) > .nav-link::before { content: "S"; }
  .header_nav .headernav-list > .headernav-listitem:nth-child(7) > .nav-link::before { content: "T"; }

  /* در حالت کامپکت، کمی بالاتر بره تا فضای بین بند و قرص رو پُر نگه داره */
  .header.is-compact .header_nav .headernav-list > .headernav-listitem > .nav-link::before{
    bottom: calc(100% + 0px);
    font-size: clamp(8px, 3.8vw, 22px);
  }

  /* اگر هاور قرص رو 2px بالا می‌برد، لیبل رو هم کمی بالا ببریم که فاصله ثابت بمونه */
  .header_nav .headernav-listitem.open > .nav-link::before,
  .header_nav .headernav-listitem > .nav-link:hover::before{
    bottom: calc(100% + 18px);
  }
}
/* پایه: حروف بالای قرص‌ها (جایی که قبلاً گذاشتی) */
@media (min-width: 992px){
  .header_nav .headernav-list > .headernav-listitem > .nav-link::before{
    /* ... بقیه استایل‌های خودت ... */
    transition: bottom .2s ease, transform .2s ease, font-size .2s ease;
  }

  /* فقط در حالت کامپکت و فقط روی آیتم فعال/دارای فرزند فعال */
  .header.is-compact .header_nav .headernav-listitem.is-active   > .nav-link::before,
  .header.is-compact .header_nav .headernav-listitem.has-active-child > .nav-link::before{
    /* جایگاه: کمی پایین‌تر بیاد تا نزدیک‌تر به قرص دیده بشه */
    bottom: calc(80% +0px);          /* مقدار را کم/زیاد کن */
    /* اندازه: کمی بزرگ‌تر از بقیه */
    font-size: clamp(32px, 4vw, 64px);  /* تغییر سایز فقط همین یکی */
    /* می‌تونی با ترنسفورم هم ظریف‌تر تنظیم کنی */
    transform: translate(-50%, -6px) scale(1.08);
    z-index: 3; /* بالاتر از بند دیده بشه */
  }

  /* اگر دوست داری وقتی هاور/باز می‌شود هم همین رفتار را داشته باشد: */
  .header.is-compact .header_nav .headernav-listitem.open > .nav-link::before{
    bottom: calc(100% + 10px);
    transform: translate(-50%, -8px) scale(1.1);
  }
}
.headernav-listitem::before {
  content: none !important;
}
/* ===== DU FIRST letters: stick to pill edge with zero gap ===== */
@media (min-width: 992px){

  /* اطمینان از اینکه چیزی کات نشود */
  .header,
  .header .container,
  .header-center,
  .header_nav,
  .header_nav .headernav-list,
  .header_nav .headernav-listitem,
  .header_nav .nav-link{ overflow: visible !important; }

  /* پایه: حرف دقیقاً مماس با لبهٔ بالای قرص */
  .header_nav .headernav-list > .headernav-listitem > .nav-link{
    position: relative;
  }
  .header_nav .headernav-list > .headernav-listitem > .nav-link::before{
    /* بقیه‌ی استایل‌های خودت مثل font-weight/size/… رو نگه دار */
    position: absolute;
    left: 50%;
    bottom: 100% !important;    /* مماس با قرص */
    transform: translate(-50%, 0) !important;
    pointer-events: none;
    transition: transform .18s ease, font-size .18s ease; /* اگه سایز/موشن خواستی */
  }

  /* در همهٔ حالت‌ها فاصله صفر بماند (هاور/اوپن/کامپکت/اکتیو) */
  .header_nav .headernav-listitem > .nav-link:hover::before,
  .header_nav .headernav-listitem.open > .nav-link::before,
  .header.is-compact .header_nav .headernav-listitem > .nav-link::before,
  .header.is-compact .header_nav .headernav-listitem.is-active > .nav-link::before,
  .header.is-compact .header_nav .headernav-listitem.has-active-child > .nav-link::before{
    bottom: 100% !important;     /* هر اوورهایدی رو خنثی کن */
    transform: translate(-50%, 0) !important;
  }

  /* اگر دوست داری در حالت کامپکت فقط آیتمِ فعال کمی بزرگ‌تر دیده شود (بدون ایجاد فاصله) */
  .header.is-compact .header_nav .headernav-listitem.is-active   > .nav-link::before,
  .header.is-compact .header_nav .headernav-listitem.has-active-child > .nav-link::before{
    font-size: clamp(32px, 4vw, 64px);   /* فقط سایز؛ bottom دست‌نخورده */
  }
}
/* ========= Dropdown under-line: always below, drops further on hover ========= */
@media (min-width: 992px){
  /* 1) همیشه با bottom پوزیشن بده (top رو خنثی کن) */
  .headernav-listitem.dropdown > .nav-link::after{
    top: auto !important;
    bottom: -4px !important;                 /* خطِ پایه، پایین قرص */
    transition: bottom .18s ease, transform .18s ease;
  }

  /* 2) در حالت کامپکت هم پایین بماند (قبلاً top:-10px داشتی → حذف/override) */
  .header.is-compact .headernav-listitem.dropdown > .nav-link::after{
    top: auto !important;
    bottom: -8px !important;                 /* کمی پایین‌تر تا واضح‌تر باشد */
  }

  /* 3) روی هاور/اوپن: خط بیشتر بیاد پایین (drop) نه بالا */
  .header_nav .headernav-listitem.dropdown:hover  > .nav-link::after,
  .header_nav .headernav-listitem.dropdown.open   > .nav-link::after{
    bottom: -14px !important;                /* بیشتر به سمت پایین */
    transform: translateY(2px);              /* یه ذره افت نرم */
  }
}
/* Remove any black bar behind the whole header (desktop) */
@media (min-width: 992px){
  header.header,
  header.header .container,
  .header-grid{
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
}
/* ================= NON-ACTIVE PILLS: WHITE BG + BLACK TEXT ================= */
@media (min-width: 992px){
  /* پایه برای همه: ترنزیشن نرم */
  .header_nav .nav-link{
    transition: background .18s ease, color .18s ease,
               border-color .18s ease, box-shadow .18s ease,
               transform .18s ease;
  }

  /* آیتم فعال یا دارای فرزند فعال = همان بنفش قبلی باقی بماند */
  .header_nav .headernav-listitem.is-active > .nav-link,
  .header_nav .headernav-listitem.has-active-child > .nav-link{
    background: var(--accent-color) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 8px 25px rgba(155,91,255,.6) !important;
    transform: none; /* یا همان مقدار پایه‌ی خودت */
  }

  /* بقیه‌ی آیتم‌ها (غیرفعال) = سفید با متن مشکی */
  .header_nav .headernav-listitem:not(.is-active):not(.has-active-child) > .nav-link{
    background: #ffffff !important;
    color: #111 !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: none !important;
  }

  /* هاور/بازشدن روی آیتم‌های غیرفعال: مشکی ظریف + کمی کوچک‌تر + کمی پایین‌تر */
  .header_nav .headernav-listitem:not(.is-active):not(.has-active-child):hover > .nav-link,
  .header_nav .headernav-listitem:not(.is-active):not(.has-active-child).open > .nav-link{
    background: #fff !important;
    color: #000 !important;
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
    transform: translateY(4px) scale(0.98); /* کمی پایین + کمی کوچک‌تر */
  }

  /* خط متحرک dropdown دست نخورَد؛ فقط مطمئن شو روی سفید دیده می‌شود */
  .headernav-listitem.dropdown > .nav-link::after{
    background: var(--accent-color) !important; /* همون بنفش قبلی */
    mix-blend-mode: normal;                      /* روی سفید درست دیده شود */
  }

  /* CTA سمت راست دست‌نخورده بماند (بنفس) */
  .header_user-btn{
    background-color: var(--accent-color) !important;
    color: #fff !important;
  }
}
/* ================== CTA smaller + center aligned nav ================== */
@media (min-width: 992px){

  /* 1) CTA کوچیک‌تر */
  .header_user-btn{
    height: var(--nav-h-compact) !important; /* هم‌اندازه آیتم‌های کامپکت */
    padding: 0 20px !important;              /* پدینگ کمتر */
    font-size: 13px !important;
    border-radius: 24px !important;
    box-shadow: 0 3px 10px rgba(155,91,255,.4) !important;
  }
  .header_user-btn:hover{
    transform: translateY(2px) scale(1.01) !important;
    box-shadow: 0 6px 18px rgba(155,91,255,.55) !important;
  }

  /* 2) مرکز چین کل منو (قرص‌ها وسط باشند) */
  .header-center{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;   /* وسط‌چین */
  }

  .header_nav .headernav-list{
    justify-content: center !important;   /* خود آیتم‌ها هم وسط */
  }
}
/* ===== Align controls for middle pills (desktop only) ===== */
@media (min-width: 992px){
  /* پیش‌فرض: وسط‌چین */
  .header-center{
    display: flex !important;
    justify-content: center !important;
  }
  .header-center .header_nav .headernav-list{
    display: flex;
    gap: 10px; /* یا همون مقدار فعلی‌ت */
  }

  /* 1) چپ‌چین کل قرص‌ها */
  .header-center.align-left .header_nav .headernav-list{
    justify-content: flex-start !important;
  }

  /* 2) راست‌چین کل قرص‌ها */
  .header-center.align-right .header_nav .headernav-list{
    justify-content: flex-end !important;
  }

  /* 3) پخش سراسری بین چپ/راست (space-between) */
  .header-center.distribute .header_nav .headernav-list{
    justify-content: space-between !important;
    width: 100%; /* برای اثرگذاری space-between */
  }

  /* نازُک‌کاری: امکان نیشگون افقی با یک متغیر */
  .header-center{
    --nav-nudge-x: px;                /* +right / -left */
  }
  .header-center .header_nav{
    transform: translateX(var(--nav-nudge-x));
  }
}
/* ===== Thicker & Wider dropdown underline (keeps slideLine) ===== */
@media (min-width: 992px){
  /* کنترل با متغیرها */
  .header_nav{
    --ddl-w: 36px;   /* پهنا (قبلاً ~20px) */
    --ddl-h: 4px;    /* ضخامت (قبلاً ~2px) */
    --ddl-bottom: -8px; /* فاصله از قرص */
    --ddl-radius: 3px;  /* گردی گوشه‌ها */
  }

  /* خط زیر آیتم‌های دارای زیرمنو */
  .headernav-listitem.dropdown > .nav-link{
    position: relative;
    overflow: visible;
  }
  .headernav-listitem.dropdown > .nav-link::after{
    width: var(--ddl-w) !important;
    height: var(--ddl-h) !important;
    bottom: var(--ddl-bottom) !important;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--ddl-radius);
    background: var(--accent-color) !important;
    /* اختیاری: کمی درخشش برای وضوح بیشتر */
    box-shadow: 0 0 calc(var(--ddl-h) * 2) rgba(155,91,255,.55);
  }

  /* در حالت کامپکت کمی پایین‌ترش کن تا واضح بماند */
  .header.is-compact .headernav-listitem.dropdown > .nav-link::after{
    bottom: calc(var(--ddl-bottom) - 2px) !important;
  }

  /* اگر روی هاور/بازشدن می‌خواهی پهن‌تر هم بشه: */
  .header_nav .headernav-listitem.dropdown:hover  > .nav-link::after,
  .header_nav .headernav-listitem.dropdown.open   > .nav-link::after{
    width: calc(var(--ddl-w) + 8px) !important;
  }
}
/* فقط توی هدر */
.navbar {
  --accent-gold-light: initial; /* یا inherit یا هر رنگی که برای navbar می‌خوای */
}