/* @theme 2 · Editöryel Dergi — Asimetrik, full-bleed */
/* @order 2 */
/* @theme-color #FFFFFF */
/* @flow screens */
/* @fonts bricolage-grotesque, work-sans */
/* @options detail-page */

/*
 * TEMA 2 · EDİTÖRYEL DERGİ
 * ========================
 *
 * Kaynak: design/temalar/design/Tema 2 · Editöryel Dergi.dc.html
 * Kimlik: dönüşümlü sola/sağa taşan kategori blokları, görselin üstüne
 * binen 64 px outline numara, 2 px siyah bölüm çizgisi, sıfır yarıçap,
 * turuncu (#D6552B) rozet ve düğme. Bricolage Grotesque başlık + Work Sans.
 *
 * Temaya özgü davranış: ürün detayı panel değil TAM SAYFA (sağdan 14 px
 * kayarak girer); sayfa altında "Önceki / Sonraki" dergi pager'ı
 * (`@options detail-page`, screens.js).
 *
 * Giriş ekranı: tam ekran koyu zemin, fotoğraf arkada, üstte kicker, altta
 * büyük ad. Ortak şablonun sırası CSS `order` ile değiştirildi.
 */

:root {
  --color-bg: #FFFFFF;
  --color-surface: #E8E4DC;
  --color-text: #111111;

  --color-accent: #D6552B;
  --color-accent-700: #D6552B;
  --color-accent-100: #FBEAE3;
  --color-accent-200: #F6D0C1;
  --color-accent-300: #EFAA90;
  --color-accent-400: #E5825E;
  --color-accent-500: #D6552B;
  --color-accent-600: #B84621;
  --color-accent-800: #7E2F15;
  --color-accent-900: #56200E;

  --color-divider: #E2E0DA;
  --color-neutral-100: #F7F5F1;
  --color-neutral-200: #E8E4DC;
  --color-neutral-300: #D9D4CA;
  --color-neutral-400: #B5B1A9;
  --color-neutral-500: #8E8B85;
  --color-neutral-600: #6B6B6B;
  --color-neutral-700: #4A4A4A;
  --color-neutral-800: #2B2B2B;
  --color-neutral-900: #111111;

  --dim-panel: rgba(17, 17, 17, 0.35);
  --dim-sheet: rgba(17, 17, 17, 0.5);
  --color-hatch-a: #E8E4DC;
  --color-hatch-b: #DDD8CE;

  --font-heading: "Bricolage Grotesque", var(--font-arabic), system-ui, sans-serif;
  --font-body: "Work Sans", var(--font-arabic), system-ui, sans-serif;

  --sc-gutter: 24px;
  --sc-radius: 0;
  --sc-radius-sheet: 0;
  --sc-radius-media: 0;
  --sc-hover-opacity: 1;
  --sc-shadow: none;
}

.sc-brand, .sc-barTitle, .sc-catName, .sc-rowName, .sc-sheetTitle, .sc-moduleName { font-optical-sizing: auto; }

/* ---------- Giriş: koyu tam ekran ---------- */

