/* =========================================================================
   Parpali Pide — tasarım sistemi
   Renk kaynağı: mekânın kendisi — fırın ateşinin kehribar tonu, neon
   tabelanın mavisi, duvarın beyaz fayansı. Marka turkuazı (#65a7c0)
   eski siteden aynen korundu.
   ========================================================================= */

/* --- 1. Token'lar --------------------------------------------------- */
:root {
  /* Renk */
  --ink:        #0f1a20;   /* isli koyu, mavi cAlan */
  --ink-2:      #2c3d45;
  --muted:      #5f7078;
  --sea:        #65a7c0;   /* marka turkuazı — eski siteden */
  --sea-deep:   #2c7391;   /* beyaz üstünde okunur ton */
  --sea-wash:   #e8f2f6;
  --ember:      #d4791b;   /* fırın ateşi / neon altın */
  --ember-deep: #a85b0f;
  --ember-wash: #fbf0e2;
  --tile:       #f1f4f5;   /* sayfa zemini — fayans beyazı */
  --surface:    #ffffff;
  --grout:      #dee6e9;   /* saç teli çizgiler */
  --whatsapp:   #1faa54;

  /* Yuvarlaklık — "hafif yumuşak", balon değil */
  --r-card:  18px;
  --r-photo: 12px;
  --r-block: 24px;
  --r-pill:  999px;

  /* Gölge */
  --shadow-1: 0 1px 2px rgba(15, 26, 32, .04);
  --shadow-2: 0 6px 24px -8px rgba(15, 26, 32, .16), 0 2px 6px rgba(15, 26, 32, .05);
  --shadow-3: 0 18px 48px -16px rgba(15, 26, 32, .28);

  /* Ölçü */
  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 74px;

  /* Tipografi */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* --- 2. Temel ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-behavior burada tanımlı DEĞİL: sayfa #bölüm adresiyle açıldığında
   yumuşak kaydırma tarayıcıda iptal olup en üstte kalabiliyor.
   Yumuşak kaydırmayı kategori çubuğu tıklamalarında main.js yapıyor. */
html { scroll-padding-top: calc(var(--header-h) + 72px); }

body {
  margin: 0;
  background: var(--tile);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--sea-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--sea-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sea-wash); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "İçeriğe geç" bağlantısı klavyeyle odaklanınca görünür olmalı */
.sr-only:focus {
  position: fixed; top: .75rem; inset-inline-start: .75rem; z-index: 100;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  padding: .7rem 1.1rem;
  background: var(--ink); color: #fff;
  border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}

/* --- 3. Tipografi --------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Bölüm üstü küçük etiket — dekor değil, bilgi taşır (ör. "11 çeşit") */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sea-deep);
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ember), var(--sea));
}

/* --- 4. Buton ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-2); }
.btn--primary:hover { background: #1b2c34; }

.btn--wa { background: var(--whatsapp); color: #fff; box-shadow: 0 6px 18px -8px rgba(31,170,84,.7); }
.btn--wa:hover { background: #1b9a4c; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--grout); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }

.btn--light { background: rgba(255,255,255,.94); color: var(--ink); }
.btn--light:hover { background: #fff; }

.btn svg { width: 18px; height: 18px; flex: none; }

/* --- 5. Header ------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--grout);
}
.header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.25rem;
}
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 38px; width: auto; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }

.nav__link {
  position: relative;
  display: block; padding: .55rem .8rem;
  border-radius: var(--r-pill);
  color: var(--ink-2); text-decoration: none;
  font-size: .93rem; font-weight: 600;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.nav__link:hover { color: var(--ink); background: var(--sea-wash); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline: .8rem; bottom: .28rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ember), var(--sea));
}

/* Açılır menü — Kurumsal */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .93rem; font-weight: 600;
  color: var(--ink-2); padding: .55rem .8rem; border-radius: var(--r-pill);
}
.nav__toggle:hover { color: var(--ink); background: var(--sea-wash); }
.nav__toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + .5rem); inset-inline-start: 0;
  min-width: 250px; padding: .45rem;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__toggle[aria-expanded="true"] + .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: .6rem .75rem; border-radius: 10px;
  color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 500;
}
.nav__menu a:hover { background: var(--sea-wash); color: var(--ink); }
/* Açılırdaki bulunulan sayfa. Ayrı kural şart: bu bağlantılarda `nav__link`
   sınıfı yok, üstteki .nav__link[aria-current] kuralı onları yakalamıyordu ve
   Kurumsal altındaki 5 sayfada başlıkta hiçbir konum işareti görünmüyordu.
   Alt çizgi yerine dolgu: öge zaten bir liste satırı, ::after çizgisi
   açılır kutunun içinde yamuk duruyor. */
.nav__menu a[aria-current="page"] {
  background: var(--sea-wash); color: var(--ink); font-weight: 700;
}

.header__cta { flex: none; }

/* Dil seçici — seçili dilin bayrağı ve kısaltması; basınca liste açılır.
   Her ekran boyutunda görünür kalır (nav ve CTA 1080px altında gizlenir).
   Açılır liste "Kurumsal" menüsüyle aynı mekanizmayı kullanır. */
.lang { flex: none; position: relative; }

