/* ═══════════════════════════════════════════════════════════════════════════
   MUSTERI MENUSU — "VITRIN" TEMASI

   Yerlesim kaynagi: https://v3.menumpro.com/payn_menu (theme-classic).
   Fikir: menu bir LISTE degil bir VITRIN. Musteri once 38 kategori afisini
   goruyor (her biri o kategorinin gercek bir fotografini tasiyor), dokununca
   akordiyon aciliyor ve 2 sutunlu urun izgarasi geliyor.

   ★ REFERANSTAN ALINAN: yerlesim ve etkilesim.
       kategori afisi 110px + koyu perde + ortada buyuk beyaz ad
       2 sutunlu urun izgarasi, kart ustunde 1:1 kare fotograf
       hero'ya binen yuvarlak arama kutusu + yaninda yasal uyari dugmesi
       yuzen hap bicimli alt cubuk, kaydirinca kuculuyor
   ★ REFERANSTAN ALINMAYAN: renk ve tipografi.
       Referans Poppins + #f8f9fa + #C62828 krem aksan kullaniyor.
       Big Mamma's'in kendi paleti ve YEREL fontlari korundu; boylece
       baglanti sayfasiyla (bigmammas.projecttabletap.com) ve panelle ayni
       aileden kaliyor ve CSP font-src 'self' icin yeni font indirmek
       gerekmiyor.

   ★★ BU DOSYA tema.css'IN "ANTI-PARLAKLIK" KURALINA BILEREK UYMUYOR.
      tema.css'in basligi blur/degrade/yumusak golge YASAKLIYOR — o kural
      "Smoked Paper & Press" temasinin belkemigi ve O TEMA ICIN dogru.
      Vitrin'in referans yerlesimi ise yumusak golge + yuvarlak kose uzerine
      kurulu; kartlar kagida basilmis degil, vitrinde duran nesneler.
      Iki dosya CELISKILI DEGIL, iki ayri temanin kurallari.

   ! tema.css DEGISTIRILMEDI ve degistirilmeyecek: PANEL de onu yukluyor
     (public/panel/index.html). Buradaki :root bloğu yalnizca menu
     sayfasinda yuklendigi icin paneli hic gormuyor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ VITRIN PALETI ════════════════════════════════════════════════════════
   tema.css'in tokenlarini EZIYOR, silmiyor: tanimlanmayan her sey
   (anlam renkleri, --marka/--baslik/--govde/--kod fontlari, --a* araliklari)
   oradan gelmeye devam ediyor. */
:root {
  /* ── Zeminler ──
     Referansin sogugu (#f8f9fa) yerine Big Mamma's kagit ailesinden sicak
     notrler. Kart zemini saf beyaz DEGIL (#fffdf8): 276 fotografin yaninda
     saf beyaz soguk bir delik gibi duruyordu. */
  --v-zemin: #efeae0;
  --v-kart: #fffdf8;
  --v-girinti: #e8e1d3;   /* fotografsiz kare, ic girintiler */

  --v-metin: #241f1d;
  --v-metin2: #5a4f49;
  /* ★ ONCEDEN #786a60 — kart zemininde (--v-kart) 5.12:1 GECERLI ama
       dogrudan sayfa zeminine (--v-zemin) oturan yerlerde (ör. yasal metin,
       arama sonucu ozeti, "Popüler Lezzetler" adet etiketi) 4.35:1 idi ve
       WCAG AA'nin 4.5:1 sinirinin ALTINDA kaliyordu. Bu deger 5.3:1'e
       cikariyor — kartta da sayfada da gecerli, iki kullanim icin ayri
       token acmaya gerek kalmiyor. */
  --v-metin3: #6b5d53;
  --v-cizgi: #e3dbcc;

  /* IKI KIRMIZI, tema.css'teki ayrimin aynisi:
       --v-fiyat  kagit uzerinde 4.76:1 — kucuk puntoda GECERLI
       --v-marka  3.84:1 — YALNIZCA >=24px blok ve tam zeminli seritler */
  --v-fiyat: #d01d22;
  --v-marka: #ed1f24;

  /* Afis fotografinin uzerindeki perde. 0.50 referanstakiyle ayni deger;
     beyaz baslik icin 4.5:1'i her fotografta gecmenin tek garantisi. */
  --v-perde: rgba(36, 31, 29, 0.50);

  /* ★ YUVARLAKLIK EZILIYOR. tema.css "giyotinle kesilmis gazete" diyor ve
       --r1/--r2/--r3 = 0/4/8. Vitrin'in dili bunun tersi. */
  --r1: 8px; --r2: 12px; --r3: 15px;
  --v-hap: 999px;

  /* ★ YUMUSAK GOLGE GERI GELIYOR (yalnizca bu temada). */
  --v-golge: 0 2px 8px rgba(36, 31, 29, 0.08);
  --v-golge-h: 0 6px 16px rgba(36, 31, 29, 0.14);
  --v-golge-cubuk: 0 6px 20px rgba(36, 31, 29, 0.18);

  --v-ust: 56px;          /* secim listesi ekraninin yapiskan ust cubugu (.d-ust) */
  /* Marka bandi yuksekligi — mobilde 70, >=441px'te 90 (K-AS). --v-ust'tan
     AYRILDI: .d-ust (secim listesi) da o degiskeni kullaniyor. Kaydirma hedefleri (scroll-padding, yasal baslik) bandin
     altina otursun diye ONLAR bu degiskeni kullaniyor. */
  --v-bant-y: 70px;
  --v-cubuk-alan: 92px;   /* yuzen cubugun altta biraktigi guvenli alan */
}

/* ═══ TEMEL ═══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* ★ Kaydirma hedefi yapiskan bandin ALTINA otursun. Kategori acildiginda
     afisi tepeye kaydiriyoruz; bu olmadan afis bandin arkasinda kalirdi. */
html { scroll-padding-top: calc(var(--v-bant-y) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--v-zemin);
  color: var(--v-metin);
  overscroll-behavior-y: none;
}

/* ★ #uyg ARTIK TAM EKRAN KAP DEGIL. Fis ve kagit temalarinda
     `height: 100dvh` + ic kaydirma kaplari vardi (yatay sayfa cevirme icin
     sart). Vitrin tek uzun dikey sayfa: kaydirma BELGENIN kendisinde.
     Bu sayede yuzen alt cubuk `position: fixed` ile dogru calisiyor ve
     iOS Safari'nin adres cubugu hareketi ic kaydirma kabini kirpmiyor. */
#uyg {
  max-width: 560px;
  margin: 0 auto;
  background: var(--v-zemin);
  position: relative;
  min-height: 100dvh;
  padding-bottom: var(--v-cubuk-alan);
}

