/* ============================================================
   ZENA dijital menu panosu
   Hedef donanim: Samsung QHC, 3840x2160 yatay, Tizen 7 / SSSP 10
   ------------------------------------------------------------
   Kurallar:
   - Sabit px yok, olculer vh/vw. Ayni sayfa 43" ve 75"te ayni gorunur.
   - :has(), container query, CSS nesting YOK (Tizen 7 motorunda risk).
   - aspect-ratio yerine padding-top yuzde hilesi (daha genis destek).
   - Etkilesim yok: imlec gizli, hover yok, scroll yok.
   - --olcek: tasma olursa js/pano.js bunu kademeli kucultur.
   ============================================================ */

@import url('font.css');

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* marka - sitenin theme-color'i #465b34 zeytin yesilinden turetildi,
     myzena.com'un gercek CTA butonuyla birebir eslesiyor */
  --marka: #465b34;
  /* Metin/kenarlik/dolgu olarak (bolum basligi, fiyat, secili durum vb.)
     krem zeminde 6.2:1 kontrast icin koyulastirildi - eski #9dc47c koyu
     zeminde parlamak icin ayarlanmisti, acik zeminde solar/okunmazdi. */
  --marka-acik: #4f6a37;

  /* zemin ve yuzeyler - myzena.com'un gercek sicak fildisi zemini.
     Saf beyaz degil: parlaklik yogunlugu dussun, marka sicakligini korusun. */
  --zemin: #faf6ec;
  --zemin-ust: #f1e8d3;
  --yuzey: #f1e8d3;
  --cizgi: rgba(79, 106, 55, 0.18);

  /* metin - saf siyah degil, sicak koyu kahve-yesil */
  --metin: #2f2a1f;
  --metin-soluk: #6b6656;

  /* tasma kontrolu ve sutun sayisi - js/pano.js ayarlar */
  --olcek: 1;
  --sutun: 4;
  --bosluk: calc(2.1vh * var(--olcek));
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--zemin);
}

body.pano {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--metin);
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  /* Ustten cok hafif zeytin vurgusu, alttan sicak taba parlamasi. Duz krem
     zemine gore hafif derinlik veriyor; ikisi de dusuk alfa oldugu icin
     esasen duz bir alan olarak kaliyor (gercek sitenin duz/minimal hissi). */
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(70, 91, 52, 0.05) 0%, rgba(70, 91, 52, 0) 55%),
    radial-gradient(100% 70% at 50% 108%, rgba(241, 232, 211, 0.6) 0%, rgba(241, 232, 211, 0) 60%);
}

/* Ekran disina tasan hicbir sey scrollbar dogurmasin */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- iskelet ---------- */

/* Burn-in kaydirmasi (ADIM 7) bu katmana transform uygular. */
.pano-govde {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 2.6vh 3.2vw 2.2vh;
  overflow: hidden;
  transition: transform 40s linear;
}

.pano-icerik {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

/* Olculebilir ic sarmalayici: .pano-icerik flex + justify-content:center
   oldugu icin kendi scrollHeight'i icerigi yansitmiyor. Tasma ve doluluk
   hesabi bu katmanin offsetHeight'i uzerinden yapiliyor. */
.pano-akis {
  width: 100%;
}

.pano-alt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.2vh;
  margin-top: 0.9vh;
  border-top: 0.16vh solid var(--cizgi);
  font-size: calc(1.3vh * var(--olcek));
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(47, 42, 31, 0.4);
}

.pano-alt .marka {
  color: rgba(79, 106, 55, 0.65);
  letter-spacing: 0.42em;
}

/* ---------- bolum ---------- */

.bolum + .bolum {
  margin-top: 3vh;
}

.bolum-baslik {
  display: flex;
  align-items: center;
  margin: 0 0 1.7vh;
  font-size: calc(3.9vh * var(--olcek));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marka-acik);
  white-space: nowrap;
}

/* Basligin solunda kisa kalin zeytin cubugu - bolum girisini isaretliyor */
.bolum-baslik::before {
  content: "";
  flex: 0 0 auto;
  width: calc(0.62vh * var(--olcek));
  height: calc(3.5vh * var(--olcek));
  margin-right: calc(1.3vh * var(--olcek));
  border-radius: calc(0.31vh * var(--olcek));
  background-color: var(--marka-acik);
}

