/* Header, mega panel, mobil çekmece, breadcrumb, WhatsApp marka-tema — F2 (F1.5 art direction ile uyumlandı). İlkeler: sessiz ve havadar; çizgi/gölge/ze */

/* ---------- içeriğe atla ---------- */
.mk-atla {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-atla);
  background: var(--mk-siyah); color: var(--mk-beyaz);
  font-size: 12px; font-weight: var(--mk-fw-islevsel); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 22px;
}
.mk-atla:focus { left: 12px; top: 12px; }

/* ---------- duyuru şeridi ---------- */
/* ⚠️ F13-r6.12 — YÜKSEKLİK SABİT, HESAPLA BULUNMUYOR. Eskiden `padding:10px` + 10.5px×1.65 satır = 37.32px kaplıyordu ama token 33px diyordu. O 4.32px'l */
.mk-duyuru {
  position: relative; z-index: var(--z-duyuru);
  height: var(--mk-duyuru-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--mk-siyah); color: var(--mk-beyaz);
  text-align: center; padding: 0 var(--mk-kenar);
  /* ⚠️ r6.21b — Bu DUYURU şeridi; r6.21'de yanlışlıkla nav jetonlarıyla
     değiştirilmişti. Kendi işlevsel rolü: küçük uppercase şerit. */
  font-size: var(--mk-fs-cta); font-weight: var(--mk-fw-islevsel);
  letter-spacing: var(--mk-ls-cta); text-transform: uppercase;
  line-height: 1;
}
.mk-duyuru span {
  transition: opacity var(--mk-gecis);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-duyuru span.mk-gizli { opacity: 0; position: absolute; pointer-events: none; }

/* ---------- header kabuğu ---------- Anasayfada hero üstünde şeffaf; kaydırma/hover/odak/menü ile dolu dur */
.mk-header {
  position: fixed; top: calc(var(--mk-admin-h) + var(--mk-duyuru-h)); left: 0; right: 0; z-index: var(--z-header);
  background: transparent; color: var(--mk-beyaz);
  border-bottom: 1px solid transparent;
  transition: background var(--mk-gecis), color var(--mk-gecis),
              border-color var(--mk-gecis), top var(--mk-gecis);
}
/* ⚠️ `:has()` ile mega panel açıkken de dolu zemin. Dokunmatik masaüstünde panel hover olmadan açılabiliyor ve header şeffaf kalıyor */
.mk-header.mk-dolu,
.mk-header:hover,
.mk-header:focus-within,
.mk-header:has(.mk-panel:not([hidden])) {
  background: var(--mk-fildisi); color: var(--mk-siyah);
  border-bottom-color: var(--mk-cizgi);
}
/* ⚠️ F13-r6.13 — Yalnız anasayfa: iç sayfada header opak ve akışta. */
.mk-header.mk-dolu { top: var(--mk-admin-h); }

/* Okunabilirlik koruması — dekoratif overlay DEĞİL: fotoğrafın karakterini
   bozmayacak kadar hafif. Üst sınır .18 kabul edilmiştir. */
.mk-header:not(.mk-dolu)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 190%; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20,18,15,.16) 0%,
    rgba(20,18,15,.08) 45%,
    rgba(20,18,15,0) 100%);
}
/* ⚠️ F13-r6.12: overlay `height:190%` ile header'ın 125px ALTINA taşıyor. Header hover/odak/panel ile */
.mk-header:hover::before,
.mk-header:focus-within::before,
.mk-header:has(.mk-panel:not([hidden]))::before { content: none; }
.mk-header-ic { position: relative; }

/* ⚠️ r6.18c3 — ANASAYFA HEADER SARMALAYICISI AKIŞTA YER KAPLAMAZ. Header `fixed` */
.wp-site-blocks > .mk-anasayfa-header { margin: 0; padding: 0; font-size: 0; line-height: 0; }
.wp-site-blocks > .mk-anasayfa-header > p:empty { display: none; }

/* ⚠️ Duyuru kararı gövdeye basılan `<style>` etiketine değil, `body_class`
   üzerinden gerçek DOM durumuna bağlı. */
body.mk-duyuru-yok { --mk-duyuru-h: 0px; }

/* İç sayfalarda içerik header'ın altından başlar */
/* ⚠️ Hairline de yer kaplar; hesaba katılmazsa içerik 1px altta kalırdı. */
body.mk-sayfa-ic {
  padding-top: calc(var(--mk-header-h) + var(--mk-header-cizgi) + var(--mk-duyuru-h));
}
body.mk-sayfa-ic .mk-duyuru { position: fixed; top: var(--mk-admin-h); left: 0; right: 0; }

