/* ═══════════════════════════════════════════════════════════════════════════
   TEMA — isletmeye gore degistirilecek TEK YER.

   Big Mamma's The İstanbul · "SMOKED PAPER & PRESS"

   Kaynak: ChatGPT + Google Stitch ile uretilen tasarim sistemi
   (rub-menu/tasarim-stitch/design-RUB_Suadiye_Menu___Panel.md). Fikir:
   kasap kagidi + gazete dizgisi + sokak afisi. Menu artik "masanin uzerinde
   duran bir yazarkasa fisi" degil, "tezgahin uzerine serilmis bir gazete
   sayfasi".

   ★ ANTI-PARLAKLIK KURALI — bu temanin belkemigi:
     BLUR YOK, DEGRADE YOK, YUMUSAK GOLGE YOK.
     Derinlik yalnizca uc seyle anlatiliyor:
       1. duz ton farki (zemin / kagit / girinti)
       2. cetvel cizgileri (1px, 2px — kesikli DEGIL)
       3. sert ofset murekkep golgesi ("baski damgasi"):
          2px 2px 0 0  kart · 4px 4px 0 0  modal · 3px 3px 0 0  hover
     Bir yere backdrop-filter, box-shadow blur'u ya da linear-gradient
     eklemek istiyorsan once bu blogu oku; tasarim onlari ACIKCA yasakliyor.

   ★ Fis temasindan DEVRALINANLAR (baglanti sayfasiyla bagi koparmamak icin):
     - Marka adi hala Pacifico. Musteri masada once NFC/QR ile
       bigmammas.projecttabletap.com'u, sonra menuyu aciyor; el yazisi marka
       adi iki sayfayi ayni aileden gosteren tek bag.
     - Kagit tonu ve marka kirmizisi ayni aileden (#F4F0E8 / #D01D22).

   ★ Fis temasindan BIRAKILANLAR:
     - Barkod seridi (yerine cetvel cizgili gazete kunyesi)
     - Daktilo govde yazisi (Space Mono artik YALNIZCA fiyat/kod/etiket)
     - Yumusak golgeler ve masa isigi degradeleri

   ! menu.css ve panel.css hicbir rengi sabit yazmaz; hepsi buradan gelir.
     Yeni bir kafeye satarken yalnizca bu bloklari degistir.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Zeminler ──
     Uc katman: tezgah (--zemin) / kagit (--yuzey) / kagida oyulmus girinti
     (--yuzey2). Fis temasindaki "masa - kagit" ayrimi korunuyor, tonlar
     Smoked Paper paletine gecti. */
  --zemin: #e7e0d0;      /* tezgah — kagidin disinda kalan alan */
  --yuzey: #f4f0e8;      /* kagit — kart / panel yuzeyi */
  --yuzey2: #ece5d8;     /* girinti, gorsel arkasi, mutfak notu kutusu */
  --yuzey3: #e2dacb;     /* basili durum */

  --cizgi: #d8cebe;      /* cetvel — ince ayirici */
  --cizgi2: #c0b4a0;     /* belirgin ama hala kagit tonu bir kenar */

  /* ── Metin ── */
  --metin: #241f1d;      /* murekkep — basliklar, urun adlari, KENARLIKLAR */
  --metin2: #5a4f49;     /* isli kömür — govde, ikincil metin */
  --metin3: #786a60;     /* yipranmis murekkep — besin degeri, ipucu */

  /* ★ BIRINCIL DUGME ARTIK KIRMIZI DEGIL, KOMUR.
       Fis temasinda --ters kirmiziydi. Bu tasarimda kirmizi bir ISARET
       rengi ("heat accent"), zemin rengi degil; her birincil dugmeye
       yayilinca vurgu olmaktan cikiyor. Kirmizi yalnizca fiyat, aktif
       sekme ve gercek uyarilar icin kaldi. */
  --ters: #241f1d;       /* birincil dugme zemini */
  --ters-m: #f4f0e8;     /* birincil dugme yazisi */

  /* ── Marka ──
     IKI KIRMIZI, bilerek ayri:
     #D01D22 kagit (#F4F0E8) uzerinde 4.76:1 — gövde punto metni icin gecerli.
     #ED1F24 ise 3.84:1 — KUCUK PUNTODA KULLANMA. Yalnizca >=24px baslik,
     tam zeminli blok ve afis seritleri icin. */
  --kiremit: #d01d22;         /* cerceve, fiyat, vurgu, aktif sekme */
  --marka-kirmizi: #ed1f24;   /* yalnizca >=24px blok kullanim */
  --pirinc: #786a60;          /* kucuk caps basliklar */

  /* Logo bandinin zemini.
     ★ BIG MAMMA'S'IN LOGO DOSYASI YOK. Marka adi Pacifico ile YAZI olarak
       ciziliyor; isletme.logo_yol bos oldugu icin menu.js bandi hic cizmiyor.
       Yine de --zemin'e esitli ki ileride bir logo eklenirse bant gorunmez
       kalsin. */
  --logo-bant: #e7e0d0;

  /* ── Anlam renkleri (yeni kagit zemine gore) ── */
  --ok: #3d6b45;         --ok-y: #e7ede1;      --ok-c: #bccdb4;
  --uyari: #8a6414;      --uyari-y: #f3ebd4;   --uyari-c: #ddc898;
  --kotu: #d01d22;       --kotu-y: #f9e3e2;    --kotu-c: #e9b6b4;
  --bilgi: #2d5b87;      --bilgi-y: #e5ebf1;   --bilgi-c: #b3c4d6;
  --bilgi-m: #2d5b87;

  /* ★ --cam ARTIK SAYDAM DEGIL. Fis temasinda yapiskan sekmelerin altinda
       backdrop-filter: blur() vardi; bu tasarim blur'u yasakliyor. Mat kagit
       rengi hem kurala uyuyor hem de eski Safari'de daha guvenilir. */
  --cam: #f4f0e8;
  /* Perde daha opak: blur olmadan 0.42 opaklikta arka plan okunur kaliyor ve
     modalin onde durdugu hissi kayboluyordu. */
  --perde-zemin: rgba(36, 31, 29, 0.62);

  /* ── SERT OFSET GOLGE SISTEMI ("baski damgasi") ──
       Yumusak golgenin yerine gecen sey. Kullanimi:
         box-shadow: var(--golge-ofset) var(--metin);
       Renk ayri veriliyor ki uyari kutularinda --kotu ile de kullanilabilsin. */
  --golge-ofset: 2px 2px 0 0;    /* kart, dinlenen blok */
  --golge-ofset-h: 3px 3px 0 0;  /* hover — eleman -1px,-1px kayar */
  --golge-ofset-2: 4px 4px 0 0;  /* modal, yapiskan cubuk, afis */
  --kenar-ince: 1px solid var(--metin);
  --kenar-kalin: 1.5px solid var(--metin);
  /* Geriye donuk: hala yumusak golge isteyen tek yer kalmadi ama token
     silinirse kopyalanan bir kural sessizce renksiz kalir. */
  --golge: rgba(36, 31, 29, 0.28);

  /* ── Tipografi ──
     Fontlar YEREL (public/font/, assets/font.css). Google Fonts CDN'i
     kullanilmiyor: CSP font-src 'self' korunsun diye. Her birinin gercek
     bir yedegi var — font inmezse sayfa yine dogru duruyor.

     --marka  : yalnizca isletme adi (Pacifico). Baska hicbir yerde.
     --baslik : kategori basliklari, urun adlari (Epilogue 700/800/900).
     --govde  : okunan metin — aciklamalar, icindekiler (Work Sans).
     --kod    : ★ YENI. Fiyat, adet, saat, kod, harflenmis etiket (Space Mono).

     ★ FIS TEMASINDAN EN BUYUK AYRILIK BURASI. Orada --govde Space Mono'ydu,
       yani menudeki neredeyse tum metin daktiloydu. Bu tasarimda Space Mono
       "mutfak fisi rakami" rolune cekildi; 356 urunluk bir listede monospace
       govde metni hem genis hem yorucu. Bir kurala font atarken sor:
       bu bir SAYI/KOD mu (--kod), yoksa OKUNAN bir metin mi (--govde)? */
  --marka: "Pacifico", "Brush Script MT", cursive;
  --baslik: "Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --govde: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kod: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 8px araligi (+ 4px'lik yarim adim: Stitch olcegi 4px tabanli) */
  --a0: 4px;
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 32px; --a6: 48px; --a8: 64px;

  /* ★ Kose yaricaplari. Tasarim "giyotinle kesilmis gazete" diyor:
       --r1: 0   rozet, tablo cizgisi, damga — KESKIN
       --r2: 4   buton, input, kart — dokunma hedefi burada, sifirlanmaz
       --r3: 8   modal, buyuk cerceve
     Fis temasinda 3/5/8'di; hepsini sifirlamak dokunmatik hedefleri
     sertlestiriyor ve modalleri kutu gibi gosteriyor (bedeli odenmis not). */
  --r1: 0px; --r2: 4px; --r3: 8px;
  --gecis: 0.16s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--govde);
  /* ★ DUZ ZEMIN. Fis temasinda iki cok soluk radial gradient vardi ("masanin
     uzerindeki isik"); bu tasarim degradeleri yasakliyor ve tezgah duz bir
     ton olarak daha dogru duruyor. */
  background: var(--zemin);
  color: var(--metin);
  /* Work Sans, Space Mono'dan dar ve kisa gorunuyor: fis temasindaki 14.5px
     burada kucuk kaliyordu. Tasarimin body-md olcegi 15/22. */
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══ KAGIT DOKUSU ══════════════════════════════════════════════════════
   Gazete kagidinin tarama cizgileri. 1px cizgi / 3px aralik, %1.2
   opaklikta — tek tek bakildiginda gorunmez, yuzey genisledikce kagit
   hissi veriyor.

   ! Renk sabit yazildi: --metin uzerinden turetilseydi color-mix gerekirdi
     ve eski Safari'de dokusuz kalirdi. Murekkep renginin cok saydam hali
     oldugu icin palet degisse bile dogru kaliyor.
   ! menu.css > #uyg AYNI degeri tasiyor. Birini degistirirsen digerini de. */
