/* @theme Kaşuk Lokantası — Modernist */
/* @theme-color #f3f2f2 */

/*
 * KAŞUK LOKANTASI — tasarım varyasyonu
 * ====================================
 *
 * Kaynak: Claude Design projesi "Kasuk QR Menu.dc.html" (modernist tasarım
 * sistemi + tuvalde ezilen turkuaz vurgu). Sekiz ekran, 390 px, TR / EN / AR.
 *
 * Bu dosya tokens.css VE app.css/admin.css'ten SONRA yüklenir; hem token'ları
 * hem bileşen kurallarını ezebilir. HTML'i değişen iki ekran ayrıca
 * app/views/themes/kasuk/ altında.
 *
 * Tasarımın kuralları:
 *   - Tek yazı ailesi (Archivo), ağırlıkla ayrışır: 800 taşıyıcı, 600 ikincil.
 *   - Sıfır köşe yarıçapı. Yuvarlaklık yok.
 *   - 2 px kurallar bölüm sınırı, 1 px kurallar satır sınırı.
 *   - İKİ MARKA RENGİ: #01687F turkuaz (vurgu) ve #8C6F43 kahve (koyu rol).
 *     Üçüncü renk yok; her ton bu ikisinin bir basamağı. Ayrıntı §2'de.
 *   - Koyu bantlar taşıyıcı; turkuaz YALNIZCA birincil eylem, rozet, bölüm
 *     sayacı ve aktif durumda. Geniş turkuaz yüzey yalnızca giriş düğmesi.
 *   - Her 2 px kural ve kontur marka kahvesi; metin onun koyu basamağı.
 *   - Fotoğraflar siyah-beyaz basılır.
 *   - Başlıklar büyük harf ve negatif harf aralığıyla sıkıştırılır.
 *
 * Kasıtlı SAPMALAR (tasarımda olmayan durumlar):
 *   - Tasarımda 3 dil çizilmiş, uygulamada 4 dil var (tr/en/ar/fa). Giriş
 *     ekranındaki dil ızgarası 3 sütun yerine 2 sütun: 4 hücre tam oturuyor,
 *     hücre görünümü tasarımdakiyle aynı.
 *   - Ürün detayı sayfası JavaScript ile kuruluyor ve markup ortak. Tasarımın
 *     sayfa başındaki "Izgara · 03 / 06" etiketi orada yok; kapatma çubuğu
 *     tasarımdaki gibi duruyor, etiket düşüyor.
 */


/* =========================================================================
 * §1 TİPOGRAFİ
 * =========================================================================
 *
 * Kendi sunucumuzdan servis edilir — Google'a hiçbir istek gitmez. İkisi de
 * DEĞİŞKEN font: tek dosya 400–800 arasındaki her ağırlığı karşılıyor,
 * ağırlık başına ayrı dosya istemek aynı dosyayı üç kez indirtiyordu.
 *
 * Noto Kufi Arabic yalnızca Arapça görünümde iner: unicode-range Latin
 * metinle eşleşmiyor, tarayıcı dosyayı hiç istemiyor.
 */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url(../../fonts/kasuk/archivo-latin.woff2)format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url(../../fonts/kasuk/archivo-latin-ext.woff2)format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Noto Kufi Arabic;font-style:normal;font-weight:400 800;font-display:swap;src:url(../../fonts/kasuk/noto-kufi-arabic.woff2)format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}


/* =========================================================================
 * §2 TOKEN'LAR
 * ========================================================================= */

