/*
 * EKRAN AKIŞI — ortak iskelet
 * ===========================
 *
 * Dört ekranlı temaların (design/temalar) paylaştığı yapı: Giriş → Ana
 * menü (kategori listesi) → Kategori (ürün listesi) → Ürün detayı (alttan
 * panel). Tek sayfalık eski akışın app.css'iyle hiçbir seçici paylaşmaz;
 * ikisi aynı sayfada asla yüklenmez (bkz. partials/site-head.php).
 *
 * KURAL: burada tek bir sabit renk yoktur. Her renk tokens.css'teki 28
 * değişkenden gelir; tema dosyası (themes/<slug>.css) o değişkenleri kendi
 * paletine çeker, müşteri Renkler ekranından üstüne yazar. Ölçü, font,
 * yarıçap gibi renk dışı farklar `--sc-*` değişkenleriyle temaya bırakılır.
 *
 * Yerleşim: gerçek belge akışı, yapışkan üst çubuk. Tasarım prototipi
 * 393×852 çerçeve içinde iç kaydırma kullanır; telefonda adres çubuğu
 * davranışı için belge kaydırması daha sağlam. Masaüstünde 520 px'e
 * sınırlanır, zemin rengi tüm pencereyi doldurur.
 */

:root {
  --sc-max: 520px;
  --sc-gutter: 32px;
  --sc-radius: 2px;
  --sc-radius-sheet: 4px;
  --sc-radius-media: 6px;
  --sc-safe-top: env(safe-area-inset-top, 0px);
  --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sc-bar-pad: 14px;
  --sc-hover-opacity: 0.62;
  --sc-motion-fade: 220ms;
  --sc-motion-up: 260ms;
  --sc-ease: ease-out;
  --sc-shadow: 0 12px 32px var(--dim-panel);
}

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

html { -webkit-text-size-adjust: 100%; background: var(--color-bg); }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[dir="rtl"] {
  --font-heading: var(--font-arabic);
  --font-body: var(--font-arabic);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
hr { border: 0; margin: 0; }

.tabular { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.clamp-2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* =========================================================================
 * Ekran kabuğu
 * ========================================================================= */

.sc-screen, .sc-intro {
  width: 100%;
  max-width: var(--sc-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* =========================================================================
 * 1 · Giriş
 * ========================================================================= */

.sc-intro {
  align-items: center;
  text-align: center;
  padding: calc(24px + var(--sc-safe-top)) var(--sc-gutter) calc(24px + var(--sc-safe-bottom));
}

.sc-introTop { flex: 1 0 24px; }
.sc-introBottom { flex: 1 0 28px; }

.sc-logo { width: 72px; height: 72px; object-fit: contain; margin-bottom: 18px; }

.sc-kicker {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.sc-brand {
  margin: 18px 0 0;
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sc-rule { display: block; width: 56px; height: 1px; background: var(--color-divider); margin: 22px 0; }

.sc-tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-neutral-600);
  text-wrap: pretty;
}

/*
 * Görseller kırpılmaz: kutu fotoğrafın kendi oranını alır (prototipteki
 * 3:4 / 4:3 yer tutucu oranı yalnızca fotoğraf yokken). Köşeler hafif
 * yuvarlak (--sc-radius-media), temalar ezebilir.
 */
.sc-introMedia {
  width: 100%;
  margin-top: 28px;
  background: var(--color-neutral-300);
  overflow: hidden;
  border-radius: var(--sc-radius-media);
}
.sc-introImage { width: 100%; height: auto; }

.sc-langRow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px 10px; margin-top: 24px;
}
.sc-langLink {
  min-height: 44px; padding: 10px 6px;
  display: inline-flex; align-items: center;
  font-size: 15px; color: var(--color-neutral-600);
  transition: color 150ms var(--sc-ease);
}
.sc-langLink[aria-current] { color: var(--color-text); font-weight: 600; }

.sc-cta {
  width: 100%; min-height: 56px; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--sc-radius);
  background: var(--color-accent); color: var(--color-bg);
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: opacity 180ms var(--sc-ease);
}
.sc-cta:hover { opacity: 0.88; }

.sc-introFoot { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--color-neutral-600); letter-spacing: 0.02em; }
.sc-introFootLine { display: block; }

/* =========================================================================
 * Üst çubuk (2 ve 3)
 * ========================================================================= */

.sc-bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  padding: calc(var(--sc-bar-pad) + var(--sc-safe-top)) var(--sc-gutter) var(--sc-bar-pad);
  border-bottom: 1px solid var(--color-divider);
}