/* ═══ MARKA BANDI (yapiskan ust cubuk) — GORSEL (K-AS) ═════════════════════
   Arka plan: /gorsel/big-mammas-istanbul-header.png (2073x758, oran 2.735).
   Marka yazisi ve "— THE ISTANBUL —" GORSELIN ICINDE; bantta gorunur yazi
   yok, h1 gizli-oku ile DOM'da (menu.js).

   ★ KONUM OLCULDU, TAHMIN EDILMEDI. Gorseldeki beyaz piksellerin sinir
     kutusu (sharp, ham piksel):
         yatay %21.5 - %98.1      dikey %33.9 - %72.4  (orta ≈ %53)
     Bant gorselden cok daha genis oldugu icin `cover` gorseli GENISLIGE
     gore olcekliyor: YATAYDA HIC KIRPMA YOK, yalnizca ust/alt kirpiliyor.
     Yani ayarlanan tek sey DIKEY konum; yazilarin ortasi bandin ortasina
     gelsin diye %50 degil ~%56.

   ★★ 70px'LIK MOBIL BANT ~497px'TEN GENIS EKRANDA YAZIYI KESERDI (hesap).
      Gorunen dikey pay = bant yuksekligi / (genislik / 2.735). Yazilar
      gorselin %38.5'ini kapliyor; 70px'te bu pay 497px genislikte %38.5'e
      iniyor, daha genisinde yazinin ustu/alti kirpilir. Bu yuzden 90px'e
      gecis bilinen masaustu kirilimi 561px'te DEGIL, 441px'te: en genis
      telefon (440px) hala 70px, 441-560 arasi 90px.
   OLCULEN yazi-kenar boslugu, ust/alt px (araclar/bak.mjs, gercek Chrome):
      320x70  13.5/11.5    375x70  9/8     430x70  4.5/4.5   440x70  4/4
      441x90  15.5/12.5    500x90  10.5/9  560x90  6/5  (masaustu hep 560)
   ! Gorsel degisirse sinir kutusunu yeniden olc (NOTLAR K-AS) ve
     `node araclar/bak.mjs /bigmammas <genislik>` ile dogrula. */
.v-bant {
  position: sticky; top: 0; z-index: 40;
  height: var(--v-bant-y);
  /* Gorsel inene kadar (1.8 MB) ya da inmezse bos bir delik kalmasin:
     gorselin kenar rengi. Parlak --v-marka DEGIL — gorselin ustunde
     "kirmizi zemin + gorsel" tekrari olusturmasin. */
  background-color: #5e0703;
  background-image: url("/gorsel/big-mammas-istanbul-header.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 56%;
}
@media (min-width: 441px) {
  :root { --v-bant-y: 90px; }
  .v-bant { background-position: center 55.5%; }
}

/* ═══ HERO (kapak fotografi — bugun YOK) ═══════════════════════════════════
   isletme.kapak null oldugu icin menu.js bu blogu hic cizmiyor. Kural
   yine de duruyor ki alan bir gun dolunca tasarim hazir olsun. */
.v-hero { position: relative; background: var(--v-girinti); }
.v-hero img {
  display: block; width: 100%; height: 220px; object-fit: cover;
  border-radius: 0 0 var(--r3) var(--r3);
}
@media (min-width: 561px) { .v-hero img { height: 280px; } }

/* ═══ ARAMA SATIRI ═════════════════════════════════════════════════════════
   Referansta hero'nun uzerine -20px biniyor. Hero yoksa binecek bir sey de
   yok; normal akista duruyor. Iki durumu da tek kural cifti cozuyor. */
.v-ara-sat {
  display: flex; gap: 10px;
  padding: var(--a2);
  position: relative; z-index: 10;
}
.v-hero + .v-ara-sat { margin-top: -20px; padding-top: 0; }

.v-ara-kutu { flex: 1; position: relative; min-width: 0; }
.v-ara-kutu svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; stroke-width: 2;
  color: var(--v-metin3); pointer-events: none;
}
.v-ara-kutu input {
  width: 100%; border: none; border-radius: var(--r2);
  padding: 13px 14px 13px 42px;
  background: var(--v-kart); color: var(--v-metin);
  font-family: var(--govde); font-size: 15px;
  box-shadow: var(--v-golge);
}
.v-ara-kutu input::placeholder { color: var(--v-metin3); }
.v-ara-kutu input:focus-visible { outline: 2px solid var(--v-fiyat); outline-offset: 1px; }
/* Safari'nin kendi temizleme carpisi kutunun sagini bozuyordu. */
.v-ara-kutu input::-webkit-search-decoration,
.v-ara-kutu input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Yasal uyari + filtre dugmeleri: arama kutusuyla ayni yukseklikte kare. */
.v-yan-dg {
  flex: 0 0 auto; width: 48px; height: 48px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r2);
  background: var(--v-kart); color: var(--v-metin2);
  box-shadow: var(--v-golge); transition: var(--gecis);
  position: relative;
}
.v-yan-dg:hover { color: var(--v-fiyat); box-shadow: var(--v-golge-h); }
.v-yan-dg.acik { background: var(--v-fiyat); color: #fff; }
.v-yan-dg svg { width: 19px; height: 19px; stroke-width: 2; }
.v-yan-dg .say {
  position: absolute; top: 5px; right: 5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--v-hap); background: var(--v-fiyat); color: #fff;
  font-family: var(--kod); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.v-yan-dg.acik .say { background: #fff; color: var(--v-fiyat); }

/* (Yasal bilgi paneli buradaydi — K-AR ile sayfa sonuna tasindi, bkz. .v-dip) */

/* ═══ FILTRE PANELI ════════════════════════════════════════════════════════
   Big Mamma's'ta alerjen ve etiket SIFIR oldugu icin menu.js bu blogu hic
   cizmiyor (bos filtre bolumu cizmeme kurali). Kural, sistemin diger
   kiracilari icin duruyor. */
.v-filtre {
  margin: 0 var(--a2) var(--a2);
  background: var(--v-kart); border-radius: var(--r2);
  box-shadow: var(--v-golge); padding: 16px;
}
.filtre-b + .filtre-b, .filtre-not + .filtre-b { margin-top: 14px; }
.filtre-b h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--v-metin3); font-weight: 700; margin-bottom: 8px;
}
/* Alerjen secilince: filtre yalnizca isaretli urunu gizler (K-AU). */
.filtre-not {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 10px;
  font-size: 12px; line-height: 1.45; color: var(--v-metin2);
}
.filtre-not svg { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 auto; margin-top: 1px; color: var(--v-fiyat); }
.filtre-temizle {
  margin-top: 14px; width: 100%; padding: 10px;
  font-size: 12px; font-weight: 700; color: var(--v-metin2);
  background: var(--v-girinti); border: none; border-radius: var(--r1);
}
.filtre-temizle:hover { color: var(--v-fiyat); }