:root {
  /*
   * MARKA RENKLERİ — yalnızca iki renk:
   *
   *   #01687F  turkuaz  → vurgu: birincil eylem, rozet, bölüm sayacı, aktif durum
   *   #8C6F43  kahve    → koyu rol: kurallar, konturlar, dolgular, başlıklar
   *
   * Üçüncü bir renk yok. Aşağıdaki tonların hepsi bu ikisinin açık/koyu
   * basamağıdır; nötr ramp bile kahverenginin doygunluğu düşürülmüş hâli,
   * böylece hiçbir yerde "yabancı gri" durmuyor.
   *
   * Basamak türetmek zorundaydım çünkü #8C6F43 açık zeminde 4,20:1 veriyor —
   * WCAG AA eşiği normal punto için 4,5:1. Marka tonu büyük başlıkta, çizgide
   * ve dolguda kalıyor; küçük punto koyu basamağa geçiyor. Loş restoran
   * ışığında okunması gereken metinlerde eşiğin altına düşmek kabul edilemez.
   */

  /* Kâğıt. Yüzey kahverengiye doğru hafifçe ısıtıldı: soğuk gri, sıcak
     kahvenin yanında ölü duruyor. */
  --color-bg: #f3f2f2;
  --color-surface: #e9e6e1;

  /* Ana metin: kahverenginin en koyu basamağı — 11,83:1. */
  --color-text: #3a2e1d;

  /* Turkuaz. Zeminde 5,72:1 ve üstüne açık yazı da 5,72:1 — hem yüzey hem
     metin olarak verildiği gibi kullanılabiliyor, basamak türetmek gerekmedi. */
  --color-accent: #01687f;
  /* Koyu zeminde okunan açık basamak: giriş ekranının kicker satırı, 4,93:1. */
  --color-accent-400: #5aa9bb;
  --color-accent-100: #e6f1f4;
  --color-accent-200: #c2dee5;
  --color-accent-300: #94c5d1;
  --color-accent-500: #0d7d97;
  /* Basılı ve üzerine gelme durumları. */
  --color-accent-600: #015a6d;
  --color-accent-700: #014c5c;
  --color-accent-800: #01414f;
  --color-accent-900: #01323d;

  /* Marka kahvesi: 2 px kurallar, konturlar, büyük başlık dolguları. */
  --color-divider: #8c6f43;

  /*
   * Nötr ramp — kahverenginin doygunluğu düşürülmüş basamakları.
   * 600 küçük puntonun taban çizgisi: zeminde 5,12:1, yüzeyde 4,60:1;
   * pasif kategori sekmesi ve gramaj bu tonda ve ikisi de küçük punto.
   * 400 kontur olarak kullanılıyor, WCAG'ın bileşen konturu için istediği
   * 3:1'i geçiyor.
   */
  --color-neutral-100: #f8f6f3;
  --color-neutral-200: #efece6;
  --color-neutral-300: #dcd6cb;
  --color-neutral-400: #98907f;
  --color-neutral-500: #8b8375;
  --color-neutral-600: #6f6555;
  --color-neutral-700: #5c5344;
  --color-neutral-800: #4a4234;
  --color-neutral-900: #3a2e1d;

  --dim-panel: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  --dim-sheet: color-mix(in srgb, var(--color-neutral-900) 58%, transparent);

  /* Fotoğrafsız ürünün kutusu — tasarımda düz yüzey, tarama yok. */
  --color-hatch-a: #e9e6e1;
  --color-hatch-b: #e9e6e1;

  /* Tek aile: başlık da metin de Archivo. */
  --font-heading: Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-arabic: "Noto Kufi Arabic", system-ui, sans-serif;

  /* Archivo'nun gerçek 800'ü var; temel temadaki kontur hilesine gerek yok. */
  --heading-stroke: 0;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #3a2e1d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #3a2e1d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #3a2e1d 22%, transparent);

  --category-bar-height: 45px;
}

/* Arapça ve Farsça görünümde tek Arap yüzü. */
[dir="rtl"] {
  --font-heading: "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body: "Noto Kufi Arabic", system-ui, sans-serif;
}


/* =========================================================================
 * §3 ORTAK BİÇİM
 * ========================================================================= */

/* Tasarımın "büyük harf + sıkı aralık" başlık sesi. */
.e-restaurantName,
.m-sectionTitle,
.d-name,
.s-title {
  text-transform: uppercase;
  letter-spacing: -0.035em;
}