.sc-barTitle {
  flex: 1; margin: 0;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 17px; line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Dil düğmesini dengelesin diye başlık öbür yandan aynı payı alır. */
.sc-barTitleBrand { padding-inline-start: 44px; }

.sc-barLogo { display: none; }
.sc-langBtn {
  min-width: 44px; min-height: 44px; margin: -12px 0;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-600);
}

.sc-bar { display: block; }
.sc-barCat { padding-bottom: 0; }
.sc-barRow { display: flex; align-items: center; gap: 8px; }
.sc-barCat .sc-barRow .sc-barTitle { font-size: 20px; }
.sc-barRow .sc-langBtn { margin: 0; }
.sc-bar .sc-barTitleBrand { padding-inline-start: 44px; }
.sc-searchBtn ~ .sc-barTitleBrand, .sc-barRow:has(.sc-searchBtn) .sc-barTitleBrand { padding-inline-start: 88px; }

.sc-back {
  min-width: 44px; min-height: 44px; margin-inline-start: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--color-text);
}

.sc-chips {
  display: flex; gap: 24px; overflow-x: auto; padding: 10px 0 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sc-chips::-webkit-scrollbar { display: none; }
.sc-chip {
  flex: 0 0 auto; min-height: 44px; padding: 8px 0;
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 150ms var(--sc-ease);
}
.sc-chipOn { color: var(--color-text); border-bottom-color: var(--color-text); }

/* =========================================================================
 * Gövde
 * ========================================================================= */

.sc-body {
  flex: 1;
  padding: 0 var(--sc-gutter) calc(34px + var(--sc-safe-bottom));
}

.sc-note { margin: 16px 0 0; font-size: 14px; color: var(--color-neutral-600); }

/* 2 · Arama + kategori listesi */

.sc-search { padding: 24px 0 10px; border-bottom: 1px solid var(--color-divider); }
.sc-searchInput {
  width: 100%; min-height: 32px; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 16px; color: var(--color-text); -webkit-appearance: none; appearance: none;
}
.sc-searchInput::placeholder { color: var(--color-neutral-600); opacity: 1; }
.sc-searchInput::-webkit-search-cancel-button { -webkit-appearance: none; }

.sc-cat {
  width: 100%; min-height: 72px; padding: 22px 0;
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--color-divider);
  text-align: start;
  transition: opacity 160ms var(--sc-ease);
}
.sc-cat:hover { opacity: var(--sc-hover-opacity); }
.sc-cat[hidden] { display: none; }

.sc-catNum { font-size: 11px; letter-spacing: 0.12em; color: var(--color-neutral-600); min-width: 20px; }
.sc-catMedia { display: none; }
.sc-catName {
  flex: 1; font-family: var(--font-heading); font-size: 21px; line-height: 1.25; color: var(--color-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sc-catCount { font-size: 13px; color: var(--color-neutral-600); white-space: nowrap; }
.sc-catCountWord { display: none; }

.sc-noResult {
  margin: 0; padding: 40px 0;
  font-family: var(--font-heading); font-style: italic; font-size: 17px; color: var(--color-neutral-600);
}

/* 3 · Ürün satırları */

.sc-row {
  width: 100%; padding: 24px 0;
  display: flex; align-items: flex-start; gap: 16px;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; cursor: pointer; text-align: start;
  transition: opacity 160ms var(--sc-ease);
}
.sc-row:hover { opacity: var(--sc-hover-opacity); }

.sc-rowMedia { display: none; }
.sc-rowBody { flex: 1; min-width: 0; display: block; }

.sc-rowTag {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700);
}
.sc-rowSoldOut .sc-rowTag { color: var(--color-neutral-600); }

.sc-rowHead { display: flex; align-items: baseline; gap: 16px; }
.sc-rowName {
  flex: 1; font-family: var(--font-heading); font-size: 20px; line-height: 1.25; color: var(--color-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sc-rowPrice { font-family: var(--font-heading); font-size: 17px; font-weight: 600; white-space: nowrap; color: var(--color-text); }
.sc-rowSoldOut .sc-rowName, .sc-rowSoldOut .sc-rowPrice { color: var(--color-neutral-600); }
.sc-rowSoldOut .sc-rowPrice { text-decoration: line-through; }

.sc-rowDesc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 8px; font-family: var(--font-heading); font-style: italic; font-size: 15px; line-height: 1.45;
  color: var(--color-neutral-600);
}
.sc-rowMeta { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.1em; color: var(--color-neutral-600); }

/* =========================================================================
 * 4 · Ürün detayı — alttan panel
 * ========================================================================= */

@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-down { from { transform: none; opacity: 1; } to { transform: translateY(24px); opacity: 0; } }

.sc-dim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--dim-sheet);
  animation: sc-fade var(--sc-motion-fade) var(--sc-ease);
}
.sc-dimOut { animation: sc-fade-out var(--sc-motion-fade) var(--sc-ease) forwards; }