/* ═══ POPULER LEZZETLER ════════════════════════════════════════════════════
   Arama satirinin altindaki yatay serit. Kaynak veri ve "hangi urun populer"
   karari menu.js > populerCiz basindaki notta.

   ★ NEDEN YATAY: bolum kategori afislerinin USTUNDE duruyor ve onlari asagi
     itiyor. 2 sutunlu bir izgara olsaydi 8 urun 4 satir, ~700px eder ve
     menunun kendisi (38 afis) ilk ekranda hic gorunmezdi. Yatay serit
     dikeyde tek kart yuksekligi kadar yer kapliyor.

   ★ scroll-snap: kart kenarlari hep hizali duruyor, serit "yarim kart"
     gostererek durmuyor. proximity DEGIL mandatory: 8 kartlik kisa bir
     seritte proximity cogu kaydirmada hic yakalamiyor.
   ! Kabin `scroll-behavior`u YOK (html'deki smooth miras GECMEZ, ozellik
     kalitsal degil) — menu.js konumu `scrollLeft` atamasiyla geri koyuyor
     ve o atama aninda calisiyor.                                           */
.v-pop { padding: 4px var(--a2) 0; }

.v-pop-basi {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-family: var(--baslik); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--v-metin);
}
.v-pop-basi svg {
  width: 16px; height: 16px; stroke-width: 1.9;
  color: var(--v-fiyat); flex: 0 0 auto;
}
/* Cizgi basligi seridin genisligine bagliyor — afis listesiyle ayni dil
   (bkz. .v-sonuc-basi::after). */
.v-pop-basi::after { content: ""; flex: 1; height: 1px; background: var(--v-cizgi); }
.v-pop-basi em {
  font-family: var(--kod); font-style: normal; font-size: 10.5px;
  font-weight: 700; color: var(--v-metin3); flex: 0 0 auto;
}

.v-pop-seri {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Golgeler kirpilmasin diye dikeyde nefes payi; yatayda kap kenarina
     kadar kaydirilabilsin diye NEGATIF margin + ayni kadar padding
     ("kenardan kenara kaydirma" deseni). */
  padding: 3px var(--a2) 10px;
  margin: 0 calc(-1 * var(--a2));
  /* ★★ BU SATIR OLMADAN ILK KART BASLIKTAN 16px SOLA KACIYOR.
       Kaydirma "snapport"u kabin PADDING kutusudur, content kutusu degil;
       `scroll-snap-align: start` ilk karti padding kutusunun basina
       hizalamak icin tarayici seridi acilista 16px kaydiriyor ve yukaridaki
       padding-left'i fiilen IPTAL ediyor. scroll-padding snapport'u iceri
       cekiyor, boylece "start" icerik kenari oluyor.
     Olculdu (araclar/bak.mjs > serit.ilkKartBasliktanFark): once -16,
       simdi 0. Gozle de gorunuyordu ama olcum olmadan sebebi bulunamazdi. */
  scroll-padding-inline: var(--a2);
  scrollbar-width: none;
}
.v-pop-seri::-webkit-scrollbar { display: none; }

.v-pop-kart {
  flex: 0 0 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: left;
  background: var(--v-kart); border: none; border-radius: var(--r2);
  overflow: hidden; box-shadow: var(--v-golge); cursor: pointer;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.v-pop-kart:hover { box-shadow: var(--v-golge-h); transform: translateY(-2px); }
.v-pop-kart:active { transform: translateY(0); }

/* Kare fotograf: izgara kartiyla AYNI sozlesme (.var / .gorselsiz) —
   yoksa ya da duserse kategori ikonu geliyor. */
.v-pop-kare {
  width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--v-girinti); color: var(--v-metin3); overflow: hidden;
}
.v-pop-kare > * { grid-area: 1 / 1; }
.v-pop-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-pop-kare svg { width: 30px; height: 30px; stroke-width: 1.3; opacity: 0.55; }
.v-pop-kare.var:not(.gorselsiz) svg { display: none; }

.v-pop-ic { padding: 8px 9px 9px; display: flex; flex-direction: column; flex: 1; }
.v-pop-ad {
  font-family: var(--baslik); font-size: 12.5px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Izgara kartiyla ayni gerekce: fiyat kartin DIBINE yapisiyor, boylece adi
   tek satir olan kartla iki satir olan kartin fiyatlari ayni hizada.
   ! SOLA dayali — izgara kartinda (.v-kart-fiyat) SAGA dayali ve bu bilerek
     boyle: 132px'lik kartta aciklama satiri yok, fiyati saga atmak adla
     arasinda okunmayi zorlastiran bir bosluk birakiyordu. Ikisi ayni ekranda
     yan yana gelmiyor (kategori acilinca serit ekran disinda kaliyor). */
.v-pop-fiyat {
  margin-top: auto; font-family: var(--kod); font-size: 13px; font-weight: 700;
  color: var(--v-fiyat);
}

/* ═══ KATEGORI AFISI (akordiyon tetigi) ════════════════════════════════════
   Referansin imza ogesi. 110px fotograf + koyu perde + ortada beyaz ad.

   ★ FOTOGRAF NEREDEN GELIYOR: menu_getir kategori fotografi DONDURMUYOR
     (kategoriler: {id, ad, ikon}) ve panele yeni bir alan eklemek "kontrol
     paneli ayni dursun" kuralini bozardi. Cozum: kategorinin ILK FOTOGRAFLI
     URUNUNUN fotografi (menu.js > katIlkGorsel). 38 kategorinin 34'unde bir
     fotograf var; kalan 4'u asagidaki .yalin dalina dusuyor. */
.v-kat-liste { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--a2); }

.v-kat-afis {
  position: relative; display: block; width: 100%;
  height: 110px; border-radius: var(--r3); overflow: hidden;
  border: none; background: var(--v-girinti);
  box-shadow: var(--v-golge); cursor: pointer;
  transition: box-shadow var(--gecis), transform var(--gecis);
  text-align: center;
}
.v-kat-afis:hover { box-shadow: var(--v-golge-h); }
.v-kat-afis:active { transform: scale(0.985); }
.v-kat-afis img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.4s ease;
}
.v-kat-afis:hover img { transform: scale(1.05); }
/* Perde: beyaz basligin her fotograf uzerinde okunmasinin tek garantisi. */
.v-kat-afis::before {
  content: ""; position: absolute; inset: 0;
  background: var(--v-perde); z-index: 1; transition: background var(--gecis);
}
.v-kat-afis[aria-expanded="true"]::before { background: rgba(36, 31, 29, 0.62); }

