/* =========================================
   GLOBAL HEADER v3
   - Sticky “dock” başlık (masaüstü)
   - Mobil hamburger + sağdan çekmece
   - .is-open + [hidden] ile tek kapı
   - Kurumsal (details/summary) stilleri (iki ad da destekli)
   - Skip-link fallback (İçeriğe geç)
========================================= */

/* -- Tokenlar -- */
:root{
  --dock-max: 1240px;
  --wrap: 14px;

  --hd-bg-1: rgba(255,255,255,.92);
  --hd-bg-2: rgba(255,255,255,.86);
  --hd-stroke: rgba(15,23,42,.06);
  --hd-text: #0f172a;

  --brand: #e11d48;
  --brand-strong: #be123c;
  --brand-soft: #fff1f2;
  --brand-ring: rgba(225,29,72,.18);
}

/* Küçük reset/fallback’ler */
*{ box-sizing: border-box; }
html, body{ height:100%; }
a{ color: inherit; text-decoration: none; }

/* Skip link – sadece odakta görünür (görünen “İçeriğe geç” sorununu kapatır) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:14px; top:14px; width:auto; height:auto;
  padding:10px 12px; border-radius:10px; z-index:9999;
  background:#0b1220; color:#fff;
}

/* =========================
   STICKY HEADER (masaüstü)
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  border: 0;
  padding: 0;
}
.header-dock{
  width: 100%;
  max-width: var(--dock-max);
  margin: 8px auto;
  padding: 10px var(--wrap);
  border-radius: 16px;

  border: 1px solid var(--hd-stroke);
  background: linear-gradient(180deg, var(--hd-bg-1), var(--hd-bg-2));
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Logo */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand img{ height:36px; width:auto; display:block; }