.sc-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 41;
  width: 100%; max-width: var(--sc-max); margin: 0 auto;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--sc-radius-sheet) var(--sc-radius-sheet) 0 0;
  animation: sc-up var(--sc-motion-up) var(--sc-ease);
}
.sc-sheetOut { animation: sc-down var(--sc-motion-fade) var(--sc-ease) forwards; }

.sc-sheetHandle {
  flex: 0 0 auto; padding: 10px 0 0; border: 0; background: transparent; cursor: pointer;
  display: flex; justify-content: center; min-height: 24px; touch-action: none;
}
.sc-sheetHandleBar { width: 44px; height: 2px; background: var(--color-divider); }

.sc-sheetScroll { overflow-y: auto; padding: 8px var(--sc-gutter) calc(34px + var(--sc-safe-bottom)); }

.sc-sheetMedia { width: 100%; background: var(--color-neutral-300); overflow: hidden; border-radius: var(--sc-radius-media); }
.sc-sheetMediaEmpty { aspect-ratio: 4 / 3; }
.sc-sheetImage { width: 100%; height: auto; }
.sc-soldOutMedia { filter: grayscale(1); opacity: 0.6; }

.sc-sheetTag { margin-top: 22px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); }
.sc-sheetTag + .sc-sheetHead { margin-top: 8px; }

.sc-sheetHead { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 16px; margin-top: 22px; }
.sc-sheetPriceLine { display: contents; }
.sc-sheetTitle {
  flex: 1; margin: 0; font-family: var(--font-heading); font-weight: 500;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
}
.sc-sheetTitleSoldOut { color: var(--color-neutral-600); }
.sc-sheetPrice { font-family: var(--font-heading); font-size: 20px; font-weight: 600; white-space: nowrap; }

.sc-sheetTranslit { margin-top: 6px; font-size: 14px; color: var(--color-neutral-600); }
.sc-sheetMeta { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; letter-spacing: 0.1em; color: var(--color-neutral-600); }

.sc-sheetRule { height: 1px; background: var(--color-divider); margin: 20px 0; }
.sc-sheetAllergens > .sc-sheetRule { margin: 24px 0 14px; }
.sc-sheetSection { display: block; }

.sc-sheetDesc {
  margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 1.5;
  color: var(--color-neutral-700); text-wrap: pretty;
}

.sc-sheetLabel { margin-top: 24px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-600); }
.sc-sheetRule + .sc-sheetLabel { margin-top: 0; }

.sc-portions { display: flex; gap: 8px; margin-top: 10px; }
.sc-portion {
  flex: 1; min-height: 48px; padding: 0 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border: 1px solid var(--color-divider); border-radius: var(--sc-radius);
  background: transparent; color: var(--color-text); cursor: pointer; font-size: 14px;
  transition: background 150ms var(--sc-ease), color 150ms var(--sc-ease), border-color 150ms var(--sc-ease);
}
.sc-portionPrice { font-size: 13px; opacity: 0.72; }
.sc-portionOn { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

.sc-allergens { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--color-neutral-700); }
.sc-allergen { display: inline-flex; align-items: baseline; gap: 6px; }
.sc-allergenLetter { font-size: 11px; letter-spacing: 0.1em; color: var(--color-neutral-600); }
.sc-allergensNone { margin-top: 8px; font-size: 14px; color: var(--color-neutral-700); }