/* Küçük etiketler: 600, geniş aralık, büyük harf. Tasarımda bu ses her
   yerde aynı — kicker, gramaj, sayfa altı notu, dil başlığı. */
.m-panelCaption,
.m-footerNote,
.e-legal,
.d-gram,
.d-calories,
.m-footerLink,
.s-priceLabel,
.d-variantLabel {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* Turkuaz yalnızca eylemde: düğme dolgusu bu tek yerde geniş yüzey olur. */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn-accent:hover { background: var(--color-accent-600); }
.btn-accent:active { background: var(--color-accent-700); }


/* =========================================================================
 * §4 MENÜ BAŞLIĞI VE KATEGORİ BARI  (tasarım 02)
 * ========================================================================= */

.m-header {
  background: var(--color-neutral-900);
  padding: 11px 18px;
  border: 0;
}

/* Marka iki parça: ad 800, tür 600 ve geniş aralıklı. İkisi de tema
   şablonunda ayrı düğüm — app/views/themes/kasuk/site/menu.php */
.m-headerName {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--color-bg);
}

.k-headerKind {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

.m-headerBrand {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.m-headerLogo {
  /* Logo dosyası koyu; koyu bant üzerinde okunması için beyaza çevrilir. */
  filter: brightness(0) invert(1);
  width: 34px;
  height: auto;
}

/*
 * Yatay başlık logosu. Markayı tek başına taşıdığı için bandın yüksekliğine
 * göre ölçekleniyor, genişliği serbest.
 *
 * Renk DEĞİŞTİRİLMİYOR: pakette gelen dosya koyu bant için hazırlanmış iki
 * tonlu varyant. Logonun özgün renkleri (#01687F turkuaz ve #8C6F43 kahve)
 * bu bandın üzerinde 2,07:1 ve 2,81:1 veriyordu, yani okunmuyordu; varyantta
 * turkuaz açık basamağına (4,93:1), kahve kâğıt rengine (11,83:1) alındı.
 *
 * Panelden başka bir logo yüklerseniz onun da AÇIK RENKLİ ve şeffaf zeminli
 * olması gerekir — koyu bir logo bu bandın üzerinde kaybolur.
 */
.k-headerLogoWide {
  height: 34px;
  width: auto;
  max-width: 62vw;
  display: block;
  object-fit: contain;
  object-position: left center;
}

[dir="rtl"] .k-headerLogoWide { object-position: right center; }

.m-langTrigger {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-600);
  background: transparent;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.m-categoryBar {
  background: var(--color-bg);
  border-block-end: 2px solid var(--color-divider);
  box-shadow: none;
}

.m-categoryBarStuck { box-shadow: var(--shadow-sm); }

.m-tab {
  padding: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  border: 0;
  border-radius: 0;
  background: transparent;
}

/*
 * Aktif sekme dolu blok. Tasarımda siyahtı; marka renklerine geçince başlık
 * bandı da aktif sekme de aynı koyu kahve oldu ve sekme bandın içine kaynadı —
 * seçili sekme değil, bantta çıkıntı gibi duruyordu. Turkuaza alındı: bant
 * kahve, seçim turkuaz, ikisi net ayrılıyor. Üstündeki 11 px açık yazı
 * turkuaz zeminde 5,72:1 — AA eşiğinin üstünde.
 */
.m-tabActive {
  font-weight: 800;
  background: var(--color-accent);
  color: var(--color-bg);
}


/* =========================================================================
 * §5 BÖLÜM BAŞLIĞI  (tasarım 02)
 * ========================================================================= */

.m-sectionHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 18px 0 8px;
  border: 0;
}

.m-sectionTitle {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  margin: 0;
  /* Bölüm başlığı mürekkep rengi; turkuaz yalnızca sağdaki sayaçta. */
  color: var(--color-text);
}

/* Ortak şablondaki ince çizgi yerine bölüm sınırını 2 px kural taşıyor. */
.m-sectionRule {
  display: block;
  grid-column: 1 / -1;
  order: 3;
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: 2px solid var(--color-divider);
  background: none;
}

/* "01 / 06" — kategorinin sırası ve toplamı; tema şablonu basıyor. */
.m-sectionCount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}