.lang__toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px;                 /* dokunma hedefi */
  padding: .3rem .6rem;
  background: var(--tile);
  border: 1px solid var(--grout);
  border-radius: var(--r-pill);
  cursor: pointer;
  font: inherit; color: var(--ink-2);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.lang__toggle:hover { background: var(--surface); border-color: #cfdde2; color: var(--ink); }
.lang__code { font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
/* Liste açıkken düğme de "basılı" görünsün — ok olmadığı için durumu bu belli eder */
.lang__toggle[aria-expanded="true"] {
  background: var(--surface); border-color: #cfdde2; color: var(--ink);
}

/* Düğmedeki bayrak/kısaltma <html lang> ile seçilir — JS beklemez, bu yüzden
   İngilizce veya Arapça açan ziyaretçide bir an "TR" görünüp değişmez. */
.lang__cur > span { display: none; align-items: center; gap: .4rem; }
[lang="tr"] .lang__cur > [data-for="tr"],
[lang="en"] .lang__cur > [data-for="en"],
[lang="ar"] .lang__cur > [data-for="ar"] { display: inline-flex; }

/* Sitedeki tek renkli ikon istisnası: bayraklar currentColor kullanamaz.
   pointer-events kapalı ki tıklama her zaman düğmeye gitsin. */
.lang__flag {
  width: 18px; height: 12px; flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 26, 32, .18) inset;
  pointer-events: none;
}

.lang__menu {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 5;
  min-width: 190px; padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang__toggle[aria-expanded="true"] + .lang__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.lang__opt {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .55rem .65rem;
  background: none; border: 0; border-radius: 10px;
  cursor: pointer; text-align: start;
  font: inherit; font-size: .92rem; font-weight: 500; line-height: 1.3;
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.lang__opt > span { flex: 1 1 auto; }
.lang__opt:hover { background: var(--sea-wash); color: var(--ink); }
.lang__check { width: 12px; height: 12px; flex: none; color: var(--sea-deep); opacity: 0; }
.lang__opt[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.lang__opt[aria-pressed="true"] .lang__check { opacity: 1; }

/* Çeviri uygulanana kadar gövdeyi gizle — Türkçe metnin bir an görünüp
   değişmesini önler. Sınıfı yalnızca EN/AR seçmiş ziyaretçi için <head>'deki
   küçük script ekler; JS kapalıysa hiç eklenmez, sayfa Türkçe görünür. */
.i18n-wait body { visibility: hidden; }

/* Mobil menü düğmesi */
.burger {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--grout); border-radius: 12px;
  cursor: pointer; color: var(--ink);
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; position: relative;
  transition: transform .22s ease, background-color .18s ease;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; inset-inline-start: 0; width: 18px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform .22s ease, top .18s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobil çekmece */
.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 55;
  background: var(--surface);
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  display: none;
}
.drawer[data-open="true"] { display: block; animation: drawerIn .22s ease; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li + li { border-top: 1px solid var(--grout); }
.drawer a {
  display: block; padding: .95rem .25rem;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.drawer__sub { padding-bottom: .6rem; }
.drawer__sub a {
  font-family: var(--font-body); font-size: .98rem; font-weight: 500;
  color: var(--muted); padding-block: .45rem;
  padding-inline: 1rem .25rem;
  border-inline-start: 2px solid var(--grout);
}
/* Çekmecedeki WhatsApp düğmesi: `.drawer a` (0-1-1) `.btn`i (0-1-0) ezdiği için
   düğme menü bağlantısına dönüşüyordu — burada `.drawer .btn` (0-2-0) ile geri alınır.
   İkon başta, yazı yanında; `flex-start`/`start` mantıksal, RTL'de kendiliğinden döner. */
.drawer .btn {
  width: 100%; margin-top: 1.5rem;
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  padding: .95rem 1.2rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: #fff; text-align: start;
}
.drawer .btn svg { flex: none; width: 20px; height: 20px; }

body[data-scroll-locked] { overflow: hidden; }

/* --- 6. Hero -------------------------------------------------------- */
.hero {
  position: relative;
  margin: var(--gutter) var(--gutter) 0;
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* fırın ateşi karenin sol-altında — kadrajı oraya sabitle */
  object-position: 58% 74%;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9,16,20,.9) 0%, rgba(9,16,20,.62) 42%, rgba(9,16,20,.15) 100%),
    linear-gradient(180deg, rgba(9,16,20,.45) 0%, rgba(9,16,20,.2) 45%, rgba(9,16,20,.75) 100%);
}
/* Ana sayfa hero'su bir tık daha aydınlık — yazı hâlâ koyu zeminde kalıyor */
.hero:not(.hero--page)::after {
  background:
    linear-gradient(90deg, rgba(9,16,20,.82) 0%, rgba(9,16,20,.54) 42%, rgba(9,16,20,.10) 100%),
    linear-gradient(180deg, rgba(9,16,20,.38) 0%, rgba(9,16,20,.14) 45%, rgba(9,16,20,.68) 100%);
}
.hero__inner {
  position: relative;
  max-width: 46rem;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.hero__inner h1 { color: #fff; }
.hero__inner .lead { color: rgba(255,255,255,.86); margin-top: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero--page .hero__inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); max-width: 42rem; }

/* --- 7. Bölüm ------------------------------------------------------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--white { background: var(--surface); border-block: 1px solid var(--grout); }

.section__head { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section__head .eyebrow { margin-bottom: .9rem; }
.section__head p { margin-top: .9rem; color: var(--muted); }

/* --- 8. Menü: kategori çubuğu --------------------------------------- */
.catbar {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(241,244,245,.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--grout);
}
.catbar__scroll {
  display: flex; gap: .5rem;
  padding-block: .8rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catbar__scroll::-webkit-scrollbar { display: none; }
.catbar a {
  flex: none;
  padding: .5rem 1rem;
  border: 1px solid var(--grout);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2); text-decoration: none;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.catbar a:hover { border-color: var(--sea); color: var(--ink); }
.catbar a.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* --- 9. Menü: bölüm başlığı ----------------------------------------- */
/* Menüde hero da görünür bir sayfa başlığı da YOK — QR'ı okutan müşteri fotoğraf
   değil ürün görmek istiyor, liste hemen başlasın. Sayfanın h1'i yine de duruyor:
   menu.html'de <h1 class="sr-only">Menü</h1> olarak, sadece ekran okuyucular ve
   arama motorları için. Aşağıdaki .menu-section kendi üst boşluğunu verdiği için
   ayrıca bir aralık kuralı gerekmiyor. */
.menu-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.menu-section__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1.25rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--grout);
}
.menu-section__head h2 { flex: none; }
.menu-section__count {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  letter-spacing: .04em; white-space: nowrap; margin-inline-start: auto;
}

/* --- 10. Menü: kart ızgarası ---------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Her kart kendi boyunda. Tek bir uzun açıklama (ör. Parpali Kahvaltı)
     bölümdeki bütün kartları uzatmasın diye satırlar eşitlenmez. Kısa
     kartların birbiriyle hizalanmasını .card__body min-height'ı sağlar.
     Bu, telefonda (tek sütun) geçerli; PC'de 13. bölümdeki
     @media (min-width: 761px) kuralı bunu `stretch` ile ezer. */
  align-items: start;
}
.grid--compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Kutu içinde kutu: kart → fotoğraf kutusu */
.card {
  position: relative;               /* .card__badge buna göre konumlanır */
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: var(--r-card);
  padding: .625rem;
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #cfdde2;
  box-shadow: var(--shadow-2);
}

.card__photo {
  position: relative;
  flex: none;                       /* fotoğraf oranı hiçbir durumda bozulmaz */
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--tile);
  /* Kaynak fotoğraflar dikey (yaklaşık 2:3) — 4/5 kutu en az kırpar */
  aspect-ratio: 4 / 5;
}
.card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.card:hover .card__photo img { transform: scale(1.045); }
/* fayans hissi veren ince iç çizgi */
.card__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15,26,32,.07);
}