/* Basligin sagindan silinerek giden ince cizgi */
.bolum-baslik::after {
  content: "";
  flex: 1 1 auto;
  height: 0.18vh;
  margin-left: 1.4vw;
  background-image: linear-gradient(90deg, var(--cizgi), rgba(79, 106, 55, 0));
}

/* ---------- izgara ---------- */

/* Sola hizali: butun bolumler ayni sol kenardan basliyor. Ortalamak, SOUPS
   gibi 2 urunluk bir bolumu 5 sutunluk izgaranin ortasinda bosta asili
   birakiyordu; sola hizalayinca menu panosu gibi duruyor. */
.izgara {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  /* Yatay bosluk --bosluk; kart genisligi hesabi da ayni degiskeni kullaniyor,
     ikisi ayrismasin diye column-gap baska yerde ezilmiyor. Dikey bosluk
     ayri ayarlanabilir (kompakt duzende satirlar sik, sutunlar genis). */
  column-gap: var(--bosluk);
  row-gap: var(--satir-bosluk, var(--bosluk));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kart genisligi sadece --sutun ile belirlenir; --olcek yalnizca yazi
   boyutunu kucultur. Olcegi genislige de uygulamak, sutun sayisini asan
   fazla kartlarin ayni satira sigmasina ve kelimelerin ortadan kirilmasina
   yol aciyordu. */
.kart {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--sutun) - 1) * var(--bosluk)) / var(--sutun));
  max-width: calc((100% - (var(--sutun) - 1) * var(--bosluk)) / var(--sutun));
  min-width: 0;
}

/* ---------- fotografli duzen ---------- */

.kart-gorsel {
  position: relative;
  width: 100%;
  /* 5:3 - kaynak fotograflar 3:2 (1536x1024) ve yemegin ustunde/altinda
     genis bos beyaz var. object-fit:cover ile o bosluk kirpiliyor: yemek
     karede buyuyor, satir basina ~60px dikey yer aciliyor.
     aspect-ratio yerine padding-top yuzdesi: daha genis tarayici destegi. */
  padding-top: 0;
  height: var(--foto-yukseklik, auto);
  padding-bottom: var(--foto-oran, 50%);
  margin-bottom: 1.2vh;
  border-radius: 1.4vh;
  overflow: hidden;
  background-color: var(--yuzey);
  /* Acik zeminde beyaz-fonlu urun fotograflari TV mesafesinden "havada
     asili" gorunebilir - gercek sitenin duz/golgesiz hissini bozmadan,
     yakindan neredeyse fark edilmeyen ince bir sinir + cok hafif golge. */
  box-shadow:
    0 0 0 0.08vh rgba(79, 106, 55, 0.14),
    0 0.6vh 1.6vh rgba(47, 42, 31, 0.06);
}

.kart-gorsel img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kart-ad {
  margin: 0;
  font-size: calc(2.5vh * var(--olcek));
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--metin);
}

.kart-aciklama {
  margin: 0.8vh 0 0;
  font-size: calc(1.62vh * var(--olcek));
  font-weight: 400;
  line-height: 1.34;
  color: var(--metin-soluk);
}

/* margin-top:auto sayesinde fiyat kartin dibine yapisir; ayni siradaki
   kartlar esit yukseklikte oldugu icin fiyatlar hizalanir. */
.kart-fiyat {
  margin-top: auto;
  padding-top: 0.9vh;
  font-size: calc(2.9vh * var(--olcek));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--marka-acik);
  font-variant-numeric: tabular-nums;
}

/* Menu panosu fiyat dizgisi: dolar rakami buyuk, para birimi ve kurus
   kucuk ve yukarida. "$15.85" yerine "$15 85" gibi okunuyor - uzaktan
   bakan musteri once tam sayiyi goruyor. */
.fiyat-birim {
  font-size: 0.6em;
  vertical-align: 0.46em;
  margin-right: 0.05em;
  opacity: 0.8;
}

.fiyat-kurus {
  font-size: 0.66em;
  vertical-align: 0.38em;
  margin-left: 0.07em;
  opacity: 0.92;
}

/* Fotografi olmayan urun (SOMETHING SWEET'te 2 tane var): bos kutu veya
   kirik resim ikonu gosterme, metni kart yuksekliginde ortala. */
.kart--gorselsiz {
  justify-content: center;
}

.kart--gorselsiz .kart-fiyat {
  margin-top: 1.1vh;
}

/* ---------- kompakt duzen (Ekran 4) ----------
   18 urun, 17'sinde fotograf yok, SIP & SAVOR'da fiyat da yok.
   Fotografsiz cok sutunlu liste; ad ile fiyat arasi noktali ayrac. */

/* Sutunlar arasi genis (bitisik sutunlarin noktali ayraclari birbirine
   karismasin), satirlar arasi sik. */
.pano-govde--kompakt {
  --bosluk: calc(3vw * var(--olcek));
  --satir-bosluk: calc(1.7vh * var(--olcek));
}

.kart--kompakt {
  padding-top: calc(0.4vh * var(--olcek));
}

/* Ad ve fiyat ayni satirda; fiyat sagda. Kelime kirilmaz: ad kutuya
   sigmiyorsa sigdir() daha az sutunlu (daha genis) bir duzen secer. Fiyat
   sigmazsa alt satira iner. */
.kompakt-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1vw;
  width: 100%;
  min-width: 0;
}

.kart--kompakt .kart-ad {
  flex: 0 1 auto;
  min-width: 0;
  font-size: calc(3.15vh * var(--olcek));
  font-weight: 600;
}

.kart--kompakt .kart-fiyat {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0 0 0 auto;
  padding-top: 0;
  font-size: calc(3.15vh * var(--olcek));
}

.kart--kompakt .kart-aciklama {
  margin-top: calc(0.6vh * var(--olcek));
  font-size: calc(1.9vh * var(--olcek));
}

/* ---------- tukendi ---------- */

.kart--tukendi {
  opacity: 0.4;
}

.kart--tukendi .kart-ad,
.kart--tukendi .kart-fiyat {
  text-decoration: line-through;
}

.kart--tukendi .kart-gorsel img {
  filter: grayscale(1);
}

.tukendi-etiket {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.7vh 1.6vh;
  border-radius: 0.6vh;
  background-color: rgba(35, 50, 23, 0.85);
  font-size: calc(1.5vh * var(--olcek));
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #faf6ec;
}

/* ---------- ekran secici ----------
   Ilk acilista cikan tam ekran secim sayfasi. Kumandayla kullanilacak:
   ok tuslari, OK, veya dogrudan 1-4. Secim localStorage'a yaziliyor,
   bir daha sorulmuyor. */

.secici {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 6vh 4vw 3vh;
  text-align: center;
}

.secici-ust {
  margin-bottom: 4vh;
}

.secici-marka {
  margin-bottom: 2.4vh;
  font-size: 2vh;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--marka-acik);
}

.secici-baslik {
  margin: 0 0 1.6vh;
  font-size: 5.4vh;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--metin);
}

.secici-yardim {
  margin: 0;
  font-size: 2.1vh;
  font-weight: 400;
  color: var(--metin-soluk);
}

.secici-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.6vw;
  row-gap: 3vh;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.secici-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Rakam ustteki bosluga ortalaniyor, ozet dibe sabit: uc satirlik
     etiketi olan bir kart digerlerinin rakamini yukari kaydirmasin. */
  justify-content: space-between;
  /* 15.5vw: 4 kart tek sirada ortalanir (eski 20vw'daki gorunum), 5-7 kart
     iki sataya sarar (flex-wrap, .secici-liste). Sabit kart sayisina gore
     ayri CSS yazmiyoruz - :has() Tizen 7'de riskli (bkz. dosya basi). */
  flex: 0 1 15.5vw;
  min-height: 24vh;
  padding: 2.4vh 1.4vw;
  border: 0.38vh solid rgba(79, 106, 55, 0.22);
  border-radius: 2.2vh;
  background-color: rgba(255, 255, 255, 0.55);
  /* Vurgu degisimi yumusak olsun; kumandada gezerken ziplama olmasin. */
  transition: border-color 140ms linear, background-color 140ms linear, transform 140ms ease-out;
}

