/* =====================================================================
   STELLA — Expanding command-bar header: morphing search + mega menus
   Designed for the light frosted floating header (body.hdr-light).
   ===================================================================== */

/* surface tokens (light frosted) */
:root{
  --hdr-surface:rgba(248,250,252,0.82);
  --hdr-surface-solid:rgba(249,251,253,0.96);
  --hdr-ink:#1b2531;
  --hdr-ink-soft:#46525f;
  --hdr-ink-mute:#737e8b;
  --hdr-acc:#3f7c7a;
  --hdr-acc-deep:#2f6664;
  --hdr-line:rgba(20,28,40,0.09);
  --hdr-line-soft:rgba(20,28,40,0.05);
  --hdr-wash:rgba(63,124,122,0.09);
}

/* ---- the shell becomes a vertical container (bar + drop panel) ---- */
.site-header{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  overflow:hidden;
  width:auto;
  transition:top .4s var(--ease), box-shadow .4s var(--ease),
             background .4s var(--ease), width .5s var(--ease),
             border-radius .4s var(--ease);
}
.site-header.hdr-expanded{
  width:min(936px, calc(100vw - 24px));
  border-radius:20px;
}
body.hdr-compact .site-header.hdr-expanded{ width:min(936px, calc(100vw - 24px)); }

/* the always-visible top row */
.hdr-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px 10px 20px;min-height:42px;
}
.hdr-mid{
  flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;min-width:0;
}

/* nav as the default middle content */
.nav{transition:opacity .28s var(--ease), transform .28s var(--ease);}
.site-header.searching .nav{opacity:0;transform:translateY(-4px);pointer-events:none;position:absolute;}