/* Fotoğrafı olmayan ürünler — boş kutu yerine markalı alan */
.card__photo--none {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 20% 0%, var(--ember-wash) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 100%, var(--sea-wash) 0%, transparent 60%),
    var(--tile);
}
.card__photo--none img {
  width: 68%; height: auto; object-fit: contain;
  opacity: .55;
}

/* --- "Popüler" kurdele etiketi --------------------------------------
   Fotoğrafın sağ üstünde kehribar bir şerit: sol ucu yuvarlak, sağ altında
   koyu bir kama.

   Kama neyi anlatıyor: kurdele FOTOĞRAFIN arkasına dolanıyormuş gibi
   görünsün diye şeridin ucu kıvrılıyor. Kıvrımın iç yüzü ışık almaz, o
   yüzden gövdeden koyu. Kamanın tek başına anlamı yok — kıvrımın oturduğu
   kenar fotoğrafın kenarıdır, kartınki değil; kartın çevresinde zaten 10px
   beyaz pay var ve gözün gördüğü asıl sınır fotoğrafın kenarı.

   Zemin neden --ember (parlak kehribar) DEĞİL: beyaz yazı onun üstünde
   3,2:1 kontrast veriyor, WCAG AA sınırı 4,5:1. Telefonu güneşte tutan
   müşteri okuyamaz. --ember-deep üstünde 5,0:1.

   Turkuaz kullanılmadı: fiyat etiketi zaten turkuaz. İkisi aynı kartta
   yarışmasın diye fiyat soğuk, kurdele sıcak. Fiyat veri, kurdele yorum. */
.card__badge {
  position: absolute;
  /* Fotoğrafın üst kenarı .625rem'de (kartın iç boşluğu); kurdele ondan 10px
     aşağıda duruyor, üstünde ince bir fotoğraf şeridi kalsın diye. */
  top: 1.25rem;

  /* 3px nereden: kamanın SOL kenarı fotoğrafın sağ kenarına değmeli (dip dibe,
     bindirmeden). Kama 7px ve kurdelenin bitiş kenarına yapışık; fotoğrafın
     kenarı da padding kutusunun 10px içeride. 10 − 7 = 3.
     Yani bu değer kartın iç boşluğuna ve kama genişliğine bağlı — biri
     değişirse burası da değişmeli. Mantıksal: RTL'de kendiliğinden aynalanır. */
  inset-inline-end: 3px;
  z-index: 2;                  /* .card__photo::after fayans çizgisinin üstü */

  display: inline-flex;
  align-items: center;
  justify-content: center;     /* kısa yazı (ör. "Yeni") ortada dursun */

  /* Bütün kurdeleler aynı boyda olsun diye taban genişlik. 80px, "Popüler"in
     kendi doğal genişliği (üç dilde de 79-79,5px çıkıyor) — yani uzun yazılı
     kurdeleler hiç büyümüyor, kısa olanlar ("Yeni") onlara eşitleniyor.
     Sabit width DEĞİL: bir gün daha uzun bir yazı yazılırsa kurdele
     kırpmak yerine büyür; o durumda yalnızca o kurdele diğerlerinden geniş
     kalır, taban ölçüyü ona göre yükseltmek gerekir. */
  min-width: 5rem;

  /* Yükseklik 36px'e denk gelsin diye: 13,1px yazı + 2 × 11,5px. Dikey yarıçap
     (18px) tam yarısı olmalı, yoksa tarayıcı yarıçapları oransal küçültüyor
     ve kapak eliptik olmaktan çıkıyor. */
  padding-block: .72rem;
  padding-inline: 1rem .85rem;    /* başlangıç tarafı geniş: yazı yuvarlak uca girmesin */
  background: var(--ember-deep);

  /* Sol uç eliptik: yatayda 14px, dikeyde 18px. Dikey yarıçap yüksekliğin
     yarısı olduğu için iki köşe ortada birleşiyor, kapak tek bir eğri oluyor.
     Mantıksal özellikler — RTL'de kapak kendiliğinden sağa geçer.
     Hap (--r-pill) DEĞİL: kurdelenin sağ ucu köşeli kalmalı, kama oraya oturuyor. */
  border-start-start-radius: 14px 18px;
  border-end-start-radius: 14px 18px;

  /* Sağ ÜST köşede çok hafif bir kırılma — 3px, keskinliği alacak kadar,
     kurdeleyi hap görünümüne yaklaştırmayacak kadar.
     Sağ ALT köşe (border-end-end-radius) 0 kalmalı: kama tam oraya dayanıyor,
     yuvarlatılırsa gövdeyle kama arasında görünür bir çentik açılıyor. */
  border-start-end-radius: 3px;

  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .005em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;        /* fotoğrafın hover büyümesini engellemesin */
}

