:root{
  --mega-radius: 16px;
  --mega-shadow: 0 30px 80px rgba(0,0,0,.14);
  --mega-border: 1px solid rgba(0,0,0,.08);
  --mega-bg: #fff;
  --mega-gutter: 12px;

  --mega-dur: 220ms;        /* برای tab switch و fallback */
  --mega-open-dur: 220ms;   /* توسط JS ست میشه */
  --mega-close-dur: 220ms;  /* توسط JS ست میشه */

  --mega-ease: cubic-bezier(.2,.8,.2,1);

  --tabs-w: 260px;
  --tabs-gap: 10px;

  --tab-radius: 12px;
  --tab-pad-y: 10px;
  --tab-pad-x: 12px;

  --tab-bg: rgba(0,0,0,.04);
  --tab-bg-active: rgba(0,0,0,.08);
  --tab-color: #111;
  --tab-color-active: #111;

  --panel-pad: 16px;
}

/* ========== nav anchor ========== */
.landing-mega-nav{
  position: relative;
  overflow: visible;
  width: 100%;
}

/* ========== menu base (برای تست) ========== */
.menu-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}


.menu-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#111;
}

/* ✅ هاور بکگراند برای آیتم‌های معمولی */
.menu-item:not(.has-mega-menu) > .menu-link:hover{
  background: rgba(0,0,0,.05);
}

/* ✅ برای آیتم‌های مگا: hover مستقیم لینک بکگراند نده */
.menu-item.has-mega-menu > .menu-link:hover{
  background: transparent;
}

/* ✅ فقط وقتی trigger=hover هست، روی hover لینک بکگراند بگیر */
@media (hover:hover) and (pointer:fine){
  .menu-item.has-mega-menu.mega-trig-hover:hover > .menu-link,
  .menu-item.has-mega-menu.mega-trig-hover:focus-within > .menu-link{
    background: rgba(0,0,0,.05);
  }
}

/* ✅ click mode: وقتی واقعا بازه */
.menu-item.has-mega-menu.is-open > .menu-link{
  background: rgba(0,0,0,.05);
}

/* ================================
   Mega container base
   ================================ */
.mega-menu{
  display: block;
  position: absolute;
  top: 100%;
  margin-top: 0;

  right: auto;
  left: auto;
  width: auto;
  max-width: none;

  z-index: 9999;
  /* background: var(--mega-bg); */
  /* border: var(--mega-border); */
  /* border-radius: var(--mega-radius); */
  /* box-shadow: var(--mega-shadow); */
  overflow: hidden;

  /* closed default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* transform: translateY(8px) scale(.985); */

  will-change: transform, opacity;
  max-width: 100vw !important;
  height: min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)));

  /* ✅ مهم: transition روی حالت پایه (برای hover-close) */
  transition:
    opacity var(--mega-close-dur, var(--mega-dur)) var(--mega-ease),
    transform var(--mega-close-dur, var(--mega-dur)) var(--mega-ease),
    visibility 0s linear var(--mega-close-dur, var(--mega-dur));
}

/* اگر انیمیشن کلاس‌محور فعاله، transition مزاحم نشه */
.mega-menu.is-opening,
.mega-menu.is-closing{
  transition: none;
}

/* ================================
   X mode (viewport/anchor)
   ================================ */
.mega-menu[data-mega-x="viewport"]{
  inset-inline-start: 0;
  inset-inline-end: 0;
}
.mega-menu[data-mega-x="anchor"]{
  inset-inline-start: var(--mega-anchor-start, 0);
  inset-inline-end: 0;
  width: calc(100% - var(--mega-anchor-start, 0));
}
.mega-menu[data-mega-x="header"]{
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: var(--mega-panel-w);
}

/* ================================
   Width modes
   ================================ */
.mega-menu[data-mega-width="custom"]{
  width: min(var(--mega-panel-w, 1100px), calc(100vw - (var(--mega-gutter) * 2)));
  inset-inline-end: auto;
}
.mega-menu[data-mega-width="content"]{
  width: max-content;
  inset-inline-end: auto;
  max-width: calc(100vw - (var(--mega-gutter) * 2));
}

/* ================================
   Open states
   ================================ */


/* click open (JS adds li.is-open + mega.is-open) */
.menu-item.has-mega-menu.is-open > .mega-menu,
.mega-menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;

  /* ✅ open duration */
  transition:
    opacity var(--mega-open-dur, var(--mega-dur)) var(--mega-ease),
    transform var(--mega-open-dur, var(--mega-dur)) var(--mega-ease),
    visibility var(--mega-open-dur, var(--mega-dur)) var(--mega-ease);
}

/* ================================
   Split / Tabs layout
   ================================ */
.mega-menu .tabbed-menu-list{
  display:flex;
  align-items:stretch;
  width:100%;
  height: 100%;
}

.mega-menu.mega--tabs-vertical .tabbed-menu-list{ flex-direction: row; }
.mega-menu.mega--tabs-horizontal .tabbed-menu-list{ flex-direction: column; }