/* nav items can be buttons (mega triggers) — match link styling */
.nav .nav-item{
  font:inherit;font-size:14.5px;font-weight:500;color:var(--text-soft);
  padding:9px 14px;border-radius:var(--r-sm);position:relative;
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav .nav-item .chev{width:12px;height:12px;transition:transform .3s var(--ease);opacity:.6;}
.nav .nav-item[aria-expanded="true"] .chev{transform:rotate(180deg);}
body.hdr-light .nav .nav-item{color:#3C4654;}
body.hdr-light .nav .nav-item:hover,
body.hdr-light .nav .nav-item[aria-expanded="true"]{color:#141A22;background:rgba(20,28,40,0.06);}
.nav .nav-item:hover,.nav .nav-item[aria-expanded="true"]{color:var(--text);background:rgba(255,255,255,0.05);}

/* active / selected nav — solid pill so it reads on the translucent bar */
.nav .nav-item.is-active{color:#1b2a2a;background:#fff;box-shadow:0 2px 10px -3px rgba(20,30,50,0.28), inset 0 0 0 1px rgba(20,30,50,0.04);font-weight:600;}
.nav .nav-item.is-active:hover{color:#13201f;background:#fff;}
.nav .nav-item.is-active .chev{opacity:.7;}
body.hdr-light .nav .nav-item.is-active{color:#235e5c;background:#fff;}
/* dark header theme fallback */
body:not(.hdr-light) .nav .nav-item.is-active{color:#0F141B;background:var(--accent-bright,#9fdcdb);box-shadow:0 2px 12px -3px rgba(126,179,178,0.5);}

/* ---- morphing search field (overlays the nav zone) ---- */
.hdr-search{
  position:absolute;inset:0;display:flex;align-items:center;gap:10px;
  padding:0 6px;opacity:0;transform:scaleX(.96);transform-origin:center;
  pointer-events:none;transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.site-header.searching .hdr-search{opacity:1;transform:none;pointer-events:auto;}
.hdr-search .s-ic{width:18px;height:18px;color:var(--hdr-acc);flex:none;}
.hdr-search input{
  flex:1;min-width:0;height:38px;border:0;background:none;outline:none;
  font-family:var(--font-head);font-size:16px;font-weight:500;color:var(--hdr-ink);
  letter-spacing:-0.01em;
}
.hdr-search input::placeholder{color:var(--hdr-ink-mute);font-weight:400;}
.hdr-search kbd{
  font-family:var(--font-body);font-size:11px;color:var(--hdr-ink-mute);
  border:1px solid var(--hdr-line);border-radius:6px;padding:2px 7px;flex:none;
  background:rgba(20,28,40,0.03);
}

/* icon-btn shows search OR close depending on state */
.icon-btn .ic-close{display:none;}
.site-header.searching .icon-btn .ic-search{display:none;}
.site-header.searching .icon-btn .ic-close{display:block;}

/* ---- the drop panel (mega + results live here) ---- */
.hdr-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease), opacity .3s var(--ease);
  opacity:0;
}
.site-header.hdr-expanded .hdr-panel{grid-template-rows:1fr;opacity:1;}
.hdr-panel-inner{overflow:hidden;min-height:0;}
.hdr-panel-pad{
  border-top:1px solid var(--hdr-line);
  padding:22px 24px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  /* never exceed the viewport — scroll content internally */
  max-height:calc(100vh - 104px);
  max-height:calc(100dvh - 104px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(20,28,40,0.28) transparent;
}
.hdr-panel-pad::-webkit-scrollbar{width:9px;}
.hdr-panel-pad::-webkit-scrollbar-thumb{background:rgba(20,28,40,0.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
.hdr-panel-pad::-webkit-scrollbar-thumb:hover{background:rgba(20,28,40,0.36);background-clip:padding-box;}

/* only the active panel-page shows */
.panel-page{display:none;}
.panel-page.active{display:block;animation:panelIn .35s var(--ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ================= MEGA MENU ================= */
.mega-grid{display:grid;gap:22px;}
.mega-grid.cols-3{grid-template-columns:1.1fr 1.1fr 1.25fr;}
.mega-col-title{
  font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--hdr-acc);margin:0 0 12px;
}
.mega-links{display:flex;flex-direction:column;gap:2px;}
.mega-link{
  display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:12px;
  text-decoration:none;transition:background .18s var(--ease);
}
.mega-link:hover{background:var(--hdr-wash);}
.mega-link .ml-ic{
  width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--hdr-line);color:var(--hdr-acc);
  box-shadow:0 4px 12px -6px rgba(20,30,50,0.25);
}
.mega-link .ml-ic svg{width:19px;height:19px;}
.mega-link .ml-tx b{display:block;font-family:var(--font-head);font-size:14.5px;font-weight:600;color:var(--hdr-ink);letter-spacing:-0.01em;}
.mega-link .ml-tx span{display:block;font-size:12px;color:var(--hdr-ink-mute);margin-top:2px;line-height:1.35;}

/* featured promo card (right column of a mega) */
.mega-feature{
  border-radius:16px;overflow:hidden;position:relative;min-height:188px;
  background:linear-gradient(150deg,#1d2730,#0f161d);
  border:1px solid var(--hdr-line);display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;color:#fff;isolation:isolate;
}
.mega-feature::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(126,179,178,0.34), transparent 60%),
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55));
}
.mega-feature .mf-tag{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-bright);font-weight:700;}
.mega-feature h4{font-family:var(--font-head);font-size:19px;font-weight:700;margin:8px 0 4px;letter-spacing:-0.02em;}
.mega-feature p{font-size:12.5px;color:rgba(255,255,255,0.7);margin:0 0 12px;max-width:240px;}
.mega-feature .mf-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;}
.mega-feature .mf-go svg{width:15px;height:15px;}

/* brand cards (Markalar mega) */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.brand-card{
  border:1px solid var(--hdr-line);border-radius:14px;padding:16px;background:#fff;
  text-decoration:none;display:block;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  box-shadow:0 6px 16px -12px rgba(20,30,50,0.3);
}
.brand-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(20,30,50,0.4);border-color:rgba(63,124,122,0.4);}
.brand-card .bc-logo{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--hdr-ink);letter-spacing:0.01em;}
.brand-card .bc-logo small{font-weight:400;color:var(--hdr-ink-mute);font-size:13px;}
.brand-card .bc-desc{font-size:12px;color:var(--hdr-ink-mute);margin-top:6px;line-height:1.4;}
.brand-card .bc-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.brand-card .bc-tags span{font-size:10.5px;letter-spacing:0.04em;color:var(--hdr-acc);background:var(--hdr-wash);border-radius:999px;padding:3px 9px;white-space:nowrap;}

/* ================= SEARCH RESULTS ================= */
.search-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;min-height:18px;}
.search-head .sh-q{font-size:13px;color:var(--hdr-ink-mute);line-height:1.3;}
.search-head .sh-q b{color:var(--hdr-ink);font-weight:600;}
.res-group{margin-top:18px;}
.res-group:first-of-type{margin-top:0;}
.res-group-title{
  font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--hdr-acc);margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.res-group-title .rc{font-size:11px;color:var(--hdr-ink-mute);background:rgba(20,28,40,0.05);border-radius:999px;padding:1px 8px;letter-spacing:0;}
.res-list{display:grid;gap:4px;}
.res-item{
  display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;
  text-decoration:none;transition:background .16s var(--ease);
}
.res-item:hover,.res-item.kbd-active{background:var(--hdr-wash);}
.res-item .ri-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--hdr-line);color:var(--hdr-acc);}
.res-item .ri-ic svg{width:17px;height:17px;}
.res-item .ri-tx{flex:1;min-width:0;}
.res-item .ri-tx b{display:block;font-size:14px;font-weight:600;color:var(--hdr-ink);letter-spacing:-0.01em;}
.res-item .ri-tx b mark{background:rgba(63,124,122,0.18);color:var(--hdr-acc-deep);border-radius:3px;padding:0 1px;}
.res-item .ri-tx span{display:block;font-size:12px;color:var(--hdr-ink-mute);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res-item .ri-meta{font-size:11px;color:var(--hdr-ink-mute);flex:none;border:1px solid var(--hdr-line);border-radius:6px;padding:2px 8px;}
.res-empty{padding:26px 6px;text-align:center;color:var(--hdr-ink-mute);font-size:13.5px;}
.res-empty b{color:var(--hdr-ink);}

/* quick chips when query empty */
.search-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.search-quick .sq{
  font-size:13px;color:var(--hdr-ink-soft);border:1px solid var(--hdr-line);
  border-radius:999px;padding:7px 14px;cursor:pointer;background:#fff;
  transition:all .16s var(--ease);
}
.search-quick .sq:hover{color:var(--hdr-acc-deep);border-color:rgba(63,124,122,0.4);background:var(--hdr-wash);}
.search-quick .sq b{color:var(--hdr-ink);font-weight:600;}

/* scrim behind expanded header */
.hdr-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(8,12,18,0.4);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  backdrop-filter:blur(2px);
}
.hdr-scrim.show{opacity:1;pointer-events:auto;}