/* Kıvrımın koyu iç yüzü: gövdenin sağ alt köşesinden aşağı sarkan dik üçgen.
   Üstte eşi YOK — kasıtlı, tek yönlü kıvrım istendi. */
.card__badge::after {
  content: '';
  position: absolute;
  top: 100%;                   /* gövdenin hemen altı */
  inset-inline-end: 0;
  width: 7px; height: 7px;
  background: #7a410a;         /* --ember-deep'in gölgede kalan tonu */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* clip-path mantıksal değil — RTL'de üçgen elle aynalanmalı, yoksa kurdele
   sola taşırken kama ters yöne bakar. */
[dir="rtl"] .card__badge::after { clip-path: polygon(100% 0, 0 0, 100% 100%); }

/* "Yeni" kurdelesi — geometrinin tamamını .card__badge'den miras alır, yalnızca
   iki rengi ezer. Yeni bir kurdele türü gerekirse aynı kalıpla türetin.

   Kırmızı neden kehribara yakın bir turuncu DEĞİL: iki kurdele aynı sayfada
   yan yana görünüyor. Kehribara yakın bir ton "aynı etiketin başka bir hali"
   gibi okunuyordu; #b91c1c renk çemberinde ~30° uzakta, ayrı bir bilgi gibi
   duruyor. Beyaz yazı üstünde 6,5:1 — AA sınırının (4,5) rahat üstünde. */
.card__badge--yeni        { background: #b91c1c; }
.card__badge--yeni::after { background: #8a1414; }   /* kıvrımın gölgede kalan yüzü */

/* Açıklaması kısa ya da hiç olmayan kartlar (ör. Tophane) iki satır
   açıklaması olanlarla aynı boyda dursun diye taban yükseklik */
.card__body { padding: .9rem .6rem .5rem; min-height: 7rem; }
.card__top {
  display: flex; align-items: flex-start; gap: .75rem;
  justify-content: space-between;
}
.card__name {
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.card__price {
  flex: none;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--sea-wash);
  color: var(--sea-deep);
  font-size: .9rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__desc {
  margin: .55rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  /* Emniyet: çok uzun bir açıklama tüm ızgarayı uzatmasın (en fazla 4 satır) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__note {
  margin: .5rem 0 0;
  font-size: .78rem; font-weight: 600;
  color: var(--ember-deep);
}

/* İçecek/ilave kartı — fotoğrafsız, tek satır: solda ad, sağda fiyat.
   Kare bir kutu değil, alçak bir şerit olmalı. */
.card--compact { padding: 1rem 1.1rem; justify-content: center; }
.card--compact .card__body { padding: 0; min-height: 0; }
.card--compact .card__top { align-items: center; }
.card--compact .card__name { font-size: 1rem; }
.card--compact .card__desc { font-size: .95rem; margin-top: .3rem; }

/* İçecek kartı — şişe/kutu ürün çekimi, altında ad ve fiyat.
   Pide kartından iki yerde ayrılır:
   1) Fotoğraf KARE. Pidelerdeki 4/5 kutu dikey şişelerin tabanını kesiyordu.
   2) `object-fit: contain` — `cover` uzun şişeyi kırpar; ürün çekiminde
      şişenin tamamı görünmeli. */
/* Kare oran kartın kendisinden geliyor, --product'tan değil: fotoğrafı
   olmayan içecekler logolu kutuyu (card__photo--none) kullanıyor ve onun
   da kare olması gerek, yoksa ızgarada boy tutmaz. */
.card--drink .card__photo { aspect-ratio: 1 / 1; }
.card__photo--product {
  /* Görsellerin kendi zemini beyaz. --tile grisi kullanılsaydı şişenin
     çevresinde dikdörtgen bir leke görünürdü. */
  background: var(--surface);
  padding: .35rem;
}
.card__photo--product img { object-fit: contain; }

.card--drink .card__body { padding: .7rem .45rem .35rem; min-height: 0; }
.card--drink .card__top { gap: .4rem; }
.card--drink .card__name { font-size: .98rem; }
.card--drink .card__price { padding: .26rem .55rem; font-size: .84rem; }
.card--drink .card__desc { font-size: .9rem; margin-top: .35rem; }
/* Baştaki [lang] şart: 14. bölümdeki [lang="en"]/[lang="ar"] .card__desc
   kuralı (5 satır) aynı ağırlıkta ve dosyada daha sonra geldiği için
   aksi halde bunu ezerdi.
   4 satır ÖLÇÜLEREK seçildi, göz kararı değil: en dar telefonda (360px, kart
   içi yazı alanı ~132px) İngilizce aroma satırı tam 4 satır ediyor. Burası
   2'ye düşürülürse — eskiden öyleydi — son aroma "…" ile kesilir ve müşteri
   o aromayı hiç göremez. Aroma satırını uzatacaksanız önce burayı ölçün. */
[lang] .card--drink .card__desc { -webkit-line-clamp: 4; line-clamp: 4; }

/* İçecek ızgarası. Telefon kuralı 13. bölümdeki @media (max-width: 760px)
   içinde — orada `.grid { 1fr }` var ve bu satırdan SONRA geldiği için
   buraya yazılan telefon kuralı ezilirdi.
   align-items:stretch: açıklaması olan kart (Ice Tea, Meyve Suyu)
   yanındakini yukarıda bırakmasın, alt kenarlar hizalansın. */
.grid--drinks {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  /* Satır bazında hizalama: yan yana duran kartların alt kenarları hizalanır.
     grid-auto-rows:1fr DENENDİ ve geri alındı — bütün satırları en uzun karta
     eşitleyince açıklaması olmayan kartların altında 65px boş alan kalıyordu.
     Telefonda bu israf, hizalamanın kazandırdığından fazla. */
  align-items: stretch;
}

/* Menü altı not */
.menu-note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-inline-start: 3px solid var(--ember);
  border-radius: var(--r-card);
  font-size: .9rem; color: var(--muted);
}
.menu-note strong { color: var(--ink); font-weight: 600; }

/* --- 11. İçerik sayfaları ------------------------------------------- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: .85rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; margin-bottom: .6rem; }
.prose p { color: var(--ink-2); }
.prose > p:first-of-type { font-size: 1.1rem; color: var(--ink-2); }
.prose img { border-radius: var(--r-block); margin-block: 2rem; }
.prose ul { padding-inline-start: 1.1rem; color: var(--ink-2); }
.prose li { margin-bottom: .45rem; }

.pullquote {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: var(--r-block);
  font-family: var(--font-serif);
  font-size: 1.2rem; font-style: italic; line-height: 1.55;
  color: var(--ink-2);
}

/* Değer/özellik kartları */
.tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tile {
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: var(--r-block);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.tile h3 { margin-bottom: .6rem; }
.tile p { color: var(--muted); font-size: .96rem; margin: 0; }

/* İletişim aksiyon kartları */
.actions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.action {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--grout);
  border-radius: var(--r-block);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.action:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #cfdde2; }
.action__label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-deep); }
.action__value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.action__hint { font-size: .88rem; color: var(--muted); }

/* Galeri */
.gallery { display: grid; gap: clamp(.75rem, 1.5vw, 1rem); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery figure { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: 1px solid var(--grout); }
/* 4:5 — scripts/mekan-hazirla.py dosyaları ZATEN bu oranda üretiyor
   (900x1125). İkisi ayrı düşerse tarayıcı ikinci kez kırpar ve scriptteki
   kırpma çapaları anlamını yitirir. Biri değişirse diğeri de değişmeli. */
.gallery img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img { transform: scale(1.04); }

/* Kaydırmalı şeridin altındaki nokta göstergesi. main.js 5. bölüm üretiyor.
   Burada display:none — PC'de ızgara var, kayan bir şey yok, gösterecek
   konum da yok. Telefon kuralı 891. satırdaki media query'de açıyor. */
.dots { display: none; justify-content: center; gap: .4rem; margin-top: .9rem; }
.dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grout);
  transition: background-color .2s ease, transform .2s ease;
}
.dots span.is-active { background: var(--ink); transform: scale(1.35); }

/* Video ve harita gömüleri */

/* Videolar HER ÖLÇÜDE ortalanmış kayan şerit — izlenen video ortada,
   komşuları iki yanda soluk durur. Izgara değil, çünkü 5 video ızgarada
   3+2 diye kırılıp alt sıra sola yaslanıyordu.

   Galeri şeridindeki negatif margin numarası burada KULLANILMIYOR:
   ortalama padding'in yüzdesiyle yapılıyor ve yüzde KAPSAYICI BLOĞA göre
   çözülüyor. Şeridi kapsayıcıdan geniş yapsaydık ilk video tam ortada
   değil, gutter kadar kaymış dururdu. */
.videos {
  /* Kutu genişliği UZUNLUK olmalı, yüzde DEĞİL. Yüzde verilseydi kutu
     şeridin İÇ KUTUSUNA (padding çıktıktan sonra), aşağıdaki padding ise
     KAPSAYICI BLOĞA göre çözülürdü; ikisi birbirini kovalar ve ilk video
     tam ortaya oturmaz. Ölçüldü: %70'te 165px padding gerekirken 280 lazımdı.
     Telefonda 72vw (390px'te ~281x499), daha genişte 320px'de sabitlenir. */
  --video-w: min(72vw, 320px);
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* İLK ve SON video da ortalanabilsin diye iki yana yarım kutu boşluk */
  padding-inline: calc(50% - var(--video-w) / 2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.videos::-webkit-scrollbar { display: none; }
.videos > .video { flex: none; width: var(--video-w); scroll-snap-align: center; }

/* Ortadaki net, diğerleri geri çekilir. Hangisinin ortada olduğunu
   main.js 5. bölüm yazıyor (nokta göstergesiyle aynı hesap).
   transform SADECE görsel: düzeni ve kaydırma adımını etkilemez.
   İki şerit de bu niteliği taşıyor: videolar her ölçüde, fotoğraflar
   telefonda (PC'de ızgaraya döndüğü için 761px bloğunda geri alınıyor). */
[data-center] > * { opacity: .45; transform: scale(.94);
                    transition: opacity .35s ease, transform .35s ease; }
[data-center] > .is-current { opacity: 1; transform: none; }

/* Video şeridi PC'de de kayıyor, dolayısıyla noktaları da orada görünmeli.
   Galeri noktaları telefonda kalmaya devam eder (760px bloğu). */
.videos + .dots { display: flex; }

.video, .map {
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--grout);
}
/* Videolar dikey çekilmiş — 9:16 kutu, yan bantsız oynar */
.video { aspect-ratio: 9 / 16; }
.map { aspect-ratio: 16 / 9; }
/* <video> de buraya dahil: son iki video Vimeo'dan değil kendi
   sunucumuzdan geliyor. object-fit kaynak 464x832 (0,558) ile kutunun
   9:16'sı (0,5625) arasındaki %1'lik farkı bant bırakmadan yutuyor. */
.video iframe, .map iframe { width: 100%; height: 100%; border: 0; display: block; }
.video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }

/* --- Video kapağı (tıkla-oynat) -------------------------------------
   Videolar sayfanın ilk bölümünde, yani loading="lazy" onlarda işe
   yaramıyordu: tarayıcı zaten görünür alandaki üç Vimeo oynatıcısını
   anında indiriyordu (~2,5 MB + 3 ayrı dış sunucuya bağlantı).

   Onun yerine kendi fotoğrafımızı gösteriyoruz; ziyaretçi tıklayınca
   main.js gerçek iframe'i autoplay ile yerine koyuyor. Videoyu izlemek
   isteyen tek tıkla izliyor, izlemeyen o yükü hiç ödemiyor. */
.video__play {
  display: block; position: relative;
  width: 100%; height: 100%;
  padding: 0; border: 0; margin: 0;
  background: none; cursor: pointer;
  color: #fff;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fotoğrafın üstüne ince bir karartma: oynat düğmesi açık renkli
   karelerde de görünsün. */
.video__play::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,16,20,.10) 0%, rgba(9,16,20,.38) 100%);
  transition: background .22s ease;
}
.video__play:hover::after { background: rgba(9,16,20,.18); }