/* ---------- yerleşim: sol nav · orta logo · sağ eylemler ---------- */
/* ⚠️ `min-height` DEĞİL `height`: yükseklik jetondan gelir, içerikten değil. ═══ DİKEY MERKEZLEME SÖZLEŞMESİ (F13-r6.14) ═══ `align-items: center` KUTUY */
.mk-header-ic {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; height: var(--mk-header-h);
  padding: 0 var(--mk-kenar);
}
/* ⚠️ F12 final: marka adı artık SABİT DEĞİL — mağazacının WordPress site adından çözülüyor. Uzun bir a */
.mk-logo {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  grid-column: 2; justify-self: center; white-space: nowrap;
  font-size: 19px; font-weight: 600; text-transform: uppercase;
  /* ⚠️ AÇIK satır yüksekliği — miras 1.65 kutuyu 31.35px'e şişiriyordu. */
  line-height: 1;
  /* ⚠️ OPTİK YATAY ORTALAMA: `letter-spacing` SON harften sonra da boşluk
   bırakır; logo matematiksel merkezde optik olarak sola kayar. */
  letter-spacing: .3em; text-indent: .3em;
}

/* ---------- masaüstü navigasyon ---------- */
.mk-nav { grid-column: 1; }
/* ⚠️ F13-r6.12 — Aralık `gap`'ten gelir, dikey padding'den DEĞİL; kutu 44px
   (dokunma hedefi), boşluk yatayda. */
.mk-nav-liste { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.mk-nav-oge { position: static; }
.mk-nav-bag,
.mk-nav-liste > li > a {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; color: inherit; cursor: pointer;
  /* ⚠️ r6.21b — GERÇEK nav bağlantısı jetonlara bağlandı (r6.21'de
     atlanmıştı; o turda duyuru şeridi değişmişti). */
  font-family: var(--mk-font); font-size: var(--mk-fs-nav); font-weight: var(--mk-fw-islevsel);
  letter-spacing: var(--mk-ls-nav); text-transform: uppercase;
  /* ⚠️ AÇIK satır yüksekliği: miras 1.65 ile satır kutusu 18.97px oluyor ve
     44px kutu içindeki dikey denge tarayıcı varsayılanına bağlı kalıyordu. */
  line-height: 1;
  padding: 0; position: relative;
}
/* alt çizgi: hover VE odak VE açık panelde — hover'a bağımlı değil */
.mk-nav-bag::after,
.mk-nav-liste > li > a::after {
  /* ⚠️ ÇİZGİ KUTUYA DEĞİL METNE GÖRE: sabit `bottom` ile çizgi 44px kutunun
   altına düşüyordu; `calc(50% - .5em - 3px)` metnin altına bağlar. */
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(50% - .5em - 3px); height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--mk-gecis);
}
.mk-nav-bag:hover::after,
.mk-nav-bag:focus-visible::after,
.mk-nav-bag[aria-expanded="true"]::after,
.mk-nav-liste > li > a:hover::after,
.mk-nav-liste > li > a:focus-visible::after { transform: scaleX(1); }

/* ---------- mega panel ----------
   Kart/gölge/ikon yok; kolon yığını yok. Az sayıda madde, güçlü hiyerarşi. */