.v-kat-ad {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: calc(100% - 72px);
  font-family: var(--baslik); font-weight: 800;
  font-size: 20px; line-height: 1.15; letter-spacing: 0.02em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  text-wrap: balance;
}
/* Uzun kategori adi ("İçinizi Serinletecek Lezzetler") 110px'i tasiriyordu. */
.v-kat-ad { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Urun sayisi + akordiyon oku: sag kenarda, adin disinda. */
.v-kat-sag {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 2; display: flex; align-items: center; gap: 6px; color: #fff;
}
.v-kat-say {
  font-family: var(--kod); font-size: 11px; font-weight: 700;
  font-style: normal; opacity: 0.9;
}
/* Kategorinin TUM urunleri tukenmisse sayi yerine cikan rozet — "12 ürün"
   yazip acilinca hepsinin gri cikmasindan iyi. Urun kartindaki "Bugün yok"
   rozetiyle ayni dil (--v-fiyat zemin, beyaz yazi). */
.v-kat-tukendi {
  font-family: var(--kod); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; font-style: normal;
  background: var(--v-fiyat); color: #fff;
  padding: 3px 7px; border-radius: var(--r1);
}
.v-kat-afis.tukendi img { filter: grayscale(0.6); opacity: 0.75; }
.v-kat-sag svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform var(--gecis); }
.v-kat-afis[aria-expanded="true"] .v-kat-sag svg { transform: rotate(180deg); }

/* ── Fotografsiz kategori ──
   4 kategoride hic urun fotografi yok. Bos gri bir kutu yerine tam zeminli
   marka serodi + kategori ikonu: kategori zayif degil, FARKLI gorunuyor. */
.v-kat-afis.yalin { background: var(--v-marka); }
.v-kat-afis.yalin::before { background: none; }
.v-kat-afis.yalin .v-kat-ikon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 2; color: #fff; opacity: 0.9;
}
.v-kat-afis.yalin .v-kat-ikon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.v-kat-afis.yalin .v-kat-ad {
  left: 62px; transform: translateY(-50%); text-align: left;
  width: calc(100% - 120px); text-shadow: none;
}

/* ═══ URUN IZGARASI ════════════════════════════════════════════════════════ */
.v-bolum { margin-top: 12px; }
/* ★ content-visibility + contain-intrinsic-size BIRLIKTE olmak zorunda.
     Yalnizca content-visibility verilirse cizilmemis bolumler 0 yukseklik
     olcuyor, kaydirma cubugu zipliyor ve kategoriye kaydirma yanlis yere
     dusuyor. Deger bir tahmin: 2 sutun x ~250px kart. */
.v-bolum.gizlenebilir { content-visibility: auto; contain-intrinsic-size: auto 620px; }

/* ★ HER GENISLIKTE 2 SUTUN. Once >=561px'te 3 sutuna cikiyordu ve bu bir
     hataydi: #uyg max-width 560px ile SINIRLI, yani gorunum buyuse de kap
     buyumuyor. 560px'lik kapta 3 sutun 168px'lik kartlar veriyordu —
     430px telefonda cikan 194px'ten DAHA DAR. Olculdu (araclar/bak.mjs
     768 ve 1024 px). Referans masaustunde 4-5 sutuna cikiyor ama orada
     kap tam genislik; bu bir QR menusu ve kap bilerek telefon genisliginde
     kaliyor (diger iki tasarimla da tutarli). */
.v-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.v-kart {
  display: flex; flex-direction: column; text-align: left;
  background: var(--v-kart); border: none;
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--v-golge); position: relative;
  transition: box-shadow var(--gecis), transform var(--gecis);
  cursor: pointer;
}
.v-kart:hover { box-shadow: var(--v-golge-h); transform: translateY(-2px); }
.v-kart:active { transform: translateY(0); }

/* ── Kare fotograf ──
   ★ 1:1 ve HER KARTTA var. 356 urunun 80'inde fotograf yok; kareyi
     gizleseydik izgaranin satirlari farkli yuksekliklerde kirilirdi.
     Fotograf yoksa (ya da sonradan duserse) kategori ikonu geliyor —
     mekanizma ortak.js > gorselDusmeIzle, kartla liste ekraninda ayni. */
.v-kare {
  width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--v-girinti); color: var(--v-metin3); overflow: hidden;
}
.v-kare > * { grid-area: 1 / 1; }
.v-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-kare svg { width: 34px; height: 34px; stroke-width: 1.3; opacity: 0.55; }
/* Fotograf yuklendiyse ikon cekilir; DUSERSE .gorselsiz gelir ve geri gelir. */
.v-kare.var:not(.gorselsiz) svg { display: none; }

.v-kart-ic {
  padding: 10px; display: flex; flex-direction: column; flex: 1;
}
.v-kart-ad {
  font-family: var(--baslik); font-size: 13.5px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-kart-ack {
  font-size: 11.5px; line-height: 1.4; color: var(--v-metin3); margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ★ margin-top:auto — fiyat her kartin DIBINE yapisiyor. Aciklamasi bir
     satir olan kartla iki satir olan kart yan yana geldiginde fiyatlar ayni
     hizada duruyor; izgaranin okunurlugu buna bagli. */
.v-kart-fiyat {
  margin-top: auto; text-align: right;
  font-family: var(--kod); font-size: 14px; font-weight: 700;
  color: var(--v-fiyat);
}
.v-kart-tazelik {
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--v-cizgi);
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  font-family: var(--kod); font-size: 9.5px; color: var(--v-metin3);
}
/* ★ Etiket ile tarih arasinda bosluk (K-AU): em ve b bitisik satir ici
     ogeler; aralarinda metin dugumu yok ve test urununde "Üretim13.09.2026"
     diye yapisik okunuyordu. Seed'de hic tarih olmadigi icin gorulmemisti. */
.v-kart-tazelik em { font-style: normal; opacity: 0.75; margin-right: 4px; }

/* Rozet: kartin sol ust kosesi (referanstaki .badge-v3). */
.v-rozet {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 7px; border-radius: var(--r1);
  font-family: var(--kod); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--v-metin); color: #fff;
}
.v-rozet.yok { background: var(--v-fiyat); }
/* Listeye eklenmis urun: sag ustte adet. */
.v-adet {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--v-hap);
  background: var(--v-fiyat); color: #fff;
  font-family: var(--kod); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
}