/* =========================================================================
 * §6 ÜRÜN SATIRI  (tasarım 02, 03)
 * ========================================================================= */

.d-row {
  gap: 14px;
  padding: 14px 0;
  border-block-end: 1px solid var(--color-neutral-300);
  border-radius: 0;
}

.d-photo,
.d-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 0;
  /* Tasarım fotoğrafları siyah-beyaz basıyor; `contain` tabağı kırpmıyor. */
  object-fit: contain;
}

.d-soldOutMedia { filter: grayscale(1) contrast(1.08) opacity(0.4); }

.d-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.d-nameSoldOut { color: var(--color-neutral-500); }

.d-badge {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 6px;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 0;
  border-radius: 0;
  white-space: nowrap;
}

.d-badgeSoldOut { background: var(--color-neutral-600); }

.d-translit {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-top: 3px;
}

.d-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-neutral-800);
  margin: 6px 0 0;
  text-wrap: pretty;
}

/*
 * Tükendi: ürün gizlenmez, soluklaşır. Ad ve fiyat büyük ve kalın olduğu için
 * açık gri (3,36:1) onlarda yeterli — WCAG büyük punto eşiği 3:1. Açıklama
 * 12,5 px, orada aynı ton okunmaz hâle geliyordu; bir basamak koyusuna
 * geçiyor (5,12:1) ve normal açıklamaya (8,86:1) göre yine belirgin biçimde
 * soluk kalıyor. Rozetin üstünde 9 px yazı var, o da bir basamak koyu.
 */
.d-descSoldOut { color: var(--color-neutral-600); }

.d-meta { gap: 7px; margin-top: 9px; }

.d-gram,
.d-calories {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-neutral-600);
}

/* Tükenmiş üründe künye de soluklaşır. */
.d-row:has(.d-nameSoldOut) .d-calories { color: var(--color-neutral-500); }

/* Alerjen: kare, konturlu, dolgusuz. Dokunma hedefi görsel kutudan büyük
   kalsın diye kutu küçültülürken düğmenin kendisi 44 px'lik alanı korur. */
.d-allergen {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--color-neutral-400);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 9.5px;
  color: var(--color-neutral-700);
}

.d-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.d-priceSoldOut { color: var(--color-neutral-500); }

.d-variants {
  margin-top: 9px;
  border-block-start: 1px solid var(--color-neutral-300);
}

.d-variantRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border: 0;
}

/* Tasarımda nokta dizisi yok: etiket solda, fiyat sağda, arada boşluk. */
.d-variantLeader { display: none; }

.d-variantLabel {
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--color-neutral-700);
}

.d-variantPrice {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
}


/* =========================================================================
 * §7 BOŞ KATEGORİ  (tasarım 04)
 * ========================================================================= */

.m-empty {
  border: 2px solid var(--color-neutral-400);
  border-radius: 0;
  padding: 14px;
  background: transparent;
  text-align: start;
}

.m-emptyTitle {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.m-emptyNote {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-neutral-700);
  margin: 5px 0 0;
}


/* =========================================================================
 * §8 SAYFA ALTI  (tasarım 04)
 * ========================================================================= */

.m-footer { border-block-start: 2px solid var(--color-divider); padding-top: 14px; }

.m-footerCall {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Bağlantılar 2×2 kafes; dış kontur tek, iç çizgiler hücrelerden gelir. */
.m-footerGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-divider);
  border-block-start: 0;
}

.m-footerLink {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10.5px;
  color: var(--color-text);
}

.m-footerGrid > .m-footerLink:nth-child(odd) {
  border-inline-end: 1px solid var(--color-divider);
}

.m-footerGrid > .m-footerLink:not(:nth-last-child(-n + 2)) {
  border-block-end: 1px solid var(--color-divider);
}

