/* =====================================================================
   Müşteri menüsü — mobil öncelikli, sıcak kâğıt, editoryal tipografi
   ===================================================================== */

body.menu {
  background: var(--paper);
  /* hidden GÖVDEYİ KAYDIRMA KABINA çevirir (overflow-y de auto'ya döner) ve
     içindeki position:sticky öğeler — üstteki .arac çubuğu — yapışmayı bırakır;
     üstelik yatayda parmakla kaydırılabilir kalır. clip ise kırpar ama kaydırma
     kabı yaratmaz: sticky çalışmaya devam eder, yana kaydırma da imkânsız olur.
     Sırası önemli: clip'i bilmeyen eski tarayıcılar o satırı atıp hidden'da kalır. */
  overflow-x: hidden;
  overflow-x: clip;
}
body.menu::before {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: .5; pointer-events: none; z-index: var(--z-top);
  mix-blend-mode: multiply;
}

.kabuk { max-width: 780px; margin-inline: auto; }

/* ---------------------------------------------------------------- başlık */
.ust { position: relative; background: var(--surface); }
.kapak {
  height: 168px;
  background-size: cover; background-position: center;
  position: relative;
}
.kapak::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,23,20,.10) 0%, rgba(28,23,20,.62) 100%);
}

/* NOT: burada eskiden tek görselli kapakta background-position'ı yavaşça
   kaydıran süs amaçlı bir animasyon vardı. background-position GPU'da
   birleştirilemeyen (compositable olmayan) bir özellik olduğu için tarayıcı
   her kareyi ana iş parçacığında yeniden boyuyordu — mobilde scroll ile
   çakışınca üst kısmın (kapak/başlık) scroll sırasında donup scroll durunca
   yerine oturması ("takılma") şeklinde görünüyordu. Salt kozmetik olduğu
   için kaldırıldı. */
/* Ana sayfadaki "telefon" önizlemesinde bu menü CSS transform'la küçültülmüş bir
   iframe içinde gösteriliyor (bkz. site.css .telefon iframe { transform: scale(...) }).
   Ölçeklenmiş bir katman içindeki sürekli animasyonlar eski/zayıf GPU'larda her kare
   yeniden hesaplanırken görsellerde titremeye yol açıyor — süs amaçlı oldukları için
   önizlemede tamamen kapatıyoruz. */
html.ic-cerceve .kapak-slide.aktif .kapak-slide-img { animation: none; }

/* overflow:hidden tek başına yetmeyebiliyor: track N*100% genişliğinde bir
   flex kutu, transform ile kaydırılıyor — kutunun asıl (kırpılmadan önceki)
   layout genişliği viewport'tan büyük olduğu için bazı mobil tarayıcılar
   bunu "sayfa yatayda büyüdü" sanıp kayma/lastik efektine izin verebiliyor
   (bkz. yukarıdaki .arac notu, aynı cihaz sınıfı hatası). overflow-x:clip
   destekleyen tarayıcılarda hiçbir koşulda kaydırma/taşma üretmediği için
   ek bir güvence katmanı olarak eklendi. */
.kapak-slider { overflow: hidden; overflow-x: clip; touch-action: pan-y; }
.kapak-slider-track {
  display: flex; height: 100%;
  transition: transform .85s cubic-bezier(.65,0,.35,1);
  cursor: grab; user-select: none;
}
.kapak-slider-track:active { cursor: grabbing; }
.kapak-slide {
  flex: 0 0 100%; height: 100%;
  position: relative; overflow: hidden; overflow-x: clip;
}
.kapak-slide-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.001);       /* Safari'de kenar titremesini önler */
  opacity: 0; transition: opacity .5s ease;
}
/* JS geç yüklenirse ya da kapalıysa ilk görsel yine de görünsün */
.kapak-slide:first-child .kapak-slide-img { opacity: 1; }
.kapak-slide.aktif .kapak-slide-img {
  opacity: 1;
  animation: kapakZoom 4s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes kapakZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

.ust-ic {
  display: flex; gap: var(--sp-4); align-items: flex-end;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.kapak + .ust-ic { margin-top: -46px; position: relative; z-index: 2; }

/* sayfa açılışında başlık bloğu hafifçe aşağıdan süzülerek belirir */
@keyframes girisYukari {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.logo { animation: girisYukari 520ms var(--ease) both; }
.isim h1 { animation: girisYukari 520ms var(--ease) 60ms both; }
.isim .hosgeldin, .isim .masa { animation: girisYukari 520ms var(--ease) 120ms both; }

.logo {
  width: 68px; height: 68px; flex: 0 0 auto;
  border-radius: 18px; object-fit: cover;
  background: var(--surface);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-2);
}
.kapak + .ust-ic .isim { padding-bottom: 4px; }

.isim h1 {
  font-size: clamp(1.55rem, 5.5vw, 2.1rem);
  letter-spacing: -0.025em;
  font-variation-settings: var(--menu-baslik-varyasyon, normal);
}
/* Kapak varken yalnızca logo kapağın üzerine taşar; işletme adı ve hoş geldiniz
   metni kapağın ALTINDA, .ust yüzeyinde durur. Bu yüzden bu metinler açık renk
   olmamalı — normal metin rengini kullanırlar. (Eskiden --surface veriliyordu:
   açık temalarda beyaz zeminde beyaz, koyu temalarda siyah zeminde siyah kalıyordu.) */
.kapak + .ust-ic .isim h1 { color: var(--ink); }
.kapak + .ust-ic .isim .hosgeldin { color: var(--ink-3); }

.hosgeldin { margin-top: 3px; color: var(--ink-3); font-size: var(--t-sm); }

.masa {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 3px 11px 3px 8px;
  background: var(--accent); color: #fff;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em;
}
.masa::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.85);
}