/* ⚠️ F13-r6.12 — PANEL İÇERİĞİ KADAR YÜKSELİR, EKRANI KAPLAMAZ. `min-height` yoktur: üç bağlantılık bir grup dev boş yüzey üretmez. `max-height` viewpor */
.mk-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mk-fildisi); color: var(--mk-siyah);
  border-bottom: 1px solid var(--mk-cizgi);
  max-height: min(
    46vh,
    calc(100vh - var(--mk-admin-h) - var(--mk-duyuru-h)
                - var(--mk-header-h) - var(--mk-header-cizgi) - 24px)
  );
  overflow-y: auto; overscroll-behavior: contain;
}
.mk-panel[hidden] { display: none; }
/* ⚠️ Eski dolgu 40px üst + 48px alt = 88px idi. Üç bağlantılı bir grupta panelin %42'si boş dolgu */
.mk-panel-ic {
  display: flex; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; align-items: flex-start;
  max-width: var(--mk-icerik); margin: 0 auto;
  padding: 24px var(--mk-kenar);
}
.mk-panel-tumu {
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 4px; align-self: flex-start;
}
.mk-panel-grup { min-width: 150px; }
.mk-panel-baslik {
  display: block; font-size: 10px; font-weight: var(--mk-fw-islevsel); letter-spacing: .18em;
  text-transform: uppercase; color: var(--mk-gri-acik); margin-bottom: 12px;
}
.mk-panel-grup ul { list-style: none; margin: 0; padding: 0; }
.mk-panel-grup li + li { margin-top: 8px; }
.mk-panel-grup a {
  font-size: 14px; font-weight: 400; letter-spacing: .02em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.mk-panel-grup a:hover, .mk-panel-grup a:focus-visible { border-bottom-color: currentColor; }

/* ---------- sağ eylemler ---------- */
/* ⚠️ Dokunma hedefi artık PADDING'DEN TÜREMİYOR — açıkça 44×44 kutu. Böylece header yüksekliği düşse bile hedef küçülmez; ikisi birb */
.mk-eylemler {
  grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px;
  margin-right: -12px;
}
.mk-eylem {
  position: relative; display: inline-flex;
  /* ⚠️ İkisi de AÇIK: ikon ve sepet sayacı hem dikey hem yatay ortalanır. */
  align-items: center; justify-content: center;
  /* ⚠️ Miras 1.65 burada da satır kutusu üretiyordu; kutu yüksekliği
     min-height ile sabit ama içerik hizası satır kutusuna bağlıydı. */
  line-height: 1;
  gap: 6px; padding: 0 6px; min-width: 44px; min-height: 44px;
}
/* ⚠️ `display: block` ŞART: satır içi SVG taban çizgisine oturur ve altında iniş payı kadar boşluk bırakır — bu */
.mk-ikon { width: 19px; height: 19px; display: block; flex: none; }
/* Sepet adedi: ikonun yanında sessiz rakam. Parantez/rozet yok.
   Boşken hiç basılmaz (`:empty`) — gereksiz "0" gösterilmez. */
/* ⚠️ Sayaç, ikonun veya düğmenin dikey merkezini AŞAĞI ÇEKMEMELİ: `line-height: 1` ile 12px kutu, 19px */
.mk-sepet-adet {
  font-size: 12px; font-weight: 400; line-height: 1; align-self: center; flex: none;
  font-variant-numeric: tabular-nums;
}
.mk-sepet-adet:empty { display: none; }

/* ---------- hamburger ---------- */
.mk-hamburger {
  grid-column: 1; justify-self: start; display: none;
  background: none; border: 0; color: inherit; cursor: pointer;
  width: 44px; height: 44px; padding: 0; margin-left: -11px;
  flex-direction: column; align-items: center; justify-content: center;
}
.mk-hamburger span { display: block; width: 22px; height: 1.5px; background: currentColor; flex: none; }
.mk-hamburger span + span { margin-top: 6px; }

/* ============================================================ MOBİL — masaüstünün küçültülmüşü değil. Kırılım 1024px: 5 nav maddesi */
@media (max-width: 1024px) {
  /* ⚠️ Token'ın KENDİSİ değişir — böylece `body.mk-sayfa-ic` dolgusu, admin bar ofsetleri ve çekmece üst */
  :root { --mk-header-h: 58px; }
  .mk-nav { display: none; }
  .mk-hamburger { display: flex; }
  /* ⚠️ `text-indent` daima `letter-spacing` ile AYNI değerde olmalı —
     yoksa optik ortalama bozulur. */
  .mk-logo { font-size: 17px; letter-spacing: .26em; text-indent: .26em; }
  /* Dar ekranda logoya yer açmak için ızgara aralığı daralır; dokunma
     hedefleri (44px) DEĞİŞMEZ. */
  .mk-header-ic { gap: 8px; }
  .mk-eylem { padding: 0 2px; }
}

/* ═══ WORDPRESS YÖNETİCİ ÇUBUĞU ═══ Token'ın KENDİSİ değişir; böylece gövde
   dolgusu ve header konumu tek kaynaktan beslenir. */
/* ⚠️ F13-r6.13: eskiden her sabit öğe için ayrı `top: 32px/46px` kuralı vardı (sekiz kural). Artık YAL */
body.admin-bar { --mk-admin-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --mk-admin-h: 46px; }
}
body.admin-bar .mk-cekmece { top: var(--mk-admin-h); }

/* ═══ İÇ SAYFA KONUMLANDIRMA SÖZLEŞMESİ ═══ İç sayfada duyuru SABİT ve ekranda kalır; header ona binmemeli. */
body.mk-sayfa-ic .mk-header,
body.mk-sayfa-ic .mk-header.mk-dolu {
  top: calc(var(--mk-admin-h) + var(--mk-duyuru-h));
}