/* Tukenen urun: tiklanamaz, fotograf renksiz, fiyat ustu cizili. */
.v-kart.yok { cursor: not-allowed; box-shadow: none; border: 1px solid var(--v-cizgi); }
.v-kart.yok:hover { transform: none; box-shadow: none; }
.v-kart.yok .v-kare { filter: grayscale(1); opacity: 0.5; }
.v-kart.yok .v-kart-ad { color: var(--v-metin3); }
.v-kart.yok .v-kart-fiyat { color: var(--v-metin3); text-decoration: line-through; }

/* ═══ ARAMA SONUCU BASLIGI ═════════════════════════════════════════════════
   Arama acikken akordiyon devre disi: sonuclar kategori basliklariyla
   gruplu ve HEPSI acik geliyor. Afis fotografi burada gurultu olurdu. */
.v-sonuc-basi {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 10px;
  font-family: var(--baslik); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--v-metin2);
}
.v-sonuc-basi svg { width: 15px; height: 15px; stroke-width: 1.8; color: var(--v-fiyat); flex: 0 0 auto; }
.v-sonuc-basi::after { content: ""; flex: 1; height: 1px; background: var(--v-cizgi); }
.v-sonuc-basi em {
  font-style: normal; font-family: var(--kod); font-size: 10.5px;
  color: var(--v-metin3); letter-spacing: 0;
}
.v-sonuc-ozet {
  padding: 0 var(--a2); margin-bottom: 4px;
  font-size: 12.5px; color: var(--v-metin3);
}
.v-sonuc-ozet strong { color: var(--v-fiyat); font-weight: 700; }

/* ═══ SAYFA SONU (K-AR) ════════════════════════════════════════════════════
   Referansin (menumpro) kapanis bolumu: ortalanmis, kartsiz, sessiz.
   Sira: marka -> konum/telefon -> tesekkur -> yasal metin -> telif.

   ★ Kart DEGIL: sayfanin geri kalani (afisler, izgara) golgeli kartlardan
     olusuyor; kapanisin da kart olmasi onu bir "kategori daha" gibi
     okuturdu. Ince bir cizgi ve bosluk, bolumun bittigini soyluyor.
   ★ Iletisim satirlari dokunma hedefi: en az 44px yukseklik (WCAG 2.5.8'in
     24px alt siniri burada bilerek asiliyor, telefon menusu). */
.v-dip {
  margin: var(--a6) var(--a2) 0; padding-top: var(--a4);
  border-top: 1px solid var(--v-cizgi);
  text-align: center;
}

.v-dip-marka { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.v-dip-marka img { height: 40px; width: auto; display: block; }
.v-dip-ad {
  font-family: var(--marka); font-size: 32px; line-height: 1.25;
  color: var(--v-fiyat);
}
.v-dip-alt {
  font-family: var(--kod); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--v-metin3);
}

.v-dip-iletisim {
  list-style: none; margin: var(--a3) 0 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.v-dip-iletisim a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 8px;
  font-size: 14.5px; color: var(--v-metin); text-decoration: none;
  border-radius: var(--r1);
  transition: color var(--gecis);
}
.v-dip-iletisim a:hover { color: var(--v-fiyat); }
.v-dip-iletisim a:focus-visible { outline: 2px solid var(--v-fiyat); outline-offset: 2px; }
.v-dip-iletisim svg {
  width: 18px; height: 18px; stroke-width: 1.9; flex: 0 0 auto; color: var(--v-metin2);
}
/* Koordinat dar ekranda tek satira sigmayabilir; kirilirsa ortali kalsin. */
.v-dip-iletisim span { text-wrap: balance; }

.v-dip-tesekkur {
  margin: var(--a3) auto 0; max-width: 34ch; text-wrap: balance;
  font-size: 16px; line-height: 1.5; color: var(--v-metin2);
}

/* Yasal bolum: referansta bir baglantinin arkasindaki metin, burada acik.
   Baslik referanstaki "⚖ Yasal Bilgilendirme ve Alerjen Uyarısı" satiri;
   kesikli alt cizgisi ALINMADI — tiklanamayan bir basliga baglanti
   gorunumu vermek musteriyi yaniltir. */
.v-yasal { margin: var(--a4) auto 0; max-width: 46ch; }
.v-yasal-basi {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-family: var(--govde); font-size: 14px; font-weight: 600; color: var(--v-metin);
  scroll-margin-top: calc(var(--v-bant-y) + var(--a3));
}
.v-yasal-basi:focus { outline: none; }
.v-yasal-basi:focus-visible { outline: 2px solid var(--v-fiyat); outline-offset: 4px; }
.v-yasal-basi svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--v-fiyat); }
.v-yasal p { font-size: 12.5px; line-height: 1.65; color: var(--v-metin2); }
.v-yasal p + p { margin-top: 8px; }
.v-yasal strong { color: var(--v-metin); font-weight: 700; }
.v-yasal .v-yasal-kdv { color: var(--v-fiyat); }
.v-yasal .v-yasal-kdv strong { color: inherit; white-space: nowrap; }
.v-yasal .v-yasal-vaat { color: var(--v-metin3); }

.v-dip-telif {
  margin-top: var(--a4); font-size: 14.5px; color: var(--v-metin);
}

/* ═══ YUZEN ALT CUBUK ══════════════════════════════════════════════════════
   Referansin ikinci imza ogesi. Hap bicimli, ekranin dibinden 16px yukarida,
   ortada yuvarlak bir ana dugme. Kaydirinca kuculuyor ve etiketler gizleniyor.

   ★ SADECE SINIF DEGISIYOR, ciz() CAGRILMIYOR. Kaydirma dinleyicisinden
     cizim tetiklemek bu projede daha once olculmus bir hataydi: innerHTML
     kaydirma kabini yok ediyor ve jestin ortasinda ekran ziplatiyor. */
.v-cubuk {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 60;
  margin: 0 auto; width: calc(100% - 32px); max-width: 400px;
  height: 60px; padding: 0 10px;
  display: flex; align-items: center; justify-content: space-around;
  background: var(--v-kart); border-radius: var(--v-hap);
  box-shadow: var(--v-golge-cubuk);
  transition: height var(--gecis), bottom var(--gecis), width var(--gecis);
}
.v-cubuk.kucuk { height: 48px; bottom: 10px; width: calc(100% - 56px); }
.v-cubuk.kucuk .v-cubuk-dg span { display: none; }

