/* @theme 3 · Karanlık Atmosfer — Bar & steakhouse */
/* @order 3 */
/* @theme-color #0E0E10 */
/* @flow screens */
/* @fonts playfair-display, manrope */
/* @options sheet-half */

/*
 * TEMA 3 · KARANLIK ATMOSFER
 * ==========================
 *
 * Kaynak: design/temalar/design/Tema 3 · Karanlık Atmosfer.dc.html
 * Kimlik: koyu zemin (#0E0E10), yüzey kartları (#17171A), amber vurgu
 * (#C9A227; metinde #E5C558). Görsellerin ALTINDA amber blur parıltı;
 * buzlu cam üst çubuk; 14 px köşe. Playfair Display başlık + Manrope gövde.
 *
 * Temaya özgü davranış: detay paneli önce %56 yükseklikte açılır, tutamaca
 * ("Tümünü gör") basılınca %92'ye genişler (`@options sheet-half`).
 *
 * Token notu: koyu temada nötr rampa ters okunur — 600 ikincil metin
 * (#B8B5AC), 500 sönük (#9A978E), 700 açıklama (#DCD9D1). Vurgu üstündeki
 * mürekkep (#161206) accent-900'dür.
 */

:root {
  --color-bg: #0E0E10;
  --color-surface: #17171A;
  --color-text: #F4F2ED;

  --color-accent: #C9A227;
  --color-accent-700: #E5C558;
  --color-accent-100: #4A431F;
  --color-accent-200: #6B5C1E;
  --color-accent-300: #8C7820;
  --color-accent-400: #AD8E24;
  --color-accent-500: #C9A227;
  --color-accent-600: #D9B23A;
  --color-accent-800: #2E2609;
  --color-accent-900: #161206;

  --color-divider: #2C2C31;
  --color-neutral-100: #17171A;
  --color-neutral-200: #1F1F23;
  --color-neutral-300: #26262B;
  --color-neutral-400: #3A3A40;
  --color-neutral-500: #9A978E;
  --color-neutral-600: #B8B5AC;
  --color-neutral-700: #DCD9D1;
  --color-neutral-800: #E8E6E0;
  --color-neutral-900: #F4F2ED;

  --dim-panel: rgba(5, 5, 6, 0.6);
  --dim-sheet: rgba(5, 5, 6, 0.72);
  --color-hatch-a: #26262B;
  --color-hatch-b: #2C2C31;

  --font-heading: "Playfair Display", var(--font-arabic), Georgia, serif;
  --font-body: Manrope, var(--font-arabic), system-ui, sans-serif;

  --sc-gutter: 20px;
  --sc-radius: 12px;
  --sc-radius-sheet: 20px;
  --sc-radius-media: 14px;
  --sc-hover-opacity: 1;
  --sc-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --sc-glow: 0 0 44px rgba(201, 162, 39, 0.22);
}

/* Amber parıltı: görselin altından sızan ışık. */

/* ---------- Giriş ---------- */

.sc-intro { padding-inline: 20px; }
.sc-logo {
  width: 118px; height: 118px; padding: 18px; object-fit: contain; margin-bottom: 0;
  border: 1px solid var(--color-accent); border-radius: 14px; box-shadow: var(--sc-glow);
}
.sc-kicker { margin-top: 22px; color: var(--color-accent); }
.sc-brand { margin-top: 10px; font-size: 38px; line-height: 1.1; font-weight: 400; letter-spacing: 0; }
.sc-rule { display: none; }
.sc-tagline { margin-top: 12px; font-family: var(--font-body); font-style: normal; font-size: 15px; line-height: 1.5; max-width: 300px; }
/* Parıltı gölge olarak: görselin altından sızan amber ışık. */
.sc-introMedia { margin-top: 26px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 22px 44px -12px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.sc-langRow { gap: 8px; margin-top: 26px; }
.sc-langLink {
  padding: 10px 16px; border: 1px solid var(--color-neutral-400); border-radius: 999px; font-size: 14px; color: var(--color-text);
}
.sc-langLink[aria-current] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-900); }
.sc-cta {
  margin-top: 14px; border-radius: 14px; background: var(--color-accent); color: var(--color-accent-900);
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
}
.sc-cta:hover { opacity: 0.9; }
.sc-introFoot { margin-top: 16px; font-size: 13px; }

