/* =========================================================
   Ducks Waffle & Coffee
   ========================================================= */

@property --lid { syntax: '<number>'; inherits: false; initial-value: 112; }

:root{
  --ink:      #0B0B0C;
  --ink-2:    #141417;
  --cream:    #F4F0EA;
  --cream-2:  #E9E2D6;
  --paper:    #FFFFFF;
  --accent:   #E8A33D;
  /* Marka kilidindeki noktanin rengi. Logodan ornekledik; dizgiyle
     kurulan yerlerde (hero alt satiri) ayni kirmizi kullanilsin ki
     ustundeki logoyla ayni sey gorunsun. */
  --marka-nokta: #E52525;
  /* Küçük metinde kullanılan koyu amber. #C0702F beyaz üzerinde 3.75,
     krem üzerinde 3.30 kontrast veriyordu; WCAG AA normal metin için
     4.5 istiyor. Ton korunup değeri düşürüldü: 5.37 / 4.73. */
  --accent-d: #9E5923;
  /* Açık zeminde ikincil metin. #8A8478 krem üzerinde 3.27, beyazda
     3.72 kontrast veriyordu — WCAG AA 4.5 istiyor.

     #726C62 açık krem (--cream) üzerinde 4.58 ile geçiyordu ama
     altbilgi KOYU krem (--cream-2, #E9E2D6) üzerinde duruyor ve
     orada 4.04'e düşüyordu. Aynı sıcak gri bir tık daha koyu:
     koyu kremde 4.55, açık kremde 5.06, beyazda 5.75. */
  --muted:    #6A645A;
  --muted-l:  rgba(255,255,255,.60);

  --pad:      clamp(20px, 5vw, 88px);
  --r:        18px;

  --display:  'Anton', 'Anton Yedek', 'Arial Narrow', system-ui, sans-serif;
  --body:     'Inter', 'Inter Yedek', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* [hidden], display:flex/grid veren bileşen kurallarınca eziliyordu
   (sepet düğmesi boş sepette bile görünüyordu). */
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:400; }
dl,dd{ margin:0; }

.duck{ width:1em; height:.875em; fill:currentColor; flex:none; }
/* göz, üzerinde durduğu zemin rengiyle oyulur */
.duck__eye{ fill:var(--ink); }
.boot .duck__eye,
.nav .duck__eye,
.foot__brand .duck__eye,
.box3d__mark .duck__eye{ fill:var(--ink); }
.nav.is-light:not(.is-stuck) .duck__eye{ fill:var(--cream); }

/* ---------- ortak ---------- */
.eyebrow{
  margin:0 0 18px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--dark{ color:var(--accent-d); }

.h2{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,5rem);
  /* 1.24: ölçülen çakışma 0.20em (80px yazıda 16px). */
  line-height:1.24; letter-spacing:-.01em; text-transform:uppercase;
}
.h2--light{ color:var(--paper); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.7em; border:0; border-radius:999px;
  background:var(--accent); color:var(--ink);
  font-family:var(--body); font-size:.92rem; font-weight:600; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s;
}
.btn:hover{ transform:translateY(-2px); background:#F2B457; }
.btn--ghost{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); }
/* AÇIK zeminde çizgili düğme. .btn--ghost beyaz yazı/beyaz kenarlık
   kullanıyor; krem zeminli bölümlerde (iletişim) görünmez oluyordu. */
.btn--cizgi{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(30,26,20,.26); }
.btn--cizgi:hover{ background:rgba(30,26,20,.06); box-shadow:inset 0 0 0 1.5px rgba(30,26,20,.45); }
.btn--sm{ padding:.72em 1.3em; font-size:.85rem; }

/* =========================================================
   AÇILIŞ PERDESİ
   ========================================================= */
/* =========================================================
   AÇILIŞ PERDESİ
   =========================================================
   Marka kilidi belirir → üstünden ışık şeridi geçer → ince çizgi dolar.
   Toplam ~1.1 sn; daha uzunu kurumsal durmuyor, engel oluyor. */
.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
}
.boot.is-done{ pointer-events:none; }

.boot__ic{ display:grid; justify-items:center; gap:20px; padding:0 var(--pad); }

/* Işık şeridi logonun ÜSTÜNDEN geçiyor. Kapsayıcı, logonun kendi
   alfasıyla maskeleniyor (--maske satır içi veriliyor): şerit yalnızca
   harflerin üzerinde görünüyor. Maske olmadan geçerken logonun
   dikdörtgen kutusu parlıyor ve "logo dikdörtgen" izlenimi veriyordu. */
.boot__logo{
  position:relative; overflow:hidden;
  -webkit-mask-image:var(--maske); mask-image:var(--maske);
  -webkit-mask-size:100% 100%;     mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
}
.boot__logo .logo{ max-width:min(260px, 62vw); animation:bootLogo .75s var(--ease) both; }
.boot__parla{
  position:absolute; inset:0 auto 0 -40%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:bootParla 1.15s .35s var(--ease) both;
}

.boot__bar{ width:min(150px,36vw); height:2px; background:rgba(255,255,255,.14); overflow:hidden; border-radius:2px; }
.boot__bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:2px; }