.m-footerHours {
  border: 1px solid var(--color-divider);
  border-block-start: 0;
  border-radius: 0;
  padding: 13px;
  font-size: 13px;
  background: transparent;
}

.m-footerNote {
  font-family: var(--font-heading);
  font-size: 9.5px;
  color: var(--color-neutral-600);
  line-height: 1.9;
  padding-top: 12px;
}


/* =========================================================================
 * §9 DİL PANELİ  (tasarım 05)
 * ========================================================================= */

/*
 * Tasarımda panel açılır kutu değil, başlığın altına inen TAM GENİŞLİKTE bir
 * blok. Ortak kural sağ üste 238 px'lik bir kutu koyuyordu.
 */
.m-panel {
  inset-inline: 0;
  inset-block-start: 66px;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  background: var(--color-bg);
  border: 0;
  border-block-end: 2px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

@media (min-width: 560px) {
  .m-panel { inset-inline: 0; }
}

.m-panelCaption {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--color-neutral-600);
  padding: 12px 18px 10px;
}

.m-panelRow {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-block-start: 1px solid var(--color-neutral-300);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.m-panelRowActive {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 800;
}

.m-panelCheck { font-weight: 800; font-size: 13px; }

/* Tetikleyici panel açıkken turkuaza döner — hangi düğmenin açtığı belli. */
.m-langTrigger[aria-expanded="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
}


/* =========================================================================
 * §10 ÜRÜN DETAYI  (tasarım 06)
 * ========================================================================= */

/*
 * Tasarımda sayfanın tepesinde tam genişlikte bir kapatma çubuğu var.
 * Ortak markup'ta kapatma düğmesi sayfanın KARDEŞİ ve ekrana göre
 * konumlanıyor; kabı sütun yapıp düğmeyi başa alarak çubuğa çeviriyoruz.
 */
.s-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.s-sheet {
  position: static;
  background: var(--color-bg);
  border-radius: 0;
  border-block-start: 0;
  padding: 0;
}

/* Aşağı çekerek kapatma tutamağa bağlı; tasarımda görünür bir tutamak yok,
   bu yüzden sayfanın tepesinde görünmez ama çekilebilir bir şerit kalıyor. */
.s-handle {
  width: 100%;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.s-close {
  position: static;
  order: -1;
  width: 100%;
  max-width: 460px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-block-start: 2px solid var(--color-divider);
  border-block-end: 1px solid var(--color-neutral-300);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 13px;
  box-shadow: none;
}

/* Çubuktaki "Kapat" yazısı düğmenin kendi erişilebilir adından gelir —
   böylece dil değişince metin de değişir, CSS'e gömülü Türkçe kalmaz. */
.s-close::before {
  content: attr(aria-label);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
 * Ürün fotoğrafı KIRPILMIYOR: hem satırdaki 84 px kutuda hem burada tabağın
 * tamamı görünüyor. `cover` yakın plan veriyordu ama tabağın kenarını
 * kesiyordu; restoran fotoğrafı yüklediğinde ürünü olduğu gibi görsün diye
 * `contain`. Artan yer zemin renginde kalıyor.
 *
 * Detay sayfasında HİÇBİR FİLTRE YOK. Tasarım fotoğrafları siyah-beyaz
 * basıyordu; misafirin yemeğe baktığı tek yer burası ve yemek olduğu gibi
 * görünmeli. Satırdaki küçük görsel siyah-beyaz kalmaya devam ediyor.
 *
 * Tükenmiş ürünün fotoğrafı da soldurulmuyor (ortak kural `.s-soldOutMedia`
 * burada eziliyor): durum zaten rozette ve solmuş yazıda görünüyor.
 */
.s-photo,
.s-placeholder,
.s-photo.s-soldOutMedia {
  height: 280px;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.s-titleLine,
.s-translit,
.s-desc,
.s-chips,
.s-prices { padding-inline: 18px; }

.s-titleLine { padding-top: 16px; }

.s-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.s-titleSoldOut { color: var(--color-neutral-500); }

.s-badge {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-bg);
}

.s-badgeSoldOut { background: var(--color-neutral-500); }

.s-translit {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-top: 6px;
}

.s-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-800);
  margin: 10px 0 0;
}

.s-chips { gap: 6px; margin-top: 14px; }

.s-chip {
  min-height: 34px;
  padding: 0 11px;
  gap: 6px;
  border: 1px solid var(--color-neutral-400);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.s-chipLetter { color: var(--color-accent); font-weight: 800; }

.s-chipNeutral { color: var(--color-neutral-700); }

.s-prices {
  margin-top: 16px;
  /* Ortak kural satır arasına 8 px boşluk koyuyor; tasarımda satırlar
     ince kuralla ayrılıyor, aradaki ölçü 6 px. */
  gap: 0;
  padding-top: 0;
  padding-bottom: 20px;
  border-block-start: 2px solid var(--color-divider);
}

.s-priceRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 9px;
  border: 0;
}

.s-priceRow + .s-priceRow {
  border-block-start: 1px solid var(--color-neutral-300);
  margin-top: 6px;
  padding-top: 6px;
}

.s-priceLeader { display: none; }

.s-priceLabel {
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-neutral-700);
}