.sc-intro {
  background: var(--color-text); color: var(--color-bg);
  align-items: stretch; text-align: start;
  padding: calc(20px + var(--sc-safe-top)) 24px calc(34px + var(--sc-safe-bottom));
  overflow: hidden;
}
.sc-intro::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-text) 50%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 10%, transparent) 40%,
    color-mix(in srgb, var(--color-text) 88%, transparent) 100%);
}
.sc-intro > * { position: relative; z-index: 2; }
.sc-introMedia {
  position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: 0; background: var(--color-text);
}
.sc-introImage { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

.sc-kicker { order: -2; font-size: 11px; letter-spacing: 0.28em; color: var(--color-bg); margin-top: 34px; }
.sc-logo { order: -1; width: 56px; height: 56px; margin: 18px 0 0; }
.sc-introTop { order: 0; flex: 1 1 0; }
.sc-brand { font-size: 56px; line-height: 0.92; font-weight: 700; letter-spacing: -0.03em; margin-top: 0; text-wrap: balance; }
.sc-rule { width: 100%; height: 1px; background: color-mix(in srgb, var(--color-bg) 40%, transparent); margin: 16px 0; order: 1; }
.sc-tagline { font-family: var(--font-body); font-style: normal; font-size: 16px; color: var(--color-bg); max-width: 300px; margin-top: 16px; }
.sc-introBottom { display: none; }
.sc-langRow { order: 2; justify-content: flex-start; gap: 0; margin-top: 0; }
.sc-langLink {
  padding: 10px 14px; margin-inline-end: -1px;
  border: 1px solid color-mix(in srgb, var(--color-bg) 55%, transparent);
  font-size: 13px; letter-spacing: 0.04em; color: var(--color-bg);
}
.sc-langLink[aria-current] { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); font-weight: 700; }
.sc-cta {
  order: 3; margin-top: 16px; min-height: 58px; justify-content: flex-start; padding: 0 20px;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
}
.sc-cta:hover { opacity: 0.9; }
.sc-introFoot { order: 4; margin-top: 16px; font-size: 12px; color: var(--color-bg); letter-spacing: 0.04em; }

/* ---------- Üst çubuk ---------- */

.sc-bar { padding-bottom: 12px; border-bottom: 2px solid var(--color-text); }
.sc-barRow { gap: 12px; }
.sc-barTitle { text-align: start; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.sc-bar .sc-barTitleBrand { padding-inline-start: 0; }
.sc-barCat .sc-barRow .sc-barTitle { font-size: 19px; }
.sc-barCat { padding-inline: 12px; padding-bottom: 0; }
.sc-barCat .sc-barRow { gap: 6px; padding-bottom: 10px; }
.sc-langBtn { min-width: 52px; border: 1px solid var(--color-text); color: var(--color-text); font-weight: 600; letter-spacing: 0.08em; }
.sc-back { margin-inline-start: 0; }

.sc-chips { gap: 0; padding: 0; margin: 0 -12px; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider); }
.sc-barCat { border-bottom: 0; }
.sc-chip { padding: 10px 16px; border-inline-end: 1px solid var(--color-divider); letter-spacing: 0.08em; font-weight: 500; }
.sc-chip::after { display: none; }
.sc-chipOn { background: var(--color-text); color: var(--color-bg); font-weight: 700; }

/* ---------- Gövde: tam genişlik bloklar ---------- */

.sc-body { padding-inline: 0; }
.sc-search { display: flex; align-items: center; gap: 10px; padding: 12px 24px; }
.sc-searchIcon { display: inline; font-size: 14px; color: var(--color-neutral-600); }
.sc-noResult { padding: 48px 24px; font-family: var(--font-heading); font-style: normal; font-size: 22px; }
.sc-note { padding: 0 24px; }