/* dil seçimi */
.diller {
  display: flex; gap: 6px; padding: 0 var(--sp-4) var(--sp-4); flex-wrap: wrap;
}
.diller a {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: var(--r-full);
  color: var(--ink-3); background: var(--paper-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.diller a:hover { background: var(--line); color: var(--ink); }
.diller a.on { background: var(--ink); color: var(--surface); }

.uyari {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--warn-soft); color: #6d4a12;
  padding: 12px var(--sp-4); font-size: var(--t-sm);
  border-top: 1px solid rgba(151,103,28,.18);
}

/* ---------------------------------------------------------------- araç çubuğu */
/* ÖNEMLİ: burada position:sticky + backdrop-filter vardı. Gerçek Android
   Chrome cihazlarda (masaüstünde/emülatörde üretilemeyen, cihaza özgü bir
   GPU/compositor hatası) scroll sırasında bu kutu bozuluyordu — kategori
   rayı üstte yapışık kalırken arama kutusu kısmı eski konumunda kalıp
   kayboluyordu, bazen de sağa doğru bir kayma görülüyordu. "Tüm Kategoriler"
   panelini kaldırma dahil birçok ayrı düzeltme denendi, sorun cihazda devam
   etti — kök neden bu spesifik cihazlarda sticky + backdrop-filter'ın kendisi.
   Bu yüzden ikisi de kaldırıldı: çubuk artık sayfayla birlikte normal akışta
   kayıyor, hiçbir yere yapışmıyor, bulanıklık da yok. Kategori linkleri
   kategori-bar içinde yatay kaydırılarak hâlâ erişilebilir. */
.arac {
  position: relative;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}
.arac-ic { display: flex; gap: 8px; padding: 10px var(--sp-4); align-items: center; }

.ara-kutu { position: relative; flex: 1; min-width: 0; }
.ara-kutu .ikon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.ara-kutu input {
  width: 100%; padding: 10px 12px 10px 36px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ara-kutu input::placeholder { color: var(--muted); }
.ara-kutu input:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ara-kutu input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.filtre-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filtre-btn:hover { border-color: var(--ink-3); }
.filtre-btn:active { transform: scale(.97); }
.filtre-btn.etkin { background: var(--ink); border-color: var(--ink); color: #fff; }
.filtre-btn .sayi {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: var(--r-full); font-size: 11px; font-weight: 700;
}

/* kategori rayı */
.kategori-bar {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 0 var(--sp-4) 10px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  /* Snap ve scrollIntoView hizasını kapsayıcının padding kutusuna göre değil,
     içerik kenarına göre kurar. Bu olmadan ilk sekme daha sayfa açılırken
     padding'i (16px) yiyecek şekilde yapışıp ekranın soluna dayanıyor ve ray,
     üstündeki arama kutusuyla hizasız duruyordu. */
  scroll-padding-inline: var(--sp-4);
}
.kategori-bar::-webkit-scrollbar { display: none; }
.kategori-bar a {
  scroll-snap-align: start;
  white-space: nowrap; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-3); padding: 7px 13px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  transition: all var(--dur) var(--ease);
}
.kategori-bar a:hover { border-color: var(--ink-3); transform: translateY(-1px); color: var(--ink); }
.kategori-bar a[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.kategori-bar a { animation: girisYukari 420ms var(--ease) both; animation-delay: 90ms; }
.kategori-bar a:nth-child(2) { animation-delay: 125ms; }
.kategori-bar a:nth-child(3) { animation-delay: 160ms; }
.kategori-bar a:nth-child(4) { animation-delay: 195ms; }
.kategori-bar a:nth-child(5) { animation-delay: 230ms; }
.kategori-bar a:nth-child(n+6) { animation-delay: 260ms; }

/* ------------------------------------------------------- kaydırdıkça belirme
   JS destekliyorsa (IntersectionObserver) kategoriler ekrana yaklaşınca
   içindeki ürünler hafif kademeli, yumuşak bir şekilde belirir. JS çalışmazsa
   .js-reveal sınıfı hiç eklenmez ve her şey normal şekilde görünür kalır. */
body.js-reveal .kategori > h2,
body.js-reveal .kategori > .kat-aciklama,
body.js-reveal .urun-sar {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
body.js-reveal .kategori.gorunur > h2,
body.js-reveal .kategori.gorunur > .kat-aciklama,
body.js-reveal .kategori.gorunur .urun-sar {
  opacity: 1; transform: translateY(0);
}

/* ---------------------------------------------------------------- listeler */
main { padding-bottom: var(--sp-8); }

/* kategori görseli — adı, alt kenarına yarısı taşacak şekilde binen bir
   etiket olarak görünür (poster/ribbon); overflow:visible olduğu için
   yuvarlatma artık resmin kendisinde, kutuda değil */
.kat-banner {
  position: relative;
  margin: var(--sp-6) var(--sp-4) 0; aspect-ratio: 2.6; background: var(--line-soft);
}
/* görseli çerçeveleyip kırpan iç kutu — dış kutu (.kat-banner) kasıtlı olarak
   taşma kesmiyor, yoksa alttaki etiket de kırpılırdı */
/* img %112 genişlikte + sürekli translateX ile kayıyor (bkz. gorselKay) —
   overflow:hidden'ın taşan bu kutuyu tam kırpmaması ihtimaline karşı
   overflow-x:clip de eklendi (bkz. yukarıdaki .kapak-slider notu). */
.kat-banner-cerceve { width: 100%; height: 100%; overflow: hidden; overflow-x: clip; border-radius: var(--r-lg); }
.kat-banner-cerceve img {
  position: absolute; top: 0; left: -6%;
  width: 112%; max-width: none; height: 100%; object-fit: cover; display: block;
  animation: gorselKay 8s ease-in-out infinite alternate;
}
/* göz yormayan, yavaş bir sağa-sola kayma — resim kendi içinde "yaşıyor" hissi verir.
   Genlik değişkenle ayarlanır çünkü kutu masaüstünde çok genişleyince aynı %'lik
   kayma pikselde çok daha büyük bir mesafeye denk gelip abartılı görünüyordu. */
@keyframes gorselKay {
  from { transform: translateX(calc(var(--kat-kay, 3%) * -1)); }
  to   { transform: translateX(var(--kat-kay, 3%)); }
}
/* masaüstünde geniş kutu + yüzdelik kayma titremeye benzer bir görüntü
   veriyordu — en temizi orada hiç oynatmamak */
@media (min-width: 720px) {
  .kat-banner-cerceve img { animation: none; transform: none; left: -6%; }
}
/* aynı titreme sorunu — bkz. yukarıdaki .kapak notu — kategori görsellerinde de geçerli */
html.ic-cerceve .kat-banner-cerceve img { animation: none; transform: none; left: -6%; }
.kat-etiket {
  position: absolute; left: var(--sp-4); bottom: 0; transform: translateY(50%);
  max-width: calc(100% - var(--sp-4) * 2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--sh-2);
}
body.menu.koyu .kat-etiket { box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
/* etiketin yarısı görselin dışına taştığı için içeriğe normalden fazla boşluk gerekir */
.kat-banner + .kategori { padding-top: calc(var(--sp-4) + 14px); }

.kategori { padding: var(--sp-6) var(--sp-4) 0; }
.kategori > h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  font-variation-settings: var(--menu-baslik-varyasyon, normal);
  display: flex; align-items: baseline; gap: 10px;
}
.kategori > h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.kat-aciklama { margin-top: 5px; color: var(--ink-3); font-size: var(--t-sm); }
.alt-kategori > h2 { font-size: var(--t-lg); }

.urunler { margin-top: var(--sp-4); }

/* ürün satırı — kutu değil, gazete ilanı gibi ince ayrımlı */
.urun {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  text-align: start;
  width: 100%; min-width: 0;
  transition: opacity var(--dur) var(--ease);
}
.urun:last-child { border-bottom: 0; }
.urun:hover .urun-ad { color: var(--accent); }
.urun:active {
  opacity: .62;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: var(--r-md);
}
.urun-sar.gizli { display: none; }

.urun-gorsel-sar {
  order: 2; position: relative;
  width: 84px; height: 84px; flex: 0 0 auto;
  transition: transform var(--dur-y) var(--ease);
}
.urun-gorsel-sar .gorsel {
  width: 100%; height: 100%; display: block;
  border-radius: 14px; object-fit: cover;
  background: var(--paper-2);
  box-shadow: var(--sh-1);
  transition: filter var(--dur) var(--ease);
}
.urun:active .urun-gorsel-sar { transform: scale(1.04); }

.urun-sar.secilemez .gorsel { filter: grayscale(.4) brightness(.8); }

/* ürün adı görselin üzerine biner (bkz. .kat-etiket) — yalnızca ızgara
   düzeninde gösterilir, liste/kompakt düzende ürün adı zaten metin alanında */
.urun-etiket { display: none; }
.urun-ic { display: block; flex: 1 1 auto; min-width: 0; }

.urun-ust {
  display: flex; justify-content: space-between;
  gap: var(--sp-3); align-items: baseline; min-width: 0;
}
.urun-ad {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.012em;
  min-width: 0; overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.yildiz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-inline-start: 5px; vertical-align: -2px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 1; box-shadow: var(--sh-1);
}

/* Fiyat sütunu KENDİ İÇERİĞİNDEN dar olmamalı. Eskiden esneyebiliyordu
   (flex:0 1 auto + min-width:0), ama içerik white-space:nowrap olduğu için
   kutu daralınca metin kutunun dışına, uzun ürün adlarında da ekranın dışına
   taşıyordu: sayfa yatayda kaydırılabilir hale geliyor, bu da body'deki
   overflow-x yüzünden gövdeyi kaydırma kabına çevirip üstteki .arac
   çubuğunun position:sticky'sini tamamen bozuyordu.
   Daralmayı ürün adı üstlenir; onda overflow-wrap:anywhere var, sarabiliyor. */
.fiyat {
  flex: 0 0 auto; max-width: 46%;
  text-align: end; font-weight: 700; font-size: var(--t-md);
  white-space: nowrap;
}
.fiyat .birim { font-weight: 500; font-size: .82em; color: var(--muted); margin-inline-start: 1px; }
.fiyat .eski { color: var(--muted); font-size: .82em; font-weight: 500; margin-inline-end: 5px; }

/* indirimli üründe güncel fiyat sabit "indirim" rengiyle öne çıkar — eski
   fiyat kendi soluk/üstü-çizili stilini korur (aşağıdaki kural onu ezmesin). */
.fiyat:has(.eski) { color: var(--indirim); }
.fiyat:has(.eski) .eski { color: var(--muted); }

.varyantlar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.varyantlar .v {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
  padding: 4px 10px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); line-height: 1.35;
}
.varyantlar .v b {
  color: var(--ink); font-weight: 700; font-size: var(--t-sm);
  white-space: nowrap;
}

.aciklama {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.5;
  max-width: 100%; overflow-wrap: anywhere;
}

/* Hazır ifadeler: her dilde karşılığı olan kısa nitelemeler ("Ev yapımı · Acılı") */
.ifadeler {
  display: block; margin-top: 4px;
  color: var(--ink-3); font-size: var(--t-sm); line-height: 1.5;
  font-style: italic; overflow-wrap: anywhere;
}

.rozetler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-3);
}
.rozet.kcal { background: var(--info-soft); color: var(--info); }
.rozet.diyet { background: var(--ok-soft); color: var(--ok); }
.rozet.tukendi { background: var(--danger); color: #fff; font-weight: 700; }
.rozet .ikon { opacity: .85; }

.alerjen-ikonlar {
  display: inline-flex; gap: 5px; align-items: center;
  margin-inline-start: auto; color: var(--ink-3);
}
.alerjen-ikonlar > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2);
}
.alerjen-ikonlar .olabilir { opacity: .45; }