.s-priceValue {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
}


/* =========================================================================
 * §11 GİRİŞ EKRANI  (tasarım 01)
 * =========================================================================
 *
 * Yapısı ortak şablondan farklı, o yüzden HTML'i tema şablonunda:
 * app/views/themes/kasuk/site/entry.php
 */

.e-screen { background: var(--color-neutral-900); }

.e-band {
  height: 71.5%;
  background: var(--color-neutral-900);
}

/*
 * Bant görselinde CSS filtresi YOK.
 *
 * Videoda filtre kullanmak her karede GPU işi demek ve zayıf telefonlarda
 * giriş ekranını takılmalı hâle getiriyor. Bunun yerine karartma pakette
 * gelen dosyaya kodlama sırasında GÖMÜLÜ (ffmpeg ile: kaynak yalnızca
 * 117–235 aralığını kullanıyordu, o aralık açılıp 0,85 kazançla aşağı
 * çekildi — ortalama parlaklık 205'ten ~105'e indi).
 *
 * Panelden başka bir görsel/video yüklenirse karartma olmaz; metnin
 * okunurluğunu her hâlükârda aşağıdaki scrim garantiliyor.
 */
.e-bandImage,
.e-bandVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.e-bandFallback {
  background: var(--color-neutral-800);
  opacity: 1;
}

/*
 * Yazının altındaki karartma.
 *
 * Üstte şeffaf: logo görselin içinde duruyor, fotoğraf kesilmiş gibi
 * görünmüyor. Aşağı indikçe koyulaşıyor; marka adı ve slogan orada.
 *
 * Alt uçtaki 0,72 opaklık kasıtlı: EN PARLAK görsel bile (beyaza yakın)
 * bu katmanın altında ~118'e iniyor ve beyaz yazı 4,5:1 AA eşiğini geçiyor.
 * Böylece restoran panelden hangi videoyu/fotoğrafı yüklerse yüklesin
 * giriş ekranındaki yazı okunur kalıyor.
 */
.e-scrim {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 71.5%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-neutral-900) 18%, transparent) 42%,
    color-mix(in srgb, var(--color-neutral-900) 72%, transparent) 100%
  );
}

/*
 * Ortak şablonda yazılar ortalanır ve fotoğrafın altına itilir
 * (`margin-top: var(--content-offset)`). Tasarımda yazılar SOLA yaslı ve blok
 * fotoğraf alanının tamamını kaplıyor: logo tepede, marka en altta.
 */
.e-content {
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  margin-top: 0;
  padding: 26px 22px 0;
}