/* Masaüstü nav */
.nav-desktop{
  display:flex; justify-content:center; align-items:center; gap:24px;
  font-weight:700;
}
.nav-desktop a{
  padding:10px 12px; border-radius:10px;
}
.nav-desktop a:hover{ background:#f3f4f6; }
.nav-desktop a.is-active,
.nav-desktop a[aria-current="page"]{
  color: var(--brand-strong);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* Masaüstü dropdown (Kurumsal) */
.nav-desktop, .nav-desktop ul, .nav-desktop li{ list-style:none; margin:0; padding:0; }
.nav-item.nav-has-dropdown{ position:relative; }
.nav-dropdown-toggle{
  appearance:none; background:transparent; border:0; margin:0; padding:10px 12px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-weight:800;
}
.nav-dropdown-toggle .caret{ transition: transform .18s ease; }
.nav-has-dropdown.is-open .caret,
.nav-has-dropdown:focus-within .caret{ transform: rotate(180deg); }

.nav-dropdown{
  position:absolute; left:0; top:calc(100% + 8px); min-width: 240px;
  background:#fff; border:1px solid #e6e8ee; border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.12); padding:8px 0;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index:1000;
}
.nav-has-dropdown.is-open > .nav-dropdown,
.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown{
  opacity:1; visibility:visible; transform:none;
}
.nav-dropdown a{
  display:block; padding:10px 14px; white-space:nowrap; font-weight:600; color:#0f172a;
}
.nav-dropdown a:hover{ background: var(--brand-soft); color: var(--brand-strong); }

/* Sağdaki CTA (masaüstü) */
.header-cta{
  padding: 10px 14px; border-radius: 12px;
  background: var(--brand); color:#fff; font-weight:800;
  border:1px solid var(--brand-strong);
  box-shadow: 0 8px 18px rgba(225,29,72,.22);
}

/* Hamburger – sadece mobil */
.burger{
  display:none;
  width:42px; height:42px;
  border-radius:12px; border:1px solid rgba(0,0,0,.12);
  background:#0b1220; color:#fff; cursor:pointer; place-items:center;
}
.burger span{
  display:block; width:22px; height:2px; border-radius:2px; background:#fff; margin:4px auto;
}

/* Breakpoint – mobilde burger var, masaüstü nav/CTA yok */
@media (max-width:1024px){
  .nav-desktop{ display:none; }
  .header-cta{ display:none; }
  .burger{ display:grid; margin-left:auto; }
}

/* Burger her zaman tıklanabilir (overlay üstünde) */
.site-header .burger{ position:relative; z-index: 1201; }

/* =========================
   MOBİL OFF-CANVAS
   (JS: panel.classList.add('is-open') + [hidden]=false)
========================= */
.nav-mobile[hidden]{ display:none !important; }
.nav-mobile{
  position: fixed; inset: 0; z-index: 1200;
  display: none;                         /* .is-open olduğunda block */
  place-items: stretch;
  background: rgba(2,6,23,.55);
}
.nav-mobile.is-open{ display:block; }

/* Sağdan çekmece */
.nav-mobile .sheet{
  margin-left:auto; width:min(86vw,380px); height:100%;
  background:#fff; border-left:1px solid #e5e7eb;
  box-shadow:-12px 0 28px rgba(2,6,23,.18);
  padding:14px; overflow:auto;
  display:flex; flex-direction:column; gap:10px;

  transform: translateX(100%);
  transition: transform .28s ease;
  will-change: transform;
}
/* 3 farklı açılma biçimini de destekle */
.nav-mobile.is-open .sheet,
.nav-mobile[data-open="true"] .sheet,
.nav-mobile .sheet.is-open{ transform: translateX(0); }

/* Üst şerit (top/topline ikisi de) */
.nav-mobile .top,
.nav-mobile .topline{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
}
.nav-mobile .top img,
.nav-mobile .topline img{ height:32px; }
.nav-mobile .close{
  border:0; background:transparent; font-size:28px; line-height:1;
  cursor:pointer; padding:4px 6px; border-radius:8px;
}

/* Menü listesi */
.nav-mobile .nav-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.nav-mobile .nav-list a{
  display:block; font-weight:800; color:#111827;
  background:#f7f7f9; border:1px solid #eceff3; border-radius:12px; padding:12px 10px;
}
.nav-mobile .nav-list a:hover{ background: var(--brand-soft); }
.nav-mobile .nav-list .cta{
  background: var(--brand); color:#fff; border:1px solid var(--brand-strong);
  box-shadow:0 6px 16px rgba(225,29,72,.22);
}

/* = Kurumsal accordion =
   Hem eski (.mnav-details + .mnav-summary) hem yeni (.mnav-group > summary) isimleri çalışır */
.nav-mobile .mnav-details,
.nav-mobile .mnav-group{ margin:2px 0 0; padding:0; border:0; }

.nav-mobile .mnav-summary,
.nav-mobile .mnav-group > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; font-weight:800; color:#0f172a;
  background:#f3f5f8; border:1px solid #e6e8ee; border-radius:12px;
  box-shadow:0 1px 0 rgba(2,6,23,.02) inset;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.nav-mobile .mnav-summary::-webkit-details-marker,
.nav-mobile .mnav-group > summary::-webkit-details-marker{ display:none; }

.nav-mobile .mnav-summary::after,
.nav-mobile .mnav-group > summary::after{
  content:""; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); opacity:.65;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-mobile .mnav-details[open] > .mnav-summary,
.nav-mobile .mnav-group[open]   > summary{
  border-color: var(--brand);
  box-shadow:0 0 0 2px var(--brand-ring);
}
.nav-mobile .mnav-details[open] > .mnav-summary::after,
.nav-mobile .mnav-group[open]   > summary::after{
  transform: rotate(45deg); opacity:.9;
}

.nav-mobile .mnav-submenu,
.nav-mobile .mnav-sub{
  display:grid; gap:8px; padding:10px 0 2px; margin:0;
  list-style:none;
}
.nav-mobile .mnav-submenu a,
.nav-mobile .mnav-sub a{
  display:block; text-align:center; padding:12px 14px;
  border-radius:10px; background:#fff; border:1px dashed #e6e8ee; font-weight:600; color:#0f172a;
}
.nav-mobile .mnav-submenu a:hover,
.nav-mobile .mnav-sub a:hover{
  background: var(--brand-soft); border-color: var(--brand);
  transform: translateY(-1px);
}

/* = No-scroll kilidi (JS ekler) = */
.no-scroll{ overflow:hidden; touch-action:none; }

/* Küçük uyarlamalar */
@media (max-width:360px){
  .header-dock .brand img{ height:32px; }
}
/* Panel görünürlük */
.nav-mobile[hidden]{ display:none !important; }
.nav-mobile.is-open,
.nav-mobile[data-open="true"]{ display:block; }

/* Çekmece animasyonu – üç sinyal de */
.nav-mobile .sheet{ transform: translateX(100%); transition: transform .28s ease; }
.nav-mobile.is-open .sheet,
.nav-mobile[data-open="true"] .sheet,
.nav-mobile .sheet.is-open{ transform: translateX(0); }
/* Panel görünürlük ve katman (sert override) */
.nav-mobile[hidden]{ display:none !important; }
.nav-mobile{
  position:fixed; inset:0;
  background: rgba(2,6,23,.55);
  display:none;                 /* varsayılan kapalı */
  z-index: 4000;                /* slider/header üstünde */
}
.nav-mobile.is-open,
.nav-mobile[data-open="true"]{ display:block !important; }

/* Çekmece animasyonu – üç sinyal de destekli */
.nav-mobile .sheet{
  position:absolute; right:0; top:0; height:100%; width:min(86vw,380px);
  background:#fff; border-left:1px solid #e5e7eb;
  transform: translateX(100%); transition: transform .28s ease;
  will-change: transform;
}
.nav-mobile.is-open .sheet,
.nav-mobile[data-open="true"] .sheet,
.nav-mobile .sheet.is-open{ transform: translateX(0); }

/* Buton her zaman üstte ve tıklanabilir */
.site-header .burger{ position:relative; z-index: 4001; }