.kagit {
  background-color: var(--yuzey);
  background-image: repeating-linear-gradient(
    0deg, rgba(36, 31, 29, 0.012) 0 1px, transparent 1px 3px);
}

/* ═══ CETVEL CIZGISI ════════════════════════════════════════════════════
   Gazete sutun ayraci. Kesikli DEGIL — tasarim kesikli cizgiyi yalnizca
   fis koparma perforasyonuna ayirmis (bkz. .perfore). */
.cetvel { border-bottom: 1px solid var(--cizgi); }
.cetvel-kalin { border-bottom: 2px solid var(--metin); }

/* ═══ PERFORASYON ═══════════════════════════════════════════════════════
   Tek kesikli cizgi: toplami ara toplamdan ayiran satir. Mutfak
   yazicisinin kesme cizgisine gonderme; bu tasarimda YALNIZCA burada. */
.perfore { border-top: 1.5px dashed var(--cizgi); }

/* ═══ GAZETE KUNYESI ════════════════════════════════════════════════════
   Fis temasindaki barkod seridinin yerini alan kapanis suslemesi.
   Ust uste iki cetvel cizgisi — gazete kunyesinin ustundeki cift kural.
   Sinif adi .barkod olarak KALDI: menu.js'te tek kullanim yeri var ve
   yeniden adlandirmak markup'i degistirmeyi gerektirirdi. */