.v-cubuk-dg {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none;
  color: var(--v-metin2); transition: color var(--gecis);
  position: relative;
}
.v-cubuk-dg:hover, .v-cubuk-dg:focus-visible { color: var(--v-fiyat); }
.v-cubuk-dg svg { width: 20px; height: 20px; stroke-width: 1.9; }
.v-cubuk-dg span {
  font-family: var(--kod); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.v-cubuk-dg[disabled] { opacity: 0.35; cursor: not-allowed; }
.v-cubuk-dg[disabled]:hover { color: var(--v-metin2); }

/* Ortadaki ana dugme: cubuktan tasan yuvarlak marka dugmesi. */
.v-cubuk-ana {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--v-hap);
  display: grid; place-items: center; border: none;
  background: var(--v-fiyat); color: #fff;
  box-shadow: 0 4px 12px rgba(208, 29, 34, 0.4);
  transition: transform var(--gecis);
}
.v-cubuk-ana:hover { transform: translateY(-2px); }
.v-cubuk-ana:active { transform: translateY(0); }
.v-cubuk-ana svg { width: 22px; height: 22px; stroke-width: 2.2; }
.v-cubuk.kucuk .v-cubuk-ana { width: 42px; height: 42px; }
.v-cubuk.kucuk .v-cubuk-ana svg { width: 19px; height: 19px; }

/* Seçim listesi sayaci. */
.v-cubuk-dg .say {
  position: absolute; top: 6px; right: calc(50% - 18px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--v-hap);
  background: var(--v-fiyat); color: #fff;
  font-family: var(--kod); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center;
}
.v-cubuk.kucuk .v-cubuk-dg .say { top: 2px; }

/* ═══ SECIM LISTESI UST CUBUGU ════════════════════════════════════════════════
   .d-ust / .d-geri / .kaydir artik YALNIZCA secim listesi ekraninda
   kullaniliyor (urun detayi balona tasindi, K-AT). Adlar menu.js'in liste
   sablonuyla uyumlu kalsin diye degismedi. */
.d-ust {
  position: sticky; top: 0; z-index: 40;
  height: var(--v-ust); display: flex; align-items: center;
  padding: 0 var(--a2); background: var(--v-zemin);
  border-bottom: 1px solid var(--v-cizgi); gap: 12px;
}
.d-ust h1 {
  font-family: var(--baslik); font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em;
}
.d-geri {
  /* ★ 40px -> 44px: kod tabaninin kendi dokunma-hedefi kurali. */
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: -10px;
  display: grid; place-items: center; border: none; border-radius: var(--v-hap);
  background: var(--v-kart); color: var(--v-metin); box-shadow: var(--v-golge);
  transition: var(--gecis);
}
.d-geri:hover { color: var(--v-fiyat); }
.d-geri svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* ★ .kaydir artik kendi kaydirma kabi DEGIL — belge kayiyor. */
.kaydir { padding-bottom: var(--a2); }

/* ═══ URUN BALONU (K-AT) ═══════════════════════════════════════════════════════
   Referans menumpro'nun urun modali, OLCULEREK alindi (gercek Chrome, 430 ve
   1280 px):
       perde    rgba(0,0,0,.45) + backdrop-filter blur(10px), 0.15s solma
       pencere  mobil: kenardan ~26px, en fazla 400px, kose 24px,
                golge 0 20px 40px rgba(0,0,0,.25); masaustu: 500px, kose 16px
       giris    0.3s ease-out, yukaridan kayarak
       fotograf tam genislik, 320px (masaustu 390px), cover
       ✕        32px beyaz daire, sag ust
       govde    20px 15px ic bosluk; ad 21.7px kalin; "Fiyat:" 20px gri +
                fiyat 21.7px kalin kirmizi, ince cizginin altinda
       "✕ Kapat" hap: 40px, kose 30px, beyazimsi + golge
   Renkler Vitrin'in (siyah yerine sicak koyu --v-metin tonu, saf beyaz
   yerine --v-kart), olculer referansin.

   ★ z-index 200: marka bandi (40) ve yuzen alt cubuk (60) USTUNDE, bildirim
     (400, tema.css) ve duyuru afisi (500) ALTINDA — "Listeme ekle"
     sonrasi cikan bildirim balonun arkasinda kalmasin. */
.m-perde {
  position: fixed; inset: 0; z-index: 200;
  /* Uzun icerik BURADA kayar; sayfanin kendisi kilitli (asagida :has). */
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(36, 31, 29, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* ★ Ortalama bir IC sarmalayicida, perdede degil: perdeyi flex ile
     ortalamak, pencere ekrandan uzun oldugunda ustunu kaydirilamaz sekilde
     KESER (flex tasmasi yukari dogru da tasar). min-height:100% ile kap
     kisa icerikte ekrani doldurup ortalar, uzun icerikte icerikle buyur. */
.m-kap {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--a3) 26px;
}
@media (max-width: 360px) { .m-kap { padding: var(--a2) 12px; } }

.m-pencere {
  position: relative; width: 100%; max-width: 400px;
  background: var(--v-kart); border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 40px rgba(36, 31, 29, 0.25);
}
.m-pencere:focus { outline: none; }
.m-pencere:focus-visible { outline: 3px solid var(--v-fiyat); outline-offset: 3px; }
@media (min-width: 561px) {
  .m-pencere { max-width: 500px; border-radius: 16px; }
}

/* Giris animasyonu YALNIZCA .m-giris ile — menu.js onu ilk cizimde koyup
   sonraki cizimlerde koymuyor. Siniflar hep dursaydi adet +/- her
   basista perde solup pencere yeniden kayardi. */
.m-perde.m-giris { animation: m-perde-gir 0.15s linear; }
.m-perde.m-giris .m-pencere { animation: m-pencere-gir 0.3s ease-out; }
@keyframes m-perde-gir { from { opacity: 0; } }
@keyframes m-pencere-gir { from { opacity: 0; transform: translateY(-40px); } }
@media (prefers-reduced-motion: reduce) {
  .m-perde.m-giris, .m-perde.m-giris .m-pencere { animation: none; }
}

/* ★ Balon acikken ARKADAKI SAYFA KAYMAZ. Yoksa balonun icinde kaydiran
     parmak icerigin sonuna gelince arkadaki menuyu kaydirir ve balon
     kapaninca musteri baska bir yerde bulur kendini. overscroll-behavior
     tek basina iOS'ta yetmiyor. Durum JS'te tutulmuyor: balon DOM'daysa
     kilit var, kalkinca kilit de kalkiyor — senkron kaybolamaz. */
html:has(.m-perde) { overflow: hidden; }

.m-kapat-x {
  /* ★ 34px -> 44px: kod tabaninin kendi dokunma-hedefi kurali (bkz. .v-dip-
       iletisim yorumu) burada uygulanmiyordu. 34px WCAG'in 24px alt sinirini
       gecse de sik kullanilan bir kapatma dugmesi icin kucuktu. */
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255, 253, 248, 0.94); color: var(--v-metin);
  box-shadow: 0 2px 6px rgba(36, 31, 29, 0.18);
  transition: color var(--gecis), transform var(--gecis);
}
.m-kapat-x:hover { color: var(--v-fiyat); transform: scale(1.06); }
.m-kapat-x:focus-visible { outline: 2px solid var(--v-fiyat); outline-offset: 2px; }
.m-kapat-x svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ! .d-medya ile .d-nisan ARASINA DUGUM KOYMA. Fotograf duserse kategori
     nisaninin geri gelmesi komsu-kardes (+) secicisine bagli. */