.sc-cat {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "media media" "name count";
  align-items: baseline; gap: 0 12px; padding: 0; min-height: 0; position: relative;
}
.sc-catMedia {
  grid-area: media; display: block; width: 84%; height: 190px; object-fit: cover;
  background: var(--color-surface);
}
.sc-cat:nth-child(even) .sc-catMedia { margin-inline-start: 16%; }
.sc-catNum {
  position: absolute; top: 140px; inset-inline-start: 0;
  min-width: 0; font-family: var(--font-heading); font-size: 64px; font-weight: 700; line-height: 1;
  letter-spacing: 0; color: transparent; -webkit-text-stroke: 1.5px var(--color-bg); pointer-events: none; z-index: 1;
}
.sc-cat:nth-child(even) .sc-catNum { inset-inline-start: calc(16% - 6px); }
.sc-catName { grid-area: name; padding: 20px 0 20px 24px; font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
[dir="rtl"] .sc-catName { padding: 20px 24px 20px 0; }
.sc-catCount { grid-area: count; padding: 20px 24px 20px 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
[dir="rtl"] .sc-catCount { padding: 20px 0 20px 24px; }
.sc-catCountWord { display: inline; }
.sc-cat:hover { background: var(--color-neutral-100); }

.sc-row { display: block; padding: 20px 24px; transition: background 160ms var(--sc-ease); }
.sc-row:hover { background: var(--color-neutral-100); opacity: 1; }
.sc-row:active { transform: none; opacity: 1; background: var(--color-neutral-200); }
.sc-rowMedia { display: block; width: 100%; height: auto; margin-bottom: 14px; background: var(--color-surface); }
.sc-rowMediaEmpty { height: 150px; }
.sc-row:nth-child(3n+2) .sc-rowMedia { width: 62%; }
.sc-row:nth-child(3n) .sc-rowMedia { width: 80%; }
.sc-rowTag {
  display: inline-block; margin-bottom: 8px; padding: 4px 8px; background: var(--color-accent); color: var(--color-bg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: none;
}
.sc-rowSoldOut .sc-rowTag { background: var(--color-neutral-600); color: var(--color-bg); }
.sc-rowHead { gap: 12px; }
.sc-rowName { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.sc-rowPrice { font-size: 18px; font-weight: 700; }
.sc-rowDesc { font-family: var(--font-body); font-style: normal; font-size: 14px; margin-top: 6px; max-width: 290px; }
.sc-rowMeta { text-transform: uppercase; }

/* ---------- Detay: tam sayfa ---------- */

.sc-sheetPage { background: var(--color-bg); }
.sc-sheetPage .sc-sheetMedia { background: var(--color-surface); }
.sc-sheetTitleSoldOut ~ * .sc-sheetTag, .sc-sheetScroll:has(.sc-sheetTitleSoldOut) .sc-sheetTag { background: var(--color-neutral-600); }
.sc-sheetTag {
  display: inline-block; margin-top: 24px; padding: 5px 10px; background: var(--color-accent); color: var(--color-bg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: none;
}
.sc-sheetTag + .sc-sheetHead { margin-top: 12px; }
.sc-sheetHead { display: block; margin-top: 24px; }
.sc-sheetTitle { font-size: 34px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.sc-sheetPriceLine {
  display: flex; align-items: baseline; gap: 16px; margin-top: 14px; padding-bottom: 14px;
  border-bottom: 2px solid var(--color-text);
}
.sc-sheetPrice { font-size: 24px; font-weight: 700; }
.sc-sheetMeta { margin-top: 0; text-transform: uppercase; }
.sc-sheetHead + .sc-sheetRule, .sc-sheetTranslit + .sc-sheetRule { display: none; }
.sc-sheetDesc { margin-top: 16px; }
.sc-sheetDesc { font-family: var(--font-body); font-style: normal; font-size: 16px; line-height: 1.55; color: var(--color-text); }
.sc-sheetLabel { letter-spacing: 0.14em; }
.sc-portions { gap: 0; }
.sc-portion {
  min-height: 52px; margin-inline-end: -1px; border: 1px solid var(--color-text); align-items: center;
  font-weight: 600;
}
.sc-portionPrice { font-weight: 400; opacity: 1; font-size: 14px; }
.sc-portionOn { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.sc-allergens, .sc-allergensNone { font-size: 15px; color: var(--color-text); }
.sc-sheetClose {
  margin-top: 20px; min-height: 52px; border: 1px solid var(--color-text); color: var(--color-text);
  font-weight: 700; letter-spacing: 0.14em; text-align: start; justify-content: flex-start; display: flex; align-items: center; padding: 0 18px;
}

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

.sc-langMenu { top: calc(var(--sc-safe-top) + 100px); min-width: 184px; padding: 0; border: 2px solid var(--color-text); }
.sc-langItem { padding: 0 16px; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.sc-langItem:last-child { border-bottom: 0; }
.sc-langItem[aria-checked="true"] { background: var(--color-text); color: var(--color-bg); font-weight: 700; }