.barkod {
  height: 6px;
  border-top: 2px solid var(--metin);
  border-bottom: 1px solid var(--metin);
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { display: block; }
input, select, textarea { font: inherit; color: var(--metin); }
input:focus, select:focus, textarea:focus { outline: none; }

/* Klavye kullanicisi icin gorunur odak — fare tiklamasinda gorunmez.
   Tasarim odak halkasini "0px blur, 2px solid kirmizi" olarak tanimliyor. */
:focus-visible { outline: 2px solid var(--kiremit); outline-offset: 2px; border-radius: var(--r2); }

.sayi { font-family: var(--kod); font-variant-numeric: tabular-nums; }

/* Ekranda gorunmez ama ekran okuyucuda ve belgede durur. */
.gizli-oku {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Harflenmis kucuk basliklar — tasarimin "stamp-badge" olcegi:
   Epilogue 900, 11px, 0.08em harf araligi. */
.ust-baslik {
  font-family: var(--baslik);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pirinc); font-weight: 900;
}

/* ═══ ORTAK: BILDIRIM ═══════════════════════════════════════════════════ */
.bildirim {
  position: fixed; left: 50%; bottom: var(--a3); z-index: 400;
  transform: translateX(-50%); pointer-events: none;
}
.bldrm {
  display: flex; align-items: center; gap: var(--a1);
  background: var(--metin); color: var(--yuzey);
  border: var(--kenar-kalin);
  padding: 10px var(--a2); border-radius: var(--r2);
  font-family: var(--kod); font-size: 12.5px; letter-spacing: 0.02em;
  /* Sert ofset — kagit tonunda, cunku golge koyu zeminin uzerine dusuyor. */
  box-shadow: var(--golge-ofset-2) var(--metin3);
  animation: bldrm-gir 0.2s;
}
.bldrm svg { width: 15px; height: 15px; stroke-width: 2.4; flex: 0 0 auto; }
.bldrm.kotu { background: var(--kotu); border-color: var(--kotu); color: #fff; }
@keyframes bldrm-gir { from { opacity: 0; transform: translateY(8px); } }

/* ═══ ORTAK: DURUM ANAHTARI ═════════════════════════════════════════════
   Anahtar hap seklinde KALDI. Tasarimin "0px kose" kurali rozet ve tablo
   cizgisi icin; bir anahtari kareye cevirmek onu dugmeden ayirt edilemez
   yapardi ve dokunma hedefi zayiflar. */
.anahtar {
  width: 38px; height: 22px; border-radius: 99px; background: var(--yuzey3);
  border: 1px solid var(--metin3); position: relative; flex: 0 0 auto;
  transition: background var(--gecis), border-color var(--gecis);
}
.anahtar::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 99px; background: var(--metin3);
  transition: transform var(--gecis), background var(--gecis);
}
.anahtar.acik { background: var(--ok-y); border-color: var(--ok); }
.anahtar.acik::after { transform: translateX(16px); background: var(--ok); }
.anahtar[disabled] { opacity: 0.45; cursor: progress; }

/* ═══ ORTAK: CIPLER ═════════════════════════════════════════════════════
   Musteri menusundeki filtreler ve panel formundaki alerjen/etiket secimi
   ayni bileseni kullaniyor.
   Tasarim: zemin --yuzey2, 1px --cizgi kenar, 4px kose; secilince zemin
   murekkep, yazi kagit. */
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
  font-family: var(--kod);
  font-size: 12px; letter-spacing: 0.02em; padding: 6px 11px;
  border-radius: var(--r2);
  border: 1px solid var(--cizgi); color: var(--metin2);
  transition: var(--gecis); background: var(--yuzey2);
}
.cip:hover { border-color: var(--metin); }
.cip.secili-kotu { background: var(--kotu-y); border-color: var(--kotu); color: var(--kotu); }
.cip.secili-ok { background: var(--ok-y); border-color: var(--ok); color: var(--ok); }