.bos {
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--muted);
}
.bos .ikon { margin: 0 auto var(--sp-3); color: var(--line); }

/* ---------------------------------------------------------------- alt bilgi */
.alt {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-3);
}
.alt-ic { max-width: 780px; margin-inline: auto; }
.alt p { margin-bottom: 6px; }
.alt .yasal {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--muted); max-width: 58ch;
}
.alt .iletisim { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: var(--sp-3); }
.alt .iletisim span { display: inline-flex; align-items: center; gap: 6px; }
.alt .sosyal { display: flex; gap: 14px; margin-top: var(--sp-3); }
.alt .marka { margin-top: var(--sp-5); font-size: var(--t-xs); color: var(--muted); }
.alt .marka a { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- yukarı çık */
.yukari-cik {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-sticky);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--line);
  transform: translateY(14px) scale(.9); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.yukari-cik.gorunur { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.yukari-cik:hover { background: var(--paper-2); color: var(--ink); }
.yukari-cik:active { transform: scale(.9); }
/* sepet çubuğu görünürken üstüne binmesin diye yukarı kayar. Sabit bir piksel
   yerine JS'in ölçtüğü gerçek çubuk yüksekliği kullanılır (bkz. menu.js
   secimTazele) — dil/ekran boyutu çubuğun boyunu değiştirse de çakışmaz. */
body.secim-var .yukari-cik { bottom: calc(var(--sp-3) + var(--secim-bar-h, 64px)); }

/* ---------------------------------------------------------------- örtü ve paneller */
.perde {
  position: fixed; inset: 0; z-index: var(--z-veil);
  background: rgba(28,20,14,.42);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.perde.acik { opacity: 1; pointer-events: auto; }

.sayfa-alt {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-panel);
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-pop);
  transform: translateY(101%);
  transition: transform 260ms var(--ease);
  max-height: 86vh; display: flex; flex-direction: column;
}
.sayfa-alt.acik { transform: translateY(0); }
.sayfa-alt::before {
  content: ""; width: 38px; height: 4px; border-radius: 99px;
  background: var(--line); margin: 10px auto 0;
}