.d-medya { background: var(--v-girinti); }
/* Kisa ekranda (ör. 667px) 320px'lik fotograf balonun yarisini yiyip adi ve
   fiyati asagi itiyordu; 46svh ile sinirli. */
.d-medya img {
  display: block; width: 100%; height: min(320px, 46svh); object-fit: cover;
}
@media (min-width: 561px) { .d-medya img { height: min(390px, 46svh); } }
.d-medya + .d-nisan { display: none; }
.d-medya.gorselsiz { display: none; }
/* Fotografsiz urun: ince nisan. Ustte ✕ icin yer birakiliyor. */
.d-nisan {
  display: flex; align-items: center; gap: 12px;
  padding: 58px var(--a2) 0; color: var(--v-metin3);
}
.d-medya.gorselsiz + .d-nisan { display: flex; }
.d-nisan::before, .d-nisan::after { content: ""; flex: 1; height: 1px; background: var(--v-cizgi); }
.d-nisan svg { width: 22px; height: 22px; stroke-width: 1.3; }

.d-blok { padding: 20px 16px 16px; }
@media (min-width: 561px) { .d-blok { padding: 24px 24px 20px; } }
.d-ad {
  font-family: var(--baslik); font-size: 22px; font-weight: 800;
  line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
@media (min-width: 561px) { .d-ad { font-size: 24px; } }
.m-pencere .icerik-metin { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--v-metin3); }
.m-pencere .kart-rozetler { margin-top: 12px; }

/* Referanstaki "Fiyat:" satiri. */
.m-fiyat-sat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: var(--a3); padding-top: var(--a2); border-top: 1px solid var(--v-cizgi);
}
.m-fiyat-sat > span:first-child { font-size: 18px; font-weight: 500; color: var(--v-metin3); }
.d-fiyat {
  font-family: var(--kod); font-size: 22px; font-weight: 700;
  color: var(--v-fiyat); white-space: nowrap;
}

.d-baslik {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--baslik); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--v-metin3); font-weight: 800;
  margin: var(--a3) 0 10px;
}
.d-baslik::after { content: ""; flex: 1; height: 1px; background: var(--v-cizgi); }
.d-baslik em {
  order: 1; font-style: normal; letter-spacing: 0.02em; color: var(--v-metin3);
  text-transform: none; font-weight: 400; font-size: 11px; white-space: nowrap;
}

.besin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.besin-k {
  background: var(--v-kart); border-radius: var(--r1);
  box-shadow: var(--v-golge); padding: 9px 4px; text-align: center;
}
.besin-k.genis { grid-column: span 2; }
.besin-k b { font-family: var(--kod); font-size: 15px; font-weight: 700; display: block; line-height: 1.15; }
.besin-k.genis b { font-size: 19px; color: var(--v-fiyat); }
.besin-k span {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--v-metin3); display: block; margin-top: 2px;
}

.tazelik { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.tazelik > span {
  background: var(--v-kart); border-radius: var(--r1);
  box-shadow: var(--v-golge); padding: 10px 6px; text-align: center;
}
.tazelik em {
  display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--v-metin3); font-weight: 700; font-style: normal; margin-bottom: 3px;
}
.tazelik b { font-family: var(--kod); font-size: 14px; font-weight: 700; }

.alerjen-kutu { border-radius: var(--r2); padding: 13px; font-size: 13px; }
.alerjen-kutu.var { background: var(--kotu-y); border: 1px solid var(--kotu-c); }
.alerjen-kutu.yok { background: var(--ok-y); border: 1px solid var(--ok-c); color: var(--ok); }
.alerjen-kutu .basi {
  display: flex; align-items: center; gap: 7px; color: var(--kotu);
  font-weight: 700; margin-bottom: 9px;
}
.alerjen-kutu .basi svg { width: 15px; height: 15px; stroke-width: 2.2; flex: 0 0 auto; }
.alerjen-kutu.yok .basi { color: var(--ok); margin-bottom: 0; }
.alerjen-kutu .alerjen-not { color: var(--kotu); opacity: 0.85; line-height: 1.45; }
/* ★ Isaretsiz urun (K-AU): ne yesil "temiz" ne kirmizi "icerir". Notr ton —
     bir iddia degil, bir bilgi eksikligi. */
.alerjen-kutu.isaretsiz { background: var(--v-zemin); border: 1px solid var(--v-cizgi); }
.alerjen-kutu.isaretsiz .basi { color: var(--v-metin); margin-bottom: 4px; }
.alerjen-kutu.isaretsiz .alerjen-not { color: var(--v-metin2); opacity: 1; }

.kart-rozetler { display: flex; gap: 6px; flex-wrap: wrap; }
.icerik-metin { font-family: var(--govde); font-size: 15px; line-height: 1.65; color: var(--v-metin2); }
/* Sure + porsiyon: iki bagimsiz parca, dar ekranda alt satira iner. */
.icerik-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: 12px; color: var(--v-metin3); margin-top: 10px;
}
.icerik-alt span { display: inline-flex; align-items: center; gap: 5px; }
.icerik-alt svg { width: 13px; height: 13px; stroke-width: 1.7; flex: 0 0 auto; }

/* ═══ BALONUN EYLEM SATIRI (K-AT) ═════════════════════════════════════════════
   Onceki tam ekran detayda ekranin dibine SABITLENMIS bir cubuktu
   (.alt-cubuk). Balonda sabit cubuk yok: satir icerigin sonunda, fiyatin
   hemen altinda. Adet secici + "Listeme ekle", altinda "✕ Kapat" hapi. */