.e-logo {
  width: 92px;
  height: auto;
  align-self: flex-start;
  /* Ortak temada logo bandın alt sınırına oturur ve bunun için -72px üst
     boşluk taşır. Burada bloğun tepesinde duruyor, boşluk sıfırlanmalı. */
  margin-top: 0;
  /* Logo dosyası koyu; koyu zeminde okunması için beyaza çevrilir. */
  filter: brightness(0) invert(1);
}

/* Adres satırı tasarımda üst kicker: turkuazın açık basamağı, koyu zeminde
   3,9:1 — büyük harfli 10 px için yeterli, ve tek dekoratif turkuaz burada. */
.k-kicker {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-top: auto;
}

.e-restaurantName {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 52px;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--color-bg);
  margin: 12px 0 0;
}

.e-rule { display: none; }

.e-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-300);
  margin: 14px 0 26px;
  max-width: 30ch;
}

/* Alt blok: dil seçimi, künye ve giriş düğmesi açık zeminde tek parça. */
.k-entryPanel {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}

.k-entryCaption {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 12px 22px 10px;
}

/*
 * Tasarımdaki gibi TEK SIRA: sütun sayısı açık dil sayısı kadar, değeri
 * tema şablonu `--lang-cols` ile veriyor. Böylece üç dilde tasarımdaki
 * üçlü ızgara çıkıyor, dil sayısı değişince de satır kaymıyor.
 */
.e-langGrid {
  display: grid;
  grid-template-columns: repeat(var(--lang-cols, 3), 1fr);
  gap: 0;
  border-block-start: 1px solid var(--color-neutral-300);
  padding: 0;
  margin: 0;
}

.e-langButton {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}

.e-langGrid > .e-langButton:not(:last-child) {
  border-inline-end: 1px solid var(--color-neutral-300);
}

.e-langButton.btn-selected {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.e-langButtonArabic { font-size: 14px; }

.e-legal {
  font-family: var(--font-heading);
  font-size: 9.5px;
  color: var(--color-neutral-600);
  line-height: 1.9;
  padding: 12px 22px;
  /* Ayıran çizgi ızgaranın alt kenarından geliyor; burada tekrarlanırsa
     iki katı kalınlıkta görünüyor. */
  border-block-start: 1px solid var(--color-neutral-300);
  margin: 0;
  text-align: start;
}

.e-langGrid > .e-langButton {
  border-block-end: 0;
}

/* Girişin kendisi: tasarımdaki tek geniş turkuaz yüzey. */
.e-enter {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  margin: 0;
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.k-enterArrow { font-size: 27px; letter-spacing: 0; }


/* =========================================================================
 * §12 ARAPÇA / FARSÇA
 * =========================================================================
 *
 * Arap yazısı aynı optik boyutta daha çok satır yüksekliği ister; rakamlar
 * ve fiyatlar her dilde Latin rakamla ve ltr yönünde kalır (ortak app.css'te).
 */

[dir="rtl"] .d-name,
[dir="rtl"] .s-title,
[dir="rtl"] .m-sectionTitle,
[dir="rtl"] .e-restaurantName {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

[dir="rtl"] .e-restaurantName { font-size: 40px; line-height: 1.15; }

[dir="rtl"] .m-sectionTitle { font-size: 22px; line-height: 1.2; }

[dir="rtl"] .d-name { font-size: 17px; }

[dir="rtl"] .s-title { font-size: 26px; line-height: 1.25; }

[dir="rtl"] .d-desc,
[dir="rtl"] .s-desc { line-height: 1.75; }

/* Latin karşılık satırı Arapça görünümde de Archivo ile ve ltr yönünde. */
[dir="rtl"] .d-translitLatin,
[dir="rtl"] .s-translitLatin {
  font-family: Archivo, system-ui, sans-serif;
}

/* Kategori sekmeleri Arapçada büyük harf/aralık almaz. */
[dir="rtl"] .m-tab,
[dir="rtl"] .m-panelRow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}

[dir="rtl"] .m-panelRow { font-size: 16px; }