@keyframes bootLogo{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
@keyframes bootParla{ from{ left:-40%; } to{ left:140%; } }

/* Hareket azaltma açıksa perde sade görünüp hemen kalkıyor. */
@media (prefers-reduced-motion:reduce){
  .boot__logo .logo{ animation:none; }
  .boot__parla{ display:none; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:18px var(--pad);
  color:var(--paper);
  transition:background-color .3s, backdrop-filter .3s, padding .3s, box-shadow .3s, color .3s;
}
/* backdrop-filter YOK: nav aynı anda transform ile kaydırıldığı için Chrome
   filtrenin arka plan anlık görüntüsünü bayat bırakıyor ve hero yazısının
   ikinci bir kopyası + keskin yatay dikiş olarak ekranda kalıyordu.
   Bunun yerine daha opak düz bir zemin kullanıyoruz. */
.nav.is-stuck{
  padding:11px var(--pad);
  background:rgba(11,11,12,.94);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.nav.is-light:not(.is-stuck){ color:var(--ink); }
.nav.is-light:not(.is-stuck) .btn{ background:var(--ink); color:var(--paper); }

/* aşağı kaydırırken çekilir (hero yazısı altından geçmesin) */
.nav{ transform:translateY(0); will-change:transform; transition:transform .38s var(--ease), background-color .3s, backdrop-filter .3s, padding .3s, box-shadow .3s, color .3s; }
.nav.is-away{ transform:translateY(-105%); }

/* padding-block: logo dokunma alanı mobilde 44px'in altına düşmesin. */
.nav__brand{ display:flex; align-items:center; gap:.55em; font-size:1.15rem; padding:12px 0; }
.nav__brandText{ font-family:var(--display); text-transform:uppercase; line-height:1.1; }
.nav__brandText em{ font-style:normal; color:var(--accent); margin-left:.22em; }

.nav__links{ display:flex; gap:clamp(16px,1.8vw,30px); margin-left:auto; }
.nav__links a{ position:relative; font-size:.9rem; font-weight:500; opacity:.82; transition:opacity .2s; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-here{ opacity:1; color:var(--accent); font-weight:600; }
.nav__links a.is-here::after{ transform:scaleX(1); }

.nav__actions{ display:flex; align-items:center; gap:14px; }

/* Giriş: menü bağlantısı değil, ayrı hesap düğmesi. En sağda, çerçeveli. */
.nav__login{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.1em; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px currentColor;
  font-size:.86rem; font-weight:600; letter-spacing:.01em;
  opacity:.9; transition:opacity .22s, background-color .22s, color .22s;
}
.nav__login svg{ width:1.05em; height:1.05em; }
.nav__login:hover{ opacity:1; background:rgba(255,255,255,.12); }
.nav.is-light:not(.is-stuck) .nav__login:hover{ background:rgba(11,11,12,.08); }

/* -------------------------------------------------------------
   DOKUNMA VURGUSU

   Android Chrome dokunulan her bağlantıya rgba(51,181,229,.4) —
   yani MAVİ — bir kutu basıyor. Markanın hiçbir yerinde mavi yok;
   menüye basınca ekranda mavi dikdörtgen çakıyordu.

   Kaldırıyoruz ama dokunma geri bildirimsiz kalmasın diye yerine
   kendi :active tepkimizi koyuyoruz.
   ------------------------------------------------------------- */
/* Kalitsal ozellik: kokte bir kez tanimlamak yeter, tiklanabilir
   her oge (dinleyicili div'ler dahil) kapsanir. */
html{ -webkit-tap-highlight-color:transparent; }
@media (hover:none){
  .nav__burger:active,
  .mnav a:active,
  .mnav__login:active{ opacity:.55; }
  .btn:active{ transform:scale(.97); }
}

.nav__burger{ display:none; margin-left:auto; width:42px; height:42px; background:none; border:0; cursor:pointer; padding:11px 9px; color:inherit; }  /* düğme rengi üst öğeden gelsin: tarayıcı varsayılanı siyahtı, koyu zeminde görünmüyordu */
.nav__burger span{ display:block; height:1.8px; background:currentColor; border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__burger span + span{ margin-top:6px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.9px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{  transform:translateY(-3.9px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:rgba(11,11,12,.97); backdrop-filter:blur(20px);
  color:var(--paper); font-family:var(--display); font-size:2rem; text-transform:uppercase;
}
.mnav[hidden]{ display:none; }
.mnav .btn{ font-family:var(--body); font-size:1rem; text-transform:none; margin-top:14px; }

/* Mobil menü: bağlantılar sırayla süzülerek gelir. Açılınca tek karede
   doluyordu; [hidden] kalkınca animasyon her açılışta baştan oynar.
   Açık sayfa masaüstündeki gibi vurgulu — mobil menüde aktif durum yoktu. */
.mnav > a,.mnav .mnav__login,.mnav__out,.mnav__cta{ animation:mnavGir .5s var(--ease) both; }
.mnav > a:nth-child(2){ animation-delay:.05s; }
.mnav > a:nth-child(3){ animation-delay:.10s; }
.mnav > a:nth-child(4){ animation-delay:.15s; }
.mnav > a:nth-child(5){ animation-delay:.20s; }
.mnav .mnav__login{ animation-delay:.25s; }
.mnav__out{ animation-delay:.30s; }
.mnav__cta{ animation-delay:.35s; }
@keyframes mnavGir{ from{ opacity:0; transform:translateY(14px); } }
.mnav > a.is-here{ color:var(--accent); }
.mnav .mnav__login{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:6px; padding:.55em 1.3em; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px currentColor;
  font-family:var(--body); font-size:1rem; text-transform:none;
}

/* =========================================================
   HERO
   ========================================================= */
/* Izgara akışı: yazı 1. satır, waffle 2. satır (negatif üst boşlukla yazının
   üstüne biner). Yazı artık mutlak konumlu olmadığı için nav'ın altına
   giremiyor — eski "top + translate" kurgusunda line-height .8 glifi kutunun
   dışına taşırıp 1280–1366px ekranlarda nav'a sokuyordu. */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:auto auto;
  justify-items:center; align-content:center;
  /* Üstte bol pay: dev yazının glifi line-height nedeniyle kutusunun üstüne
     taşıyor; nav'a hiçbir koşulda yaklaşmasın diye pay büyük tutuldu. */
  padding:clamp(158px,18vh,210px) var(--pad) clamp(140px,19vh,210px);
  background:var(--ink); color:var(--paper);
  overflow:hidden; isolation:isolate;
}
.hero__glow{
  position:absolute; inset:auto auto 10% 50%; translate:-50% 0;
  width:120vw; height:80vh;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,163,61,.22), rgba(232,163,61,0) 60%);
  pointer-events:none; z-index:0;
}
.hero__grain{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* waffle'ın arkasında yavaş dönen sıcak halka */
.hero__ring{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:2;
  width:min(68vw,700px); aspect-ratio:1/1; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(232,163,61,0)    0deg,
    rgba(232,163,61,.26)  65deg,
    rgba(232,163,61,0)   150deg,
    rgba(201,116,58,.18) 245deg,
    rgba(232,163,61,0)   360deg);
  filter:blur(46px); pointer-events:none;
  animation:ringspin 26s linear infinite;
}
.hero__ring::after{
  content:''; position:absolute; inset:14%; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
@keyframes ringspin{ to{ rotate:360deg; } }

/* dev tipografi (arkada) */
/* Tipografi yukarı, waffle aşağı kaydırılıyor: "DUCKS" waffle'ın üstünden
   okunuyor, "WAFFLE" ise arkasında kalıp katmanlanma hissi veriyor. */
/* Üstten SABİT uzaklık. Eskiden "top:50% + translate:-72%" ile konumlanıyordu
   ve yazı boyu büyüdükçe yukarı taşıp nav'ın altında kalıyordu. */
.hero__type{
  grid-row:1; position:relative; z-index:1;
  width:100%; text-align:center;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(3rem,14vw,13.5rem); line-height:.84; letter-spacing:-.02em;
  pointer-events:none; user-select:none;
}
.hero__typeRow{ display:block; overflow:hidden; }
.hero__word{ display:block; color:var(--paper); }

/* Hero markası: logo dosyasının kendisi. Genişliği burada veriliyor
   (parçaya esnek:true geçildi), yükseklik oranla geliyor.
   ÜST SINIR 720px: kaynak dosya 1440px geniş, 2× ekranda 720 CSS px
   tam 1:1 düşüyor. Daha büyütmek harfleri yumuşatıyordu. */
/* Yeni marka varligi KIRPILMIS: eskisinin %27'si saydam dolguydu ve
   ayni genislikte mark %36 buyuk goruniyordu. Olcu ona gore dusuruldu. */
.hero__logo{
  display:block; width:min(54vw, 560px); height:auto; margin-inline:auto;
}

/* Alt satır: logonun alt yazısıyla aynı ritim — ince, çok aralıklı,
   büyük harf. Logonun kendi alt şeridi küçük kalacağı için burada
   dizgiyle yeniden kuruluyor. */
.hero__word--alt{
  font-family:var(--sans, Inter, system-ui, sans-serif);
  font-size:clamp(.66rem, 1.35vw, 1.15rem);
  font-weight:500; letter-spacing:.46em; padding-left:.46em;
  color:rgba(255,255,255,.8); line-height:2.4;
}

/* Ayirac noktasi marka kirmizisi: hemen ustundeki logoda da kirmizi.
   Beyaz birakinca ayni satirin iki yerinde iki farkli nokta oluyordu. */
.hero__nokta{ font-style:normal; color:var(--marka-nokta); }

/* uçuşan katmanlar (önde) */
/* Waffle 2. satırda ve marka kilidinin TAMAMEN ALTINDA duruyor.
   Eskiden negatif üst boşlukla yukarı çekiliyordu; bu, "WAFFLE · COFFEE"
   satırının %31'ini kapatıyor ve ziyaretçinin gördüğü ilk şey kırık bir
   logo oluyordu. Yığının kendi görselinde bol şeffaf pay var, o yüzden
   küçük bir negatif pay boşluğu kapatmaya yetiyor.
   Genişlik hem vw hem VH ile sınırlı — alçak ekranlarda taşmasın. */
.hero__stack{
  grid-row:2; position:relative; z-index:3;
  width:min(42vw,40vh,470px); aspect-ratio:1/1;
  margin-top:calc(-1 * clamp(6px,1.4vh,20px));
  translate:none;
  transform-style:preserve-3d;
}
/* Katman sarmalayıcısı: konumu ve ölçeği burada, gölge içeride.
   Eskiden gölge CSS drop-shadow() ile veriliyordu; dört büyük görselde
   açılış animasyonu boyunca her kare yeniden bulanıklaştırılıyordu. */
.hero__l{
  position:absolute; inset:0; width:100%; height:100%;
  will-change:transform;
}
.hero__ana{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
}
.hero__golge{
  position:absolute;
  /* Gölge görseli %30 dolgulu; ortalamak için -%15. */
  inset:-15%; width:130%; height:130%;
  object-fit:contain;
  opacity:.5;
  transform:translateY(3%);
  pointer-events:none;
}
.hero__stack [data-h="base"] { translate:0 14%;  scale:.80; }
.hero__stack [data-h="fill"] { translate:0 2%;   scale:.92; }
.hero__stack [data-h="top"]  { translate:0 -12%; scale:1;   }
.hero__stack [data-h="sauce"]{ translate:0 -24%; scale:.78; }

.hero__foot{
  position:absolute; left:var(--pad); bottom:clamp(60px,9vh,96px); z-index:4;
  max-width:min(38vw,420px);
}
.hero__lead{ margin:0 0 24px; color:var(--muted-l); font-size:1.02rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.hero__cue{
  position:absolute; right:var(--pad); bottom:clamp(60px,9vh,96px); z-index:4;
  display:flex; align-items:center; gap:12px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-l);
}
.hero__cue i{ display:block; width:44px; height:1px; background:currentColor; opacity:.5; transform-origin:left; animation:cue 2.1s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleX(.3); } 50%{ transform:scaleX(1); } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marq{
  overflow:hidden; background:var(--accent); color:var(--ink);
  padding:15px 0; border-block:1px solid rgba(0,0,0,.12);
  /* kenarlarda sert kesim yerine yumuşak geçiş */
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* gap YOK: ayraç ve boşluk her öğenin kendi ::after'ında.
   Böylece şerit saf birleşim olur ve translateX(-50%) tam iki kopyaya denk gelir. */
.marq__track{
  display:flex; align-items:center; width:max-content;
  animation:marq 86s linear infinite;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.5rem); letter-spacing:.03em;
  will-change:transform;
}
.marq__i{ display:inline-flex; align-items:center; white-space:nowrap; }
.marq__i::after{
  content:'\25CF';                 /* ● */
  margin:0 clamp(16px,2.1vw,32px);
  font-size:.42em; opacity:.42;
}
.marq:hover .marq__track{ animation-play-state:paused; }
@keyframes marq{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* =========================================================
   EXPLODE
   ========================================================= */
.ex{
  --stage: min(56vw,620px);   /* sahne boyu — etiket hizaları buna bağlı */
  position:relative; height:400vh; background:var(--cream); color:var(--ink);
}
.ex__pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; }

.ex__head{ position:absolute; left:var(--pad); top:clamp(96px,14vh,150px); z-index:4; max-width:min(34vw,400px); }
.ex__title{ font-family:var(--display); font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1.04; text-transform:uppercase; letter-spacing:-.01em; }

.ex__stage{
  position:relative; z-index:2;
  width:var(--stage); aspect-ratio:1/1;
  display:grid; place-items:center;
  perspective:1700px; perspective-origin:50% 45%;
}

/* z-index:2 — kutu (z-index:1) DOM'da sonra geldiği için yığını örtüyordu
   ve waffle kutuya inerken hiç görünmüyordu. Artık üstte kalıp ağzın
   içine doğru küçülerek giriyor. */
.stack{
  position:relative; z-index:2; width:100%; height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.stack__layer{
  position:absolute; inset:0; width:100%; height:100%;
  /* will-change:filter YOK — filtre artık kullanılmıyor. */
  will-change:transform;
}

/* Katman görseli ve HAZIR gölgesi.
   Eskiden gölge CSS drop-shadow() ile veriliyordu; katmanlar kaydırma
   boyunca ölçek değiştirdiği için tarayıcı her karede bulanıklığı
   yeniden hesaplıyor, kare süresi 17 ms'den 58 ms'ye çıkıyordu
   (17 fps). Gölge artık alfa siluetinden önceden üretilmiş bir görsel;
   yalnızca transform ve opacity ile hareket ediyor. */
.ex[data-mode="layers"] .stack__ana{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
}
.ex[data-mode="layers"] .stack__golge{
  position:absolute;
  /* Gölge görseli %30 dolgulu üretildi; ortalamak için -%15 taşırılıyor. */
  inset:-15%; width:130%; height:130%;
  object-fit:contain;
  opacity:.24;
  will-change:transform,opacity;
  pointer-events:none;
}

/* kırpma modu yedeği */
.stack{ aspect-ratio:auto; }
.ex[data-mode="clip"] .stack{ aspect-ratio:1000/918; align-self:center; }
.stack__layer--clip{
  background-image:url('/assets/img/anim/waffle-stack.webp');
  background-size:100% auto; background-position:center top; background-repeat:no-repeat;
}
.stack__layer--clip[data-layer="top"]  { clip-path:inset(0    0 30% 0); z-index:4; }
.stack__layer--clip[data-layer="fill"] { clip-path:inset(69%  0 15% 0); z-index:3; }
.stack__layer--clip[data-layer="base"] { clip-path:inset(84%  0  6% 0); z-index:2; }
.stack__layer--clip[data-layer="plate"]{ clip-path:inset(93%  0  0  0); z-index:1; }

.ex[data-mode="layers"] .stack__layer[data-layer="base"] { z-index:1; }
.ex[data-mode="layers"] .stack__layer[data-layer="fill"] { z-index:2; }
.ex[data-mode="layers"] .stack__layer[data-layer="top"]  { z-index:3; }
.ex[data-mode="layers"] .stack__layer[data-layer="sauce"]{ z-index:4; }

.ex__side{
  position:absolute; top:50%; left:50%; z-index:3;
  width:clamp(78px,10vw,124px); height:auto;
  opacity:0; will-change:transform,opacity;
  /* Bardak kucuk; golge yerine yumusak bir alt parlaklik yeterli. */
}
/* boş bardak altta durur, dolu olan üstünde alttan yukarı açılır */
.ex__side--empty{ z-index:3; }
.ex__side--full{ z-index:4; filter:none; }

/* Açık kutu AKIŞTA duruyor ki kapsayıcı gerçek yüksekliği alsın; kapalı kutu
   onun üstüne bindiriliyor. İkisi de absolute olduğunda kapsayıcı 30px'e
   çöküyor ve kutuya uygulanan yPercent/scale hesapları anlamsızlaşıyordu. */
/* Ortalama CSS `translate` ile değil margin ile yapılıyor: `translate` ayrı bir
   özellik olduğu için GSAP'ın transform'uyla üst üste biniyor ve kutu ekran
   dışına kaçıyordu. Görseller kare (1200×1200), o yüzden margin-top = -w/2. */
/* ---------------------------------------------------------------
   KUTU — üç katman

     .boxr--arka (z1)  tepsinin arka duvarları + açık kapak
     #stack      (z2)  waffle yığını, aradan içeri giriyor
     .boxr       (z3)  tepsinin ön duvarı + kapalı kutu

   Kapak 3B döndürülmüyor: elimizdeki kapak görseli zaten bir
   kameranın perspektifinden çekilmişti, CSS'te döndürünce tepsiden
   büyük ve dönük çıkıyordu. Onun yerine aynı kameradan çekilmiş
   KAPALI kutuya çapraz geçiş yapılıyor. İki kare de tepsinin ayak
   izine hizalandığı için geçişte kutu yerinden oynamıyor.
   --------------------------------------------------------------- */
.boxr{
  /* KATMAN SIRASI: waffle (2) kutunun ön duvarının (3) arkasına
     girmeli, arka duvarların (1) önünde kalmalı. */
  --boxw:min(46vw,470px);
  position:absolute; left:50%; top:50%; z-index:3;
  width:var(--boxw);
  margin-left:calc(var(--boxw) / -2);
  margin-top:calc(var(--boxw) / -2);
  opacity:0; will-change:transform,opacity;
}
.boxr img{ width:100%; height:auto; display:block; }

/* Boyutu veren katman. */
.boxr__kat{ position:relative; }
/* Arka duvarlar waffle yığınının ALTINDA (yığın z-index:2). */
.boxr--arka{ z-index:1; }

.boxr__golge{
  position:absolute; inset:-4% -6% auto; width:112%;
  opacity:.55; pointer-events:none;
}

/* Kapalı kutu: kapanma anında belirir. */
.boxr__kapali{ position:absolute; inset:0; opacity:0; }
/* CSS 3D kutu yedeği */
.box3d{
  --bw:min(38vw,340px); --bh:104px; --bd:min(26vw,230px);
  position:absolute; left:50%; top:56%; z-index:1;
  width:var(--bw); height:var(--bh); translate:-50% -50%;
  transform-style:preserve-3d; opacity:0;
}
.box3d__body{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(-27deg); }
.box3d__face{ position:absolute; left:50%; top:50%; background:#131316; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.box3d__face--front,.box3d__face--back{ width:var(--bw); height:var(--bh); margin:calc(var(--bh)/-2) 0 0 calc(var(--bw)/-2); }
.box3d__face--front{ transform:translateZ(calc(var(--bd)/2)); display:grid; place-items:center; background:#1A1A1E; }
.box3d__face--front span{ font-family:var(--display); text-transform:uppercase; font-size:clamp(.8rem,1.6vw,1.15rem); letter-spacing:.14em; color:rgba(255,255,255,.9); }
.box3d__face--back{ transform:translateZ(calc(var(--bd)/-2)) rotateY(180deg); background:#0E0E11; }
.box3d__face--left,.box3d__face--right{ width:var(--bd); height:var(--bh); margin:calc(var(--bh)/-2) 0 0 calc(var(--bd)/-2); background:#101013; }
.box3d__face--right{ transform:translateX(calc(var(--bw)/2))  rotateY(90deg); }
.box3d__face--left { transform:translateX(calc(var(--bw)/-2)) rotateY(-90deg); }
.box3d__face--bottom{ width:var(--bw); height:var(--bd); margin:calc(var(--bd)/-2) 0 0 calc(var(--bw)/-2); transform:translateY(calc(var(--bh)/2)) rotateX(-90deg); background:#0A0A0C; }
.box3d__face--lid{
  width:var(--bw); height:var(--bd); margin:calc(var(--bd)/-2) 0 0 calc(var(--bw)/-2);
  transform-origin:50% 0%;
  transform:translateY(calc(var(--bh)/-2)) translateZ(calc(var(--bd)/-2)) rotateX(90deg) rotateX(calc(var(--lid) * -1deg));
  background:#1A1A1E; display:grid; place-items:center; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);
}
.box3d__mark{ display:flex; flex-direction:column; align-items:center; gap:.35em; color:#fff; font-size:clamp(.9rem,2vw,1.4rem); }
.box3d__mark .duck{ width:1.5em; height:1.3em; }
.box3d__mark b{ font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:.06em; text-align:center; font-size:.9em; }
.box3d__mark b i{ display:block; font-style:normal; }

/* --- katman etiketleri ---
   Her etiket, ayrık haldeki kendi katmanının tam hizasında durur.
   Ayrık konumlar sahne yüksekliğinin ∓%96 ve ∓%32'si; yığın .48'e
   ölçeklendiğinden ekranda ±%46.1 ve ±%15.4'e denk geliyor. */
.specs{
  position:absolute; right:var(--pad); top:50%; z-index:4;
  width:min(26vw,290px); height:0;
}
.spec{
  position:absolute; right:0; width:100%;
  opacity:0; translate:0 -50%;
  padding-left:26px;
  will-change:transform,opacity;
}
.spec[data-spec="sauce"]{ top:calc(var(--stage) * -0.478); }
.spec[data-spec="top"]  { top:calc(var(--stage) * -0.161); }
.spec[data-spec="fill"] { top:calc(var(--stage) *  0.161); }
.spec[data-spec="base"] { top:calc(var(--stage) *  0.478); }

/* katmana uzanan bağlantı çizgisi + nokta */
.spec__lead{
  position:absolute; left:calc(-1 * var(--lead,120px)); top:50%;
  width:var(--lead,120px); height:1px;
  background:linear-gradient(90deg, rgba(192,112,47,0), rgba(192,112,47,.75));
  transform:scaleX(0); transform-origin:right;
}
.spec__lead::after{
  content:''; position:absolute; right:-3px; top:-2.5px;
  width:6px; height:6px; border-radius:50%; background:var(--accent-d);
}
.spec::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:2px; background:rgba(11,11,12,.16); }
.spec__n{ display:block; font-family:var(--display); font-size:.82rem; color:var(--accent-d); letter-spacing:.1em; margin-bottom:2px; }
.spec h3{ font-family:var(--display); font-size:1.35rem; text-transform:uppercase; line-height:1.12; margin-bottom:5px; }
.spec p{ margin:0; font-size:.83rem; color:#5C564C; line-height:1.45; }

/* İkinci bölüm başlığı — birincisiyle aynı yerde ve ritimde durur,
   böylece ziyaretçi başlığın değiştiğini fark eder. */
.ex__head--paket{ opacity:0; pointer-events:none; }
.ex__head--paket .ex__title em{ font-style:normal; color:var(--accent-d); }
.ex__headLead{ margin:14px 0 0; color:#5C564C; font-size:.95rem; line-height:1.5; }

.ex__progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:30px; z-index:6; height:2px; background:rgba(11,11,12,.10); }
.ex__progress i{ display:block; height:100%; width:0%; background:var(--accent-d); }

/* =========================================================
   MENÜ
   ========================================================= */
.menu{ background:var(--paper); padding:clamp(70px,10vw,140px) var(--pad); }
.menu__head{ max-width:1400px; margin:0 auto clamp(34px,5vw,60px); }

.tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.tab{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.7em 1.4em; border:0; border-radius:999px;
  background:var(--cream); color:#6B6459;
  font-family:var(--body); font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background-color .22s, color .22s;
}
.tab i{ font-style:normal; font-size:.72rem; opacity:.55; }
.tab:hover{ background:var(--cream-2); }
.tab.is-active{ background:var(--ink); color:var(--paper); }

.menu__panel{ display:none; max-width:1400px; margin:0 auto; }
.menu__panel.is-active{ display:block; }
.menu__lead{ margin:0 0 30px; color:var(--muted); max-width:52ch; }

.grid{ display:grid; gap:clamp(16px,2vw,28px); grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); }
.card{ background:var(--cream); border-radius:var(--r); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -22px rgba(0,0,0,.35); }
.card__media{ position:relative; aspect-ratio:5/4; overflow:hidden; background:var(--cream-2); }
/* Kaynak fotoğraflarda tepsi çevresinde bol boşluk var — hafif yakınlaştırıp
   yemeği kadrajın içine çekiyoruz. */
/* Ölçek ve kaydırma AYRI özelliklerde: yakınlaştırma + hover bağımsız
   `scale`'de, kaydırma paralaksı (--py, app.js 7b yazıyor) `transform`'da.
   Tek transform dizgesinde olsalardı GSAP'ın satır içi yazdığı değer
   hover ölçeğini eziyordu. ±5% kayma 1.14 ölçeğin örttüğü payın içinde. */
.card__media img{ width:100%; height:100%; object-fit:cover; scale:1.14; transition:scale .6s var(--ease); transform:translateY(var(--py,0)); }
.card:hover .card__media img{ scale:1.22; }
.card__tag{
  position:absolute; left:12px; top:12px; padding:.42em .85em; border-radius:999px;
  background:rgba(11,11,12,.85); color:var(--paper);
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px);
}
.card__body{ padding:18px 20px 22px; }
.card__name{ font-family:var(--display); font-size:1.28rem; text-transform:uppercase; line-height:1.12; }
.card__desc{ margin:9px 0 0; font-size:.87rem; color:#6B6459; line-height:1.5; }
.card__price{ display:inline-block; margin-top:12px; font-weight:700; }

/* =========================================================
   VİTRİN — yatay kayan şerit
   ========================================================= */
.show{ position:relative; height:340vh; background:var(--ink); }
.show__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,3vh,34px);
}
.show__head{ padding-inline:var(--pad); flex:none; }
/* Şerit + başlık birlikte ekrana sığmalı — başlık burada biraz küçülür */
.show__head .h2{ font-size:clamp(2rem,4.4vw,3.4rem); }
.show__head .eyebrow{ margin-bottom:10px; }
.show__track{ display:flex; gap:clamp(14px,1.6vw,22px); width:max-content; padding-inline:var(--pad); will-change:transform; }
/* Şeridi YÜKSEKLİKTEN boyutluyoruz: genişlik verilince <img> nitelikleri
   (width/height) aspect-ratio'yu eziyor ve kareler ekrandan taşıyordu. */
.shot{ flex:none; margin:0; }
.shot img{ height:min(50vh,420px); width:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.shot figcaption{
  margin-top:12px; font-family:var(--display); text-transform:uppercase;
  font-size:.95rem; color:var(--paper); letter-spacing:.02em;
}

/* =========================================================
   SİPARİŞ
   ========================================================= */
.order{ background:var(--ink-2); color:var(--paper); padding:clamp(70px,10vw,140px) var(--pad); }
.order--bare{ padding-top:clamp(40px,5vw,70px); }
.order__inner{ max-width:1180px; margin:0 auto; text-align:center; }
.order__lead{ margin:20px auto 46px; max-width:48ch; color:var(--muted-l); }
.order__cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); text-align:left; }

.ocard{
  display:flex; flex-direction:column; align-items:flex-start; gap:26px;
  padding:34px 30px; border-radius:var(--r);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .3s var(--ease), background-color .3s;
}
.ocard:hover{ transform:translateY(-5px); background:rgba(255,255,255,.09); }
.ocard__brand{ font-size:1.45rem; font-weight:700; letter-spacing:-.02em; }
.ocard__brand--ys{ color:#FA0050; }
.ocard__brand--mg{ color:#FF6C00; }
.ocard--ig .ocard__brand{ color:#E1306C; }
.ocard__go{ display:inline-flex; align-items:center; gap:.5em; margin-top:auto; font-size:.9rem; font-weight:600; color:var(--accent); }
.ocard__go i{ font-style:normal; transition:transform .3s; }
.ocard:hover .ocard__go i{ transform:translateX(5px); }

/* =========================================================
   İLETİŞİM
   ========================================================= */
.contact{ background:var(--cream); padding:clamp(70px,10vw,140px) var(--pad); }
.contact__grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.contact__addr{ margin:24px 0 30px; font-style:normal; font-size:1.1rem; line-height:1.7; color:#4A453C; }
/* Ana sayfa iletişim listesi: adres, telefon, WhatsApp ve saatler
   ana sayfada da cevaplansın — kullanıcı ayrı sayfaya gitmesin. */
.contact__liste{ margin:26px 0 24px; display:grid; gap:18px; max-width:44ch; }
.contact__liste dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.contact__liste dd{ margin:0; font-size:1rem; line-height:1.65; color:#4A453C; }
.contact__liste address{ font-style:normal; }
.contact__liste a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(30,26,20,.22); transition:border-color .2s; }
.contact__liste a:hover{ border-color:var(--ink); }
.contact__btnler{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* --- sosyal medya bağlantıları --- */
.sosyal{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.sosyal a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:rgba(30,26,20,.05); color:#4A453C;
  font-size:.85rem; font-weight:550; text-decoration:none;
  transition:background .2s, color .2s;
}
.sosyal a:hover{ background:var(--accent); color:#1E1A14; }
.sosyal svg{ width:17px; height:17px; flex:none; }

.contact__meta{ display:grid; gap:14px; }
.contact__meta > div{ display:flex; gap:16px; padding-bottom:14px; border-bottom:1px solid rgba(11,11,12,.10); }
.contact__meta dt{ min-width:140px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.contact__meta dd{ font-weight:500; }
.contact__meta dd a{ border-bottom:1.5px solid var(--accent-d); }
.contact__meta dd.is-todo{ color:#B5AEA1; font-style:italic; }
.contact__shot{ margin:0; }
.contact__shot img{ width:100%; height:auto; border-radius:var(--r); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--ink); color:var(--paper); padding:clamp(48px,7vw,86px) var(--pad) 40px; }
.foot__inner{ max-width:1400px; margin:0 auto; }
.foot__top{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 60px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.10);
}
.foot__brand{ display:flex; align-items:center; gap:.6em; font-family:var(--display); text-transform:uppercase; font-size:1.15rem; padding:8px 0; }
.foot__pitch{ margin:0; max-width:44ch; color:var(--muted-l); font-size:.92rem; }

.foot__cols{
  display:grid; gap:28px 40px; padding:38px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.foot__col h3, .foot__colTitle{
  margin-bottom:14px; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.foot__col a{ display:block; padding:7px 0; font-size:.9rem; opacity:.72; transition:opacity .2s, color .2s; }
.foot__col a:hover{ opacity:1; color:var(--accent); }

.foot__copy{ margin:0; padding-top:22px; border-top:1px solid rgba(255,255,255,.10); font-size:.78rem; color:rgba(255,255,255,.55); }

/* =========================================================
   İÇ SAYFA BAŞLIĞI
   ========================================================= */
.phead{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:var(--paper);
  padding:clamp(140px,18vh,220px) var(--pad) clamp(60px,9vw,110px);
}
.phead__glow{
  position:absolute; inset:auto auto -40% 50%; translate:-50% 0;
  width:110vw; height:70vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,163,61,.20), rgba(232,163,61,0) 62%);
}
.phead__inner{ position:relative; z-index:1; max-width:1400px; margin:0 auto; }
.phead__title{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.8rem,8vw,7rem); letter-spacing:-.015em;
  /* 1.24: Anton'un Türkçe mürekkep yüksekliği (İ noktası + Ş kuyruğu)
     1.22em; daha dar satırda üst satırın Ş'si alttakinin üstüne biniyor.
     Ölçüm: 112px yazıda 24px çakışma = 0.214em. */
  line-height:1.24;
}
.phead__lead{ margin:24px 0 0; max-width:52ch; color:var(--muted-l); font-size:1.05rem; }

/* İÇ SAYFA GİRİŞİ. Ana sayfada marka kilidi alttan yazılarak geliyor;
   iç sayfaların başlığı ise sabit duruyordu — ana sayfadan geçince
   "burası başka bir site" hissi veriyordu. Aynı araç: başlık kendi
   kutusundan yukarı açılır, üst yazı ve açıklama peşinden gelir.
   Kaydırmaya bağlı değil (sayfanın en üstü, hep görünür), o yüzden
   IntersectionObserver'a değil yükleme anına bağlı. Hareket azaltmada
   genel .01ms kuralı hepsini anında bitiriyor. */
.phead .eyebrow{ animation:pheadIn .6s var(--ease) .10s both; }
.phead__title{ clip-path:inset(-12% 0 -22% 0); animation:pheadTitle .9s var(--ease) .18s both; }
.phead__lead{ animation:pheadIn .6s var(--ease) .52s both; }
@keyframes pheadIn{ from{ opacity:0; transform:translateY(12px); } }
@keyframes pheadTitle{ from{ clip-path:inset(0 0 100% 0); transform:translateY(.3em); } }

/* =========================================================
   HİKÂYE
   ========================================================= */
.story{ background:var(--cream); padding:clamp(60px,8vw,120px) var(--pad); }
.story__grid{
  max-width:1400px; margin:0 auto clamp(50px,7vw,110px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center;
}
.story__grid--rev{ margin-bottom:0; }
.story__text .h2{ margin-bottom:22px; }
.story__text p{ margin:0 0 16px; color:#5C564C; max-width:46ch; }
.story__shot{ margin:0; }
.story__shot img{ width:100%; height:auto; border-radius:var(--r); }
.story__shot--tall img{ aspect-ratio:4/5; object-fit:cover; }

.story--gallery{ padding-top:0; }
.story__gallery{
  max-width:1400px; margin:0 auto;
  display:grid; gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.story__gallery figure{ margin:0; }
.story__gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); }

/* =========================================================
   DEĞERLER / ADIMLAR
   ========================================================= */
.values{ background:var(--ink-2); color:var(--paper); padding:clamp(60px,9vw,130px) var(--pad); }
.values__inner{ max-width:1400px; margin:0 auto; }
.values__list{
  margin-top:clamp(34px,5vw,60px);
  display:grid; gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  counter-reset:v;
}
.values__list li{ padding-top:22px; border-top:2px solid rgba(255,255,255,.14); }
.values__n{ display:block; font-family:var(--display); color:var(--accent); font-size:.9rem; letter-spacing:.12em; margin-bottom:10px; }
.values__list h3{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; line-height:1.12; margin-bottom:10px; }
.values__list p{ margin:0; color:var(--muted-l); font-size:.92rem; }

.steps{ background:var(--paper); padding:clamp(60px,9vw,130px) var(--pad); }
.steps__inner{ max-width:1400px; margin:0 auto; }
.steps__list{
  margin-top:clamp(34px,5vw,60px);
  display:grid; gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.steps__list li{ padding-top:22px; border-top:2px solid rgba(11,11,12,.14); }
.steps__list span{ display:block; font-family:var(--display); color:var(--accent-d); font-size:.9rem; letter-spacing:.12em; margin-bottom:10px; }
.steps__list h3{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; line-height:1.12; margin-bottom:10px; }
.steps__list p{ margin:0; color:#6B6459; font-size:.92rem; }

/* =========================================================
   MENÜ SAYFASI EKLERİ
   ========================================================= */
.menu--page{ background:var(--cream); }
.menu--page .card{ background:var(--paper); }
.menu__block{ margin-bottom:clamp(46px,6vw,88px); }
.menu__blockHead{ margin-bottom:26px; }
.menu__blockTitle{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.12; margin-bottom:10px;
}
.menu__more{ max-width:1400px; margin:clamp(34px,5vw,60px) auto 0; text-align:center; }
.menu__note{
  max-width:1400px; margin:clamp(30px,4vw,50px) auto 0;
  padding-top:24px; border-top:1px solid rgba(11,11,12,.12);
  font-size:.88rem; color:var(--muted);
}
.menu__note a{ border-bottom:1.5px solid var(--accent-d); }
.ocard__note{ margin-top:-14px; font-size:.85rem; color:var(--muted-l); }

/* =========================================================
   GİRİŞ / KAYIT (yalnızca arayüz)
   ========================================================= */
.auth{ display:grid; grid-template-columns:1fr 1fr; min-height:100svh; background:var(--ink); color:var(--paper); }
.auth__panel{ display:grid; place-items:center; padding:clamp(110px,14vh,160px) var(--pad) 60px; }
.auth__box{ width:min(100%,430px); }
.auth__brand{ display:flex; align-items:center; gap:.55em; font-family:var(--display); text-transform:uppercase; font-size:1.2rem; padding:8px 0; margin-bottom:30px; }
.auth__brand em{ font-style:normal; color:var(--accent); margin-left:.22em; }
.auth__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.04; }
.auth__lead{ margin:16px 0 26px; color:var(--muted-l); font-size:.98rem; }

.auth__notice{
  padding:14px 16px; margin-bottom:26px; border-radius:12px;
  background:rgba(232,163,61,.10); box-shadow:inset 0 0 0 1px rgba(232,163,61,.30);
  font-size:.85rem; color:rgba(255,255,255,.78); line-height:1.5;
}
.auth__notice strong{ display:block; margin-bottom:3px; color:var(--accent); font-weight:600; }

.auth__form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.field input{
  width:100%; padding:.85em 1em; border:0; border-radius:11px;
  background:rgba(255,255,255,.06); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-family:var(--body); font-size:.95rem;
  transition:box-shadow .2s, background-color .2s;
}
.field input::placeholder{ color:rgba(255,255,255,.3); }
.field input:focus{ outline:0; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1.5px var(--accent); }
.field input:disabled{ cursor:not-allowed; opacity:.55; }

.check{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:rgba(255,255,255,.66); cursor:not-allowed; }
.check input{ width:16px; height:16px; accent-color:var(--accent); }
.auth__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.auth__minor{ font-size:.86rem; color:var(--accent); }
.auth__minor.is-off{ color:rgba(255,255,255,.32); cursor:not-allowed; }
.auth__submit{ width:100%; margin-top:6px; }
.auth__submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.auth__alt{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:.9rem; color:var(--muted-l); }
.auth__alt p{ margin:0 0 8px; }
.auth__alt a{ color:var(--accent); }
.auth__staffLink{ margin-top:14px; font-size:.85rem; }

.auth__shot{ margin:0; position:relative; overflow:hidden; }
.auth__shot img{ width:100%; height:100%; object-fit:cover; }
.auth__shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.35) 32%, rgba(11,11,12,0) 70%);
}
.auth--staff .auth__shot::after{ background:linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.72) 45%, rgba(11,11,12,.5) 100%); }

/* auth sayfalarında nav ve footer sadeleşsin */
body.is-auth .nav__links,
body.is-auth .nav__actions,
body.is-auth .nav__burger,
body.is-auth .foot__cols,
body.is-auth .foot__top{ display:none; }
body.is-auth .foot{ padding:26px var(--pad); }
body.is-auth .foot__copy{ border-top:0; padding-top:0; text-align:center; }

/* =========================================================
   404
   ========================================================= */
.nf{ min-height:100svh; display:grid; place-items:center; background:var(--ink); color:var(--paper); padding:140px var(--pad) 80px; text-align:center; }
.nf__mark{ font-size:4rem; color:var(--accent); margin-bottom:24px; display:flex; justify-content:center; }
.nf__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.4rem,7vw,5rem); line-height:1.04; }
.nf__lead{ margin:20px auto 30px; max-width:40ch; color:var(--muted-l); }
.nf__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   KART: fiyat + sepete ekle
   ========================================================= */
.card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(11,11,12,.09);
}
/* font-weight:400 şart: Anton'un tek ağırlığı var. 700 kalırsa tarayıcı
   sahte kalın uygular, harfi hafif kaydırıp iki kez basar ve rakamlar
   bulanık/çift görünür. Aynı sebeple aşağıdaki başlık öğeleri de 400. */
.card__price{ font-family:var(--display); font-size:1.3rem; letter-spacing:.01em; font-weight:400; }
.card__add{
  padding:.6em 1.1em; border:0; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:.82rem; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:background-color .22s, transform .22s var(--ease);
}
.card__add:hover{ background:var(--accent-d); transform:translateY(-2px); }
.card__add.is-added{ background:#1F8A4C; }

/* görseli olmayan ürünler için marka amblemli yer tutucu */
.card__ph{
  width:100%; height:100%;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(232,163,61,.16), transparent 62%),
    var(--cream-2);
  color:rgba(11,11,12,.16); font-size:4.5rem;
}

/* =========================================================
   MENÜ SAYFASI: yapışkan sekme çubuğu
   ========================================================= */
.menu__bar{
  position:sticky; top:0; z-index:30;
  max-width:1400px; margin:0 auto clamp(28px,4vw,48px);
  padding:14px 0;
  background:linear-gradient(var(--cream) 72%, rgba(244,240,234,0));
}
.menu--page .menu__bar{ background:linear-gradient(var(--cream) 72%, rgba(244,240,234,0)); }

/* =========================================================
   SİPARİŞ: WhatsApp kartı + platformlar
   ========================================================= */
.btn--wa{ background:#25D366; color:#07301A; }
.btn--wa:hover{ background:#31E679; }
.waico{ width:1.15em; height:1.15em; }
.btn--dark{ box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.24); color:var(--ink); }
.btn--dark:hover{ background:rgba(11,11,12,.06); }

.wacard{
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,4vw,60px);
  align-items:center; text-align:left;
  padding:clamp(26px,3.4vw,48px);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(37,211,102,.13), rgba(37,211,102,.04));
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.28);
}
.wacard__badge{
  display:inline-block; margin-bottom:16px;
  padding:.4em .9em; border-radius:999px;
  background:#25D366; color:#07301A;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.wacard__title{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.06; color:var(--paper);
}
.wacard__lead{ margin:16px 0 26px; max-width:48ch; color:var(--muted-l); font-size:.96rem; }
.wacard__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.wacard__qr{ margin:0; text-align:center; }
/* Kare kod KARE kalmali: yukseklik belirtilmezse HTML height ozniteligi
   sunum ipucu olarak gecerli kaliyor, genislik ise max-width ile kirpiliyor —
   kod dikey eziliyor ve yamuk gorunuyordu. */
.wacard__qr img{
  width:100%; max-width:230px; height:auto; aspect-ratio:1; margin:0 auto;
  border-radius:16px; background:#fff; padding:10px;
}
.wacard__qr figcaption{ margin-top:12px; font-size:.8rem; color:var(--muted-l); line-height:1.5; }
/* Telefondan bakan kullanıcı QR'ı okutamaz; bağlantı asıl yol.
   Dokunma hedefi 44px olsun diye satır içi yerine blok. */
.wacard__qr a{
  display:inline-block; margin-top:6px; padding:10px 16px;
  border:1px solid rgba(37,211,102,.4); border-radius:999px;
  color:#25D366; font-weight:600; text-decoration:none;
  transition:background .25s, border-color .25s;
}
.wacard__qr a:hover{ background:rgba(37,211,102,.12); border-color:#25D366; }

.order__or{
  display:flex; align-items:center; gap:18px;
  margin:clamp(34px,5vw,56px) 0 22px;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.order__or::before,.order__or::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.12); }

.ocard__logo{
  width:44px; height:44px; border-radius:11px; object-fit:contain;
  background:#fff; padding:5px;
}

/* =========================================================
   GOOGLE KARTI
   ========================================================= */
.gsec{ background:var(--paper); padding:clamp(50px,7vw,100px) var(--pad); }
.gsec__inner{ max-width:1400px; margin:0 auto; }

.gsec__head{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,28px);
  margin-bottom:clamp(24px,3vw,40px);
}
/* span satır içi olduğu için width uygulanmıyor, SVG bölümü kaplıyordu */
.gsec__mark{ display:block; flex:none; width:clamp(34px,3.4vw,46px); }
.gsec__mark svg{ width:100%; height:auto; }
.gsec__head > div{ flex:1; min-width:0; }
.gsec__cta{ flex:none; }

.gsec__score{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gsec__score strong{ font-family:var(--display); font-size:clamp(2rem,4vw,3rem); line-height:1; font-weight:400; }
.gsec__count{ margin:0; font-size:.9rem; color:var(--muted); }

.gsec__grid{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:1fr 1fr; align-items:stretch;
}
/* Yorum metni girilmemişse ızgara tek sütun: harita tam genişlik.
   Eskiden yanında boş-durum kutusu basılıyordu ve cilalı bir sayfada
   "bitmemiş" okunuyordu. Davet cümlesi başlığın altında tek satır. */
.gsec__grid--tek{ grid-template-columns:1fr; }
.gsec__grid--tek .gmap{ min-height:380px; }
.gsec__not{ margin:8px 0 0; font-size:.92rem; color:var(--muted); }

.gmap{ border-radius:var(--r); overflow:hidden; background:var(--cream-2); min-height:300px; }
.gmap iframe{ display:block; width:100%; height:100%; min-height:300px; border:0; }

.grev{ display:grid; gap:12px; grid-template-columns:1fr 1fr; align-content:start; }
.grev__item{
  padding:20px 22px; border-radius:16px; background:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);
}
.grev__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.grev__who{ font-weight:600; font-size:.92rem; }
.grev__text{ margin:0; font-size:.88rem; color:#5C564C; line-height:1.55; }
.grev__date{ display:block; margin-top:10px; font-size:.76rem; color:var(--muted); }

.grev--empty{
  grid-template-columns:1fr; align-content:center;
  padding:clamp(24px,3vw,36px); border-radius:var(--r);
  background:var(--cream); box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);
}
.grev__emptyTitle{ margin:0 0 10px; font-family:var(--display); text-transform:uppercase; font-size:1.25rem; line-height:1.12; }
.grev__emptyText{ margin:0 0 18px; font-size:.88rem; color:#5C564C; line-height:1.6; }
.grev__emptyText code{
  padding:.15em .4em; border-radius:5px; background:rgba(11,11,12,.07);
  font-size:.92em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gstars--sm{ width:5em; height:1em; font-size:.8rem; }
.gcard{
  display:flex; align-items:center; gap:clamp(18px,3vw,34px);
  padding:clamp(22px,2.8vw,34px) clamp(24px,3vw,40px);
  border-radius:20px; background:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.gcard:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(0,0,0,.4); }
.gcard__mark{ flex:none; width:clamp(38px,4vw,52px); }
.gcard__mark svg{ width:100%; height:auto; }
.gcard__body{ flex:1; min-width:0; }
.gcard__eyebrow{
  margin:0 0 6px; font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.gcard__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.2rem,2.4vw,1.8rem); line-height:1.12; }
.gcard__score{ display:flex; align-items:center; gap:14px; }
.gcard__score strong{ font-family:var(--display); font-size:clamp(1.9rem,4vw,3rem); line-height:1; }
.gcard__count{ margin:6px 0 0; font-size:.9rem; color:var(--muted); }
.gcard__go{
  flex:none; display:inline-flex; align-items:center; gap:.5em;
  font-size:.9rem; font-weight:600; color:var(--accent-d);
}
.gcard__go i{ font-style:normal; transition:transform .3s; }
.gcard:hover .gcard__go i{ transform:translateX(5px); }

/* yıldızlar: --fill yüzdesi kadar dolu */
.gstars{
  position:relative; display:inline-block;
  width:6.2em; height:1.15em; font-size:1rem;
  background:
    linear-gradient(90deg, #F5A623 var(--fill,0%), rgba(11,11,12,.16) var(--fill,0%));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 1.5 12.2 7h5.6l-4.5 3.5 1.7 5.6L10 12.7 4.9 16.1l1.7-5.6L2.1 7h5.6z'/%3E%3Cpath d='M30 1.5 32.2 7h5.6l-4.5 3.5 1.7 5.6L30 12.7l-5.1 3.4 1.7-5.6L22.1 7h5.6z'/%3E%3Cpath d='M50 1.5 52.2 7h5.6l-4.5 3.5 1.7 5.6L50 12.7l-5.1 3.4 1.7-5.6L42.1 7h5.6z'/%3E%3Cpath d='M70 1.5 72.2 7h5.6l-4.5 3.5 1.7 5.6L70 12.7l-5.1 3.4 1.7-5.6L62.1 7h5.6z'/%3E%3Cpath d='M90 1.5 92.2 7h5.6l-4.5 3.5 1.7 5.6L90 12.7l-5.1 3.4 1.7-5.6L82.1 7h5.6z'/%3E%3C/g%3E%3C/svg%3E") 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 1.5 12.2 7h5.6l-4.5 3.5 1.7 5.6L10 12.7 4.9 16.1l1.7-5.6L2.1 7h5.6z'/%3E%3Cpath d='M30 1.5 32.2 7h5.6l-4.5 3.5 1.7 5.6L30 12.7l-5.1 3.4 1.7-5.6L22.1 7h5.6z'/%3E%3Cpath d='M50 1.5 52.2 7h5.6l-4.5 3.5 1.7 5.6L50 12.7l-5.1 3.4 1.7-5.6L42.1 7h5.6z'/%3E%3Cpath d='M70 1.5 72.2 7h5.6l-4.5 3.5 1.7 5.6L70 12.7l-5.1 3.4 1.7-5.6L62.1 7h5.6z'/%3E%3Cpath d='M90 1.5 92.2 7h5.6l-4.5 3.5 1.7 5.6L90 12.7l-5.1 3.4 1.7-5.6L82.1 7h5.6z'/%3E%3C/g%3E%3C/svg%3E") 0/100% 100% no-repeat;
}

/* =========================================================
   SEPET
   ========================================================= */
.nav__cart{
  position:relative; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  color:inherit; transition:background-color .22s;
}
.nav__cart:hover{ background:rgba(255,255,255,.10); }
.nav.is-light:not(.is-stuck) .nav__cart:hover{ background:rgba(11,11,12,.08); }
.nav__cart svg{ width:21px; height:21px; }
.nav__cartBadge,.cfab__badge{
  position:absolute;
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:999px; background:var(--accent); color:var(--ink);
  font-size:.66rem; font-weight:700; line-height:1;
}
/* Nav ikonu 21px; rozet köşede duruyor, simgeyi neredeyse hiç örtmüyor. */
.nav__cartBadge{ top:-3px; right:-3px; }

/* Sabit düğmede ikon kutusu da 22px olduğu için aynı konumlandırma
   rozeti simgenin ORTASINA getiriyor ve çantanın %46'sını örtüyordu.
   Rozeti tamamen dışarı alıp koyu bir halka ile ayırıyoruz. */
.cfab__ico{ overflow:visible; }
.cfab__badge{
  top:-9px; right:-11px;
  box-shadow:0 0 0 2px var(--ink);
}

.cfab{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:flex; align-items:center; gap:12px;
  padding:12px 20px 12px 14px; border:0; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:.9rem; cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.75);
  transition:transform .28s var(--ease), background-color .25s;
}
.cfab:hover{ transform:translateY(-3px); }
.cfab__ico{ position:relative; display:grid; place-items:center; }
.cfab__ico svg{ width:22px; height:22px; }
.cfab__txt b{ margin-left:.45em; color:var(--accent); }

.cdrawer{ position:fixed; inset:0; z-index:120; }
.cdrawer__backdrop{
  position:absolute; inset:0; background:rgba(6,6,7,.62);
  opacity:0; transition:opacity .32s var(--ease); backdrop-filter:blur(3px);
}
.cdrawer.is-open .cdrawer__backdrop{ opacity:1; }
.cdrawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(100%,520px);
  display:flex; flex-direction:column;
  background:var(--ink-2); color:var(--paper);
  transform:translateX(100%); transition:transform .34s var(--ease);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
}
.cdrawer.is-open .cdrawer__panel{ transform:none; }

.cdrawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px; border-bottom:1px solid rgba(255,255,255,.10);
}
.cdrawer__head h2{ font-family:var(--display); text-transform:uppercase; font-size:1.35rem; line-height:1.12; }
.cdrawer__close{
  width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--paper);
  font-size:1.4rem; line-height:1; cursor:pointer;
}
.cdrawer__close:hover{ background:rgba(255,255,255,.16); }

.cdrawer__empty{ margin:0; padding:44px 22px; color:var(--muted-l); font-size:.94rem; }
.cdrawer__body{ flex:1; overflow-y:auto; padding:20px 26px 26px; }

.clines{ display:grid; gap:2px; }
.cline{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.cline__main{ min-width:0; }
.cline__name{ display:block; font-weight:600; font-size:.92rem; }
.cline__unit{ display:block; font-size:.78rem; color:var(--muted-l); }
.cline__qty{ display:flex; align-items:center; gap:8px; }
.qbtn{
  width:26px; height:26px; border:0; border-radius:50%;
  background:rgba(255,255,255,.10); color:var(--paper);
  font-size:.95rem; line-height:1; cursor:pointer;
}
.qbtn:hover{ background:rgba(255,255,255,.2); }
.qval{ min-width:1.4ch; text-align:center; font-weight:600; font-size:.9rem; }
.cline__sum{ font-weight:700; font-size:.9rem; white-space:nowrap; }
.cline__del{
  width:24px; height:24px; border:0; border-radius:50%;
  background:none; color:rgba(255,255,255,.55); font-size:1.15rem; line-height:1; cursor:pointer;
}
.cline__del:hover{ color:#FF6B6B; background:rgba(255,107,107,.12); }

.cdrawer__total{
  display:flex; align-items:center; justify-content:space-between;
  margin:18px 0 22px; padding-top:16px; border-top:2px solid rgba(255,255,255,.16);
  font-size:.95rem;
}
.cdrawer__total strong{ font-family:var(--display); font-size:1.6rem; color:var(--accent); font-weight:400; }

/* Form artık .cform — eski .cdrawer__form seçicisi eşleşmediği için
   textarea'lar tarayıcı varsayılanına düşüp BEYAZ kalıyordu. */
.cform .field label{ display:flex; gap:.4em; }
.cform .field label span{ color:rgba(255,255,255,.34); text-transform:none; letter-spacing:0; }
.cform textarea{
  width:100%; padding:.85em 1em; border:0; border-radius:11px; resize:vertical;
  background:rgba(255,255,255,.06); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-family:var(--body); font-size:.95rem; line-height:1.5;
  transition:box-shadow .2s, background-color .2s;
}
.cform textarea:focus{ outline:0; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1.5px var(--accent); }
.cform textarea::placeholder{ color:rgba(255,255,255,.3); }

.segs{ border:0; padding:0; margin:0; display:flex; gap:8px; }
.segs legend{
  padding:0; margin-bottom:8px; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.seg{ flex:1; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg span{
  display:block; padding:.7em 1em; border-radius:11px; text-align:center;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:.88rem; cursor:pointer; transition:background-color .2s, box-shadow .2s;
}
.seg input:checked + span{ background:rgba(232,163,61,.16); box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }

.cdrawer__preview{
  margin:16px 0 0; padding:14px; border-radius:11px;
  background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem;
  color:rgba(255,255,255,.8); white-space:pre-wrap; word-break:break-word;
}

.cdrawer__foot{ padding:20px 26px 24px; border-top:1px solid rgba(255,255,255,.10); }
.cdrawer__foot .btn{ width:100%; }
.cdrawer__meta{ display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--body); font-size:.82rem; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px;
}
.linkish--muted{ color:rgba(255,255,255,.42); }
.cdrawer__note{ margin:14px 0 0; font-size:.76rem; color:rgba(255,255,255,.55); line-height:1.5; }

body.cart-open{ overflow:hidden; }

/* --- form yerleşimi (çekmece + sayfa ortak) ---
   Alanlar bilerek ferah: sıkışık bir form doldurmayı zorlaştırıyordu. */
.frow{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.frow--3{ grid-template-columns:1fr 1fr 1fr; }
.fhead{
  margin:30px 0 4px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.fnote{ margin:12px 0 0; font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.55; }
.fnote--warn{ color:#F3C06B; }
.segs--wrap{ flex-wrap:wrap; gap:10px; }
.segs--wrap .seg{ flex:1 1 30%; }
.cform{ display:grid; gap:20px; }
.cform .field{ gap:9px; }
.cform input,
.cform select{ padding:.95em 1.05em; font-size:.95rem; }
#blokAdres,#blokGelAl{ display:grid; gap:18px; }
.cform select{
  width:100%; padding:.85em 1em; border:0; border-radius:11px;
  background:rgba(255,255,255,.06); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-family:var(--body); font-size:.95rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center;
}
.cform select:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
/* Açılır listenin ÖĞELERİ işletim sistemi çizer: select'ten beyaz metin
   miras alıp beyaz zeminde görünmez oluyordu. Açıkça renk veriyoruz. */
.cform select option{ background:#17171A; color:#FFFFFF; }
.cform select optgroup{ background:#17171A; color:#FFFFFF; }
.cform input[readonly]{ opacity:.6; cursor:default; }

/* teslimat bölgesi rozeti — boş bir "ilçe" açılır listesi yerine */
.zone{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:12px;
  background:rgba(232,163,61,.10); box-shadow:inset 0 0 0 1px rgba(232,163,61,.28);
}
.zone__pin{ flex:none; width:20px; color:var(--accent); margin-top:1px; }
.zone__txt{ display:grid; gap:3px; font-size:.85rem; }
.zone__txt b{ font-weight:600; color:var(--paper); }
.zone__txt i{ font-style:normal; color:rgba(255,255,255,.55); font-size:.8rem; line-height:1.45; }

/* Gel-al: adres + yol tarifi kartı */
.pickup{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border-radius:12px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
}
.pickup__pin{ flex:none; display:block; width:22px; color:var(--accent); }
.pickup__pin svg{ width:100%; height:auto; }
.pickup__txt{ flex:1; min-width:0; display:grid; gap:3px; }
.pickup__txt b{ font-size:.92rem; font-weight:600; color:var(--paper); }
.pickup__txt i{ font-style:normal; font-size:.8rem; color:rgba(255,255,255,.55); }
.pickup__go{
  flex:none; padding:.5em .9em; border-radius:999px;
  background:rgba(232,163,61,.16); box-shadow:inset 0 0 0 1px rgba(232,163,61,.4);
  font-size:.82rem; font-weight:600; color:var(--accent); white-space:nowrap;
  transition:background-color .22s;
}
.pickup__go:hover{ background:rgba(232,163,61,.28); }

/* Çekmecedeki birincil çağrı: sepet sayfasına götürür */
.cdrawer__go{
  width:100%; gap:.6em; font-size:1rem; padding:1.05em 1.7em;
}
.cdrawer__go svg{ width:1.15em; height:1.15em; transition:transform .25s var(--ease); }
.cdrawer__go:hover svg{ transform:translateX(4px); }
.cdrawer__more{
  display:inline-block; margin-top:18px;
  font-size:.88rem; color:var(--accent);
}
.cdrawer__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.cdrawer__meta{ justify-content:center; }

/* Sepet sayfasına belirgin yönlendirme */
.topage{
  display:flex; align-items:center; gap:14px;
  margin:20px 0 6px; padding:16px 18px; border-radius:14px;
  background:rgba(232,163,61,.12);
  box-shadow:inset 0 0 0 1.5px rgba(232,163,61,.42);
  transition:background-color .25s, transform .25s var(--ease);
}
.topage:hover{ background:rgba(232,163,61,.2); transform:translateY(-2px); }
.topage__ico{ flex:none; display:block; width:26px; color:var(--accent); }
.topage__ico svg{ width:100%; height:auto; }
.topage__txt{ flex:1; min-width:0; display:grid; gap:3px; }
.topage__txt b{ font-size:.94rem; font-weight:600; color:var(--paper); }
.topage__txt i{ font-style:normal; font-size:.8rem; color:rgba(255,255,255,.6); line-height:1.4; }
.topage__go{ flex:none; font-size:1.2rem; color:var(--accent); transition:transform .25s; }
.topage:hover .topage__go{ transform:translateX(4px); }

/* =========================================================
   SEPET SAYFASI
   ========================================================= */
.cpage{ background:var(--ink-2); color:var(--paper); padding:clamp(46px,7vw,96px) var(--pad) clamp(60px,9vw,120px); }
.cpage__empty{
  max-width:1300px; margin:0 auto; padding:60px 0;
  font-size:1.05rem; color:var(--muted-l); text-align:center;
}
.cpage__empty a{ color:var(--accent); border-bottom:1.5px solid currentColor; }
.cpage__grid{
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:1fr .9fr; gap:clamp(26px,4vw,64px); align-items:start;
}
.cpage__h{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.12; margin-bottom:20px;
}
.cpage__left,.cpage__right{
  padding:clamp(20px,2.6vw,32px);
  border-radius:20px; background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.cpage__right{ position:sticky; top:96px; }
.cpage__more{ display:inline-block; margin-top:18px; font-size:.88rem; color:var(--accent); }
.cpage__send{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.cpage__send .btn{ width:100%; }
.cpage .cline{ padding:15px 0; }
.cpage .cline__name{ font-size:1rem; }

/* =========================================================
   İLETİŞİM / ADIMLAR EKLERİ
   ========================================================= */
/* iletişim sağ sütun: marka görseli + QR */
.contact__side{ display:grid; gap:clamp(16px,2.4vw,26px); }
.contact__brand{ margin:0; }
.contact__brand img{ width:100%; height:auto; border-radius:var(--r); }
.contact__qr{ margin:0; text-align:center; }
.contact__qr img{
  width:100%; max-width:330px; height:auto; aspect-ratio:1; margin:0 auto;
  background:#fff; padding:14px; border-radius:20px;
}
.contact__qr figcaption{ margin-top:14px; font-size:.88rem; color:var(--muted); }
.contact__warn{
  margin-top:22px; padding:12px 15px; border-radius:11px;
  background:rgba(192,112,47,.09); box-shadow:inset 0 0 0 1px rgba(192,112,47,.26);
  font-size:.84rem; color:#7A5A34;
}
.steps__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,4vw,50px); }

.foot__top{ justify-content:space-between; }
.foot__wa{ flex:none; }

/* =========================================================
   ŞUBELER
   ========================================================= */
.brs{ background:var(--cream); padding:clamp(60px,9vw,130px) var(--pad); }
.brs__inner{ max-width:1400px; margin:0 auto; }
.brs__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(30px,4vw,54px);
}
.brs__lead{ margin:0; max-width:40ch; color:var(--muted); font-size:.95rem; }
.brs__list{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

.br{
  display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.br:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -26px rgba(0,0,0,.35); }
.br__media{ aspect-ratio:16/10; overflow:hidden; background:var(--cream-2); }
.br__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); }
.br__body{ padding:24px 26px 28px; }
.br__city{ font-family:var(--display); text-transform:uppercase; font-size:1.6rem; line-height:1.12; }
.br__region{ margin:5px 0 12px; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-d); }
.br__addr{ font-style:normal; font-size:.92rem; color:#5C564C; line-height:1.6; }
/* margin 5 + padding 11 = görsel boşluk yine 16px, dokunma alanı 45px. */
.br__go{ display:inline-flex; align-items:center; gap:.45em; margin-top:5px; padding:11px 0; font-size:.88rem; font-weight:600; color:var(--accent-d); }
.br__go i{ font-style:normal; transition:transform .3s; }
.br:hover .br__go i{ transform:translateX(4px); }

/* açılacak şube yeri */
.br--next{
  background:transparent;
  box-shadow:inset 0 0 0 2px rgba(11,11,12,.10);
  border-radius:20px;
}
.br--next:hover{ box-shadow:inset 0 0 0 2px rgba(192,112,47,.4); transform:none; }
.br__nextIn{ padding:34px 26px; display:grid; place-items:start; align-content:center; height:100%; min-height:220px; }
/* span satır içi olduğu için width uygulanmıyordu; ikon ekranı kaplıyordu */
.br__pin{ display:block; width:34px; color:var(--accent-d); margin-bottom:14px; }
.br__next-text{ margin:10px 0 0; font-size:.92rem; color:var(--muted); max-width:34ch; line-height:1.6; }

/* =========================================================
   ŞUBE DETAY SAYFASI
   ========================================================= */
.bdet{ background:var(--cream); padding:clamp(56px,8vw,110px) var(--pad); }
.bdet__grid{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start;
}
.bdet__note{ margin:18px 0 0; max-width:44ch; color:#5C564C; font-size:1rem; }
.bdet__meta{ margin-top:28px; }
.bdet__meta dd a{ border-bottom:1.5px solid var(--accent-d); }
.bdet__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.bdet__plat{ margin:22px 0 0; font-size:.9rem; color:var(--muted); }
.bdet__plat a{ color:var(--accent-d); border-bottom:1px solid rgba(192,112,47,.4); }

.bdet__side{ display:grid; gap:clamp(14px,2vw,22px); }
.bdet__shot{ margin:0; }
.bdet__shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r); }
.bdet__map{ border-radius:var(--r); overflow:hidden; background:var(--cream-2); }
.bdet__map iframe{ display:block; width:100%; height:clamp(240px,32vh,340px); border:0; }

.bsoon{ background:var(--ink-2); color:var(--paper); padding:clamp(56px,8vw,120px) var(--pad); }
.bsoon__inner{ max-width:760px; margin:0 auto; text-align:center; }
.bsoon .br__pin{ width:40px; color:var(--accent); margin:0 auto 18px; }
.bsoon__text{ margin:20px auto 30px; max-width:48ch; color:var(--muted-l); }
.bsoon__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* BAŞLIK MASKESİ. Bölüm başlıkları düz fade yerine hero'daki kelimeler
   gibi alttan "yazılarak" açılır — aynı araç, yeni bir dil değil.
   clip-path kutunun kendisinde; sarmalayıcı gerekmiyor. Bitişte üst/alt
   taşma payı var ki çıkıntılı harfler (ğ, y, Ş) kırpılmasın. */
.h2[data-reveal]{ opacity:1; transform:translateY(.35em); clip-path:inset(0 0 100% 0); }
.h2[data-reveal].is-in{ transform:none; clip-path:inset(-12% 0 -22% 0); transition:transform .9s var(--ease), clip-path .9s var(--ease); }

/* KADEME. Bir kapsayıcıdaki komşular 70 ms arayla gelir — kartlar,
   ilkeler, adımlar; üst yazı → başlık → açıklama sırası da dâhil.
   Eskiden hepsi aynı karede beliriyordu ve alt yarı bu yüzden üst
   yarıdaki sahneden daha "şablon" duruyordu.

   Kapsayıcı listesi TUTULMUYOR: nth-child her yerde geçerli, yeni bir
   sayfa ya da liste eklendiğinde buraya dönmek gerekmiyor. Sekizden
   sonrası zaten ekran dışından geliyor, kendi gecikmesi olur.

   Bu kurallar başlık maskesinden SONRA duruyor: oradaki `transition`
   kısaltması gecikmeyi sıfırlıyor; aynı özgüllükte sonra gelen kazanır. */
[data-reveal].is-in:nth-child(2){ transition-delay:.07s; }
[data-reveal].is-in:nth-child(3){ transition-delay:.14s; }
[data-reveal].is-in:nth-child(4){ transition-delay:.21s; }
[data-reveal].is-in:nth-child(5){ transition-delay:.28s; }
[data-reveal].is-in:nth-child(6){ transition-delay:.35s; }
[data-reveal].is-in:nth-child(7){ transition-delay:.42s; }
[data-reveal].is-in:nth-child(8){ transition-delay:.49s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero__foot{ position:static; max-width:none; padding:0 var(--pad); text-align:center; margin-top:26px; }
  .hero__actions{ justify-content:center; }
  /* Üst payı KÜÇÜLTMÜYORUZ: eski "120px 0 90px" değeri üstteki bol payı
     eziyor ve dev yazıyı nav'a yaklaştırıyordu. Yan boşluk da sıfırlanmıştı. */
  .hero{ padding:clamp(146px,17vh,196px) var(--pad) clamp(110px,15vh,170px); align-content:center; }
  /* "Kaydır" imi artık GİZLENMİYOR: kaydırmanın asıl olduğu cihazda
     yönlendirme yoktu. Akışa alınıp altlığın altına, ortaya iniyor. */
  .hero__cue{ position:static; justify-content:center; margin-top:22px; }
  .ex__head{ max-width:56vw; }
  /* Etiketler artık GİZLENMİYOR. Bölümün adı "İçinde ne var";
     etiketler gizlenince bölüm ne olduğunu hiç söylemiyordu ve 1080px
     altındaki her ekranda (tabletler + bütün telefonlar) sessiz bir
     animasyona dönüşüyordu. Sahnenin yanına sığmadıkları için ALTINA,
     ızgara hâlinde diziliyorlar. */
  .specs{
    position:absolute; left:var(--pad); right:var(--pad);
    top:auto; bottom:clamp(86px,11vh,118px);   /* sol alttaki "yukarı çık" düğmesinin üstünde kalsın */
    width:auto; height:auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  }
  .spec{ position:static; translate:none; width:auto; padding-left:12px; }
  .spec[data-spec]{ top:auto; }
  .spec__lead{ display:none; }   /* bağlantı çizgisi bu düzende anlamsız */
  .spec h3{ font-size:1.02rem; }
  .spec p{ font-size:.76rem; line-height:1.4; }
  .ex__stage{ width:min(72vw,440px); }
  .ex{ height:360vh; }
  .contact__grid{ grid-template-columns:1fr; }
  .shot img{ height:min(42vh,330px); }
}

@media (max-width:1000px){
  .bdet__grid{ grid-template-columns:1fr; }

  .cpage__grid{ grid-template-columns:1fr; }
  .cpage__right{ position:static; }
}

@media (max-width:900px){
  .wacard{ grid-template-columns:1fr; text-align:center; }
  .wacard__lead{ margin-inline:auto; }
  .wacard__actions{ justify-content:center; }
  .wacard__qr{ order:-1; }
  .gcard{ flex-wrap:wrap; }
  .gcard__go{ width:100%; }

  /* Giriş/kayıt: tek sütun, fotoğraf arka plana geçer */
  .auth{ grid-template-columns:1fr; }
  .auth__panel{ position:relative; z-index:2; padding-bottom:80px; }
  .auth__shot{ position:absolute; inset:0; z-index:1; }
  .auth__shot img{ height:100%; }
  .auth__shot::after,
  .auth--staff .auth__shot::after{
    background:linear-gradient(180deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.97) 45%, var(--ink) 100%);
  }
}

@media (max-width:760px){
  .nav__links,.nav__actions{ display:none; }
  .nav__burger{ display:block; }

  /* Hero: dar ekranda üst üste bindirme yerine dikey akış —
     tipografi üstte, waffle altında, metin en sonda. */
  .hero{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:clamp(128px,16vh,168px) var(--pad) 70px;
  }
  .hero__type{ position:static; translate:none; width:100%; font-size:clamp(3.2rem,15vw,5.5rem); }
  .hero__stack{ width:min(70vw,330px); translate:none; margin-top:10px; }
  .hero__foot{ margin-top:24px; }
  .hero__ring{ width:min(96vw,420px); }
  .ex{ height:320vh; }
  .ex__head{ left:var(--pad); right:var(--pad); max-width:none; top:96px; }
  .ex__stage{ width:min(84vw,400px); }

  .show{ height:260vh; }
  .shot img{ height:min(40vh,300px); }
  .foot__links{ margin-left:0; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .h2[data-reveal]{ clip-path:none; }
  .card__media img{ transform:none; }
  .ex,.show{ height:auto; }
  .ex__pin,.show__pin{ position:relative; height:auto; padding:100px 0; }
  .show__track{ flex-wrap:wrap; width:auto; }
  .boot{ display:none; }
}

/* Sipariş kaydedildiğinde sepetin altında beliren onay satırı. */
.csonuc{
  margin:12px 0 0; padding:12px 14px; border-radius:11px;
  background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.4);
  color:#7EE2B8; font-size:.9rem; line-height:1.55;
}

/* Girişli kullanıcı navdaki hesap düğmesinde adıyla görünür. */
.nav__login--uye{ border-color:rgba(240,165,0,.55); color:var(--accent); }
.nav__login--uye:hover{ background:rgba(240,165,0,.12); }
.mnav__out{ margin-top:-4px; }
.mnav__out .linkish{ font-size:.9rem; }

/* Sepette "giriş yap" daveti. */
.cuye{
  margin:-4px 0 0; font-size:.85rem; color:var(--muted-l, #9C9CA3); line-height:1.55;
}
.cuye a{ color:var(--accent); font-weight:600; }

/* Yönetim panelinden yazılan duyuru şeridi ve kapalı dükkân bildirimi. */
.duyuru{
  position:relative; z-index:60;
  padding:9px 20px; text-align:center;
  background:var(--accent); color:#111;
  font-size:.88rem; font-weight:600; line-height:1.45;
}
.duyuru--kapali{ background:#E5484D; color:#fff; }
.duyuru__ic{ display:inline-block; max-width:70ch; }

/* Sepette gönderimi engelleyen sebep (kapalıyız / alt sınır). */
.cuyari{
  margin:12px 0 0; padding:11px 14px; border-radius:11px;
  background:rgba(240,165,0,.12); border:1px solid rgba(240,165,0,.4);
  color:#F5C562; font-size:.88rem; line-height:1.55;
}

/* ==========================================================================
   Çerez izni bandı
   ========================================================================== */

/* Bant sabit konumda ve sayfanın altını kapatıyor.

   Yalnızca dolgu vermek YETMİYOR: giriş sayfasında .auth
   "min-height:100svh" ızgara ve kutu dikey ortalı. Kutu ekranın
   ortasında kalıyor, bant da altını örtüyordu — kullanıcı "Giriş yap"
   düğmesini GÖRÜYOR ama dokunuşu banda gidiyordu.

   Çözüm: ortalamanın yapıldığı yüksekliği bandın boyu kadar kısaltmak.
   --cerez-h gerçek yüksekliği JS ile ölçülüp yazılıyor; aşağıdaki değer
   JS çalışmazsa geçerli olan güvenli varsayılan. */
body.is-cerez{ --cerez-h:200px; }

body.is-cerez .auth{ min-height:calc(100svh - var(--cerez-h)); }
body.is-cerez .foot{ padding-bottom:calc(var(--cerez-h) + 24px); }
/* İçerik bandın boyundan uzunsa min-height yetmez; panelin altına
   bandın boyu kadar boşluk koyup her şeyin bandın üstüne
   kaydırılabilmesini garantiliyoruz. */
body.is-cerez .auth__panel{ padding-bottom:calc(var(--cerez-h) + 24px); }
/* Sepet çekmecesi ve sabit sepet düğmesi de bandın üstünde kalsın. */
body.is-cerez .cfab{ bottom:calc(var(--cerez-h) + 16px); }
body.is-cerez .cdrawer__panel{ padding-bottom:calc(var(--cerez-h) + 16px); }

/* Çerez bandı ilk ziyarette HERO DÜĞMELERİNİN ÜSTÜNE biniyordu: gövde
   footer/sepet/yukarı düğmesi için pay bırakıyor ama hero için
   bırakmıyordu. "Menüyü gör / Paket sipariş" — bütün hero animasyonunun
   götürdüğü yer — yarı gizli kalıyordu. Masaüstünde mutlak konumlu
   altlık bant kadar yukarı çekiliyor; dar ekranda altlık akışta olduğu
   için hero'nun alt payı bant kadar büyüyor. */
body.is-cerez .hero__foot,
body.is-cerez .hero__cue{ bottom:calc(clamp(60px,9vh,96px) + var(--cerez-h)); }
@media (max-width:1080px){
  body.is-cerez .hero{ padding-bottom:calc(clamp(110px,15vh,170px) + var(--cerez-h)); }
  body.is-cerez .hero__foot,
  body.is-cerez .hero__cue{ bottom:auto; }
}
@media (max-width:760px){
  body.is-cerez .hero{ padding-bottom:calc(70px + var(--cerez-h)); }
}

.cerez{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  padding:16px; animation:cerezGir .4s ease .6s both;
}
@keyframes cerezGir{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.cerez__ic{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 22px; border-radius:16px;
  background:#17171A; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.cerez__metin{ flex:1; min-width:260px; }
.cerez__baslik{
  margin:0 0 5px; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.05rem; line-height:1.14; color:#F3F3F4;
}
.cerez__metin p{ margin:0; font-size:.86rem; line-height:1.6; color:#9C9CA3; }
.cerez__metin b{ color:#F3F3F4; }
.cerez__metin a{ color:var(--accent); }
.cerez__dugmeler form{ display:flex; gap:9px; flex-wrap:wrap; }
.cerez__ret{ background:transparent; border:1px solid rgba(255,255,255,.18); color:#F3F3F4; }
.cerez__ret:hover{ background:rgba(255,255,255,.06); }

@media (max-width:640px){
  /* Mobilde bandı olabildiğince alçak tutuyoruz: ekranın üçte birini
     kaplayınca altındaki düğmeler dokunulamaz hâle geliyordu. */
  .cerez{ padding:8px; }
  .cerez__ic{ padding:13px 15px; gap:11px; }
  .cerez__baslik{ font-size:.95rem; margin-bottom:3px; }
  .cerez__metin p{ font-size:.8rem; line-height:1.5; }
  .cerez__dugmeler, .cerez__dugmeler form{ width:100%; }
  .cerez__dugmeler .btn{ flex:1; justify-content:center; padding:11px 12px; font-size:.85rem; }
}

/* Alçak ekranlarda (küçük Android, yatay tutulan telefon) bant ekranın
   üçte birini kaplayıp altındaki düğmeleri yutuyordu. İkincil cümleyi
   gizliyoruz — asıl bilgi ve "Ayrıntılar" bağlantısı yerinde kalıyor. */
@media (max-height:700px){
  .cerez__ek{ display:none; }
  .cerez__ic{ padding:11px 14px; gap:9px; }
  .cerez__baslik{ font-size:.9rem; }
  .cerez__metin p{ font-size:.78rem; }
}

/* ==========================================================================
   Misafir sipariş takibi (/siparislerim)
   ========================================================================== */

.sip{ padding:60px var(--pad) 90px; background:var(--ink); color:var(--paper); }
.sip__blok{ margin-bottom:44px; }
.sip__blok--bilgi{
  padding:24px; border-radius:16px;
  background:rgba(240,165,0,.07); border:1px solid rgba(240,165,0,.25);
}
.sip__blok h2{ margin:0 0 12px; }
.sip__aciklama{ margin:0 0 18px; color:var(--muted-l); line-height:1.65; max-width:60ch; }

.sip__uye{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 22px; margin-bottom:36px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.sip__uye p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--muted-l); flex:1; min-width:240px; }
.sip__uye b{ color:#fff; }

.sipl{ list-style:none; margin:0; padding:0; display:grid;
       grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; }
.sipl__i{
  padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.sipl__ust{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.sipl__kod{ font-family:ui-monospace, Menlo, monospace; font-size:1rem; letter-spacing:.02em; }
.sipl__meta{ margin:0 0 5px; font-size:.86rem; color:var(--muted-l); }
.sipl__meta b{ color:#fff; }
.sipl__tur{ margin:0; font-size:.82rem; color:var(--muted-l); line-height:1.5; }
.sip__not{ margin:16px 0 0; font-size:.83rem; color:var(--muted-l); line-height:1.6; }

.sipsor{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; max-width:640px; }
.sipsor .field{ display:flex; flex-direction:column; gap:6px; }
.sip__hata{
  margin:16px 0 0; padding:12px 15px; border-radius:11px; max-width:640px;
  background:rgba(229,72,77,.1); border:1px solid rgba(229,72,77,.4);
  color:#FF9592; font-size:.9rem;
}

.sipd{
  margin-top:22px; padding:22px; border-radius:16px; max-width:640px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.sipd__ust{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.sipd__zaman{ display:block; font-size:.8rem; color:var(--muted-l); margin-top:3px; }
.sipd__kalemler{ list-style:none; margin:0; padding:0; }
.sipd__kalemler li{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.92rem;
}
.sipd__toplam{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:14px 0 0; padding-top:6px;
}
.sipd__toplam span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-l); }
.sipd__toplam b{ font-family:var(--display); font-weight:400; font-size:1.5rem; }
.sipd__gecmis{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.08);
               display:flex; flex-direction:column; gap:9px; }
.sipd__gecmis li{ display:flex; justify-content:space-between; gap:12px; font-size:.86rem; }
.sipd__gecmis span{ color:var(--muted-l); }

.sip__yardim{ margin:0; font-size:.9rem; color:var(--muted-l); line-height:1.65; }
.sip__yardim a{ color:var(--accent); }

/* ==========================================================================
   Metin sayfaları (çerez politikası)
   ========================================================================== */

/* color ŞART: --bg diye bir değişken yoktu, bölüm renk almıyor ve
   bölüm başlıkları koyu zeminde koyu kalıp görünmez oluyordu. */
.metin{ padding:60px var(--pad) 90px; background:var(--ink); color:var(--paper); }

/* .wrap hiç tanımlanmamıştı: yalnızca .wrap--dar genişlik veriyordu,
   ortalama ve yan boşluk yoktu. Metin sayfaları sola yapışıp sağda
   680px boşluk bırakıyor, mobilde de ekranın kenarına değiyordu.
   Sitenin diğer bölümleriyle aynı ölçüler kullanılıyor. */
.wrap{ max-width:1400px; margin-inline:auto; }

/* Uzun metinlerde satır uzunluğu okunur kalsın diye içerik daraltılıyor —
   ama kapsayıcı DEĞİL, çocukları. Kapsayıcıyı daraltmak sütunu sayfanın
   ortasına kaydırıyor ve sola hizalı sayfa başlığıyla arasında 270px
   kayma bırakıyordu. Bu şekilde metin başlıkla aynı hizadan başlıyor. */
.wrap--dar > *{ max-width:760px; }
.metin__giris{ font-size:1.05rem; line-height:1.75; color:var(--muted-l); margin:0 0 40px; }
.metin__giris b{ color:#fff; }
.metin__blok{ margin-bottom:40px; }
.metin__blok h2{
  margin:0 0 12px; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.35rem; line-height:1.14; color:var(--paper);
}
.metin__blok p{ margin:0 0 14px; line-height:1.75; color:var(--muted-l); }
.metin__blok p:last-child{ margin-bottom:0; }
.metin__blok b{ color:#fff; }
.metin__blok a{ color:var(--accent); }
.metin code{
  background:rgba(255,255,255,.07); padding:.14em .45em; border-radius:5px;
  font-size:.9em; color:#fff;
}

.cerezl{ margin:0 0 16px; }
.cerezl dt{
  font-family:ui-monospace, Menlo, monospace; font-size:.92rem; color:var(--accent);
  margin-top:16px;
}
.cerezl dd{ margin:5px 0 0; line-height:1.7; color:var(--muted-l); }
.cerezl__eylem{ display:flex; gap:11px; flex-wrap:wrap; margin:16px 0; }
.cerezl__durum{ margin:0 0 14px !important; }
.cerezl__durum b{ color:var(--accent) !important; }

@media (max-width:640px){
  .sipsor{ grid-template-columns:1fr; }
}

/* Altbilgi telif satırındaki politika bağlantısı. */
.foot__copy a{
  color:var(--muted-l); margin-left:14px;
  padding:6px 0; display:inline-block;
}
.foot__copy a:hover{ color:var(--accent); }

/* Dokunma alanları: menü bağlantıları ve iletişim satırları çok inceydi. */
.nav__links a{ padding-block:11px; }
.cerez__metin a{ display:inline-block; padding:6px 0; }
.contact__meta dd a{ display:inline-block; padding:6px 0; }
/* inline-block + padding alt cizgiyi metinden kopariyordu; dokunma
   alanini dikey kutu yerine satir yuksekligiyle veriyoruz. */
.cpage__empty a{ padding:5px 2px; border-radius:4px; }

/* Mobil menünün alt düğmeleri yan yana; ikisi de birincil eylem. */
.mnav__cta{ display:flex; gap:10px; width:min(100%,320px); }
.mnav__cta .btn{ flex:1; justify-content:center; }

/* Boş sepetteki bağlantının alt çizgisi metinden kopuk duruyordu. */
.cpage__empty a{ text-underline-offset:3px; }

/* Mobil menü tam ekran bir katman; çerez bandı (z-index 120) üstüne
   binip alttaki "Giriş / Sipariş ver / Sepetim" düğmelerini kapatıyordu.
   Menü açıkken bandı gizliyoruz — kullanıcı menüyü kapatınca geri gelir.
   Ayrıca menü kısa ekranda taşarsa kaydırılabilsin. */
/* Mobil menü açıkken üstteki şeritler gizlensin: çerez bandı zaten
   gizliydi, flash mesajı menünün ilk bağlantısını örtüyordu. */
.mnav:not([hidden]) ~ .cerez,
body:has(.mnav:not([hidden])) .vflash,
body:has(.mnav:not([hidden])) .duyuru{ display:none; }
.mnav{ overflow-y:auto; padding:80px 20px 40px; justify-content:safe center; }

/* ==========================================================================
   Yukarı çık düğmesi (sol alt)
   Sağ alt sepet düğmesine ayrılmış; bu yüzden sol tarafta.
   ========================================================================== */

.yukari{
  position:fixed; left:22px; bottom:22px; z-index:70;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(23,23,26,.9); border:1px solid rgba(255,255,255,.16);
  color:#F3F3F4; backdrop-filter:blur(8px);
  opacity:0; transform:translateY(12px) scale(.9);
  transition:opacity .28s ease, transform .28s ease, background .2s, border-color .2s;
  pointer-events:none;
}
.yukari svg{ width:20px; height:20px; }
.yukari.is-on{ opacity:1; transform:none; pointer-events:auto; }
.yukari:hover{ background:var(--accent); border-color:transparent; color:#111; }
.yukari:active{ transform:translateY(1px); }

/* Çerez bandı açıkken düğme bandın üstüne çıksın. */
body.is-cerez .yukari{ bottom:calc(var(--cerez-h) + 16px); }

/* Açık renkli bölümlerde ters kontrast. */
.yukari.is-light{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.12); color:#17171A; }
.yukari.is-light:hover{ background:var(--accent); border-color:transparent; color:#111; }

@media (max-width:640px){
  .yukari{ left:14px; bottom:14px; width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  .yukari{ transition:opacity .01ms; }
}

/* ==========================================================================
   Menü: yapışkan çubuk, arama, alerjen etiketleri, sepet rozeti
   ========================================================================== */

.menu__bar--sticky{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-block:14px;
  background:var(--paper); border-bottom:1px solid rgba(0,0,0,.08);
}
.menu__bar--sticky .tabs{ flex:1 1 auto; min-width:0; }

/* Kategori blokları yapışkan çubuğun altında kalmasın: tarayıcının
   sayfa içi aramasi (Ctrl+F) ya da bir bağlantı buraya atladığında
   başlık çubuğun arkasında kalıyordu. */
.menu__block{ scroll-margin-top:88px; }

.menu__ara{
  position:relative; display:flex; align-items:center;
  flex:0 1 320px; min-width:220px;
}
.menu__ara svg{
  position:absolute; left:14px; width:17px; height:17px;
  color:#8A8A90; pointer-events:none;
}
.menu__ara input{
  width:100%; padding:11px 38px 11px 40px;
  border:1px solid rgba(0,0,0,.14); border-radius:999px;
  background:#fff; color:var(--ink); font:inherit; font-size:.92rem;
  transition:border-color .2s, box-shadow .2s;
}
.menu__ara input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(240,165,0,.18);
}
.menu__ara input::placeholder{ color:#9A9AA0; }
.menu__ara input::-webkit-search-cancel-button{ display:none; }
.menu__araSil{
  position:absolute; right:8px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(0,0,0,.07); border:0; color:var(--ink);
  font-size:1.15rem; line-height:1;
}
.menu__araSil:hover{ background:rgba(0,0,0,.14); }

.menu__sonuc{
  margin:18px 0 0; font-size:.94rem; color:var(--muted-d, #5E5E65);
}

/* Arama açıkken kategori başlıkları gereksiz yer kaplamasın. */
body.menu-arama .menu__lead,
body.menu-arama .menu__blockHead .menu__blockNote{ display:none; }

/* Alerjen etiketleri */
.card__alrj{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:10px 0 0;
}
.card__alrjE{
  padding:2px 8px; border-radius:999px;
  background:rgba(0,0,0,.055); border:1px solid rgba(0,0,0,.07);
  font-size:.71rem; color:#5E5E65; letter-spacing:.01em;
}

.menu__bilgi{ display:flex; flex-direction:column; gap:14px; }
/* Alerji uyarısı menünün en altında ORTADA duruyor: kenara yaslı
   dar bir paragraf olarak gözden kaçıyordu. Sayfanın kapanış notu gibi. */
.alrjNot{
  max-width:720px; margin:26px auto 0; padding:26px 28px 28px;
  border-radius:var(--r); text-align:center;
  background:rgba(240,165,0,.09); border:1px solid rgba(240,165,0,.3);
}
.alrjNot__ikon{
  display:grid; place-items:center; width:44px; height:44px; margin:0 auto 12px;
  border-radius:50%; background:var(--accent); color:#3D3222;
}
.alrjNot__ikon svg{ width:23px; height:23px; }
.alrjNot__baslik{
  margin:0 0 8px; font-family:var(--display); font-weight:400;
  text-transform:uppercase; font-size:1.12rem; letter-spacing:.02em; color:#3D3222;
}
.alrjNot__metin{
  margin:0 auto; max-width:58ch;
  font-size:.9rem; line-height:1.7; color:#5A4A2E;
}
.alrjNot__metin + .alrjNot__metin{ margin-top:10px; }
.alrjNot__metin b{ color:#3D3222; }
.alrjNot__metin a{ color:#8A5F00; text-decoration:underline; }

@media (max-width:560px){
  .alrjNot{ padding:22px 18px 24px; }
}
/* Sepetteki adet rozeti */
/* Sag ust: sol ust köşe "Popüler / Çocuklara" etiketinin. */
.card__inCart{
  position:absolute; right:12px; top:12px; z-index:3;
  min-width:28px; height:28px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--accent); color:#111;
  font-size:.82rem; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.card.is-inCart{ outline:2px solid rgba(240,165,0,.55); outline-offset:2px; }

/* 980px: arama kutusu (320px) ile 6 sekme yan yana bu genişlikten
   sonra sığıyor; altında sekmeler iki satıra sarıp çubuğu 239px'e
   çıkarıyordu. */
@media (max-width:980px){
  .menu__bar--sticky{ gap:10px; padding-block:10px; }
  .menu__ara{ flex:1 1 100%; order:-1; }

  /* Sekmeler alt alta sarınca yapışkan çubuk ekranın yarısını kaplıyordu;
     mobilde tek satırda yatay kayıyorlar. */
  .menu__bar--sticky .tabs{
    flex-wrap:nowrap; overflow-x:auto; margin-top:0; gap:8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* Kenarda kırpılmasın diye taşırıp geri dolduruyoruz. */
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
  }
  .menu__bar--sticky .tabs::-webkit-scrollbar{ display:none; }
  .menu__bar--sticky .tab{
    flex:0 0 auto; scroll-snap-align:start;
    padding:.6em 1.05em; font-size:.85rem;
  }
  .menu__ara input{ padding-block:10px; font-size:.88rem; }
}

/* Yasal metin sayfaları: alt başlık, liste, tarih. */
.metin__alt{
  margin:22px 0 8px; font-family:var(--display); font-weight:400;
  text-transform:uppercase; font-size:1.02rem; line-height:1.18; color:#fff;
}
/* Global sıfırlama ul{list-style:none} uyguluyor; yasal metinlerde
   madde işaretleri anlamı taşıdığı için geri açılıyor. */
.liste{ margin:0 0 14px; padding-left:22px; list-style:disc; }
.liste ol{ list-style:decimal; }
.liste li{ margin-bottom:8px; line-height:1.7; color:var(--muted-l); }
.liste li b{ color:#fff; }
.metin__tarih{
  margin:36px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem; color:var(--muted-l);
}

/* Altbilgi telif satırı artık üç bağlantı taşıyor. */
.foot__copy{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; }
.foot__copy a{ margin-left:8px; }

/* Kayıt formundaki onay kutusu iki bağlantı içeriyor. */
.check a{ color:var(--accent); text-decoration:underline; }
.check span i{ font-style:normal; opacity:.65; }

/* Ekran okuyucuya görünür, gözle görünmez.
   panel.css'teki .pnl__gizli'nin vitrin karşılığı — vitrin panel.css
   yüklemediği için "Menüde ara" etiketi ekranda görünüyordu. */
.gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Sepete ürün eklenince kısa bir hareket — kullanıcı sepetin
   güncellendiğini görsün, sepeti açmak zorunda kalmasın. */
@keyframes sepetZipla{
  0%   { transform:scale(1); }
  35%  { transform:scale(1.09); }
  70%  { transform:scale(.97); }
  100% { transform:scale(1); }
}
.cfab.is-bump{ animation:sepetZipla .42s var(--ease); }
.nav__cart.is-bump svg{ animation:sepetZipla .42s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .cfab.is-bump, .nav__cart.is-bump svg{ animation:none; }
}

/* =========================================================
   MENÜ KARTI — üstü çizili fiyat ve kazanç rozeti
   ========================================================= */
/* Menüyü satan şey fotoğraf değil "ayrı ayrı alsan 880 ₺" bilgisi.
   Zincirlerin kullandığı kurgu bu; kartın geri kalanı normal ürünle
   birebir aynı kalıyor ki menü sayfası tek bir dille konuşsun. */

.card--menu{ outline:1px solid rgba(240,165,0,.35); outline-offset:-1px; }

/* Sol üst köşe "Popüler" etiketinin, sağ üst sepet adedinin —
   kazanç rozeti sol alta oturuyor. */
.card__kazanc{
  position:absolute; left:12px; bottom:12px; z-index:3;
  padding:.42em .85em; border-radius:999px;
  background:var(--accent); color:#111;
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Üstü çizili tutar fiyattan önce, daha küçük ve sönük — asıl okunacak
   olan menü fiyatı. */
.card__eski{
  font-family:var(--body); font-size:.82rem; font-weight:500;
  color:#8A8378; margin-right:7px; text-decoration-thickness:1.5px;
}

/* =========================================================
   FRANCHISE
   ========================================================= */

/* --- başvuru alındı --- */
.frok{ padding:60px var(--pad) 0; }
.frok__kart{
  max-width:760px; margin-inline:auto; padding:38px 34px; border-radius:var(--r);
  background:var(--cream); border:1px solid rgba(48,164,108,.35); text-align:center;
}
.frok__ikon{
  display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px;
  border-radius:50%; background:#30A46C; color:#fff;
}
.frok__ikon svg{ width:26px; height:26px; }
.frok__kart p{ margin:12px 0 0; color:#5C564C; line-height:1.65; }
.frok__alt{ font-size:.9rem; }
.frok__btn{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* --- ne veriyoruz --- */
.frw{ padding:96px var(--pad); background:var(--paper); color:var(--ink); }
.frw__inner{ max-width:1400px; margin-inline:auto; }
.frw__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px; align-items:end; margin-bottom:46px;
}
.frw__lead{ color:#5C564C; line-height:1.7; max-width:52ch; }

.frw__list{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
            background:rgba(11,11,12,.1); border:1px solid rgba(11,11,12,.1); border-radius:var(--r); overflow:hidden; }
.frw__i{ background:var(--paper); padding:30px 26px 34px; }
.frw__i b{
  display:block; font-family:var(--display); font-weight:400; font-size:.9rem;
  color:var(--accent-d); letter-spacing:.1em; margin-bottom:10px;
}
.frw__i h3{ font-family:var(--display); font-size:1.24rem; text-transform:uppercase; line-height:1.14; margin-bottom:9px; }
.frw__i p{ margin:0; font-size:.9rem; color:#5C564C; line-height:1.65; }

/* --- süreç (koyu) --- */
.frs{ padding:92px var(--pad); background:var(--ink); color:var(--paper); }
.frs__inner{ max-width:1400px; margin-inline:auto; }
.frs__list{
  list-style:none; counter-reset:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px;
}
.frs__list li{ padding-top:22px; border-top:2px solid rgba(255,255,255,.16); }
.frs__list b{
  display:block; font-family:var(--display); font-weight:400; font-size:2.4rem;
  line-height:1; color:var(--accent); margin-bottom:12px;
}
.frs__list h3{ font-size:1.02rem; font-weight:600; margin-bottom:7px; }
.frs__list p{ margin:0; font-size:.88rem; color:rgba(255,255,255,.62); line-height:1.6; }

/* --- kampanya kartı ---
   İçerik panelden yazılıyor; kampanya yoksa bölüm hiç basılmıyor. */
.kmp{ padding:clamp(40px,6vw,72px) var(--pad); background:var(--paper); }
.kmp__ic{
  max-width:1400px; margin-inline:auto; padding:clamp(28px,4vw,48px);
  border-radius:var(--r);
  background:linear-gradient(135deg, var(--accent), #E9B44C);
  color:#1E1A14;
}
.kmp__eyebrow{
  margin:0 0 12px; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:rgba(30,26,20,.62);
}
.kmp__baslik{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,3rem); line-height:1.05; letter-spacing:-.01em;
}
.kmp__metin{ margin:14px 0 0; max-width:60ch; font-size:1.02rem; line-height:1.65; color:rgba(30,26,20,.8); }

.kmp__alt{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:26px; }
.kmp__kod{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:12px;
  background:rgba(30,26,20,.1);
}
.kmp__kod i{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.kmp__kod b{ font-family:ui-monospace, Menlo, monospace; font-size:1.05rem; letter-spacing:.06em; }
.kmp__bitis{ font-size:.85rem; color:rgba(30,26,20,.66); }

@media (max-width:560px){
  .kmp__alt .btn{ width:100%; text-align:center; }
}

/* Vurgulu duyuru şeridi — "dikkat çeksin" işaretlenmişse. */
.duyuru--vurgu{ background:var(--accent); color:#1E1A14; }
.duyuru--vurgu a{ color:#1E1A14; }
.duyuru__ic a{ margin-left:10px; text-decoration:underline; text-underline-offset:3px; }

/* --- açık pozisyonlar ---
   Aday sayfayı açtığında ilk sorusu "bana uygun bir yer var mı".
   Dolu kadrolar da listede duruyor: neyi yaptığımızı gösteriyor ve
   dolu olduğu için başvuru gelmiyor. */
.frk{ padding:88px var(--pad); background:var(--paper); color:var(--ink); }
.frk__inner{ max-width:1400px; margin-inline:auto; }
.frk__head{ margin-bottom:34px; }
.frk__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.frk__i{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--r);
  background:var(--cream); box-shadow:inset 0 0 0 1px rgba(30,26,20,.07);
}
.frk__i > div{ flex:1 1 260px; min-width:0; }
.frk__i h3{ margin:0 0 5px; font-size:1.08rem; font-weight:650; }
.frk__i p{ margin:0; font-size:.9rem; color:#6B6459; line-height:1.6; }
/* Dolu kadro soluk ama okunur: WCAG için metin rengi düşürülmüyor,
   yalnızca zemin sakinleşiyor. */
.frk__i--dolu{ background:transparent; box-shadow:inset 0 0 0 1px rgba(30,26,20,.1); }

.frk__rozet{
  flex:none; padding:9px 18px; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
}
.frk__rozet--acik{
  background:var(--accent); color:#1E1A14;
  transition:filter .2s, transform .2s;
}
.frk__rozet--acik:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.frk__rozet--dolu{ background:rgba(30,26,20,.07); color:#6B6459; }

@media (max-width:720px){
  .frk{ padding:64px var(--pad); }
  .frk__i{ padding:18px 20px; gap:14px; }
  .frk__rozet{ width:100%; text-align:center; }
}

/* --- kimi arıyoruz --- */
.frn{ padding:92px var(--pad); background:var(--cream); color:var(--ink); }
.frn__inner{
  max-width:1400px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:44px;
}
.frn__list{ list-style:none; display:grid; gap:14px; }
.frn__list li{ position:relative; padding-left:30px; line-height:1.7; color:#443F38; }
.frn__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(240,165,0,.2);
}
.frn__not{ margin:22px 0 0; font-size:.9rem; color:#6B6459; line-height:1.65; }

/* --- başvuru formu (koyu: .field stilleri koyu zemine göre yazılmış) --- */
.frt{ padding:96px var(--pad); background:var(--ink); color:var(--paper); }
.frt__inner{
  max-width:1400px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:52px; align-items:start;
}
.frt__yan .h2{ color:var(--paper); }
.frt__yan .eyebrow--dark{ color:var(--accent); }
.frt__yanText{ margin:18px 0 0; color:rgba(255,255,255,.62); line-height:1.7; max-width:44ch; }

.frt__iletisim{ margin:30px 0 0; display:grid; gap:18px; }
.frt__iletisim dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:4px; }
.frt__iletisim dd{ margin:0; font-size:.98rem; line-height:1.5; }
.frt__iletisim a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.frt__iletisim a:hover{ border-color:var(--accent); color:var(--accent); }

.frt__form{
  display:grid; gap:18px; padding:34px 32px; border-radius:var(--r);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.frt__form select{
  width:100%; padding:13px 15px; border-radius:12px; font:inherit; font-size:.95rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--paper);
}
.frt__form select:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
.frt__form select option{ background:#1a1a1c; color:#fff; }
.frt__form textarea{
  width:100%; padding:13px 15px; border-radius:12px; font:inherit; font-size:.95rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:var(--paper); resize:vertical; line-height:1.6;
}
.frt__form textarea:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
.frt__form textarea::placeholder{ color:rgba(255,255,255,.3); }
.field__ops{ text-transform:none; letter-spacing:0; opacity:.6; }

/* Bal küpü: ekrandan tamamen kalkmıyor (bazı botlar display:none'ı atlar)
   ama görünmez ve odaklanılamaz. */
.frt__bal{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.frt__kvkk{ margin:0; font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.6; }
.frt__kvkk a{ color:rgba(255,255,255,.75); }
.frt__gonder{ justify-self:start; }

@media (max-width:1080px){
  .frw__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .frs__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .frt__inner, .frn__inner{ grid-template-columns:minmax(0,1fr); gap:34px; }
}
@media (max-width:760px){
  .frw, .frs, .frn, .frt{ padding-block:64px; }
  .frw__head{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
  .frw__list{ grid-template-columns:minmax(0,1fr); }
  .frs__list{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .frt__form{ padding:24px 20px; }
  .frow{ grid-template-columns:minmax(0,1fr); }
  .frt__gonder{ justify-self:stretch; }
}

/* Vitrin flash mesajları — nav'ın hemen altında, sayfa akışının içinde.
   Sabit konumlandırma çerez bandıyla üst üste binerdi. */
.vflash{
  position:fixed; left:50%; translate:-50% 0; top:calc(var(--nav-h, 72px) + 12px);
  z-index:70; width:min(560px, calc(100vw - 2 * var(--pad)));
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none;
}
.vflash__i{ pointer-events:auto; box-shadow:0 10px 30px rgba(0,0,0,.18); }
body.is-cerez .vflash{ top:calc(var(--nav-h, 72px) + 12px); }
.vflash__i{
  margin:0; padding:13px 17px; border-radius:12px;
  font-size:.92rem; line-height:1.55; border:1px solid;
}
.vflash__i--hata { background:#FDECEC; border-color:#E5484D; color:#8A1B1F; }
.vflash__i--ok   { background:#E9F7F0; border-color:#30A46C; color:#12603C; }
.vflash__i--uyari{ background:#FFF6E3; border-color:var(--accent-d); color:#6B4E00; }

/* =========================================================
   MARKA LOGOSU
   ========================================================= */
/* Logo tek renk olduğu için iki dosya var: koyu zeminde açık olan,
   açık zeminde koyu olan. Nav sayfa boyunca zemin değiştirdiğinden
   ikisi de basılıp CSS ile değiştiriliyor — böylece geçiş anında
   yeniden dosya indirilmiyor, takılma olmuyor. */
.logo{ height:auto; display:block; }

.logo--nav{ transition:opacity .25s var(--ease); }
.logo--koyu{ position:absolute; left:0; top:50%; translate:0 -50%; opacity:0; }
.nav.is-light:not(.is-stuck) .logo--acik{ opacity:0; }
.nav.is-light:not(.is-stuck) .logo--koyu{ opacity:1; }

.nav__brand{ position:relative; }

/* Kurumsal giriş: logo hero'da yumuşakça belirsin, sonra sabit dursun. */
@media (prefers-reduced-motion:no-preference){
  .logo--nav{ animation:logoGir .7s var(--ease) both; }
  @keyframes logoGir{ from{ opacity:0; transform:translateY(-4px) } }
  .logo--koyu{ animation:none; }
}

.foot__brand .logo{ margin-bottom:2px; }

/* =========================================================
   VİZYON & MİSYON
   ========================================================= */
.vm{ padding:96px var(--pad); background:var(--cream); color:var(--ink); }
.vm__inner{
  max-width:1400px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);
  gap:32px; align-items:start;
}
.vm__bas .h2{ margin-top:6px; }

.vm__kart{
  padding:32px 30px 34px; border-radius:var(--r);
  background:var(--paper); border:1px solid rgba(11,11,12,.09);
}
.vm__ikon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px;
  border-radius:14px; background:var(--accent); color:#3D2A0A;
}
.vm__ikon svg{ width:26px; height:26px; }
.vm__kart h3{
  font-family:var(--display); text-transform:uppercase; font-size:1.35rem;
  line-height:1.14; margin-bottom:12px;
}
.vm__kart p{ margin:0 0 12px; color:#5C564C; line-height:1.72; font-size:.94rem; }
.vm__kart p:last-child{ margin-bottom:0; }
.vm__kart b{ color:var(--ink); }

/* İlkeler tüm satırı kaplıyor: kartların altında şerit gibi. */
.vm__ilke{
  grid-column:1 / -1; list-style:none; margin:8px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:rgba(11,11,12,.1); border:1px solid rgba(11,11,12,.1);
  border-radius:var(--r); overflow:hidden;
}
.vm__ilke li{ background:var(--cream); padding:22px 20px 24px; }
.vm__ilke b{
  display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.05rem; color:var(--accent-d); margin-bottom:6px;
}
.vm__ilke span{ font-size:.88rem; color:#5C564C; line-height:1.6; }

@media (max-width:1080px){
  .vm__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .vm__bas{ grid-column:1 / -1; }
  .vm__ilke{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .vm{ padding-block:64px; }
  .vm__inner{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .vm__kart{ padding:26px 22px 28px; }
  .vm__ilke{ grid-template-columns:minmax(0,1fr); }
}

/* Giriş ekranı ve 3B kutu kapağı artık gerçek marka kilidini basıyor;
   eski ördek ikonu + yazı düzenine ait ölçüler geçersiz kaldı. */
.auth__brand{ display:block; }
.auth__brand .logo{ display:block; height:auto; }
.box3d__mark{ width:66%; }
.box3d__mark .logo{ width:100%; height:auto; }

/* =========================================================
   HARİTA — İZNE BAĞLI GÖMME
   Ziyaretçi işlevsel çerezlere izin vermediyse Google'ın haritası
   yüklenmez; yerine ne olacağını anlatan bir kart durur. Kart, gömülü
   haritayla AYNI yüksekliği kaplar ki izin verilince yerleşim oynamasın.
   ========================================================= */
.harita__perde{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:14px; height:100%; min-height:300px; padding:clamp(22px,3vw,34px);
  background:var(--cream-2); box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);
}
.bdet__map .harita__perde{ min-height:clamp(240px,32vh,340px); }
.harita__metin{ margin:0; max-width:46ch; font-size:.94rem; line-height:1.55; color:var(--ink); }
.harita__dugmeler{ display:flex; flex-wrap:wrap; gap:10px; }
.harita__not{ margin:0; font-size:.78rem; color:var(--muted); }
.harita__not a{ color:inherit; text-decoration:underline; }

/* Onay kutusu altındaki açıklama satırı (izin metinleri). */
/* Zemin koyu (giriş/kayıt) ya da açık olabiliyor; sabit gri yerine
   metnin kendi renginden türetiliyor ki iki durumda da WCAG AA tutsun. */
.check__not{ display:block; margin-top:4px; font-size:.78rem; line-height:1.5; color:inherit; opacity:.72; }

/* =========================================================
   HERO — ALÇAK EKRANLAR
   Waffle yığını marka kilidinin altına indirilince (çakışmayı bitirmek
   için) hero doğal olarak uzadı ve alçak ekranlarda taşmaya başladı.
   Dikey pay iki kademede daraltılıyor; uzun ekranlarda ferah düzen
   aynen duruyor. .hero__foot mutlak konumlu, bu yüzden alt payı
   kısaltmak onu etkilemiyor.
   ========================================================= */
@media (max-height:960px) and (min-width:761px){
  .hero{ padding:clamp(130px,16vh,172px) var(--pad) clamp(96px,12vh,132px); }
  .hero__stack{ width:min(40vw,36vh,440px); }
}
@media (max-height:820px) and (min-width:761px){
  .hero{ padding:clamp(112px,15vh,150px) var(--pad) clamp(74px,10vh,110px); }
  .hero__stack{ width:min(38vw,34vh,410px); }
}

/* Telefonda dört sütun çok dar kalıyor: iki sütuna düşüp açıklamayı
   kaldırıyoruz — numara ve başlık katmanı anlatmaya yetiyor. */
@media (max-width:760px){
  .specs{ grid-template-columns:repeat(2,1fr); gap:10px 16px; bottom:clamp(78px,10vh,104px); }
  .spec p{ display:none; }
  .spec h3{ font-size:.96rem; }
}

/* "Sıradaki sen ol" kartı artık görselli.
   Kart kesikli çerçeveyle duruyordu ve içi boştu; görsel eklenince
   köşelerin kırpılması ve iç boşluğun küçülmesi gerekti — yoksa görsel
   çerçevenin dışına taşıyor ve kart komşusundan çok daha uzun oluyordu. */
.br--next{ overflow:hidden; display:flex; flex-direction:column; }
.br__media--next{ flex:none; }
.br--next .br__nextIn{ min-height:0; padding:24px 26px 28px; align-content:start; }

/* ---------------- favori kalbi (menü kartı) ---------------- */
/* Kart görselinin köşesinde. Dolu/boş ayrımı yalnızca renk değil,
   içi dolu ya da boş çizim — renk körü kullanıcı da ayırt etsin. */
.card__fav{
  position:absolute; top:10px; right:10px; z-index:2;
  width:38px; height:38px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(20,16,12,.55); backdrop-filter:blur(6px);
  color:#fff; transition:transform .16s ease, background .16s ease;
}
.card__fav svg{ width:19px; height:19px; fill:none; stroke-width:1.9; }
.card__fav:hover{ background:rgba(20,16,12,.75); transform:scale(1.07); }
.card__fav:active{ transform:scale(.94); }
.card__fav.is-fav{ color:#FF6B6B; }
.card__fav.is-fav svg{ fill:currentColor; stroke:currentColor; }
.card__fav:disabled{ opacity:.6; cursor:default; }

/* Sepetteki tekrar sipariş bildirimi. */
.cpage__tekrar{
  margin:0 0 22px; padding:14px 18px; border-radius:14px;
  background:rgba(58,150,96,.10); box-shadow:inset 0 0 0 1px rgba(58,150,96,.30);
  font-size:.92rem; line-height:1.6;
}
.cpage__tekrar p{ margin:0; }
.cpage__tekrarNot{ margin-top:8px !important; font-size:.84rem; opacity:.85; }
.cpage__tekrarNot span{ display:inline-block; margin-right:12px; }
.cpage__tekrarNot s{ opacity:.6; }
.cpage__tekrarNot--yok{ color:#B4462F; }

/* Sipariş durumu çubuğu. */
.izle{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
}
.izle__adim{ position:relative; padding-top:26px; text-align:center; }
.izle__adim::before{
  content:''; position:absolute; top:8px; left:0; right:50%; height:2px;
  background:currentColor; opacity:.18;
}
.izle__adim::after{
  content:''; position:absolute; top:8px; left:50%; right:0; height:2px;
  background:currentColor; opacity:.18;
}
.izle__adim:first-child::before, .izle__adim:last-child::after{ display:none; }
.izle__adim--gecti::before, .izle__adim--gecti::after,
.izle__adim--simdi::before{ opacity:.9; }
.izle__nokta{
  position:absolute; top:3px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:#F4F1EA; box-shadow:0 0 0 2px currentColor; opacity:.28;
}
.izle__adim--gecti .izle__nokta{ opacity:1; background:currentColor; }
.izle__adim--simdi .izle__nokta{
  opacity:1; background:#E8A33D; box-shadow:0 0 0 3px rgba(232,163,61,.30);
}
.izle__ad{ display:block; font-size:.82rem; font-weight:600; opacity:.5; }
.izle__not{ display:block; font-size:.72rem; opacity:.4; margin-top:1px; }
.izle__adim--gecti .izle__ad, .izle__adim--simdi .izle__ad{ opacity:1; }
.izle__adim--simdi .izle__not{ opacity:.75; }
.izle--iptal{
  display:block; padding:12px 14px; border-radius:12px;
  background:rgba(229,72,77,.10); font-size:.9rem; line-height:1.6;
}
.izle--iptal b{ display:block; }

@media (max-width:480px){
  .izle__not{ display:none; }
  .izle__ad{ font-size:.74rem; }
}

/* ---------------- iş başvurusu formu ---------------- */
/* DİKKAT: bu form KOYU zeminde duruyor. İlk sürümde bölüm ve iş
   kutuları açık renk yazılmıştı (panel formlarına bakarak); koyu
   arka planda bembeyaz lekeler gibi duruyordu. Buradaki bütün
   renkler beyazın düşük opaklıkları — zemin neyse ona oturuyor. */
.isb__blok{
  margin:0 0 26px; padding:22px 22px 8px;
  border-radius:16px; background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.isb__baslik{
  display:flex; align-items:center; gap:11px;
  margin:0 0 18px; font-size:1rem; font-weight:700; color:var(--paper);
}
.isb__baslik span{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent); color:#1E1A14;
  font-size:.8rem; font-weight:800;
}
.isb__aciklama{
  margin:-8px 0 18px; font-size:.86rem; line-height:1.6;
  color:rgba(255,255,255,.55);
}

/* Üçlü satır. minmax(0,…) şart: içerik taşarsa sütun genişlemesin,
   yoksa üç kutu eşit kalmıyor. */
.frow--uclu{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* Vardiya seçimi — dokunması kolay çipler. */
.isb__kutular{ border:0; padding:0; margin:0 0 18px; }
.isb__kutular legend{
  padding:0; margin-bottom:10px;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.isb__cipler{ display:flex; flex-wrap:wrap; gap:9px; }
.isb__cip{ position:relative; cursor:pointer; }
.isb__cip input{
  position:absolute; inset:0; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.isb__cip span{
  display:block; padding:.55em 1.05em; border-radius:999px;
  font-size:.88rem; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.isb__cip:hover span{ background:rgba(255,255,255,.10); }
.isb__cip input:checked + span{
  background:var(--accent); color:#1E1A14; font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent);
}
.isb__cip input:focus-visible + span{ outline:2px solid var(--paper); outline-offset:2px; }

/* Geçmiş iş kutusu — bölümün içinde, ondan bir tık daha koyu. */
.isb__is{
  border:0; margin:0 0 16px; padding:16px 16px 4px;
  border-radius:12px; background:rgba(0,0,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.isb__is legend{
  padding:0; margin-bottom:2px;
  font-size:.74rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ---- alanların tek tipleştirilmesi ----
   input, select ve textarea üç ayrı kuralla biçimleniyordu: input
   kenarlığı box-shadow ile, diğerleri gerçek border ile çiziyordu;
   köşe yarıçapı 11px/12px, iç boşluk .85em/13px olarak ayrışmıştı.
   Yan yana durunca gözle görülür şekilde eşit değillerdi. */
.frt__form input[type=text],
.frt__form input[type=tel],
.frt__form input[type=email],
.frt__form input[type=date],
.frt__form input[type=time],
.frt__form input[type=number],
.frt__form select,
.frt__form textarea{
  width:100%; padding:13px 15px; border-radius:12px;
  border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:var(--paper);
  font-family:var(--body); font-size:.95rem; line-height:1.5;
  transition:box-shadow .2s, background-color .2s;
}
/* Tarayici date/time girdisini secici simgesiyle, select'i ise
   satir yuksekligi olmadan ciziyor; ayni dolgu verilse bile
   yukseklikleri 47/49/51px olarak ayrisiyordu. Tek yukseklik
   verip icerigi ortaliyoruz. */
.frt__form input[type=text],
.frt__form input[type=tel],
.frt__form input[type=email],
.frt__form input[type=date],
.frt__form input[type=time],
.frt__form input[type=number],
.frt__form select{ height:50px; }

.frt__form textarea{ resize:vertical; line-height:1.6; }

.frt__form input:focus,
.frt__form select:focus,
.frt__form textarea:focus{
  outline:0; background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.frt__form input::placeholder,
.frt__form textarea::placeholder{ color:rgba(255,255,255,.3); }
.frt__form select option{ background:#1a1a1c; color:#fff; }

/* Tarih ve saat alanlarının takvim simgesi koyu zeminde görünmüyordu. */
.frt__form input[type=date]::-webkit-calendar-picker-indicator,
.frt__form input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:.55; cursor:pointer;
}
.frt__form input[type=date]::-webkit-calendar-picker-indicator:hover,
.frt__form input[type=time]::-webkit-calendar-picker-indicator:hover{ opacity:.9; }

/* Alanlar dikeyde ESNEMESİN.
   .field bir grid; yan yana iki alandan birinin etiketi iki satıra
   sarınca ya da altında ipucu metni olunca satır yükseliyor ve
   kutular birbirinden farklı boyda çıkıyordu (60px, 72px, 83px).
   İçeriği yukarı yaslayınca hepsi aynı boyda kalıyor. */
.frt__form .field{ align-content:start; }

/* Satir icindeki etiketlerin bir kismi iki satira sariyor ("Saat
   araligi - en erken" gibi), yanindaki tek satirda kaliyordu; bu
   yuzden kutular ayni satirda farkli yukseklikte basliyordu.
   Etikete iki satirlik yer ayirip icerigi alta yaslayinca girdiler
   hizalaniyor. Yalnizca cok sutunlu satirlarda gecerli -- tek
   sutunlu alanda bosluk birakmanin anlami yok. */
.frt__form .frow > .field > label{
  display:flex; align-items:flex-end;
  line-height:1.6; min-height:3.2em;
}
.frt__form .field__hint{ margin-top:1px; }

@media (max-width:560px){
  .isb__blok{ padding:18px 15px 6px; }
  .isb__is{ padding:14px 13px 4px; }
  .frow--uclu{ grid-template-columns:minmax(0,1fr); }
}

/* Üst menüdeki Ducks Kart bakiyesi. */
.nav__kart{
  display:inline-flex; align-items:center; gap:6px;
  padding:.42em .8em; border-radius:999px;
  background:rgba(232,163,61,.16); color:#E8A33D;
  font-size:.88rem; font-weight:700; text-decoration:none;
  transition:background-color .15s ease;
}
.nav__kart:hover{ background:rgba(232,163,61,.26); }
.nav__kart svg{ width:16px; height:16px; fill:currentColor; stroke:none; }

/* Sepetteki yıldız önizlemesi. */
.cpage__kart{
  margin:0 0 18px; padding:12px 16px; border-radius:12px;
  background:rgba(232,163,61,.10); box-shadow:inset 0 0 0 1px rgba(232,163,61,.28);
  font-size:.9rem; line-height:1.55;
}
.cpage__kart i{ font-style:normal; opacity:.7; }

@media (max-width:900px){
  .nav__kart{ display:none; }
}

/* ---------------------------------------------------------------
   MOBİLDE FORM ALANLARI 16px

   iOS Safari, yazı boyu 16px'in ALTINDA olan bir alana odaklanınca
   sayfayı otomatik yakınlaştırır. Kullanıcı yazmaya başlar, sayfa
   zıplar, sonra elle uzaklaştırması gerekir. Sitedeki 40 ekranda
   bu tuzak vardı (giriş, kayıt, iletişim, franchise, kariyer ve
   bütün yönetim formları).

   Çözüm tek kural: dokunmatik cihazda form denetimleri en az 16px.
   Masaüstünde tipografi olduğu gibi kalıyor.
   --------------------------------------------------------------- */
@media (max-width:900px), (pointer:coarse){
  /* !important bilinçli: .cform select, .field input gibi daha özgül
     kurallar bu tabanı eziyordu. Bu bir tipografi tercihi değil,
     kullanılabilirlik tabanı — her koşulda geçerli olmalı. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px !important;
  }
}

/* ==========================================================================
   Menü: Kariyer eklendi (6 bağlantı). Dar masaüstünde "Ana sayfa" gizli —
   logo zaten ana sayfaya gidiyor; altı bağlantı + düğmeler 1080'de sıkışıyordu.
   ========================================================================== */
@media (max-width:1080px){ .nav__links .nav__ev{ display:none; } }
@media (max-width:900px){ .nav__links{ gap:14px; } .nav__links a{ font-size:.86rem; } }

/* Mobil menü: altıncı bağlantı ve alt şerit de sırayla süzülsün. */
.mnav > a:nth-child(6){ animation-delay:.25s; }
.mnav .mnav__login{ animation-delay:.30s; }
.mnav__out{ animation-delay:.35s; }
.mnav__cta{ animation-delay:.40s; }
.mnav__alt{ animation:mnavGir .5s var(--ease) both; animation-delay:.45s; }

/* Alt şerit: saat durumu + ara / WhatsApp / yol tarifi. Menünün iri
   başlık yazısından ayrışsın diye gövde yazı tipi, küçük, sönük. */
.mnav__alt{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
  width:min(100%,320px); font-family:var(--body); text-transform:none; font-size:.9rem;
  color:var(--muted-l, #B5B2AA);
}
.mnav__saat{ display:inline-flex; align-items:center; gap:8px; margin:0; }
.mnav__nokta{ width:8px; height:8px; border-radius:50%; background:#6B6B70; flex:none; }
.mnav__nokta--acik{ background:#30A46C; box-shadow:0 0 0 4px rgba(48,164,108,.22); }
.mnav__hizli{ display:flex; gap:6px; }
.mnav__hizli a{ padding:10px 12px; font-size:.95rem; color:var(--paper); opacity:.85; border-radius:999px; }
.mnav__hizli a:hover, .mnav__hizli a:active{ opacity:1; background:rgba(255,255,255,.08); }

/* Kariyer'in yanındaki "alım var" noktası; menü metniyle aynı satırda,
   üstte küçük. Mobil menüde iri yazıya göre biraz büyük. */
.nav__dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); vertical-align:top; margin:2px 0 0 3px;
  box-shadow:0 0 0 3px rgba(240,165,0,.22);
}
.mnav > a .nav__dot{ width:9px; height:9px; margin:8px 0 0 4px; }

/* Dar masaüstünde "Sipariş ver" iki satıra kırılıyor, Kariyer'in noktası
   alta düşüyordu. */
.nav__links a, .nav__cta{ white-space:nowrap; }

/* Mobil menü altı bağlantı + alt şeritle 844px'e sığsın: yazı biraz
   küçük, aralık dar, üstte logoya çarpmayacak boşluk. Kısa telefonda
   (667px) daha da sıkışır; yine de sığmazsa kaydırılabilir (overflow-y). */
.mnav{ font-size:1.7rem; gap:18px; padding-top:96px; }
.mnav .mnav__login{ margin-top:2px; }
.mnav .btn{ margin-top:6px; }
@media (max-height:720px){
  .mnav{ font-size:1.45rem; gap:12px; padding-top:84px; }
  .mnav__alt{ padding-top:12px; margin-top:6px; }
  .mnav .btn{ padding-block:.75em; }
}

/* Meyve bazlı "bugün kalmadı" notu: kartta küçük turuncu satır. */
.card__eksik{
  display:inline-block; margin:8px 0 0; padding:.3em .7em; border-radius:999px;
  background:rgba(240,165,0,.14); color:#8A5A00; font-size:.76rem; font-weight:600;
}

/* Giriş sayfalarında logo iki kez görünüyordu (üst çubuk + kart).
   Kartın içindeki kalıyor, üst çubuğun markası gizleniyor. */
body.is-auth .nav__brand{ display:none; }
body.is-auth .nav{ min-height:0; padding-top:8px; padding-bottom:8px; }

/* ---------------- site indirimi ---------------- */
.duyuru--promo{ background:var(--accent, #E8A33D); color:#1B1408; }
.duyuru--promo a{ color:inherit; font-weight:700; margin-left:10px; text-decoration:underline; text-underline-offset:3px; }
.duyuru__yuzde{
  display:inline-block; margin-right:8px; padding:.15em .55em; border-radius:999px;
  background:#1B1408; color:var(--accent, #E8A33D); font-weight:800; letter-spacing:.02em;
}
.hero__promo{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  padding:8px 16px 8px 8px; border-radius:999px;
  background:rgba(232,163,61,.14); border:1px solid rgba(232,163,61,.5); color:var(--paper);
  text-decoration:none; font-size:.95rem; transition:background .2s, transform .2s;
}
.hero__promo b{
  display:inline-flex; align-items:center; padding:.35em .7em; border-radius:999px;
  background:var(--accent, #E8A33D); color:#1B1408; font-weight:800; font-size:1.05rem;
}
.hero__promo:hover{ background:rgba(232,163,61,.24); transform:translateY(-1px); }
.nav__promo{
  display:inline-block; margin-left:6px; padding:.1em .45em; border-radius:999px;
  background:#1B1408; color:var(--accent, #E8A33D); font-style:normal; font-weight:800; font-size:.78em;
}
.cdrawer__ara, .cdrawer__indirim{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:6px 0; font-size:.92rem; color:#6B6459;
}
.cdrawer__indirim{ color:#0F7A3E; }
.cdrawer__indirim b{ font-weight:700; }
.cdrawer__indirim strong{ font-weight:700; }
/* Duyuru/indirim şeridi: üst çubuk sabit (fixed) olduğu için şerit onun
   altında kalıyordu. Şerit sabitlenir, çubuk şerit kadar aşağı iner,
   sayfa da o kadar itilir. Yüksekliği app.js ölçüp --serit-h'ye yazar. */
.duyuru{ position:fixed; top:0; left:0; right:0; z-index:61; }
.nav{ top:var(--serit-h, 0px); }
body{ padding-top:var(--serit-h, 0px); }
.duyuru + .duyuru{ top:var(--serit-h, 0px); }

/* ==========================================================================
   Yardım / canlı destek balonu
   ========================================================================== */
.yardim{
  position:fixed; left:22px; bottom:22px; z-index:70;
  display:flex; align-items:center; gap:8px; padding:11px 16px 11px 13px;
  border:0; border-radius:999px; background:var(--accent, #E8A33D); color:#1B1408;
  font:600 .92rem/1 var(--body, system-ui, sans-serif); cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .2s, background .2s;
}
.yardim:hover{ transform:translateY(-2px); }
.yardim svg{ width:20px; height:20px; }
.yardim__nokta{ position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:#E5484D; border:2px solid var(--paper, #fff); }
.yardim.is-acik{ background:var(--ink); color:var(--paper); }
body.is-cerez .yardim{ bottom:calc(var(--cerez-h) + 16px); }
/* Yukarı çık düğmesi de solda: yardım balonu varken üstüne çıkar */
.yardim ~ .yukari, body:has(.yardim) .yukari{ bottom:82px; }

.ysoh{
  position:fixed; left:22px; bottom:84px; z-index:71;
  width:min(380px, calc(100vw - 44px)); height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--paper, #F4F1EA); color:var(--ink, #1E1A14);
  box-shadow:0 18px 50px rgba(0,0,0,.35); border:1px solid rgba(0,0,0,.08);
}
.ysoh__bas{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--ink, #1E1A14); color:var(--paper, #fff); }
.ysoh__kim{ display:flex; align-items:center; gap:10px; }
.ysoh__kim b{ display:block; font-size:.95rem; }
.ysoh__kim small{ display:block; font-size:.74rem; opacity:.75; }
.ysoh__avatar{ width:34px; height:34px; border-radius:50%; background:var(--accent, #E8A33D); display:inline-flex; align-items:center; justify-content:center; padding:6px; }
.ysoh__avatar svg{ width:100%; height:100%; }
.ysoh__kapat{ background:none; border:0; color:inherit; font-size:1.6rem; line-height:1; cursor:pointer; padding:4px 8px; }
.ysoh__akis{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.ysoh__m{ max-width:86%; }
.ysoh__m p{ margin:0; padding:9px 12px; border-radius:14px; font-size:.9rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.ysoh__m small{ display:block; margin-top:3px; font-size:.68rem; color:#7A7368; }
.ysoh__m--musteri{ align-self:flex-end; text-align:right; }
.ysoh__m--musteri p{ background:var(--accent, #E8A33D); color:#1B1408; border-bottom-right-radius:4px; }
.ysoh__m--bot p{ background:#fff; border:1px solid rgba(0,0,0,.08); border-bottom-left-radius:4px; }
.ysoh__m--personel p{ background:#1E1A14; color:#fff; border-bottom-left-radius:4px; }
.ysoh__m--sistem{ align-self:center; font-size:.72rem; color:#7A7368; text-align:center; }
.ysoh__m p a{ color:inherit; text-decoration:underline; }
.ysoh__secenek{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 8px; }
.ysoh__cip{
  border:1px solid rgba(0,0,0,.14); background:#fff; color:var(--ink, #1E1A14);
  border-radius:999px; padding:6px 11px; font-size:.8rem; cursor:pointer; text-align:left;
}
.ysoh__cip:hover{ border-color:var(--accent, #E8A33D); background:rgba(232,163,61,.12); }
.ysoh__form{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid rgba(0,0,0,.08); background:#fff; }
.ysoh__form textarea{ flex:1; resize:none; border:1px solid rgba(0,0,0,.14); border-radius:12px; padding:9px 12px; font:inherit; font-size:.92rem; max-height:120px; }
.ysoh__gonder{ width:40px; height:40px; border:0; border-radius:50%; background:var(--ink, #1E1A14); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ysoh__gonder svg{ width:18px; height:18px; }
.ysoh__alt{ margin:0; padding:6px 14px 10px; font-size:.75rem; color:#7A7368; background:#fff; }
.ysoh__alt .linkish, .ysoh__alt a{ color:#1E1A14; text-decoration:underline; text-underline-offset:2px; background:none; border:0; font:inherit; cursor:pointer; padding:0; }
.ysoh__kimlik{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border:1px dashed rgba(0,0,0,.18); border-radius:12px; background:#fff; }
.ysoh__kimlik input{ flex:1 1 120px; border:1px solid rgba(0,0,0,.14); border-radius:8px; padding:7px 9px; font:inherit; font-size:.85rem; }
@media (max-width:600px){
  .yardim span{ display:none; }
  .yardim{ padding:12px; }
  .ysoh{ left:12px; right:12px; width:auto; bottom:76px; height:min(70vh, 560px); }
}

/* Mobil menü (hamburger) açıkken yardım balonu, paneli ve sepet balonu
   menünün üstüne binmesin. */
body:has(.mnav:not([hidden])) .yardim,
body:has(.mnav:not([hidden])) .ysoh,
body:has(.mnav:not([hidden])) .cfab{ display:none !important; }
/* Menü açıkken şerit gizlendiği için üst çubuk da en üste dönsün; logo
   ilk bağlantının üstüne binmesin. */
body:has(.mnav:not([hidden])) .nav{ top:0 !important; }

/* ==========================================================================
   MOBİL TARAYICI — dokunma hedefleri, menü listesi, yapışkan çubuk
   ========================================================================== */

/* Menü sayfasının yapışkan arama+sekme çubuğu, sabit indirim şeridinin
   ALTINA yapışsın: top:0 kalınca arama kutusu şeridin arkasında kalıyordu. */
.menu__bar--sticky{ top:var(--serit-h, 0px); }
.menu__block{ scroll-margin-top:calc(var(--serit-h, 0px) + 88px); }

/* Dokunma hedefleri en az ~40px: sepete ekle, şerit bağlantısı, alt
   yasal bağlantılar, onay kutuları. */
.card__add{ min-height:40px; }
.duyuru__ic a, .duyuru--promo a{ display:inline-block; padding:6px 4px; margin-top:-6px; margin-bottom:-6px; }
.check{ align-items:flex-start; }
.check input{ flex:0 0 20px; width:20px; height:20px; margin-top:1px; }
.check__not{ margin-top:6px; }
/* Etiket yanındaki "isteğe bağlı" notu etikete yapışmasın. */
.field__ops{ margin-left:.4em; font-weight:400; }

@media (max-width:760px){
  .foot__copy a{ display:inline-block; padding:8px 0; margin-left:6px; }
  /* Sağ alttaki sepet balonu ve sol alttaki yardım düğmesi sayfanın en
     altındaki yazıların üstüne binmesin. */
  .foot{ padding-bottom:96px; }
  /* Dar ekranda .frow tek sütun; etiketler için ayrılan iki satırlık yer
     boş bir aralık gibi görünüyordu. */
  .frt__form .frow > .field > label{ min-height:0; }
  .yukari{ left:14px; }
}

/* Menü sayfası dar ekranda LİSTE görünümüne geçer: fotoğraf solda,
   bilgi sağda. Tam genişlikte kartlarla 37 ürün 24.000px'lik bir sayfa
   yapıyordu; liste satırı bunu dörtte birine indiriyor. Ana sayfadaki
   öne çıkanlar (aynı .card) etkilenmez; yalnızca .menu--page. */
@media (max-width:640px){
  .menu--page .grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .menu--page .card{ display:grid; grid-template-columns:124px minmax(0,1fr); border-radius:16px; }
  .menu--page .card:hover{ transform:none; box-shadow:none; }
  .menu--page .card__media{ aspect-ratio:auto; height:100%; min-height:150px; }
  .menu--page .card__media img{ scale:1.2; transform:none; }
  .menu--page .card__tag{ left:8px; top:8px; padding:.36em .7em; font-size:.58rem; letter-spacing:.04em; }
  .menu--page .card__kazanc{ left:8px; bottom:8px; padding:.36em .7em; font-size:.6rem; }
  .menu--page .card__inCart{ right:8px; top:8px; min-width:24px; height:24px; padding:0 6px; font-size:.74rem; }
  .menu--page .card__fav{ top:auto; right:8px; bottom:8px; width:34px; height:34px; }
  .menu--page .card__body{ display:flex; flex-direction:column; min-width:0; padding:12px 14px 12px 14px; }
  .menu--page .card__name{ font-size:1.05rem; }
  .menu--page .card__desc{ margin-top:5px; font-size:.8rem; line-height:1.45; }
  .menu--page .card__eksik{ margin-top:6px; font-size:.7rem; }
  .menu--page .card__alrj{ margin-top:7px; gap:4px; }
  .menu--page .card__alrjE{ padding:1px 7px; font-size:.64rem; }
  .menu--page .card__foot{ margin-top:auto; padding-top:10px; border-top:0; gap:8px; }
  .menu--page .card__foot .card__price{ display:flex; flex-direction:column; line-height:1.05; font-size:1.15rem; }
  .menu--page .card__eski{ font-size:.72rem; margin:0 0 2px; }
  .menu--page .card__add{ padding:.5em .95em; font-size:.78rem; min-height:38px; }
  .menu--page .menu__blockHead{ margin-bottom:12px; }
  .menu--page .menu__lead{ margin-bottom:14px; font-size:.92rem; }
}

/* Yukarı düğmesi: çerez bandı açıkken yardım balonunun üstünde kalsın. */
body.is-cerez:has(.yardim) .yukari{ bottom:calc(var(--cerez-h) + 76px); }

@media (max-width:760px){
  /* Dar ekranda sol altta yardım + yukarı üst üste ~150px yer kaplıyor ve
     alt bilgi bağlantılarını örtüyordu. Yukarı düğmesi sağa, sepet
     balonunun üstüne geçer. */
  body:has(.yardim) .yukari{ left:auto; right:16px; bottom:90px; }
  body.is-cerez:has(.yardim) .yukari{ bottom:calc(var(--cerez-h) + 84px); }

  /* İş başvurusu bloklarında satırlar arasındaki boşluk etiketin iki
     satırlık yüksekliğinden geliyordu; o kalkınca gerçek boşluk lazım. */
  .isb__blok > .frow + *, .isb__blok > .field + *{ margin-top:16px; }

  /* Mobil yapışkan çubuk (arama + sekmeler) daha uzun. */
  .menu__block{ scroll-margin-top:calc(var(--serit-h, 0px) + 130px); }
}

/* Dokunmatik ekranda paragraf içi düz bağlantılar (telefon, KVKK metni,
   "Sohbeti başlat") görünümü değiştirmeden daha geniş bir dokunma
   alanı alır: satır içi öğede dikey dolgu satır yüksekliğini etkilemez. */
@media (pointer:coarse){
  p > a:not([class]), li > a:not([class]), dd > a:not([class]), .check a, small a:not([class]),
  a[href^="tel:"]:not([class]), a[href^="mailto:"]:not([class]){ padding-block:8px; }
}

/* Sepet satırında seçim özeti ve Düzenle */
.cline__sec{ display:block; margin:2px 0 3px; font-size:.78rem; line-height:1.45; color:rgba(255,255,255,.7); }
.cline__sec em{ font-style:normal; color:#F3C06B; font-weight:600; }
.cline__edit{ display:inline; padding:0; margin-left:4px; border:0; background:none; color:var(--accent); font:inherit; font-size:.78rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cline--eksik{ box-shadow:inset 3px 0 0 #F3C06B; padding-left:10px; }
@media (max-width:560px){
  .cline{ grid-template-columns:1fr auto; grid-template-areas:"main del" "qty sum"; row-gap:8px; }
  .cline__main{ grid-area:main; } .cline__del{ grid-area:del; justify-self:end; }
  .cline__qty{ grid-area:qty; } .cline__sum{ grid-area:sum; justify-self:end; }
}

/* ==========================================================================
   WAFFLE SEÇİM FORMU (.wsec) — sade: tip seçici, açılır-kapanır gruplar,
   hizalı seçenek satırları, sağda onay dairesi. Masaüstünde ortalı
   pencere, telefonda alttan açılan sayfa.
   ========================================================================== */
.wsec{ position:fixed; inset:0; z-index:130; }
.wsec__backdrop{ position:absolute; inset:0; background:rgba(6,6,7,.62); backdrop-filter:blur(3px); opacity:0; transition:opacity .26s var(--ease); }
.wsec.is-open .wsec__backdrop{ opacity:1; }
.wsec__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); opacity:0;
  width:min(94vw,560px); max-height:min(90vh,860px);
  display:flex; flex-direction:column;
  background:#FBF9F5; color:var(--ink); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transition:transform .26s var(--ease), opacity .26s var(--ease);
}
.wsec.is-open .wsec__panel{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.wsec__bas{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid rgba(0,0,0,.07); }
.wsec__eyebrow{ margin:0 0 3px; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-d); }
.wsec__h{ margin:0; font-family:var(--body); font-size:1.15rem; font-weight:700; line-height:1.2; text-transform:none; }
.wsec__kapat{ flex:none; width:36px; height:36px; border:0; border-radius:50%; background:rgba(0,0,0,.06); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.wsec__kapat:hover{ background:rgba(0,0,0,.12); }
.wsec__govde{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 16px 10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }

/* Tip seçici: tek bölmeli satır */
.wsec__tipler{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:0 0 14px; border-radius:14px; background:rgba(0,0,0,.06); }
.wsec__tipler[hidden]{ display:none; }
.wsec__tip{ position:relative; cursor:pointer; }
.wsec__tip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.wsec__tip span{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 6px; border-radius:11px; transition:background .15s, box-shadow .15s; }
.wsec__tip b{ font-size:.92rem; font-weight:700; }
.wsec__tip small{ font-size:.72rem; color:var(--muted); }
.wsec__tip input:checked + span{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.wsec__tip input:checked + span small{ color:var(--accent-d); font-weight:600; }
.wsec__tip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* Grup kartı */
.wsec__grup{ margin:0 0 8px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); overflow:hidden; }
.wsec__grup.is-eksik{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.wsec__gbas{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"ad kural" "sec ok"; column-gap:10px; row-gap:2px;
  width:100%; padding:12px 14px; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer;
}
.wsec__gad{ grid-area:ad; font-size:.95rem; font-weight:700; }
.wsec__kural{ grid-area:kural; justify-self:end; font-size:.7rem; font-weight:600; color:var(--muted); padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.05); white-space:nowrap; }
.wsec__grup.is-eksik .wsec__kural{ color:#fff; background:var(--accent-d); }
.wsec__grup.is-dolu .wsec__kural{ color:#fff; background:#1F8A4C; }
.wsec__gsec{ grid-area:sec; font-size:.82rem; color:var(--accent-d); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wsec__gsec.is-bos{ color:var(--muted); font-weight:400; }
.wsec__ok{ grid-area:ok; align-self:center; justify-self:end; width:9px; height:9px; margin-right:4px; border-right:2px solid rgba(0,0,0,.45); border-bottom:2px solid rgba(0,0,0,.45); transform:rotate(45deg); transition:transform .2s; }
.wsec__grup.is-acik .wsec__ok{ transform:rotate(-135deg); }
.wsec__liste{ display:none; border-top:1px solid rgba(0,0,0,.07); }
.wsec__grup.is-acik .wsec__liste{ display:block; }

/* Seçenek satırı */
.wsec__cip{ position:relative; display:grid; grid-template-columns:1fr auto auto; align-items:center; column-gap:10px; min-height:46px; padding:0 14px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.06); transition:background .12s; }
.wsec__cip:last-child{ border-bottom:0; }
.wsec__cip input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.wsec__cad{ font-size:.92rem; }
.wsec__cnot{ font-size:.76rem; color:var(--muted); }
.wsec__cnot:empty{ display:none; }
.wsec__kutu{ width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); background:#fff; position:relative; transition:background .15s, box-shadow .15s; }
.wsec__kutu::after{ content:''; position:absolute; left:7px; top:3px; width:6px; height:11px; border-right:2.2px solid #fff; border-bottom:2.2px solid #fff; transform:rotate(45deg); opacity:0; }
.wsec__cip:hover{ background:rgba(0,0,0,.025); }
.wsec__cip input:checked ~ .wsec__kutu{ background:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.wsec__cip input:checked ~ .wsec__kutu::after{ opacity:1; }
.wsec__cip input:checked ~ .wsec__cad{ font-weight:700; }
.wsec__cip input:focus-visible ~ .wsec__kutu{ outline:2px solid var(--accent); outline-offset:2px; }
.wsec__cip.is-kapali{ cursor:not-allowed; }
.wsec__cip.is-kapali .wsec__cad{ color:var(--muted); text-decoration:line-through; }
.wsec__cip.is-kapali .wsec__cnot{ color:#B3261E; font-weight:600; }
.wsec__cip.is-kapali input{ cursor:not-allowed; }
/* Sınır dolunca seçilmemiş satırlar sönük */
.wsec__grup.is-dolu .wsec__cip input:not(:checked):not(:disabled) ~ .wsec__cad{ color:var(--muted); }

/* Alt çubuk */
.wsec__alt{ flex:none; padding:10px 16px 16px; border-top:1px solid rgba(0,0,0,.08); background:#FBF9F5; border-radius:0 0 20px 20px; }
.wsec__ozet{ margin:0 0 8px; font-size:.8rem; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wsec__ozet[hidden]{ display:none; }
.wsec__ipucu{ margin:0 0 8px; font-size:.8rem; font-weight:600; color:var(--accent-d); }
.wsec__ipucu[hidden]{ display:none; }
.wsec__satir{ display:flex; align-items:center; gap:10px; }
.wsec__adet{ flex:none; display:flex; align-items:center; gap:4px; padding:3px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.wsec__adet span{ min-width:2ch; text-align:center; font-weight:700; }
.wsec__qbtn{ width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.06); color:var(--ink); font-size:1.05rem; line-height:1; cursor:pointer; }
.wsec__qbtn:hover{ background:rgba(0,0,0,.12); }
.wsec__ekle{ flex:1; min-height:46px; background:var(--ink); color:var(--paper); }
.wsec__ekle:hover{ background:var(--accent-d); }
.wsec__ekle:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.wsec__ekle b{ font-weight:700; }
body.wsec-open{ overflow:hidden; }

@media (min-width:760px){
  .wsec__liste{ display:none; grid-template-columns:1fr 1fr; }
  .wsec__grup.is-acik .wsec__liste{ display:grid; }
  .wsec__cip:nth-last-child(2):nth-child(odd){ border-bottom:0; }
}
@media (max-width:640px){
  .wsec__panel{ left:0; top:auto; bottom:0; transform:translateY(100%); width:100%; max-height:92vh; max-height:92dvh; border-radius:20px 20px 0 0; opacity:1; }
  .wsec.is-open .wsec__panel{ transform:none; }
  .wsec__bas{ padding:14px 16px 10px; }
  .wsec__govde{ padding:12px 12px 8px; }
  .wsec__alt{ padding:10px 14px calc(12px + env(safe-area-inset-bottom)); border-radius:0; }
}

/* Sepet sayfası: misafir / doğrulanmamış üye kartı (koyu zemin) */
.cuye{ display:grid; gap:14px; }
.cuye__lead{ margin:0; font-size:.98rem; line-height:1.6; color:var(--paper); }
.cuye__liste{ margin:0; padding:0 0 0 1.1em; color:var(--muted-l); font-size:.9rem; line-height:1.65; }
.cuye__liste b{ color:var(--paper); }
.cuye__btn{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.cuye__btn .btn{ flex:1 1 160px; }
.cuye__not{ margin:0; font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.55; }
.cuye__not a{ color:var(--accent); }

/* Form alanı hatası: kutu kırmızı, mesaj altında */
.field.is-hata input, .field.is-hata select, .field.is-hata textarea{ box-shadow:inset 0 0 0 1.5px #E5484D !important; background:rgba(229,72,77,.08) !important; }
.field__err{ display:block; margin-top:6px; font-size:.8rem; font-weight:600; line-height:1.45; color:#FF8A8A; }
.check.is-hata input{ outline:2px solid #E5484D; outline-offset:2px; border-radius:3px; }
.check.is-hata .field__err{ margin-top:4px; }
/* Sepet formundaki eski .cuye paragraf kuralı (bağlantılar turuncu) yeni
   karttaki düğmelere de uygulanıyordu: turuncu zeminde turuncu yazı. */
.cuye__btn .btn{ color:var(--ink); }
.cuye__btn .btn--ghost{ color:var(--paper); }
.cuye__btn .btn:hover{ color:var(--ink); }
.cuye__btn .btn--ghost:hover{ color:var(--paper); }

/* ---------- Çoklu şube: vitrin ekleri ----------
   "Yakında" rozeti (şube kartı, şube sayfası, iletişim), iletişim
   bloklarında şube başına alt başlık, altbilgide şube satırları. */
.sube-yakinda{
  display:inline-block; vertical-align:middle; margin-left:.35em; padding:3px 9px;
  border-radius:999px; background:var(--accent); color:var(--ink);
  font-family:var(--body, inherit); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.4; white-space:nowrap;
}
.br--soon .br__media img{ filter:grayscale(.6); opacity:.75; }
.bdet--soon .bdet__info{ opacity:.9; }
.contact__sube + .contact__sube{ margin-top:22px; padding-top:22px; border-top:1px solid rgba(11,11,12,.10); }
.contact__subeAd{ margin:22px 0 4px; font-family:var(--display); text-transform:uppercase; font-size:1.25rem; line-height:1.15; }
.contact__sube .contact__addr{ margin-top:10px; }
.contact__sube .contact__liste{ margin-top:14px; }
.contact__yakinda{ margin:12px 0 0; font-size:.92rem; color:var(--muted); max-width:44ch; line-height:1.6; }
.contact__yakinda b{ color:var(--ink); }
.contact__sube--soon .contact__yakinda a{ color:var(--accent-d); border-bottom:1px solid rgba(192,112,47,.4); }
.foot__subeler{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; font-size:.88rem; color:var(--muted-l); }
.foot__subeler a{ color:var(--paper); opacity:.85; }
.foot__subeler a:hover{ opacity:1; color:var(--accent); }
.foot__yakinda{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }


/* ------------------------------------------------------------------ */
/* Sepet: şube seçimi                                                  */
/* ------------------------------------------------------------------ */
.csube{ margin:0 0 14px; }
.csube .seg span{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.csube .seg small{ font-size:11px; opacity:.7; font-weight:400; }
.csube__not{ margin:8px 0 0; font-size:13px; color:#6b6b70; }
.csube__not.is-kapali{ color:#c43030; font-weight:600; }
.csube__oneri{ margin:6px 0 0; font-size:12px; color:#8a6d1a; }

/* Personel girişi: şube düğmeleri ve ipucu (koyu tema) */
.auth__sube .seg span small{ display:block; font-size:.7rem; opacity:.6; margin-top:2px; }
.auth__hint{ margin-top:-6px; font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.5); }
.auth__sube .seg input:focus-visible + span{ box-shadow:inset 0 0 0 1.5px var(--accent); }

/* Yardım balonu solda kalır: sağ altta sepet düğmesi (.cfab) var, sağa
   alınınca "Sepetim 790 ₺" yazısını kesiyordu. */

/* E-posta düzeltme (sepetteki doğrula kartı) */
.edeg{ margin-top:14px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; }
.edeg summary{ cursor:pointer; color:var(--accent); font-size:.9rem; font-weight:600; list-style:none; }
.edeg summary::-webkit-details-marker{ display:none; }
.edeg summary::before{ content:'✎ '; }
.edeg[open] summary{ margin-bottom:12px; }
.edeg__form{ display:grid; gap:12px; }
.edeg__form .btn{ justify-self:start; }

/* Şube kapalıyken seçilemeyen teslimat seçeneği */
.seg.is-pasif span{ opacity:.45; cursor:not-allowed; }