.mega-menu.mega--tabs-horizontal .tabbed-menu-list-item{
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.mega-menu .tab-item{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: solid 3px transparent;
}
.mega-menu .tab-item.active{
  border-right: solid 3px var(--prk-color-gradient-end, #ff6a00);
  background: linear-gradient(270deg, rgba(255, 10, 10, .1) 0%, rgba(239, 58, 79, .01) 100%);
  color: var(--prk-color-gradient-end, #ff6a00);
}

.mega-menu[data-mega-active-style="underline"] .tab-item.active::after{
  content:"";
  position:absolute;
  inset-inline: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: rgba(0,0,0,.45);
}
.mega-menu[data-mega-active-style="leftbar"] .tab-item.active::before{
  content:"";
  position:absolute;
  inset-inline-start: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: rgba(0,0,0,.45);
}

.mega-menu[data-mega-links-width="full"] .tabbed-mega-menu-content{
  flex: 1 1 auto;
  min-width: 0;
}

.mega-menu[data-mega-links-width="custom"] .tabbed-mega-menu-content{
  flex: 0 0 var(--mega-links-w, 1100px);
  max-width: 100%;
}
.mega-menu[data-mega-links-width="content"] .tabbed-mega-menu-content{
  width: max-content;
  flex: 0 0 auto;
  max-width: 100%;
}

.mega-menu.mega--content-hidden .tabbed-mega-menu-content{ display:none; }

.mega-menu .tabbed-mega-menu-item{ display:none; }
.mega-menu .tabbed-mega-menu-item.is-active{ display:block; }


/* ================================
   Open/Close animations (click mode)
   ================================ */
@keyframes megaFadeIn{
  from{ opacity: 0; transform: translateY(10px) }
  to  { opacity: 1; transform: translateY(0) }
}
@keyframes megaFadeOut{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to  { opacity: 0; transform: translateY(10px) scale(.985); }
}
@keyframes megaSlideDownIn{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes megaSlideLeftIn{
  from{ opacity: 0; transform: translateX(30px); }
  to  { opacity: 1; transform: translateX(0); }
}
@keyframes megaSlideLeftOut{
  from{ opacity: 1; transform: translateX(0); }
  to  { opacity: 0; transform: translateX(30px); }
}
@keyframes megaSlideUpOut{
  from{ opacity: 1; transform: translateY(0); }
  to  { opacity: 0; transform: translateY(20px); }
}
@keyframes megaScaleIn{
  from{ opacity: 0; transform: scale(.96); }
  to  { opacity: 1; transform: scale(1); }
}
@keyframes megaScaleOut{
  from{ opacity: 1; transform: scale(1); }
  to  { opacity: 0; transform: scale(.96); }
}

/* ✅ open/close duration جدا */
.mega-menu.is-opening.anim-open-fade{
  animation: megaFadeIn var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both;
}
.mega-menu.is-closing.anim-close-fade{
  animation: megaFadeOut var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both;
}

.mega-menu[data-mega-open-anim="slide-up"].is-opening{
  animation: megaSlideDownIn var(--mega-open-dur, var(--mega-dur)) both;
}
.mega-menu[data-mega-close-anim="slide-up"].is-closing{
  animation: megaSlideUpOut var(--mega-close-dur, var(--mega-dur)) both;
}

.mega-menu[data-mega-open-anim="slide-left"].is-opening{
  animation: megaSlideLeftIn var(--mega-open-dur, var(--mega-dur)) both;
}
.mega-menu[data-mega-close-anim="slide-left"].is-closing{
  animation: megaSlideLeftOut var(--mega-close-dur, var(--mega-dur)) both;
}

.mega-menu.is-opening.anim-open-scale{
  animation: megaScaleIn var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both;
}
.mega-menu.is-closing.anim-close-scale{
  animation: megaScaleOut var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both;
}

/* ================================
   Tab switch animations (همون قبلی)
   ================================ */
@keyframes panelFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes panelSlideUpIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes panelSlideLeftIn{ from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:translateX(0)} }
@keyframes moveUp{ from{opacity:0; transform:translateY(25px)} to{opacity:1; transform:translateY(0)} }

.tabbed-mega-menu-item.is-enter.anim-tab-fade{ animation: panelFadeIn var(--mega-dur) var(--mega-ease) both; }
.tabbed-mega-menu-item.is-enter.anim-tab-slide-up{ animation: panelSlideUpIn var(--mega-dur) var(--mega-ease) both; }
.tabbed-mega-menu-item.is-enter.anim-tab-slide-left{ animation: panelSlideLeftIn var(--mega-dur) var(--mega-ease) both; }
.tabbed-mega-menu-item.is-enter.anim-tab-scale{ animation: panelScaleIn var(--mega-dur) var(--mega-ease) both; }
.tabbed-mega-menu-item.is-enter.anim-tab-move-up{ animation: moveUp var(--mega-dur) cubic-bezier(.26,.69,.37,.96); }

/* ================================
   Scroll lock
   ================================ */
body.landing-mega-scroll-lock{
  overflow: hidden;
}

/* ================================
   Mega Menu Overlay
   ================================ */
.mega-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.35);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity var(--mega-overlay-dur, 220ms) var(--mega-ease, ease);
}

.mega-menu-overlay.is-active,
.mega-menu-overlay.is-closing{
  visibility: visible;
}

.mega-menu-overlay.is-active{
  opacity: 1;
  pointer-events: auto;
}

.mega-menu-overlay.is-closing{
  opacity: 0;
  pointer-events: auto;
}




.munu-item-title::before {
  content: '';
  position: relative;
  top: 4px;
  width: 4px;
  padding: 8px 1px;
  margin-left: 5px;
  border-radius: 1px;
  background-color: var(--prk-color-gradient-end, #ff6a00);
  display: inline-block;
}


.mega-menu[data-mega-open-anim="height"]{
  overflow: hidden;
  height: 0;
}

/* مقصد عادی وقتی بازه */
.mega-menu[data-mega-open-anim="height"].is-open{
  height: min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)));
}