.sc-sheetClose {
  width: 100%; min-height: 48px; margin-top: 24px;
  border: 1px solid var(--color-divider); border-radius: var(--sc-radius);
  background: transparent; color: var(--color-neutral-600); cursor: pointer;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* Tam sayfa detay (detail-page, Tema 2): panel değil, sağdan giren sayfa */

@keyframes sc-slide-in { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .sc-sheetPage { animation-name: sc-slide-in-rtl; }
@keyframes sc-slide-in-rtl { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

.sc-sheetPage {
  top: 0; max-height: none; height: 100dvh; border-radius: 0;
  animation: sc-slide-in 240ms var(--sc-ease);
}
.sc-sheetPage .sc-sheetScroll { padding-top: 0; }
.sc-sheetPage .sc-sheetMedia { position: relative; margin: 0 calc(-1 * var(--sc-gutter)); width: auto; border-radius: 0; }
.sc-sheetPage .sc-sheetMediaEmpty { aspect-ratio: auto; height: 300px; }
.sc-sheetBack {
  position: absolute; top: calc(var(--sc-safe-top) + 14px); inset-inline-start: 16px;
  min-width: 44px; min-height: 44px; border: 0; cursor: pointer;
  background: var(--color-text); color: var(--color-bg); font-size: 18px; line-height: 1;
}
.sc-pager { margin-top: 28px; border-top: 2px solid var(--color-text); }
.sc-pagerItem {
  display: block; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; cursor: pointer; text-align: start;
}
.sc-pagerLabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); }
.sc-pagerName { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Yarım panel (sheet-half, Tema 3): önce %56, "Tümünü gör" ile %92 */

.sc-sheetHalf { height: 56dvh; max-height: 56dvh; transition: height 260ms var(--sc-ease), max-height 260ms var(--sc-ease); }
.sc-sheetHalf.sc-sheetExpanded { height: 92dvh; max-height: 92dvh; }
.sc-sheetExpand { flex-direction: column; align-items: center; gap: 6px; padding-bottom: 6px; }
.sc-sheetExpandLabel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.sc-sheetExpanded .sc-sheetExpandLabel { display: none; }

/* Dil damgası (lang-cycle, Tema 5): menü yok, sıradaki dile geçer */

.sc-langCycle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.sc-langCycleNext { font-size: 9px; letter-spacing: 0.08em; color: var(--color-accent-700); text-transform: uppercase; }

/* Öne çıkan modüller (featured-modules, Tema 4) */

.sc-module { margin-top: 20px; }
.sc-moduleTitle { margin: 0 0 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-neutral-600); }
.sc-moduleRow { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) 4px; }
.sc-moduleRow::-webkit-scrollbar { display: none; }
.sc-moduleItem {
  flex: 0 0 72%; padding: 0; border: 0; background: var(--color-surface); color: var(--color-text);
  border-radius: var(--sc-radius); overflow: hidden; text-align: start; cursor: pointer;
  display: flex; flex-direction: column;
}
.sc-moduleMedia { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-neutral-300); }
.sc-moduleName { display: block; padding: 12px 14px 2px; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.2; }
.sc-moduleMeta { display: block; padding: 0 14px 14px; font-size: 12px; color: var(--color-neutral-600); }

/* Tam ekran arama (search-fullscreen, Tema 6) */