.m-eylem { display: flex; align-items: center; gap: 12px; margin-top: var(--a2); }
.m-eylem .alt-dg { flex: 1; min-height: 46px; }
.m-alt { display: flex; justify-content: flex-end; margin-top: 14px; }
.m-kapat-hap {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--v-cizgi); border-radius: 30px;
  background: rgba(255, 253, 248, 0.9); color: var(--v-metin2);
  font-size: 14.4px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(36, 31, 29, 0.12);
  transition: color var(--gecis), box-shadow var(--gecis);
}
.m-kapat-hap:hover { color: var(--v-fiyat); box-shadow: 0 6px 16px rgba(36, 31, 29, 0.18); }
.m-kapat-hap:focus-visible { outline: 2px solid var(--v-fiyat); outline-offset: 2px; }
.m-kapat-hap svg { width: 14px; height: 14px; stroke-width: 2.4; }

.adet-sec { display: flex; align-items: center; gap: 12px; }
.adet-dg {
  /* ★ 36px -> 44px: en sik basilan dugmelerden (balonda ve secim
       listesinde adet +/-), kod tabaninin kendi 44px kuralinin altindaydi. */
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--v-cizgi); border-radius: var(--v-hap);
  background: var(--v-zemin); transition: var(--gecis);
}
.adet-dg:hover:not([disabled]) { border-color: var(--v-fiyat); color: var(--v-fiyat); }
.adet-dg[disabled] { opacity: 0.35; cursor: not-allowed; }
.adet-dg svg { width: 15px; height: 15px; stroke-width: 2.2; }
.adet-sec b { font-family: var(--kod); font-size: 17px; font-weight: 700; min-width: 22px; text-align: center; }

.alt-dg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: none; border-radius: var(--v-hap);
  background: var(--v-fiyat); color: #fff;
  font-family: var(--baslik); font-size: 13.5px; font-weight: 800;
  transition: var(--gecis);
}
.alt-dg:hover { background: var(--v-marka); }
.alt-dg svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ═══ SECIM LISTESI ═══════════════════════════════════════════════════════ */
.liste-uyari {
  display: flex; gap: 10px; background: var(--bilgi-y); border: 1px solid var(--bilgi-c);
  border-radius: var(--r2); padding: 13px; margin: var(--a2) var(--a2) 0;
  font-size: 12.5px; color: var(--bilgi-m); line-height: 1.5;
}
.liste-uyari svg { width: 15px; height: 15px; stroke-width: 2; flex: 0 0 auto; margin-top: 2px; }

.l-satir {
  display: flex; gap: 12px; padding: 12px; margin: 10px var(--a2) 0;
  background: var(--v-kart); border-radius: var(--r2); box-shadow: var(--v-golge);
}
.l-ikon {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--r1); overflow: hidden;
  background: var(--v-girinti); display: grid; place-items: center; color: var(--v-metin3);
}
.l-ikon > * { grid-area: 1 / 1; }
.l-ikon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-ikon svg { width: 20px; height: 20px; stroke-width: 1.4; }
.l-ikon.var:not(.gorselsiz) svg { display: none; }
.l-govde { flex: 1; min-width: 0; }
.l-ad { font-family: var(--baslik); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.l-meta { font-family: var(--kod); font-size: 11px; color: var(--v-metin3); margin-top: 3px; }
.l-meta span { white-space: nowrap; }
.l-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.l-tutar { font-family: var(--kod); font-size: 14px; font-weight: 700; color: var(--v-fiyat); }

.ozet {
  margin: var(--a3) var(--a2) 0; border-radius: var(--r2); overflow: hidden;
  background: var(--v-kart); box-shadow: var(--v-golge);
}
.ozet-s {
  display: flex; justify-content: space-between; padding: 12px 14px; font-size: 13.5px;
  border-bottom: 1px solid var(--v-cizgi);
}
.ozet-s:last-child { border-bottom: none; }
.ozet-s span { color: var(--v-metin3); }
.ozet-s b { font-family: var(--kod); font-weight: 700; }
.ozet-s.toplam { background: var(--v-girinti); }
.ozet-s.toplam b { font-size: 17px; color: var(--v-fiyat); }

.metin-dg {
  width: 100%; text-align: center; padding: 13px;
  font-family: var(--baslik); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--v-cizgi); border-radius: var(--v-hap);
  color: var(--v-metin); background: var(--v-kart); transition: var(--gecis);
}
.metin-dg:hover { box-shadow: var(--v-golge); }
.metin-dg.tehlike:hover { border-color: var(--kotu); color: var(--kotu); background: var(--kotu-y); }

/* ═══ DURUM KUTULARI ══════════════════════════════════════════════════════
   .durum-kutu tema.css'ten geliyor; burada yalnizca Vitrin zeminine
   oturmasi icin yumusatiliyor. */
.durum-kutu { color: var(--v-metin2); }
.durum-kutu h2 { font-family: var(--baslik); font-weight: 800; color: var(--v-metin); }
.durum-kutu svg { color: var(--v-metin3); }
.v-bos { padding: var(--a4) var(--a2); text-align: center; }

/* ═══ DUYURU AFISI ════════════════════════════════════════════════════════
   Panelden yonetilen tam ekran kampanya afisi. Davranis DEGISMEDI; yalnizca
   Vitrin'in yuvarlak/golgeli diline cevrildi.
   ★ Gorsel yuklenemezse .gorselsiz geliyor ve afis TAMAMEN gizleniyor —
     bos bir perde menuyu bloke ederdi. */
.duyuru {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: var(--a3); background: rgba(36, 31, 29, 0.62);
  animation: duyuru-gir 0.22s ease-out;
}
.duyuru.gorselsiz { display: none; }
.duyuru-ic { position: relative; max-width: 100%; max-height: 100%; }
.duyuru-ic img {
  display: block; max-width: 100%; max-height: calc(100dvh - var(--a6));
  width: auto; height: auto;
  border-radius: var(--r3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.duyuru-kapat {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: var(--v-hap);
  display: grid; place-items: center;
  background: var(--v-metin); color: #fff; border: 2px solid var(--v-kart);
}
.duyuru-kapat svg { width: 20px; height: 20px; stroke-width: 2.4; }
@keyframes duyuru-gir { from { opacity: 0; } }

@media (max-width: 420px) {
  .duyuru { padding: var(--a2); }
  .duyuru-kapat { top: 6px; right: 6px; }
}

/* ═══ SURUM DAMGASI ═══════════════════════════════════════════════════════
   Hangi surumun yayinda oldugu ekrandan okunabilsin (K-N). */
.v-surum {
  text-align: center; padding: var(--a3) var(--a2) 0;
  font-family: var(--kod); font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--v-metin3); opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .v-kat-afis img, .v-kart, .v-cubuk, .v-cubuk-ana { transition: none; }
  .v-kat-afis:hover img { transform: none; }
  .duyuru { animation: none; }
}