.video__icon {
  position: absolute; z-index: 1;
  top: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 6px 24px -6px rgba(9,16,20,.6);
  transition: transform .22s ease, background .22s ease;
}
/* RTL'de translate'in X yönü ters çevrilmeli, yoksa düğme merkezden kayar */
[dir="rtl"] .video__icon { transform: translate(50%, -50%); }

.video__play:hover .video__icon { transform: translate(-50%, -50%) scale(1.07); }
[dir="rtl"] .video__play:hover .video__icon { transform: translate(50%, -50%) scale(1.07); }

.video__icon svg { width: 28px; height: 28px; margin-inline-start: 3px; }
[dir="rtl"] .video__icon svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px; }

/* --- Video şeridi ok tuşları ----------------------------------------
   Şerit PC'de parmakla kaydırılamıyor, fare tekerleği dikey gidiyor ve
   kaydırma çubuğu gizli (scrollbar-width: none) — yani şeridi hareket
   ettirmenin GÖRÜNÜR bir yolu yoktu. Bu iki tuş onu veriyor.
   Telefonda görünmezler: orada parmakla kayıyor, ayrıca 9:16 kutunun
   üstüne binip oynat düğmesini zorlaştırırlardı.

   Konumlandırma `position: absolute` DEĞİL, ızgara: şerit ve altındaki
   nokta göstergesi iki ayrı satır, tuşlar ŞERİDİN satırına konuyor.
   Absolute olsaydı `top: 50%` noktaları da sayar, tuşlar aşağı kayardı.
   `justify-self` ve `margin-inline-*` mantıksal olduğu için Arapça'da
   yön çevirisini tarayıcı kendisi yapıyor. */