.secici-no {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  font-size: 8.5vh;
  font-weight: 700;
  line-height: 1;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
}

.secici-ozet {
  margin-top: 2vh;
  font-size: 1.85vh;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--metin-soluk);
}

.secici-kart--secili {
  border-color: var(--marka-acik);
  /* Dusuk alfa bilerek: kenarlik + metin rengi zaten "secili" sinyalini
     veriyor, daha yuksek alfa acik zeminde metin kontrastini dusururdu. */
  background-color: rgba(70, 91, 52, 0.15);
  transform: scale(1.06);
}

.secici-kart--secili .secici-no {
  color: var(--marka-acik);
}

.secici-kart--secili .secici-ozet {
  color: var(--metin);
}

.secici-dipnot {
  margin: 3vh 0 0;
  font-size: 1.7vh;
  color: rgba(47, 42, 31, 0.4);
  letter-spacing: 0.04em;
}

/* SYNC WITH TOAST satiri - kartlarin altinda, ▼ tusuyla gecilir. */
.secici-alt {
  margin-top: 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secici-aksiyon {
  padding: 1.6vh 3.4vw;
  border: 0.32vh solid rgba(79, 106, 55, 0.3);
  border-radius: 99vh;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 2.1vh;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marka-acik);
  transition: border-color 140ms linear, background-color 140ms linear, transform 140ms ease-out;
}

.secici-aksiyon--secili {
  border-color: var(--marka-acik);
  background-color: rgba(70, 91, 52, 0.15);
  transform: scale(1.05);
  color: var(--metin);
}

.secici-durum {
  margin: 1.6vh 0 0;
  min-height: 2.4vh;
  font-size: 1.9vh;
  color: var(--metin-soluk);
}

/* GECICI TANI satiri (0 tusu sorunu) - sorun cozulunce silinecek */
.secici-tani {
  margin: 2vh 0 0;
  font-size: 1.6vh;
  font-family: monospace;
  color: rgba(47, 42, 31, 0.55);
}

/* 0 tusu basili tutulurken dolan cubuk - kazara basildiginda ne oldugu
   anlasilsin, 5 saniye dolmadan birakilabilsin. */
.sifirlama-cubuk {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.7vh;
  background-color: rgba(79, 106, 55, 0.16);
  z-index: 10;
}

.sifirlama-cubuk i {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--marka-acik);
}

/* ---------- bowl-adimlari duzen (Ekran 5) ----------
   Toast POS'tan gelen taban/protein/topping/sos adimlarini tek tek,
   kademeli acilan bir donguyle gosterir (js/bowl.js). Izgara/sigdir()
   kullanilmiyor - panoCiz() bu duzeni gormeden dogrudan yonlendiriyor.
   Koyu-zeytin cerceve korunuyor (marka butunlugu), her adima ozel vurgu
   tonu data-renk ozniteligiyle geliyor - sadece bu blok icinde scoped,
   global --marka/--metin tokenlarina dokunulmuyor. */

.pano-govde--bowl-adimlari {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 4vh 6vw 2.2vh;
  overflow: hidden;
}

/* Akdeniz toprak tonlari - hepsi krem zeminde okunur kontrasta ayarlandi
   (bkz. plan). "mor" adi JS'ten geliyor (RENK_PALETI dizisi), ama artik
   sarap/kiremit kizili bir ton - zeytin/kiremit paletiyle uyumlu, marka
   diline yabanci mor kaldirildi. */