/* ═══ ORTAK: ROZETLER ═══════════════════════════════════════════════════
   Tasarimin "ink-stamped badge"i: KESKIN kose (--r1 = 0), Epilogue 900,
   harflenmis, kucuk. Hap seklindeki fis rozetlerinin yerini aliyor. */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--baslik); font-weight: 900;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r1); border: 1px solid transparent; white-space: nowrap;
}
.rozet.aci { background: var(--kotu-y); color: var(--kotu); border-color: var(--kotu-c); }
.rozet.veg { background: var(--ok-y); color: var(--ok); border-color: var(--ok-c); }
.rozet.one { background: var(--metin); color: var(--yuzey); border-color: var(--metin); }
.rozet.alerjen { background: var(--kotu-y); color: var(--kotu); border-color: var(--kotu-c); }
.rozet.eksik { background: var(--uyari-y); color: var(--uyari); border-color: var(--uyari-c); }
/* Urun aktif ama ebeveyn kategorisi kapali — musteri menusunde gorunmuyor
   (panel.js > satirCiz, K bkz. "kategori gizli" notu). "eksik"le ayni siddet:
   acil degil ama isletmenin fark etmesi gereken bir durum. */
.rozet.gizli { background: var(--uyari-y); color: var(--uyari); border-color: var(--uyari-c); }
/* Son tuketim tarihi gecmis urun — yalnizca PANELDE cikar. "eksik"ten daha
   sert: eksik bilgi bekleyebilir, gecmis tarih canli menude yanlis bilgi. */
.rozet.gecmis { background: var(--kotu); color: #fff; border-color: var(--kotu); }

/* ═══ ORTAK: YUKLENIYOR / BOS DURUM ═════════════════════════════════════ */
.durum-kutu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--a2); padding: var(--a8) var(--a3); text-align: center; color: var(--metin3);
  min-height: 240px;
}
.durum-kutu svg { width: 34px; height: 34px; stroke-width: 1.4; opacity: 0.55; }
.durum-kutu h2 {
  font-family: var(--baslik); font-size: 20px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--metin);
}
.durum-kutu p { font-size: 13.5px; max-width: 34ch; }

.donuyor { animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}