.fp-ust {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4);
}
.fp-ust b { font-family: var(--font-display); font-size: var(--t-lg); }
.kapat-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--paper-2); color: var(--ink-2);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kapat-btn:hover { background: var(--line); }
.kapat-btn:active { transform: scale(.92); }

.fp-ic { padding: 0 var(--sp-4) var(--sp-6); overflow-y: auto; }
.fp-ic h4 {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  margin: var(--sp-5) 0 var(--sp-2);
}
.fp-ic h4:first-child { margin-top: 0; }

.fp-satir {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px; font-size: var(--t-base);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.fp-satir:last-child { border-bottom: 0; }
.fp-satir input { width: 19px; height: 19px; accent-color: var(--accent); flex: 0 0 auto; }
.fp-satir .ikon { color: var(--ink-3); }
.fp-satir span { flex: 1; }

.temizle {
  margin-top: var(--sp-5); width: 100%; padding: 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--t-base); font-weight: 600;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.temizle:hover { background: var(--paper-2); }
.temizle:active { transform: scale(.985); }

/* ---------------------------------------------------------------- seçim listesi
   Misafirin telefonunda tuttuğu liste; garsona gösterilmek için okunaklı olmalı. */
.urun-sar { position: relative; }

.ekle-btn {
  position: absolute; inset-inline-end: 0; bottom: var(--sp-4);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
  font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; line-height: 1;
  cursor: pointer; z-index: 2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ekle-btn:active { transform: scale(.92); }
.ekle-btn.secili { background: var(--accent); border-color: var(--accent); color: #fff; }
.ekle-btn .arti { font-size: 1.15rem; margin-top: -2px; }
.ekle-btn .adet-rozet { font-size: var(--t-sm); font-weight: 700; }

/* listeye eklenince küçük, tatlı bir "zıplama" — dokunuşun sonucu hissedilsin */
@keyframes eklePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.24); }
  62%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.ekle-btn.vurgula { animation: eklePop 420ms var(--ease); }

.secim-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-panel);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 11px var(--sp-4) calc(11px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(28,20,14,.10);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform 420ms cubic-bezier(.32, 1.3, .38, 1), opacity 220ms var(--ease);
}
.secim-bar.gorunur { transform: translateY(0); opacity: 1; pointer-events: auto; }
.secim-ozet { font-size: var(--t-base); color: var(--ink-2); min-width: 0; }
.secim-ozet b { font-size: 1.1rem; color: var(--ink-1); }
.secim-tutar { font-weight: 600; color: var(--ink-1); }
.secim-ac {
  flex: 0 0 auto; padding: 11px 20px; border: 0; border-radius: 99px;
  background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700; cursor: pointer;
}
.secim-ac:active { transform: scale(.97); }