.videos-nav { display: grid; grid-template-columns: 1fr; }
/* min-width: 0 olmazsa ızgara sütunu kayan şeridin İÇERİĞİ kadar
   (5 videonun toplamı) şişebiliyor — bir satırlık sigorta. */
.videos-nav > .videos { grid-area: 1 / 1; min-width: 0; }
.videos-nav > .dots   { grid-area: 2 / 1; }

.vidnav {
  grid-area: 1 / 1;          /* şeritle AYNI hücre */
  align-self: center;        /* şeridin dikey ortası — noktalar sayılmaz */
  z-index: 2;
  /* 44px: dokunma/tıklama hedefinin alt sınırı (bkz. .burger) */
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--grout);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);   /* .video__icon ile aynı reçete */
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, opacity .18s ease;
}
/* Kenardan DIŞARI taşıyorlar: 320px'lik kutunun ortasındaki 68px'lik oynat
   tuşu kutunun 126.-194. pikselleri arasında, bu tuş ise en fazla 24px
   içeri giriyor — ikisi ASLA üst üste binmez. */
.vidnav--prev { justify-self: start; margin-inline-start: -1.25rem; }
.vidnav--next { justify-self: end;   margin-inline-end: -1.25rem; }

.vidnav svg { width: 16px; height: 16px; }
/* Tuşların YERİ mantıksal özelliklerle zaten yer değiştiriyor (Arapça'da
   "önceki" sağa geçiyor); değişmeyen tek şey okun ucu, o da burada
   çevriliyor — .video__icon svg'sindeki numaranın aynısı. */
[dir="rtl"] .vidnav svg { transform: scaleX(-1); }