/* ---------- örtü ---------- */
.mk-ortu {
  position: fixed; inset: 0; z-index: var(--z-ortu);
  background: rgba(20,18,15,.32);
  opacity: 0; transition: opacity var(--mk-gecis);
}
.mk-ortu[hidden] { display: none; }
.mk-ortu.mk-acik { opacity: 1; }

/* ---------- mobil çekmece ---------- */
.mk-cekmece {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-cekmece);
  width: min(420px, 88vw);
  background: var(--mk-fildisi); color: var(--mk-siyah);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform var(--mk-gecis);
}
.mk-cekmece[hidden] { display: none; }
/* Çentikli telefonlarda çekmece top:0'dan başlar; üst güvenli alan eklenir. */
.mk-cekmece { padding-top: env(safe-area-inset-top, 0px); }
.mk-cekmece.mk-acik { transform: translateX(0); }

.mk-cekmece-ust {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* ⚠️ Sabit sayı değil: mobil header yüksekliğinin kendisi. Header ölçüsü
     değişirse çekmece üst satırı kendiliğinden uyar. */
  gap: 12px; padding: 0 12px; min-height: var(--mk-header-h);
  border-bottom: 1px solid var(--mk-cizgi);
}
.mk-cekmece-geri, .mk-cekmece-kapat {
  background: none; border: 0; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 10px; min-height: 44px;
}
.mk-cekmece-geri { justify-self: start; }
.mk-cekmece-geri[hidden] { display: none; }
.mk-cekmece-kapat { justify-self: end; }
.mk-cekmece-baslik {
  max-width: 100%; overflow-wrap: anywhere;
  justify-self: center; font-size: 13px; font-weight: var(--mk-fw-islevsel);
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
}

.mk-cekmece-govde { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.mk-cek-liste { list-style: none; margin: 0; padding: 8px 0 24px; }
.mk-cek-liste[hidden] { display: none; }
.mk-cek-alt { position: absolute; inset: 0; background: var(--mk-fildisi); overflow-y: auto; }
.mk-cek-bag {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  font-family: var(--mk-font); font-size: 17px; font-weight: 400; letter-spacing: .02em;
  padding: 15px var(--mk-kenar); min-height: 52px;
}
.mk-cek-bag .mk-ikon { width: 17px; height: 17px; color: var(--mk-gri-acik); flex: none; }
.mk-cek-bag:hover, .mk-cek-bag:focus-visible { background: var(--mk-stone); }
.mk-cek-tumu { font-weight: 500; }
.mk-cek-grup {
  font-size: 10px; font-weight: var(--mk-fw-islevsel); letter-spacing: .18em; text-transform: uppercase;
  color: var(--mk-gri-acik); padding: 22px var(--mk-kenar) 8px;
}
.mk-cekmece-alt {
  display: flex; gap: 24px; padding: 16px var(--mk-kenar);
  border-top: 1px solid var(--mk-cizgi);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-gri);
}

/* ---------- gövde kaydırma kilidi ---------- */
body.mk-kilit { overflow: hidden; }

/* !important ×4: WooCommerce çekirdeği breadcrumb'a kendi font-size/color/margin'ini inline'a yakın özgüllükle b */
.woocommerce-breadcrumb, .mk-ekmek {
  font-size: 11px !important; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mk-gri-acik) !important; margin: 14px 0 0 !important;
}
.woocommerce-breadcrumb a, .mk-ekmek a { color: var(--mk-gri) !important; }

/* WhatsApp yüzen buton */
.mk-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-wa);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--mk-siyah); color: var(--mk-beyaz);
  display: flex; align-items: center; justify-content: center; font-size: 0;
}
.mk-wa::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.9 3 2.8 6.6 2.8 11c0 2.2 1 4.2 2.7 5.6-.1 1-.5 2.3-1.4 3.4 1.8-.2 3.3-.8 4.3-1.5 1.1.4 2.3.6 3.6.6 5.1 0 9.2-3.6 9.2-8.1S17.1 3 12 3z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.9 3 2.8 6.6 2.8 11c0 2.2 1 4.2 2.7 5.6-.1 1-.5 2.3-1.4 3.4 1.8-.2 3.3-.8 4.3-1.5 1.1.4 2.3.6 3.6.6 5.1 0 9.2-3.6 9.2-8.1S17.1 3 12 3z"/></svg>') center / contain no-repeat;
}
@media (max-width: 900px) { body.single-product .mk-wa { bottom: 76px; } }

/* ⚠️ r6.29a2 — plp.css'ten taşındı (kural aynı, yeri değişti). */
.mk-durum-canli {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- ekran okuyucu etiketi ---------- */
.mk-gizli-etiket {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}