/* open از 0 تا ارتفاع هدف */
@keyframes megaHeightOpen{
  from{ height: 0; }
  to  { height: var(--mega-open-to-h, min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)))); }
}

/* close از ارتفاع فریز شده تا 0 */
@keyframes megaHeightClose{
  from{ height: var(--mega-close-from-h, min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)))); }
  to  { height: 0; }
}

.mega-menu[data-mega-open-anim="height"].is-opening{
  animation: megaHeightOpen var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both;
}

.mega-menu[data-mega-close-anim="height"].is-closing{
  animation: megaHeightClose var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both;
}

/* مهم: وقتی closing شد، is-open ارتفاع ثابت نده */
.mega-menu.is-closing.is-open{
  height: auto;
}


.mega-menu[data-mega-open-anim="height"].is-opening .tabbed-menu-list-item {
  overflow: hidden;
}

.mega-menu[data-mega-open-anim="height"].is-closing .tabbed-menu-list-item {
  overflow: hidden;
}

.mega-menu[data-mega-open-anim="height"].is-opening .tabbed-mega-menu-content {
  overflow: hidden;
}

.mega-menu[data-mega-open-anim="height"].is-closing .tabbed-mega-menu-content {
  overflow: hidden;
}




/* =========================
   Mega Menu: OPEN anim = slide-down (KEYFRAMES)
   چون JS کلاس is-opening رو تا آخر duration نگه می‌داره،
   باید animation باشه نه transition.
   ========================= */

@keyframes megaSlideDownInFromTop{
  from{ opacity: 0; transform: translateY(-20px); }
  to  { opacity: 1; transform: translateY(0); }
}

@keyframes megaSlideDownOutToTop{
  from{ opacity: 1; transform: translateY(0); }
  to  { opacity: 0; transform: translateY(-20px); }
}

/* باز شدن از بالا به پایین */
.mega-menu[data-mega-open-anim="slide-down"].is-opening{
  animation: megaSlideDownInFromTop var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both;
}

/* بستن به سمت بالا (اگر close-anim هم slide-down باشه) */
.mega-menu[data-mega-close-anim="slide-down"].is-closing{
  animation: megaSlideDownOutToTop var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both;
}

/* احترام به reduce motion */
@media (prefers-reduced-motion: reduce){
  .mega-menu[data-mega-open-anim="slide-down"].is-opening,
  .mega-menu[data-mega-close-anim="slide-down"].is-closing{
    animation: none !important;
  }
}


.mega-menu[data-mega-split="1"] {
  background: transparent;
  height: auto;
  pointer-events: none !important;
}

.mega-menu[data-mega-split="1"] .tabbed-menu-list {
  gap: 2px;
}


.mega-menu[data-mega-split="1"] .tabbed-menu-list-item {
  background: white;
  pointer-events: all;
  border: none;
  border-radius: 16px;
}

.mega-menu[data-mega-split="1"] .tabbed-mega-menu-content {
  background: white;
  pointer-events: all;
  border-radius: 16px;
  width: fit-content;
  height: fit-content;
}





 @keyframes landingMegaPanelIn {
   from { opacity: 0; transform: translate3d(20px, 0, 0); }
   to   { opacity: 1; transform: translate3d(0, 0, 0); }
 }
 @keyframes itemFade {
   from { opacity: 0; transform: translate3d(20px, 0, 0); }
   to   { opacity: 1; transform: translate3d(0, 0, 0); }
 }
 /* ✅ فقط وقتی data-mega-animate="1" روی mega-menu هست */
.mega-menu[data-mega-animate="1"] .landing-mega-panel-in {
  animation-name: landingMegaPanelIn;
  animation-duration: var(--mega-dur, 220ms);
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}
/* ✅ فقط وقتی data-mega-animate="1" روی mega-menu هست */
.mega-menu[data-mega-animate="1"] .landing-mega-item-in {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  animation: 0.5s ease 0s 1 normal forwards running itemFade;
  will-change: transform, opacity;
}

.mega-menu[data-mega-split="1"][data-mega-animate="1"] .tabbed-mega-menu-content {
  border-radius: 0;
}

.mega-menu[data-normall-menu="1"] {
  right: auto;
  left: auto;
  margin-right: 0;
  background: transparent;
  top: 95%;
}