.vidnav:hover { background: #fff; border-color: var(--sea); transform: scale(1.06); }
.vidnav:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

/* Şeridin ucuna gelindi: tuş sönük ve tıklanamaz. KAYBOLMUYOR — yerinden
   oynayan tuş elin gittiği yeri şaşırtır. */
.vidnav:disabled { opacity: .32; cursor: default; transform: none; box-shadow: none; }

/* Telefon/dar tablette hiç yok (gerekçe yukarıda). Sitenin tek kırılma
   noktası 760/761px; üçüncü bir ölçü uydurulmuyor. */
@media (max-width: 760px) { .vidnav { display: none; } }

/* `hidden` niteliğinin yukarıdaki `display: grid`i ezmesi için ŞART:
   tarayıcının kendi [hidden] kuralı yazar kurallarından zayıftır. JS
   kapalıyken ya da şerit taşmıyorken düğmeler böyle gizleniyor. */
.vidnav[hidden] { display: none; }

/* --- 12. Footer ----------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding-block: clamp(2.75rem, 6vw, 4rem) 1.75rem;
}
.footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer__logo img { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer h4 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: .9rem;
}
.footer p { font-size: .93rem; line-height: 1.7; }
.footer__socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer__socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  color: rgba(255,255,255,.8);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.footer__socials a:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.footer__socials svg { width: 18px; height: 18px; }

.footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.5);
}

/* --- 13. Duyarlı ---------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; margin-inline-start: 0; }
  /* nav gizlenince boşluğu iten öge dil seçici olur: dil + hamburger sağda kalır */
  .lang { margin-inline-start: auto; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  /* 360px'te logo + dil + hamburger yan yana sığsın */
  .header__bar { gap: .7rem; }
  .header__logo img { height: 34px; }
  .lang__toggle { padding: .3rem .5rem; gap: .35rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { margin-inline: .75rem; }
  .card__body { padding: .85rem .5rem .35rem; }
  /* Fiyat telefonda da sağ üstte kalır; uzun ad alt satıra kayar,
     fiyat rozeti ilk satırın hizasında sağda durur. */
  .card__top { gap: .6rem; }
  .grid { grid-template-columns: 1fr; }
  /* İlaveler telefonda tek sütun: kare kutu değil, tam genişlikte şerit */
  .grid--compact { grid-template-columns: 1fr; }
  /* İçecekler telefonda KESİN ikili. auto-fill kullanılmadı — dar ekranda
     tek sütuna düşerdi, oysa istenen her zaman iki kartın yan yana olması.
     Bu satır yukarıdaki `.grid { 1fr }` kuralını ezmek için burada durmalı. */
  .grid--drinks { grid-template-columns: repeat(2, 1fr); }
  /* Aroma satırına yer açmak için üç yerden birkaç piksel: kartlar arası
     boşluk, kartın iç boşluğu ve gövde iç boşluğu. Toplam kazanç kart başına
     ~13px. Kart SAYISI artırılamadığı (yukarıda ikili sabit) ve ekran zaten
     360px olduğu için kutuyu büyütmenin başka yolu yok.
     Daha fazla kısmayın — kart nefes alamaz, fotoğraf kenara yapışır. */
  .grid--drinks { gap: .625rem; }
  .card--drink { padding: .45rem; }
  .card--drink .card__body { padding: .7rem .3rem .35rem; }
  /* Bir tık küçük yazı. Tek başına satır sayısını düşürmüyor (ölçüldü: 12,8px'e
     inince bile 360px'te aynı kalıyor, satır sonları iri parçalara denk geliyor)
     ama yukarıdaki genişleme ile birlikte 390px telefonda Türkçe aroma satırını
     3 satırdan 2'ye indiriyor. .8rem'in altına inmeyin — okunmaz. */
  .card--drink .card__desc { font-size: .85rem; }
  /* İki dar sütunda ad ve fiyat yan yana sığmıyor. wrap DEĞİL sütun:
     wrap ile kısa adlarda (Çay, Ayran) fiyat sağda kalıp uzun adlarda
     (Uludağ Mineralli Su) alta iniyordu, kartlar birbirini tutmuyordu.
     Sütun yönü hepsinde aynı sonucu verir — fiyat her zaman adın altında. */
  .card--drink .card__top { flex-direction: column; gap: .25rem; }
  .menu-section__head { flex-wrap: wrap; gap: .35rem .75rem; }
  .menu-section__count { margin-inline-start: 0; width: 100%; }

  /* Galeri telefonda YATAY şerit.
     Sebep: 12 fotoğraf tek sütunda ~4100 px dikey yer tutuyordu. Bu bir QR
     menüsü — kimse o kadar aşağı kaydırmıyor. Reçete kategori çubuğundan
     alındı (.catbar__scroll): flex + overflow-x + gizli kaydırma çubuğu.
     Tek yeni şey scroll-snap; desteklemeyen tarayıcıda serbest kaydırma
     olur, bozulan bir şey yok.

     Seçici `.gallery`, `[data-carousel]` DEĞİL: video şeridi de aynı
     niteliği taşıyor ama o PC'de de şerit olarak kalıyor, oysa bu blok
     yalnızca telefonda geçerli. */
  .gallery {
    /* Video şeridiyle AYNI reçete (bkz. `.videos`): kutu genişliği uzunluk
       olmalı, yüzde değil. Yüzde verilseydi kutu şeridin iç kutusuna,
       alttaki ortalama padding'i ise kapsayıcı bloğa göre çözülür, ikisi
       birbirini kovalar ve ilk fotoğraf tam ortaya oturmazdı.
       Ölçü de videolarla birebir aynı — iki şerit üst üste aynı hizada. */
    --photo-w: min(72vw, 320px);
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* İLK ve SON fotoğraf da ortalanabilsin diye iki yana yarım kutu boşluk.
       Buraya eskiden `margin-inline: calc(-1 * var(--gutter))` ile kenardan
       kenara numarası yazılıydı; ortalamayla BİRLİKTE KULLANILAMAZ. Şerit
       kapsayıcıdan geniş olsaydı yüzdeyle hesaplanan padding kayar ve ilk
       fotoğraf gutter kadar yamuk dururdu. */
    padding-inline: calc(50% - var(--photo-w) / 2);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery::-webkit-scrollbar { display: none; }

  /* Ortaya hizalı — `start` değil. Tam genişlik de DEĞİL: iki yanda komşu
     karelerin kenarı görünsün. Kullanıcıya "burası yana kayıyor" diyen şey
     nokta göstergesi değil, o payda göz kırpan fotoğraftır. */
  .gallery > figure { flex: none; width: var(--photo-w); scroll-snap-align: center; }
  /* Video şeridi için burada kural YOK: temel kuraldaki
     --video-w: min(72vw, 320px) telefonda kendiliğinden 72vw'ye düşüyor. */

  .dots { display: flex; }
}

/* Sadece PC/tablet — telefon görünümü hiç etkilenmez.
   Kartlar yan yana dizildiğinde aynı satırdakiler eşit boyda dursun.
   Izgara satırı zaten en uzun kartın boyunda; bu kural sayfayı UZATMAZ,
   yalnızca kısa kartların kutusunu satır yüksekliğine tamamlar. */
@media (min-width: 761px) {
  .grid { align-items: stretch; }

  /* Galeri PC'de kayan şerit değil ızgara: ortada bir kare yok, dolayısıyla
     `[data-center] > *` soluklaştırması burada 12 fotoğrafın 11'ini boşuna
     söndürürdü. Nitelik telefon için duruyor, PC'de etkisi geri alınıyor. */
  .gallery > figure { opacity: 1; transform: none; }

  /* Video şeridi PC'de de şerit, AMA orada üç kutu birden görünüyor
     (1100px'lik alana 3x320 + 2x24 = 1008 sığıyor) ve `.45` saydamlık +
     scale(.94) yandaki ikisini neredeyse yok ediyordu: "tek video var"
     izlenimi. Üçü de tam net dursun. Telefonda tek kutu göründüğü için
     ortalama efekti orada aynen kalıyor.
     Seçici `[data-center] > *`ten güçlü (0,2,0 > 0,1,0). */
  .videos > .video { opacity: 1; transform: none; }

  /* İçecekler/ilaveler: satır içinde değil, bütün kartlar tek boyda olsun.
     grid-auto-rows:1fr tüm satırları en yüksek satıra eşitler. */
  .grid--compact { grid-auto-rows: 1fr; }

  /* Aroma satırı (Ice Tea, Meyve Suyu) en fazla 2 satır; taşarsa "…".
     Baştaki [lang] şart: 14. bölümdeki [lang="en"]/[lang="ar"] .card__desc
     kuralı (5 satır) daha güçlü olduğu için aksi halde bunu ezerdi. */
  [lang] .card--compact .card__desc { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* --- 14. Arapça: sağdan sola ve tipografi --------------------------- */
/* Yerleşimin tamamı mantıksal özelliklerle (inline-start/end) yazıldığı için
   yön çevirisini tarayıcı halleder. Burada yalnızca yönü kendi içinde taşıyan
   şeyler kalıyor: gradyanlar ve iki dilli (rakam/latin) kaçışlar. */

[dir="rtl"] .eyebrow::before,
[dir="rtl"] .nav__link[aria-current="page"]::after {
  background: linear-gradient(270deg, var(--ember), var(--sea));
}

/* Hero'da karartma, metnin geçtiği tarafta yoğun olmalı — RTL'de sağda */
[dir="rtl"] .hero::after {
  background:
    linear-gradient(270deg, rgba(9,16,20,.9) 0%, rgba(9,16,20,.62) 42%, rgba(9,16,20,.15) 100%),
    linear-gradient(180deg, rgba(9,16,20,.45) 0%, rgba(9,16,20,.2) 45%, rgba(9,16,20,.75) 100%);
}
[dir="rtl"] .hero:not(.hero--page)::after {
  background:
    linear-gradient(270deg, rgba(9,16,20,.82) 0%, rgba(9,16,20,.54) 42%, rgba(9,16,20,.10) 100%),
    linear-gradient(180deg, rgba(9,16,20,.38) 0%, rgba(9,16,20,.14) 45%, rgba(9,16,20,.68) 100%);
}

/* Fiyat, telefon ve saat soldan sağa okunur. RTL akışında bunlar bırakılırsa
   rakam grupları ters sıralanır (ör. "+90 538 442 61 96" → "96 61 442 538 90+"). */
[dir="rtl"] .card__price,
[dir="rtl"] .action__value,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr; unicode-bidi: isolate; text-align: right;
}

/* Fırın ateşi fotoğrafın %58'inde; karartma aynalanınca kadraj da aynalanmalı,
   yoksa gradyanın en koyu ucu tam ateşin üstüne düşer. */
[dir="rtl"] .hero__media img { object-position: 42% 74%; }

/* Arap alfabesi mevcut üç yazı tipinde yok; dil seçilince i18n.js
   Google Fonts'tan yükler, token'lar burada değişir. */
[lang="ar"] {
  --font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-serif:   'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.8;
}
/* Arapça'da italik ve harf aralığı yanlıştır — aralık harflerin bitişmesini bozar,
   büyük/küçük harf kavramı da yoktur. */
[lang="ar"] .card__desc,
[lang="ar"] .card__badge,
[lang="ar"] .pullquote { font-style: normal; }
[lang="ar"] .card__badge { letter-spacing: 0; }
/* "الأكثر طلباً" IBM Plex Sans Arabic'te 84,7px — Latin taban ölçüsünü (80px)
   aşıyor, o yüzden Arapça'da kurdeleler eşitlenmiyordu. Taban buradan yükselir;
   Türkçe/İngilizce 80px'te kalır. */
[lang="ar"] .card__badge { min-width: 5.4rem; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 {
  letter-spacing: 0; line-height: 1.4;   /* Arapça'da 1.1 alt uzantıları kırpar */
}
[lang="ar"] .eyebrow,
[lang="ar"] .footer h4,
[lang="ar"] .action__label { letter-spacing: 0; text-transform: none; }
[lang="ar"] .card__name { letter-spacing: 0; line-height: 1.45; }
[lang="ar"] .action__value,
[lang="ar"] .menu-section__count { letter-spacing: 0; }

/* Latin ve Arapça çeviriler Türkçe'den uzun — malzeme satırı 4'te kırpılmasın */
[lang="en"] .card__desc,
[lang="ar"] .card__desc { -webkit-line-clamp: 5; line-clamp: 5; }

/* Dil seçicinin kısaltmaları (TR/EN/AR) her dilde Latin kalır */
[lang="ar"] .lang__code { font-family: 'Manrope', 'Segoe UI', sans-serif; letter-spacing: .04em; }
/* Listedeki "العربية" satırı Türkçe/İngilizce moddayken de Arapça yazılır;
   [lang="ar"] o düğmenin kendisine de uyduğu için satır aralığını sabitle. */
.lang__opt[lang="ar"] { line-height: 1.35; }

/* --- 15. Erişilebilirlik -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .header, .catbar, .footer, .hero, .burger { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}