@media(max-width:880px){
  /* boxed header on mobile — her kenardan üst boşluk (14px) kadar pay */
  .site-header{width:calc(100vw - 28px) !important;}
  .site-header.hdr-expanded{width:calc(100vw - 28px) !important;}
  body.hdr-compact .site-header,
  body.hdr-wide .site-header{width:calc(100vw - 28px) !important;}
  body.hdr-compact .site-header.hdr-expanded{width:calc(100vw - 28px) !important;}
  .hdr-bar{padding:9px 10px 9px 16px;}
  .mega-grid.cols-3{grid-template-columns:1fr;}
  .brand-grid{grid-template-columns:1fr 1fr;}
  .mega-feature{min-height:150px;}

  /* --- search open on mobile: free up the row so the input is full width --- */
  .site-header.searching .burger{display:none !important;}
  .site-header.searching .hdr-cta{display:none !important;}
  .site-header.searching .hdr-div{display:none;}
  .site-header.searching .brand-type{
    max-width:0;opacity:0;margin:0;
    transition:max-width .3s var(--ease), opacity .2s var(--ease);
    overflow:hidden;
  }
  .brand-type{max-width:120px;transition:max-width .3s var(--ease), opacity .2s var(--ease);}
  .hdr-search input{font-size:16px;}
}
@media(max-width:560px){
  .brand-grid{grid-template-columns:1fr;}
  .brand-type{height:14px;}
}

/* ================= BURGER + MOBILE MENU ================= */
.burger{
  width:42px;height:42px;border-radius:var(--r-sm);flex:none;
  place-items:center;cursor:pointer;
  border:1px solid rgba(20,28,40,0.12);background:rgba(20,28,40,0.03);
  color:#3C4654;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.burger:hover{background:var(--hdr-wash);border-color:rgba(63,124,122,0.4);}
.burger-box{position:relative;width:18px;height:12px;display:block;}
.burger-line,.burger-line::before,.burger-line::after{
  position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.burger-line{top:5px;}
.burger-line::before{content:"";top:-5px;}
.burger-line::after{content:"";top:5px;}
.site-header.mobile-open .burger-line{background:transparent;}
.site-header.mobile-open .burger-line::before{top:0;transform:rotate(45deg);}
.site-header.mobile-open .burger-line::after{top:0;transform:rotate(-45deg);}

/* mobile nav list */
.m-nav{display:flex;flex-direction:column;gap:2px;}
.m-link{
  display:block;padding:15px 6px;font-family:var(--font-head);font-size:18px;font-weight:600;
  color:var(--hdr-ink);letter-spacing:-0.01em;text-decoration:none;
  border-bottom:1px solid var(--hdr-line-soft);
}
.m-link:active{color:var(--hdr-acc-deep);}
.m-acc{border-bottom:1px solid var(--hdr-line-soft);}
.m-acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 6px;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-size:18px;font-weight:600;color:var(--hdr-ink);letter-spacing:-0.01em;
  white-space:nowrap;text-align:left;
}
.m-acc-head .m-chev{width:20px;height:20px;color:var(--hdr-ink-mute);transition:transform .3s var(--ease);}
.m-acc-head[aria-expanded="true"] .m-chev{transform:rotate(180deg);color:var(--hdr-acc);}
.m-acc-body{
  overflow:hidden;max-height:0;
  transition:max-height .36s var(--ease);
  padding-left:8px;
}
.m-acc-head[aria-expanded="true"]+.m-acc-body{max-height:520px;}
.m-sub{
  display:block;padding:12px 14px;text-decoration:none;border-radius:10px;
  font-family:var(--font-head);font-size:15px;font-weight:600;color:var(--hdr-ink-soft);letter-spacing:-0.01em;
}
.m-sub span{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:400;color:var(--hdr-ink-mute);margin-top:2px;}
.m-sub:active{background:var(--hdr-wash);}
.m-cta{width:100%;justify-content:center;margin-top:18px;padding:15px;font-size:15px;}

@media (prefers-reduced-motion:reduce){
  .panel-page.active{animation:none;}
  .m-acc-body{transition:none;}
}