/* @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ı.
 *   - Siyah bantlar taşıyıcı; turkuaz YALNIZCA birincil eylem, rozet ve
 *     bölüm numarasında. Geniş turkuaz yüzey yok.
 *   - 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 {
  /* Zemin ve mürekkep. Ölçülen kontrast 14,9:1 — loş restoran ışığı için
     fazlasıyla yeterli. */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;

  /* Turkuaz. Tasarım sisteminin kırmızısı tuvalde bununla ezilmiş.
     Zeminde 4,6:1 — küçük puntoda bile AA eşiğinin üstünde. */
  --color-accent: #12908d;
  --color-accent-400: #4fb8b3;
  --color-accent-600: #0f7b78;
  /* Bölüm numarası ve alerjen harfi bu basamakta: 6,3:1. */
  --color-accent-700: #0b6260;

  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Nötr ramp — modernist sistemin OKLCH'te üretilmiş basamakları. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #eaf6f5;
  --color-accent-200: #c9e8e6;
  --color-accent-300: #9bd5d2;
  --color-accent-500: #14a5a1;
  --color-accent-800: #084a48;
  --color-accent-900: #063533;

  --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: #eae9e9;
  --color-hatch-b: #eae9e9;

  /* 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, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 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,
.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; siyah bant üzerinde okunması için beyaza çevrilir. */
  filter: brightness(0) invert(1);
  width: 34px;
  height: auto;
}

.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-text);
  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 siyah blok — tasarımın taşıyıcı hamlesi. */
.m-tabActive {
  font-weight: 800;
  background: var(--color-text);
  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-text);
  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-700);
}


/* =========================================================================
 * §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;
  background: var(--color-surface);
  border-radius: 0;
  /* Tasarım fotoğrafları siyah-beyaz basıyor; `contain` tabağı kırpmıyor. */
  object-fit: contain;
  filter: grayscale(1) contrast(1.08);
}

.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-500); }

.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;
}

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

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

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

/* 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-text); 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-text);
  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-text);
}

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

.m-footerHours {
  border: 1px solid var(--color-text);
  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-text);
  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-text);
  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-text);
  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;
}

.s-photo,
.s-placeholder {
  height: 186px;
  border-radius: 0;
  background: var(--color-surface);
  object-fit: cover;
  object-position: center 24%;
  border-block-end: 2px solid var(--color-text);
  filter: grayscale(1) contrast(1.1);
}

.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-700); 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-text);
}

.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);
}

.e-bandImage { filter: grayscale(1) contrast(1.15) brightness(0.78); }

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

/* Tasarımda ayrı bir karartma katmanı yok; karartma fotoğrafın kendi
   filtresinden geliyor. Alt blok zaten açık zeminde duruyor. */
.e-scrim { display: none; }

/*
 * 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-text);
  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; }