/* ===== OZD Firma – menu.css (tek menü + mobil) ===== */
/* Renkler, ana paletten devralınır; yoksa aşağıdaki fallback'ler kullanılır */
:root{
  --ozd-primary: var(--wood-600, #a4784f);
  --ozd-accent:  var(--wood-accent, #d9a46b);
  --ozd-fg-dark: var(--wood-text-dark, #2b1a10);
  --ozd-fg-light: var(--wood-text-light, #faf7f2);
  --ozd-surface: #ffffff;
  --ozd-border:  #e5e7eb;
}

/* Header bar (koyu ahşap bantla uyumlu) */
.header{
  background: var(--wood-800, #6b4226);
  color: var(--ozd-fg-light);
  border-bottom: 1px solid rgba(0,0,0,.35);
}

/* Sabit üst çubuk (istiyorsan .header.header--sticky uygula) */
.header--sticky{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(120%) blur(6px);
}

/* Menü iskeleti */
.navbar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}

/* Marka */
.brand{ font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.brand a{ color: inherit; text-decoration: none; }
.brand a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* Ana menü */
.nav{ justify-self: center; }
.nav ul{ display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }

.nav a{
  display: inline-block;
  padding: .5rem .6rem;
  border-radius: 10px;
  color: var(--ozd-fg-light);
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Hover/Focus/Active */
.nav a:hover{
  background: rgba(255,255,255,.10);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.nav .current-menu-item > a,
.nav .current_page_item > a{
  background: rgba(255,255,255,.16);
  color: #fff;
}

/* Sağ aksiyon alanı (ör. CTA, arama, telefon) */
.navbar__actions{ display: flex; gap: 10px; align-items: center; }
.navbar__actions .btn{
  padding: .5rem .75rem;
  border-radius: 10px;
  background: var(--ozd-accent);
  color: #1b1b1b;
  font-weight: 700;
}
.navbar__actions .btn:hover{ filter: brightness(1.05); }

/* Mobil tetikleyici (hamburger) */
.menu-toggle{
  display: none;
  appearance: none;
  background: rgba(255,255,255,.10);
  color: var(--ozd-fg-light);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-weight: 700;
  line-height: 1;
}
.menu-toggle:hover{ background: rgba(255,255,255,.16); }
.menu-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* -------------------------
   Mobil davranış
   ------------------------- */
@media (max-width: 768px){
  .nav ul{ display: none; }
  .menu-toggle{ display: inline-flex; align-items: center; gap: 8px; }

  /* .nav.open sınıfı JS ile eklenir */
  .nav.open ul{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 12px;
    background: var(--ozd-surface);
    border: 1px solid var(--ozd-border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
  }
  .nav.open a{
    width: 100%;
    color: var(--ozd-fg-dark);
    border-radius: 8px;
    padding: .65rem .7rem;
  }
  .nav.open a:hover{
    background: rgba(0,0,0,.06);
    text-decoration: none;
  }
  .nav.open .current-menu-item > a,
  .nav.open .current_page_item > a{
    background: rgba(0,0,0,.08);
    color: var(--ozd-fg-dark);
  }

  /* Aksiyonlar satır sonuna iner */
  .navbar{
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
  }
  .brand{ order: 1; }
  .menu-toggle{ order: 2; }
  .nav{ grid-column: 1 / -1; order: 3; }
  .navbar__actions{ grid-column: 1 / -1; order: 4; }
}

/* -------------------------
   Opsiyonel: basit dropdown (ileride ihtiyaç olursa)
   .menu-item-has-children kullanımıyla uyumlu
   ------------------------- */
.nav li{ position: relative; }
.nav li .sub-menu{
  display: none;
  position: absolute;
  left: 0; top: calc(100% + 10px);
  background: var(--ozd-surface);
  border: 1px solid var(--ozd-border);
  border-radius: 12px;
  padding: 10px;
  min-width: 200px;
  box-shadow: 0 16px 30px rgba(0,0,0,.15);
  z-index: 5;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{ display: block; }
.nav .sub-menu a{ color: #111; }
.nav .sub-menu a:hover{ background: rgba(0,0,0,.06); text-decoration: none; }

/* Dropdown ok/mesafe */
.nav li .sub-menu::before{
  content: "";
  position: absolute;
  top: -8px; left: 16px;
  width: 12px; height: 12px;
  background: var(--ozd-surface);
  border-left: 1px solid var(--ozd-border);
  border-top: 1px solid var(--ozd-border);
  transform: rotate(45deg);
}

/* -------------------------
   Erişilebilirlik ve detaylar
   ------------------------- */
.nav a{ -webkit-tap-highlight-color: transparent; }
.nav a:active{ opacity: .9; }

@media (prefers-reduced-motion: reduce){
  .nav a, .menu-toggle{ transition: none; }
}

/* iOS safari overscroll glow azaltma (tercihe bağlı) */
@supports (-webkit-touch-callout: none) {
  .nav.open ul{ -webkit-backdrop-filter: blur(0px); }
}

/* Mobile menu visibility (patched) */
:root [hidden] { display: none; }
#primary-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 80%;
  max-width: 360px;
  background: #fff;
  overflow: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 9999;
}
#primary-nav.is-open, #primary-nav.open {
  transform: translateX(0);
}
body.menu-open { overflow: hidden; }

/* ===== PATCH: Mobile menu UX iyileştirmeleri ===== */

/* Panel: daha iyi his ve katmanlama */
#primary-nav{
  /* Mevcut değerler korunur, sadece geçiş eğrisi ve küçük görsel iyileştirmeler */
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
  opacity: .999; /* subpixel render düzeltmesi */
  box-shadow: -18px 0 36px rgba(0,0,0,.18), -2px 0 8px rgba(0,0,0,.08);
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  backdrop-filter: saturate(110%) blur(2px);
  padding-top: max(12px, env(safe-area-inset-top));   /* çentik güvenliği */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Açılış-kapanışta hafif ölçek hissi — çok abartmadan */
#primary-nav{
  transform: translateX(100%) scale(.995);
}
#primary-nav.is-open, #primary-nav.open{
  transform: translateX(0) scale(1);
}

/* Liste öğelerinin dokunmatik rahatlığı ve ayraçlar */
.nav.open ul{
  gap: 6px;                 /* dikey nefes */
}
.nav.open li > a{
  min-height: 44px;         /* Apple/Google erişilebilir tap hedefi */
  display: flex; align-items: center;
  border: 1px solid transparent;
}
.nav.open li + li > a{
  /* çok hafif ayraç etkisi */
  box-shadow: 0 -1px 0 rgba(0,0,0,.04) inset;
}

/* Hover/Focus iyileştirme (renkleri bozmadan) */
.nav.open a:hover{
  background: rgba(0,0,0,.06);
  text-decoration: none;
  filter: saturate(104%);
}
.nav a:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: 10px;
}
@media (max-width: 768px){
  .nav.open a:focus-visible{
    outline: 2px solid rgba(0,0,0,.25); /* açık panelde koyu zemin için */
  }
}

/* Aktif öğe vurgusunu bir tık netleştir */
.nav.open .current-menu-item > a,
.nav.open .current_page_item > a{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}

/* Açıkken arka sayfa kaymasını tamamen engelle */
body.menu-open{
  overflow: hidden;
  touch-action: none; /* istenmeyen sürüklemeleri azaltır */
}

/* Çok parlak cihazlarda panel içeriği hafif “katman” gibi dursun */
@supports (mask-image: linear-gradient(#000, #000)){
  #primary-nav{
    /* sol kenara yumuşak kenar */
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 92%, rgba(0,0,0,.85) 98%, rgba(0,0,0,0) 100%);
  }
}

/* Az hareket tercihi olan kullanıcılar */
@media (prefers-reduced-motion: reduce){
  #primary-nav{
    transition: none;
  }
  .nav a, .menu-toggle{
    transition: none;
  }
}
/* ===== END PATCH ===== */

/* ===== PATCH #1: Hamburger → "X" animasyonu (sadece CSS) ===== */
/* Mevcut .menu-toggle butonunu üç çizgi olarak çizer ve aria-expanded="true" olunca "X"e dönüştürür */
.menu-toggle{
  position: relative;
  width: 44px; height: 36px; padding: 0; /* var olan padding’i istersen kaldır */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 2px; /* orta çizgi */
  transition: background-size .25s ease;
}
.menu-toggle::before,
.menu-toggle::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .25s ease;
}
.menu-toggle::before{ top: 12px; }   /* üst çizgi */
.menu-toggle::after{ bottom: 12px; } /* alt çizgi */

/* Açıkken orta çizgiyi gizle, üst/alt çizgileri merkeze alıp döndür */
.menu-toggle[aria-expanded="true"]{
  background-size: 0 0;
}
.menu-toggle[aria-expanded="true"]::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"]::after{
  bottom: auto; top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ===== PATCH #2: Overlay (arka plan karartma) – JS gerekmez ===== */
/* .menu-open sınıfı zaten JS tarafından body’ye ekleniyor */
body.menu-open::before{
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.40);
  backdrop-filter: saturate(105%) blur(1px);
  z-index: 9998; /* #primary-nav 9999 olduğundan 1 kademe altında */
}

/* Overlay varken kaydırma engeli destek – mevcut kuralı güçlendirir */
body.menu-open{
  overflow: hidden;
  touch-action: none;
}

/* ===== PATCH #3: Dropdown’lara yumuşak geçiş (masaüstü) ===== */
/* display yerine opacity/visibility/transform ile animasyon */
@media (min-width: 769px){
  .nav li{ position: relative; }
  .nav li .sub-menu{
    display: block !important;       /* mevcut display:none’ı geçersiz kıl */
    position: absolute;
    left: 0; top: calc(100% + 10px);
    opacity: 0; visibility: hidden;
    transform: translateY(6px) scale(.98);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: opacity, transform;
  }
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu{
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
}

/* Hareketi azalt tercih edenler için animasyonları kapat */
@media (prefers-reduced-motion: reduce){
  .menu-toggle,
  .menu-toggle::before,
  .menu-toggle::after{ transition: none; }
  @media (min-width: 769px){
    .nav li .sub-menu{ transition: none; }
  }
}