.pano-govde--bowl-adimlari [data-renk="altin"] { --bowl-vurgu: #8a6a1f; }
.pano-govde--bowl-adimlari [data-renk="kiremit"] { --bowl-vurgu: #a8532f; }
.pano-govde--bowl-adimlari [data-renk="yaprak"] { --bowl-vurgu: #5f6e28; }
.pano-govde--bowl-adimlari [data-renk="krem"] { --bowl-vurgu: #7a6a4f; }
.pano-govde--bowl-adimlari [data-renk="mor"] { --bowl-vurgu: #8a3b3a; }

.bowl-ust {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 3vh;
}

.bowl-marka {
  display: block;
  margin-bottom: 1vh;
  font-size: 1.9vh;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--marka-acik);
}

.bowl-baslik {
  margin: 0;
  font-size: 5.6vh;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--metin);
}

.bowl-alt-baslik {
  margin: 1vh 0 0;
  font-size: 1.9vh;
  font-weight: 500;
  color: var(--metin-soluk);
}

.bowl-rail {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 2.4vw;
  margin-bottom: 4vh;
}

.bowl-rail-adim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vh;
  padding-bottom: 1.6vh;
  border-bottom: 0.3vh solid rgba(79, 106, 55, 0.2);
  color: var(--metin-soluk);
  opacity: 0.55;
  transition: opacity 400ms ease, border-color 400ms ease, color 400ms ease;
}

.bowl-rail-adim--aktif {
  opacity: 1;
  color: var(--bowl-vurgu);
  border-color: var(--bowl-vurgu);
}

.bowl-rail-no {
  font-size: 2.2vh;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bowl-rail-ad {
  font-size: 1.7vh;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bowl-sahne {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bowl-adim-govde {
  width: 100%;
  text-align: center;
}

.bowl-adim-baslik {
  margin: 0 0 1vh;
  font-size: 6.4vh;
  font-weight: 700;
  color: var(--bowl-vurgu);
}

.bowl-adim-ipucu {
  margin: 0 0 3vh;
  font-size: 2vh;
  color: var(--metin-soluk);
}

.bowl-secenekler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6vh 1.4vw;
  margin: 3vh 0 0;
  padding: 0;
  list-style: none;
}

.bowl-secenek {
  display: flex;
  align-items: baseline;
  gap: 0.9vw;
  padding: 1.6vh 2.4vw;
  border: 0.16vh solid rgba(79, 106, 55, 0.25);
  border-radius: 99vh;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(1.6vh);
  animation: zena-adim-gir 520ms ease-out both;
}

.bowl-secenek-ad {
  font-size: 2.6vh;
  font-weight: 600;
  color: var(--metin);
}

.bowl-secenek-fiyat {
  font-size: 2vh;
  font-weight: 700;
  color: var(--bowl-vurgu);
  font-variant-numeric: tabular-nums;
}

@keyframes zena-adim-gir {
  to { opacity: 1; transform: translateY(0); }
}

/* Rail+sahne'yi saran satir - .bowl-ust (baslik) ve footer bundan AYRI
   kaliyor ki gorsel paneli eklenince sadece bu ic satir row olsun, baslik
   tam genislikte ortalanmis kalsin. Varsayilan: eski davranisla ayni
   (dikey, tam genislik). Gorsel yuklenebilirse (bkz. js/bowl.js
   onload/onerror kapisi) --split eklenir. */
.bowl-govde {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.bowl-govde--split {
  flex-direction: row;
  align-items: stretch;
  gap: 4vw;
}

.bowl-govde--split .bowl-icerik {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* min-width:0 sadece .bowl-icerik'te yetmiyor - .bowl-sahne de ic flex
   baglaminda kendi min-content genisligine gore tasabiliyordu.
   ONEMLI BULGU (canli ekran goruntusuyle tespit edildi): asil tasma sebebi
   genislik degil YUKSEKLIKTI - Mains/Dip&Spread gibi 8, Toppings gibi 20
   secenekli adimlarda pilller dar sutunda tek sutuna dusuyor (uzun metin,
   satir basina 1 tane), toplam yukseklik .bowl-sahne'nin alanini asiyor,
   ve .bowl-sahne'nin align-items:center'i tasan icerigi YUKARI dogru da
   tasiriyor - rail'in ustune biniyordu. Ust hizalama + belirgin kucultulmus
   olculer bunu onluyor; en agir senaryo (Toppings, 20 secenek) ile
   dogrulandi. */
.bowl-govde--split .bowl-rail,
.bowl-govde--split .bowl-sahne {
  min-width: 0;
}

.bowl-govde--split .bowl-rail {
  justify-content: flex-start;
  gap: 1.4vw;
  margin-bottom: 2.4vh;
}

.bowl-govde--split .bowl-rail-ad {
  font-size: 1.4vh;
}

.bowl-govde--split .bowl-sahne {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.bowl-govde--split .bowl-adim-govde {
  text-align: left;
}

.bowl-govde--split .bowl-adim-baslik {
  margin-bottom: 0.4vh;
  font-size: 3.4vh;
}

.bowl-govde--split .bowl-adim-ipucu {
  margin-bottom: 1.6vh;
  font-size: 1.7vh;
}

.bowl-govde--split .bowl-secenekler {
  justify-content: flex-start;
  gap: 1vh 0.9vw;
  margin-top: 0;
}

.bowl-govde--split .bowl-secenek {
  padding: 1vh 1.6vw;
}

.bowl-govde--split .bowl-secenek-ad {
  font-size: 1.9vh;
}

.bowl-govde--split .bowl-secenek-fiyat {
  font-size: 1.5vh;
}

.bowl-gorsel-panel {
  flex: 0 0 30vw;
  height: 100%;
  border-radius: 2vh;
  overflow: hidden;
  background-color: var(--yuzey);
  box-shadow:
    0 0 0 0.08vh rgba(79, 106, 55, 0.14),
    0 0.8vh 2vh rgba(47, 42, 31, 0.08);
}

.bowl-gorsel-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bowl-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 4vh;
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--marka-acik);
}

/* ---------- reklam-dikey duzen (Ekran 6/7) ----------
   Dikey (portrait) monte TV'ler icin menu DEGIL, tanitim slayti.
   Izgara/sigdir() kullanilmiyor - panoCiz() bu duzeni gormeden dogrudan
   js/reklam.js'e yonlendiriyor. OS zaten 90 derece dondurdugu icin burada
   sabit bir orientation medya sorgusu yok, hep vh/vw. */

.pano-govde--reklam-dikey {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background-color: var(--zemin);
}

.reklam-slayt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity var(--kb-gecis, 1400ms) ease-in-out;
}

.reklam-slayt.aktif {
  opacity: 1;
  z-index: 1;
}

/* Kaynak fotograflar zaten 5:3 kirpilmis (bkz. .kart-gorsel yorumu yukarida);
   dikey ekranda tekrar object-fit:cover ile kirpmak yemegi/tabagi kesebilir.
   Bulanik arka plan hilesi: ayni gorselin buyutulmus/bulanik kopyasi arkada
   bosluk doldurur, onde net (contain) kopya hicbir sey kaybetmez - ek
   asset/istek gerekmez, kuratorluk emegi de. */
.reklam-arkaplan {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.reklam-arkaplan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6vh) brightness(0.55) saturate(1.15);
  transform: scale(1.18);
}

.reklam-gorsel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reklam-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ken Burns: yavas zoom, slayt bazinda yon degisir ki dizinin tamami ayni
   yonde "nefes almasin". Sure JS'ten --kb-sure ile gelir (ekran 6/7'nin
   config.json > reklamGosterisi.sure degeri). */
@keyframes zena-kb-icin {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

@keyframes zena-kb-disin {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

.reklam-slayt--icin.aktif .reklam-gorsel img {
  animation: zena-kb-icin var(--kb-sure, 9000ms) ease-out forwards;
}

.reklam-slayt--disin.aktif .reklam-gorsel img {
  animation: zena-kb-disin var(--kb-sure, 9000ms) ease-out forwards;
}

.reklam-metin {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 5vh 5vw 7vh;
  /* Soguk siyah degil, marka-uyumlu koyu zeytin - foto uzerindeki metin
     okunurlugu icin hala yeterince koyu, ama diger ekranlarla ayni dilde. */
  background-image: linear-gradient(180deg,
    rgba(35, 50, 23, 0) 0%,
    rgba(35, 50, 23, 0.86) 62%,
    rgba(35, 50, 23, 0.96) 100%);
}

/* .bowl-marka ile ayni dil - reklam-dikey ekranlarinda hic kalici marka
   isareti yoktu, digerleriyle tutarlilik icin. Foto katmanina degil,
   .reklam-metin'in garanti-koyu gradyanina biniyor (okunurluk garantili). */
.reklam-marka {
  display: block;
  margin-bottom: 1vh;
  font-size: 1.7vh;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #cbd9bb;
}

/* Metin girisleri kademeli - .aktif altinda tanimli, boylece her slayt
   tekrar aktif oldugunda animasyon yeniden baslar (siniftan cikip tekrar
   girmek yeniden tetikler).

   ONEMLI: bu ekran hala fotograf uzerinde KOYU bir gradyan kullaniyor
   (.reklam-metin), sayfa genelindeki acik temaya ragmen - o yuzden burada
   var(--metin)/var(--marka-acik) KULLANILMIYOR (onlar artik acik zeminde
   okunsun diye koyulastirildi, bu koyu gradyanda kaybolurlardi). Sabit
   acik renkler bilerek: eski koyu-tema tonlariyla ayni mantik. */
.reklam-ad,
.reklam-aciklama,
.reklam-fiyat {
  margin: 0;
  opacity: 0;
  transform: translateY(1.4vh);
}

.reklam-ad {
  font-size: 5.4vh;
  font-weight: 700;
  line-height: 1.08;
  color: #faf6ec;
}

.reklam-aciklama {
  margin-top: 1.6vh;
  font-size: 2.6vh;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(250, 246, 236, 0.78);
}

.reklam-fiyat {
  margin-top: 2vh;
  font-size: 4.6vh;
  font-weight: 700;
  color: #b3cf8f;
  font-variant-numeric: tabular-nums;
}

.aktif .reklam-ad {
  animation: zena-metin-gir 600ms ease-out 300ms forwards;
}

.aktif .reklam-aciklama {
  animation: zena-metin-gir 600ms ease-out 480ms forwards;
}

.aktif .reklam-fiyat {
  animation: zena-metin-gir 600ms ease-out 660ms forwards;
}

@keyframes zena-metin-gir {
  to { opacity: 1; transform: translateY(0); }
}

.reklam-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 4vh;
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--marka-acik);
}

/* ---------- hata / bos durum ----------
   Ekranda asla ham hata mesaji gosterilmez; bu sadece onizleme ve
   gelistirme icin, pano modunda js gizli tutar. */

.pano-uyari {
  position: absolute;
  left: 3.2vw;
  bottom: 2.6vh;
  font-size: calc(1.2vh * var(--olcek));
  color: rgba(47, 42, 31, 0.3);
  letter-spacing: 0.1em;
}

/* Ekran 2: ana kategori solda, tamamlayici kategoriler sagda.
   Her urunun fotografi ve adi/fiyati ayni satirda, TV mesafesinde okunur. */
.pano-govde--fotografli-bolmeli .pano-akis {
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: repeat(var(--yan-bolum), minmax(0, 1fr));
  gap: 3vh 3vw;
}
.pano-govde--fotografli-bolmeli .bolum {
  min-height: 0;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.pano-govde--fotografli-bolmeli .bolum:first-child {
  grid-column: 1;
  grid-row: 1 / span var(--yan-bolum);
  border-right: 0.12vw solid var(--cizgi);
  padding-right: 2.4vw;
}
.pano-govde--fotografli-bolmeli .bolum:not(:first-child) { grid-column: 2; }
.pano-govde--fotografli-bolmeli .bolum-baslik {
  flex: 0 0 auto;
  font-size: calc(3.7vh * var(--olcek));
  margin-bottom: 2vh;
}
.pano-govde--fotografli-bolmeli .izgara {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--bolum-satir), minmax(0, 1fr));
  gap: 2vh;
}
.pano-govde--fotografli-bolmeli .kart {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.5vw;
  max-width: none;
  min-height: 0;
  padding: 1.2vh 1vw;
  border-radius: 1.5vh;
  background: rgba(241, 232, 211, 0.55);
}
.pano-govde--fotografli-bolmeli .kart-gorsel {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}
.pano-govde--fotografli-bolmeli .kart-gorsel img { object-fit: contain; }
.pano-govde--fotografli-bolmeli .kart-ad {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: calc(3.05vh * var(--olcek));
  line-height: 1.15;
  overflow-wrap: break-word;
}
.pano-govde--fotografli-bolmeli .kart-fiyat {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  padding-top: 1.4vh;
  font-size: calc(4.1vh * var(--olcek));
}
.pano-govde--fotografli-bolmeli .kart--gorselsiz .kart-ad,
.pano-govde--fotografli-bolmeli .kart--gorselsiz .kart-fiyat { grid-column: 1 / 3; }