.masa-not { font-weight: 500; color: var(--muted); font-size: var(--t-sm); }

.secim-satir {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: 13px 2px; border-bottom: 1px solid var(--line-soft);
}
.secim-satir:last-child { border-bottom: 0; }
.s-not {
  flex: 1 0 100%; margin-top: 2px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--t-sm); background: var(--paper-2); color: var(--ink-2);
}
.s-not:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.s-ad { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.s-ad small { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--muted); margin-top: 2px; }
.s-tutar { flex: 0 0 auto; font-size: var(--t-base); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-adet { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.s-adet b { min-width: 26px; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.s-adet button {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.s-adet button:active { transform: scale(.92); }

.secim-toplam {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
/* JS bu kutuyu "hidden" özniteliğiyle gizler; yukarıdaki display:flex aksi belirtilmezse
   tarayıcının varsayılan [hidden]{display:none} kuralını ezer (aynı özgüllük, sonraki
   kural kazanır) — liste temizlenince kutu boş görünse de ekranda asılı kalırdı. */
.secim-toplam[hidden] { display: none; }
.secim-toplam b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.secim-not { margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.secim-bos { padding: var(--sp-6) 0; text-align: center; color: var(--muted); line-height: 1.5; }

.secim-aksiyon { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.secim-aksiyon button {
  flex: 1; padding: 13px 10px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700; cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.secim-aksiyon button:active { transform: scale(.97); }
.secim-aksiyon button:disabled { opacity: .55; pointer-events: none; }
.btn-siparis { background: var(--accent); color: #fff; }
.btn-garson { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.secim-durum {
  margin-top: var(--sp-3); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--t-sm); background: var(--ok-soft, #e6efe6); color: var(--ok, #3f6b46);
}
.secim-durum.hata { background: var(--danger-soft, #f9e6e3); color: var(--danger, #a5382a); }

/*
 * Sunucudan yoklamayla gelen "siparişiniz onaylandı/teslim edildi" şeridi — sepet
 * paneli kapalı olsa bile görünsün diye sayfanın en üstünde sabit durur.
 * .secim-bar ile AYNI teknik kullanılır (hidden özniteliği değil, transform + opacity):
 * .secim-toplam'da yaşanan "[hidden] tarayıcı varsayılanını display:flex ezer" hatasına
 * burada hiç düşülmez.
 */
.siparis-bildirim {
  position: fixed; top: 0; inset-inline: 0; z-index: var(--z-top);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px var(--sp-4); padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--ok, #3f6b46); color: #fff;
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--sh-2);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease);
}
.siparis-bildirim.gorunur { transform: translateY(0); opacity: 1; pointer-events: auto; }
.siparis-bildirim button {
  flex: 0 0 auto; color: #fff; opacity: .8; font-size: 1.3rem; line-height: 1; padding: 0 2px;
}
.siparis-bildirim button:hover { opacity: 1; }

.varyant-sec {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 14px 2px; border-bottom: 1px solid var(--line-soft);
  font-size: 1.05rem; text-align: start; cursor: pointer;
}
.varyant-sec:last-child { border-bottom: 0; }
.varyant-sec:active { opacity: .8; }

.vs-tik {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  color: #fff; font-size: .8rem; font-weight: 700;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.varyant-sec.secili .vs-tik { background: var(--accent); border-color: var(--accent); }
.vs-ad { flex: 1; min-width: 0; }
.vs-fiyat { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.vs-adet { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.vs-adet b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.vs-adet button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.vs-adet button:active { transform: scale(.92); }

.varyant-ekle {
  margin-top: var(--sp-4); width: 100%; padding: 13px;
  border: 0; border-radius: var(--r-md);
  background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700; cursor: pointer;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.varyant-ekle:active { transform: scale(.98); }
.varyant-ekle:disabled { opacity: .45; pointer-events: none; }

/* Alt bar açıkken sayfa sonu barın altında kalmasın. Sınıfı JS ekler;
   :has() kullanmıyoruz ki eski telefon tarayıcılarında da çalışsın. */
body.secim-var .alt { padding-bottom: 76px; }

/* ---------------------------------------------------------------- ürün detayı
   Artık tam ekran değil, diğer paneller (.sayfa-alt) gibi alttan açılan,
   sınırlı yükseklikte bir sayfa — arkadaki menü hep biraz görünür kalır. */
.detay {
  position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: var(--z-sheet);
  max-height: 84vh;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-pop);
  transform: translateY(101%);
  transition: transform 280ms var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.detay.acik { transform: translateY(0); }

/* öneri kartından başka ürüne geçerken içerik ansızın değişmesin diye
   kısa bir sönüp-belirme; JS bu sınıfı ekleyip yeni içerikle kaldırır */
.detay-ic {
  transition: opacity 170ms var(--ease), transform 170ms var(--ease);
}
.detay-ic.gecis-cikis { opacity: 0; transform: translateY(6px); }

.detay-ust {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: flex-end;
  padding: 10px var(--sp-4);
  background: linear-gradient(180deg, var(--surface) 40%, transparent);
}
/* büyük görsel + üstüne binen ürün adı — kategori/ürün kartlarındaki
   etiket mantığının aynısı (bkz. .kat-etiket, .urun-etiket) */
.detay-gorsel-sar { position: relative; margin-top: -54px; }
.detay .buyuk-gorsel {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  margin-top: 0;
}
.d-etiket {
  position: absolute; left: var(--sp-4); bottom: 0; transform: translateY(50%);
  max-width: calc(100% - var(--sp-4) * 2);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--sh-2);
}
body.menu.koyu .d-etiket { box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
.detay .govde { padding: var(--sp-5) var(--sp-4) var(--sp-9); max-width: 640px; margin-inline: auto; }
/* etiketin yarısı görselin dışına taştığı için normalden fazla üst boşluk gerekir */
.detay-gorsel-sar + .govde { padding-top: calc(var(--sp-5) + 16px); }
.d-kategori {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--accent);
}
.detay h2 {
  margin-top: 3px;
  font-size: 1.6rem; letter-spacing: -0.022em;
  font-variation-settings: var(--menu-baslik-varyasyon, normal);
}
.d-fiyat { margin-top: 8px; font-size: var(--t-xl); font-weight: 700; }
.d-fiyat:has(.eski) { color: var(--indirim); }
.d-fiyat:has(.eski) .eski { color: var(--muted); }
.d-fiyat .varyantlar { justify-content: flex-start; gap: 8px; margin-top: 8px; }
.d-fiyat .varyantlar .v { font-size: var(--t-base); gap: 12px; padding: 6px 12px; }
.d-fiyat .varyantlar .v b { font-size: var(--t-md); }
.d-aciklama { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--t-md); max-width: 60ch; }
.d-ifadeler { margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--t-sm); font-style: italic; max-width: 60ch; }

.d-rozetler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--sp-4); }

.blok { margin-top: var(--sp-6); }
.blok h3 {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin-bottom: var(--sp-3);
}
.blok > p { font-size: var(--t-base); color: var(--ink-2); }

/* alerjen listesi */
.alerjen-liste { display: flex; flex-direction: column; gap: 7px; }
.alerjen-oge {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
  font-size: var(--t-base); font-weight: 600; color: var(--ink);
}
.alerjen-oge .ikon { color: var(--accent); flex: 0 0 auto; }
.alerjen-oge.olabilir {
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); font-weight: 500;
}
.alerjen-oge.olabilir .ikon { color: var(--ink-3); }
.alerjen-oge .tur {
  margin-inline-start: auto; font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-3); letter-spacing: .01em;
}
.uyari-not {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: #6d4a12; font-size: var(--t-sm);
  display: flex; gap: 8px;
}

/* besin tablosu */
table.besin { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
table.besin th {
  text-align: end; font-family: var(--font-ui);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 0 8px; border-bottom: 1px solid var(--line);
}
table.besin th:first-child { text-align: start; }
table.besin td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
table.besin td:not(:first-child) { text-align: end; white-space: nowrap; }
table.besin tr.ana td { font-weight: 700; font-size: var(--t-md); }
table.besin tr.alt td:first-child { padding-inline-start: 14px; color: var(--ink-3); }
table.besin tr:last-child td { border-bottom: 0; }

.ri-satir { margin-top: var(--sp-4); }
.ri-satir .baslik {
  display: flex; justify-content: space-between; font-size: var(--t-xs);
  color: var(--muted); margin-bottom: 4px;
}
.ri-cubuk { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.ri-cubuk i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.besin-not { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }

/* "bunlar da hoşunuza gidebilir" — yatay kaydırmalı öneri şeridi */
.benzer-blok { margin-inline: calc(var(--sp-4) * -1); }
.benzer-blok h3 { padding-inline: var(--sp-4); }
.benzer-liste {
  display: flex; gap: var(--sp-3); overflow-x: auto;
  padding: 2px var(--sp-4) 6px; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.benzer-liste::-webkit-scrollbar { display: none; }
/* masaüstünde fareyle basılı tutup kaydırırken: an-be-an takip etsin diye
   scroll-snap ve metin seçimi geçici kapanır (bkz. menu.js surukleKaydir) */
.benzer-liste.surukleniyor { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.benzer-kart {
  flex: 0 0 auto; width: 128px; scroll-snap-align: start;
  text-align: start; cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity 460ms var(--ease);
}
.benzer-kart:active { transform: scale(.96); }
/* JS destekliyorsa: kart gerçekten ekrana girene kadar bekler, DOM'a
   eklenir eklenmez oynayıp bitmesin diye (bkz. menu.js IntersectionObserver) */
body.js-reveal .benzer-kart { opacity: 0; transform: translateY(14px); }
body.js-reveal .benzer-kart.gorunur { opacity: 1; transform: translateY(0); }
.benzer-gorsel {
  position: relative; display: block;
  width: 100%; aspect-ratio: 1; border-radius: var(--r-md);
  background: var(--paper-2); overflow: hidden; box-shadow: var(--sh-1);
}
.benzer-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.benzer-yildiz {
  position: absolute; top: 6px; inset-inline-end: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; box-shadow: var(--sh-1);
}
.benzer-ad {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font-size: var(--t-sm); font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.benzer-fiyat { display: block; margin-top: 3px; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.benzer-fiyat .birim { font-weight: 500; font-size: .82em; color: var(--muted); margin-inline-start: 1px; }

/* ---------------------------------------------------------------- masaüstü */
@media (min-width: 720px) {
  body.menu { background: var(--menu-dis, #efe9e0); }
  .ust, .arac, main, .alt { background-color: var(--surface); }
  .kabuk {
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), var(--sh-3);
    min-height: 100dvh;
  }
  .arac { background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .urunler { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
  .urun { padding: var(--sp-4) 0; }

  .detay {
    inset: auto; top: 50%; left: 50%;
    width: min(480px, 90vw); max-height: 78vh;
    border-radius: var(--r-xl);
    transform: translate(-50%, -46%) scale(.98);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform 220ms var(--ease);
    box-shadow: var(--sh-pop);
  }
  .detay.acik { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

  .sayfa-alt {
    inset: auto; top: 50%; left: 50%;
    width: min(460px, 92vw); border-radius: var(--r-xl);
    transform: translate(-50%, -46%); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform 220ms var(--ease);
  }
  .sayfa-alt.acik { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  .sayfa-alt::before { display: none; }
}

@media (min-width: 1040px) {
  .kabuk { max-width: 880px; }
  .alt-ic { max-width: 880px; }
}


/* =====================================================================
   İşletmenin seçtiği tasarım varyantları
   ===================================================================== */

/* --- koyu temalar --- */
body.menu.koyu .kapak::after {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
}
body.menu.koyu .logo { border-color: var(--surface); }
body.menu.koyu::before { mix-blend-mode: screen; opacity: .22; }
body.menu.koyu .rozet.kcal { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
body.menu.koyu .rozet.diyet { background: color-mix(in srgb, #6fae7d 18%, transparent); color: #9fd0a9; }
body.menu.koyu .alerjen-oge { background: color-mix(in srgb, var(--accent) 12%, transparent); }
body.menu.koyu .uyari { background: color-mix(in srgb, #c99a3c 16%, transparent); color: #e8c68a; border-top-color: transparent; }
body.menu.koyu .uyari-not { background: color-mix(in srgb, #c99a3c 14%, transparent); color: #e8c68a; }
/* indirim rengi koyu zeminde soluklaşmasın diye açık bir gül tonuna dönsün */
body.menu.koyu { --indirim: #e79fb0; }
/* ızgara kartları koyu temada yarı saydam "cam" yüzey alsın — Aurora'dan ilham,
   kendi paletimizle: gece/kahve/komur zeminlerinin hepsinde otomatik çalışır */
body.menu.koyu.duzen-izgara .urun {
  background: color-mix(in srgb, #fff 6%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, var(--line));
}
body.menu.koyu.duzen-izgara .urun:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, var(--line)), var(--sh-2);
}

/* --- başlık hizası --- */
body.baslik-orta .ust-ic { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
body.baslik-orta .kapak + .ust-ic { margin-top: -40px; }
body.baslik-orta .diller { justify-content: center; }
body.baslik-orta .kategori > h2 { justify-content: center; }
body.baslik-orta .kategori > h2::after { display: none; }
body.baslik-orta .kategori > h2::before {
  content: ""; flex: 0 0 24px; height: 1px; background: var(--accent);
}

/* --- düzen: ızgara (kart görünümü) --- */
body.duzen-izgara .urunler {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--sp-4);
}
body.duzen-izgara .urun {
  flex-direction: column; gap: 0; padding: 0;
  border-bottom: 0; background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.duzen-izgara .urun:hover { box-shadow: inset 0 0 0 1px var(--ink-3), var(--sh-2); }
body.duzen-izgara .urun:active { transform: scale(.985); opacity: 1; }
body.duzen-izgara .urun-gorsel-sar {
  order: 0; width: 100%; height: auto; aspect-ratio: 1/1;
}
body.duzen-izgara .urun-gorsel-sar .gorsel { border-radius: 0; box-shadow: none; }
/* kategori etiketiyle aynı mantık: ürün adı görselin alt kenarına biner,
   metin alanındaki asıl ad (erişilebilirlik/liste düzeni için) görünmez olur */
body.duzen-izgara .urun-etiket {
  display: inline-flex; align-items: center; gap: 5px;
  position: absolute; left: 10px; bottom: 0; transform: translateY(50%);
  max-width: calc(100% - 20px);
  padding: 6px 11px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--sh-2);
}
body.menu.koyu.duzen-izgara .urun-etiket { box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
body.duzen-izgara .urun:has(.urun-etiket) .urun-ust .urun-ad { display: none; }
body.duzen-izgara .urun-ic { padding: calc(var(--sp-4) + 8px) var(--sp-4) var(--sp-4); width: 100%; }
body.duzen-izgara .urun-ust { flex-direction: column; align-items: flex-start; gap: 4px; }
body.duzen-izgara .fiyat { max-width: 100%; text-align: start; }
body.duzen-izgara .varyantlar { align-items: flex-start; }
body.duzen-izgara .varyantlar .v { text-align: start; }
body.duzen-izgara .aciklama { -webkit-line-clamp: 2; }
body.duzen-izgara .alerjen-ikonlar { margin-inline-start: 0; }
@media (min-width: 720px) {
  body.duzen-izgara .urunler { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* --- düzen: kompakt (görselsiz, sık) --- */
body.duzen-kompakt .urun { padding: 11px 0; gap: var(--sp-3); }
body.duzen-kompakt .urun-gorsel-sar { display: none; }
body.duzen-kompakt .aciklama { -webkit-line-clamp: 1; margin-top: 2px; font-size: var(--t-xs); }
body.duzen-kompakt .rozetler { margin-top: 5px; }
body.duzen-kompakt .rozet { font-size: 10.5px; padding: 2px 6px; }
body.duzen-kompakt .urun-ad { font-size: 1rem; }
@media (min-width: 720px) {
  body.duzen-kompakt .urunler { grid-template-columns: 1fr 1fr; }
}

/* --- telefonda dokunma hedefleri --- */
@media (max-width: 720px) {
  .diller a { padding: 8px 14px; }
  .kategori-bar a { padding: 10px 15px; }
  .fp-satir { padding: 13px 4px; }
  .kapat-btn { width: 40px; height: 40px; }
  .filtre-btn { min-height: 44px; }
  .ara-kutu input { min-height: 44px; }
}