/* ---------- Üst çubuk: buzlu cam ---------- */

.sc-bar {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  padding-bottom: 12px;
}
.sc-barRow { gap: 10px; }
.sc-barTitle { text-align: start; font-size: 18px; font-weight: 400; }
.sc-bar .sc-barTitleBrand { padding-inline-start: 0; }
.sc-barCat .sc-barRow .sc-barTitle { text-align: center; font-size: 19px; }
.sc-barCat { padding-inline: 12px; }
.sc-langBtn {
  min-width: 52px; border: 1px solid var(--color-accent); border-radius: 999px; color: var(--color-accent);
  font-size: 13px; font-weight: 600; letter-spacing: 0;
}
.sc-back { margin-inline-start: 0; }
.sc-chips { gap: 8px; padding: 10px 8px 0; }
.sc-chip {
  padding: 10px 16px; border: 1px solid var(--color-divider); border-radius: 999px;
  font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--color-neutral-700);
  transition: background 160ms var(--sc-ease);
}
.sc-chip::after { display: none; }
.sc-chipOn { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-900); font-weight: 700; }

/* ---------- Ana menü: kart ızgarası ---------- */

.sc-search {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 16px; padding: 0 16px;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 12px;
}
.sc-searchIcon { display: inline; font-size: 15px; color: var(--color-neutral-500); }
.sc-searchInput { font-size: 15px; }
.sc-catList { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.sc-cat {
  position: relative; display: block; height: 132px; min-height: 0; padding: 0;
  border: 1px solid var(--color-divider); border-radius: 14px; overflow: hidden; background: var(--color-surface);
  transition: transform 180ms var(--sc-ease);
}
.sc-cat:hover { transform: translateY(-2px); opacity: 1; }
.sc-cat:active { transform: scale(0.985); opacity: 1; }
.sc-cat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 8%, transparent) 0%, color-mix(in srgb, var(--color-bg) 86%, transparent) 100%);
}
.sc-catMedia { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-catNum { display: none; }
.sc-catName {
  position: absolute; z-index: 1; bottom: 14px; inset-inline-start: 16px; inset-inline-end: 96px;
  font-size: 22px; line-height: 1.2; color: var(--color-text);
}
.sc-catCount { position: absolute; z-index: 1; bottom: 17px; inset-inline-end: 16px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.sc-catCountWord { display: inline; }
.sc-noResult { text-align: center; font-style: normal; font-size: 20px; padding: 44px 0; }

/* ---------- Kategori: kart satırları ---------- */

.sc-rows { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.sc-row {
  padding: 14px; gap: 14px; border: 1px solid var(--color-divider); border-radius: 14px; background: var(--color-surface);
  transition: border-color 180ms var(--sc-ease), transform 180ms var(--sc-ease);
}
.sc-row:hover { border-color: var(--color-accent-100); transform: translateY(-2px); opacity: 1; }
.sc-row:active { transform: scale(0.985); opacity: 1; }
.sc-rowMedia {
  display: flex; align-items: center; justify-content: center; flex: 0 0 86px; width: 86px; height: 86px;
  border-radius: 10px; object-fit: cover; background: var(--color-neutral-300); position: relative; z-index: 2;
}
.sc-rowMediaEmpty::before { content: attr(data-initial); font-family: var(--font-heading); font-size: 24px; color: var(--color-accent); }
.sc-rowMedia { box-shadow: 0 14px 24px -8px color-mix(in srgb, var(--color-accent) 55%, transparent); }
/* Gövde ızgarası: rozet / ad / açıklama / [fiyat · kalori] — fiyat en altta */
.sc-rowBody {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag tag" "name name" "desc desc" "price meta";
  align-content: start; align-items: baseline; gap: 5px 10px; min-height: 86px;
}
.sc-rowHead { display: contents; }
.sc-rowTag { grid-area: tag; }
.sc-rowName { grid-area: name; }
.sc-rowDesc { grid-area: desc; }
.sc-rowPrice { grid-area: price; }
.sc-rowMeta { grid-area: meta; }
.sc-rowTag {
  align-self: flex-start; margin-bottom: 0; padding: 3px 9px; border: 1px solid var(--color-accent); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--color-accent-700);
}
.sc-rowSoldOut .sc-rowTag { border-color: var(--color-neutral-400); color: var(--color-neutral-600); }
.sc-rowName { font-size: 18px; line-height: 1.2; }
.sc-rowPrice { display: inline; font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--color-accent-700); }
.sc-rowDesc { margin-top: 0; font-family: var(--font-body); font-style: normal; font-size: 13px; line-height: 1.4; }
.sc-rowMeta { margin-top: 0; letter-spacing: 0; font-size: 12px; }
.sc-rowBody > .sc-rowPrice { align-self: end; margin-top: auto; }

/* ---------- Detay: yarım → tam panel ---------- */

.sc-sheet { border-top: 1px solid var(--color-divider); }
.sc-sheetHandle { min-height: 44px; }
.sc-sheetHandleBar { width: 48px; height: 4px; border-radius: 999px; background: var(--color-neutral-400); }
.sc-sheetExpandLabel { font-weight: 600; color: var(--color-accent); }
.sc-sheetScroll { padding-top: 6px; }
.sc-sheetMedia { border-radius: 14px; background: var(--color-neutral-300); box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.sc-sheetMediaEmpty { aspect-ratio: 16 / 10; }
.sc-sheetTag {
  display: inline-block; margin-top: 20px; padding: 5px 12px; border: 1px solid var(--color-accent); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: none; color: var(--color-accent-700);
}
.sc-sheetTag + .sc-sheetHead { margin-top: 12px; }
.sc-sheetHead { gap: 0 14px; }
.sc-sheetTitle { font-size: 26px; line-height: 1.18; font-weight: 400; letter-spacing: 0; }
.sc-sheetPrice { font-family: var(--font-body); font-size: 21px; font-weight: 700; color: var(--color-accent-700); }
.sc-sheetMeta { margin-top: 6px; font-size: 13px; letter-spacing: 0; }
.sc-sheetRule { margin: 18px 0; }
.sc-sheetDesc { font-family: var(--font-body); font-style: normal; font-size: 15px; line-height: 1.55; }
.sc-sheetLabel { margin-top: 22px; font-size: 12px; letter-spacing: 0.12em; }
.sc-portions { gap: 10px; }
.sc-portion { min-height: 52px; border-radius: 12px; background: var(--color-bg); align-items: center; font-weight: 600; }
.sc-portionPrice { font-size: 14px; font-weight: 500; opacity: 0.85; }
.sc-portionOn { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-900); }
.sc-allergens { gap: 8px; margin-top: 10px; }
.sc-allergen { padding: 7px 12px; border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-bg); font-size: 13px; color: var(--color-neutral-700); }
.sc-allergenLetter { display: none; }
.sc-allergensNone { margin-top: 10px; font-size: 13px; }
.sc-sheetClose { border-radius: 12px; font-weight: 600; letter-spacing: 0.12em; }

/* ---------- Dil menüsü ---------- */

.sc-langMenu { top: calc(var(--sc-safe-top) + 104px); min-width: 186px; padding: 6px; border-radius: 14px; }
.sc-langItem { padding: 0 14px; border-radius: 10px; color: var(--color-text); }
.sc-langItem[aria-checked="true"] { background: var(--color-accent); color: var(--color-accent-900); font-weight: 700; }
.sc-langItem:hover { background: var(--color-neutral-200); }
.sc-langItem[aria-checked="true"]:hover { background: var(--color-accent); }