.sc-searchBtn {
  min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--color-text);
}
.sc-searchIcon { display: none; }
.sc-searchPage {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  padding: calc(var(--sc-safe-top) + 14px) var(--sc-gutter) calc(34px + var(--sc-safe-bottom));
  background: var(--color-bg); color: var(--color-text);
  animation: sc-fade 200ms var(--sc-ease);
}
.sc-searchPageBar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-divider); padding-bottom: 8px; }
.sc-searchPageBar .sc-searchInput { min-height: 44px; font-size: 18px; }
.sc-searchClose { min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--color-neutral-600); }
.sc-searchResults { list-style: none; margin: 0; padding: 0; }
.sc-searchHit {
  width: 100%; min-height: 64px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; color: inherit; cursor: pointer; text-align: start; display: block;
}
.sc-searchHitName { display: block; font-family: var(--font-heading); font-size: 18px; line-height: 1.25; }
.sc-searchHitMeta { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-600); }
.sc-searchHitPrice { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
.js .sc-searchResult { animation: sc-rise 300ms var(--sc-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* =========================================================================
 * Dil menüsü
 * ========================================================================= */

.sc-langDim { position: fixed; inset: 0; z-index: 60; background: var(--dim-panel); animation: sc-fade 160ms var(--sc-ease); }
.sc-langMenu {
  position: fixed; z-index: 61;
  top: calc(var(--sc-bar-pad) + var(--sc-safe-top) + 6px); inset-inline-end: 16px;
  min-width: 180px; padding: 4px 0;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  animation: sc-fade 160ms var(--sc-ease);
}
@media (min-width: 521px) {
  .sc-langMenu { inset-inline-end: calc((100vw - var(--sc-max)) / 2 + 16px); }
}
.sc-langItem {
  width: 100%; min-height: 48px; padding: 0 18px;
  display: flex; align-items: center; text-align: start;
  font-size: 15px; color: var(--color-neutral-600);
}
.sc-langItem[aria-checked="true"] { color: var(--color-text); font-weight: 600; }
.sc-langItemNum { display: none; }
.sc-langItem:hover { background: var(--color-neutral-100); }

/* =========================================================================
 * Hareket — giriş, dokunma, çıkış
 * =========================================================================
 *
 * Sayfa açılınca satırlar sırayla yukarı süzülür (--i sırası, 40 ms arayla);
 * dokunulan öğe hafif basılır; bağlantıya dokununca sayfa sönerek ayrılır
 * (screens.js `sc-leaving`). Hepsi yalnızca `html.js` varken: betik yoksa
 * içerik anında ve tam görünür.
 */

@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-grow { from { transform: scaleX(0); } to { transform: none; } }

.js .sc-bar, .js .sc-search, .js .sc-note { animation: sc-fade 320ms var(--sc-ease) both; }
.js .sc-cat, .js .sc-row, .js .sc-intro > * {
  animation: sc-rise 420ms var(--sc-ease) both;
  animation-delay: calc(60ms + var(--i, 0) * 45ms);
}
.js .sc-intro > :nth-child(2) { --i: 1; } .js .sc-intro > :nth-child(3) { --i: 2; }
.js .sc-intro > :nth-child(4) { --i: 3; } .js .sc-intro > :nth-child(5) { --i: 4; }
.js .sc-intro > :nth-child(6) { --i: 5; } .js .sc-intro > :nth-child(7) { --i: 6; }
.js .sc-intro > :nth-child(8) { --i: 7; } .js .sc-intro > :nth-child(9) { --i: 8; }
.js .sc-intro > :nth-child(n+10) { --i: 9; }
.js .sc-sheetScroll > :nth-child(2) { --i: 1; } .js .sc-sheetScroll > :nth-child(3) { --i: 3; }
.js .sc-sheetScroll > :nth-child(4) { --i: 5; } .js .sc-sheetScroll > :nth-child(n+5) { --i: 7; }
.js .sc-sheetSection { animation: none; }
.js .sc-sheetSection > :nth-child(2) { --i: 2; } .js .sc-sheetSection > :nth-child(3) { --i: 3; }
.js .sc-sheetSection > :nth-child(n+4) { --i: 4; }
.js .sc-sheetInfo > * { --i: 1; } .js .sc-sheetInfo > :nth-child(2) { --i: 2; } .js .sc-sheetInfo > :nth-child(n+3) { --i: 3; }
.js .sc-sheetPortion > * { --i: 4; } .js .sc-sheetAllergens > * { --i: 5; }
.js .sc-rule { transform-origin: center; animation: sc-grow 520ms var(--sc-ease) both; animation-delay: 220ms; }
.js .sc-chips { animation: sc-fade 360ms var(--sc-ease) both; animation-delay: 80ms; }

/* Panel içi de sırayla gelsin. */
.js .sc-sheetScroll > *, .js .sc-sheetSection > * { animation: sc-rise 360ms var(--sc-ease) both; animation-delay: calc(80ms + var(--i, 0) * 35ms); }

/* Dokunma geri bildirimi */
.sc-cat, .sc-row, .sc-cta, .sc-chip, .sc-portion, .sc-langLink, .sc-langItem, .sc-sheetClose, .sc-back, .sc-langBtn {
  transition: transform 160ms var(--sc-ease), opacity 160ms var(--sc-ease), background 160ms var(--sc-ease), color 160ms var(--sc-ease), border-color 160ms var(--sc-ease);
}
.sc-cat:active, .sc-row:active { transform: translateX(4px); opacity: 0.55; }
[dir="rtl"] .sc-cat:active, [dir="rtl"] .sc-row:active { transform: translateX(-4px); }
.sc-cta:active, .sc-portion:active, .sc-sheetClose:active, .sc-langItem:active { transform: scale(0.97); }
.sc-chip:active, .sc-back:active, .sc-langBtn:active, .sc-langLink:active { opacity: 0.5; }

/* Çip altı çizgisi kayarak büyür */
.sc-chip { position: relative; border-bottom: 0; }
.sc-chip::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--color-text); transform: scaleX(0); transform-origin: center;
  transition: transform 220ms var(--sc-ease);
}
.sc-chipOn::after { transform: none; }

/* Sayfa çıkışı: bağlantıya dokununca içerik sönerek kayar, sonra adres değişir. */
.sc-leaving .sc-screen, .sc-leaving .sc-intro { transition: opacity 180ms var(--sc-ease), transform 180ms var(--sc-ease); opacity: 0; transform: translateY(-8px); }
.sc-leaving-back .sc-screen { transform: translateY(8px); }

/* =========================================================================
 * Hareket kapalı
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
 * Bulunamadı sayfası (site/not-found.php iki akışta ortak; .btn app.css'ten)
 * ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--color-divider); border-radius: var(--sc-radius);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.btn-accent { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }