/* ============================================================
   ui.css - SCP Lisans sunucusu, URUN KATMANI
   ============================================================
   Kaynak: mockups/shared.css, commit e55ec16 (plan §6.1).
   Elle yeni gorsel dil EKLENMEZ: tasarim degisikligi once mockup'ta
   yapilir (python mockups/_kaynak/build.py), sonra fark buraya tasinir.
   Ters yon YOK.

   Tasinan bolumler: 1 taban · 2 tipografi (+Arapca) · 3 yerlesim ·
   4 bilesenler · 5 site kabugu · 6 ana sayfa · 7 form ve geri bildirim ·
   8 uyelik kabugu · 9 kasa kabugu · 10 uygulama kabugu · 11 ic sayfa ve
   belge · 13 hareket · 14 dar cerceve.

   Tasinmayan (plan §6.1): 0 sahne baglamasi ve .sc-browser* kurallari
   (mockup cercevesi), 12 galeri dil secici (mockup index'i). Yazdirma
   kuralindaki .sc-* seciciler de cikarildi.

   Renk burada TANIMLANMAZ: her deger tokens.css'ten gelir (ham hex yok).
   Yerlesim MANTIKSAL ozelliklerle kurulur; fiziksel yon (margin-left,
   right:, text-align: left ...) kullanilmaz - Arapca sagdan sola akar
   (INV-I18N-3 b).
   ============================================================ */

/* ---------- 1. taban ---------- */
.app {
  container: app / inline-size;
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  caret-color: var(--color-focus);
  accent-color: var(--color-action-primary);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app ::selection { background: var(--color-action-primary); color: var(--color-action-on-primary); }
.app img { display: block; max-inline-size: 100%; block-size: auto; }
.app :where(p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.app :where(ul[class], ol[class]) { padding: 0; list-style: none; }
.app :where(a) { color: var(--color-text-link); text-underline-offset: 0.2em; text-decoration-thickness: var(--hairline); }
.app :where(a:hover) { text-decoration-thickness: var(--rule); }
.app :focus-visible { outline: var(--ring) solid var(--color-focus); outline-offset: var(--ring-gap); }
.app :where(button, input, select, textarea) { font: inherit; color: inherit; }
.app :where(button) { cursor: pointer; }
.app :where(fieldset) { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.app :where(code, .mono) { font-family: var(--font-mono); font-size: 0.9em; direction: ltr; unicode-bidi: isolate; }
.app [hidden] { display: none !important; }

.skip {
  position: absolute;
  inset-inline-start: var(--s-3);
  inset-block-start: var(--s-3);
  z-index: 90;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-1);
  background: var(--color-action-ink);
  color: var(--color-action-on-ink);
  font-weight: var(--fw-strong);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
/* odakta degilken kutu yukari otelenir (yerlesimde kimseyle cakismaz) ve gorunmez
   kirpilir (acik yuzeyde cerceve tepesinden cikinti kalmaz) */
.skip:not(:focus) { clip-path: inset(50%); }

.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }

.ic {
  inline-size: var(--icon);
  block-size: var(--icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.ic-lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.app:dir(rtl) .ic-flip { transform: scaleX(-1); }

/* projektor lambasi: markanin ve isaret etiketinin noktasi (onepage .lamba).
   Isaret isigidir; susleme olarak cogaltilmaz. */
.lamp {
  display: inline-block;
  inline-size: var(--lamp);
  block-size: var(--lamp);
  border-radius: var(--r-pill);
  background: var(--color-action-primary);
  flex: none;
}

/* ---------- 2. tipografi ---------- */
.h-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.h-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-head);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}
/* ic tanitim sayfasi h1'i (05-08): kahramanin kucuk kardesi, buyuk harf */
.h-page {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  text-wrap: balance;
}
/* uygulama h1'i (uyelik, kasa, panel, yonetim) ve ic tanitim sayfasinin
   bolum basligi (.h-sec, h1'in altinda kalir): cumle duzeni, 28 */
.h-app, .h-sec {
  font-family: var(--font-display);
  font-weight: var(--fw-head);
  font-size: var(--fs-2xl);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}
.h-3 { font-size: var(--fs-xl); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.h-4 { font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: var(--lh-snug); }

/* isaret etiketi (onepage .isaret): kucuk, aralikli, buyuk harf, soluk */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--color-text-secondary); max-inline-size: var(--w-lede); text-wrap: pretty; }
.meta { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.strong { font-weight: var(--fw-strong); color: var(--color-text-primary); }
.num { font-variant-numeric: tabular-nums; }
.count { font-variant-numeric: tabular-nums; font-weight: var(--fw-mid); color: var(--color-text-secondary); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Turkce buyuk harfte İ noktasi ust satira degmesin */
.app:lang(tr) .h-hero { line-height: var(--lh-head); }
.app:lang(tr) .h-page { line-height: var(--lh-snug); }
/* Arapcada buyuk harf ve harf araligi yok (Readex Pro, tokens.css) */
.app:lang(ar) :is(.h-hero, .h-page, .label, .badge, .ft__h) { text-transform: none; }

/* ---------- 3. yerlesim ---------- */
.wrap { inline-size: 100%; max-inline-size: calc(var(--w-page) + var(--edge) * 2); margin-inline: auto; padding-inline: var(--edge); }
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack-sm { display: grid; gap: var(--s-2); align-content: start; }
.stack-lg { display: grid; gap: var(--s-6); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.band { background: var(--color-surface-card); padding-inline: var(--edge); }
.band > .wrap { max-inline-size: var(--w-page); padding-inline: 0; }
.sec { padding-block: var(--s-24); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6) var(--s-10); }
.sec-head > div { display: grid; gap: var(--s-4); }
.sec-head__aside { max-inline-size: var(--w-lede); color: var(--color-text-secondary); }

/* ---------- 4. bilesenler ---------- */

/* 4.1 dugme (onepage .btn): hap, 52 px, 600, basinca kuculur */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--tap);
  padding: 0 var(--s-6);
  border: var(--hairline) solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-strong);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-mikro) var(--ease-durum), border-color var(--dur-mikro) var(--ease-durum), color var(--dur-mikro) var(--ease-durum), transform var(--dur-mikro) var(--ease-durum);
}
.btn:active { transform: scale(var(--press)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-action-primary); color: var(--color-action-on-primary); }
.btn-primary:hover { background: var(--color-action-primary-hover); }
.btn-primary:active { background: var(--color-action-primary-active); }
.btn-secondary { border-color: var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-border-hover); background: var(--color-surface-hover); }
.btn-ghost:hover { background: var(--color-surface-hover); }
.btn-ink { background: var(--color-action-ink); color: var(--color-action-on-ink); }
.btn-ink:hover { background: var(--color-action-ink-hover); }
.btn-danger { border-color: var(--color-action-danger); color: var(--color-action-danger-text); }
.btn-danger:hover { background: var(--color-action-danger-tint); }
.btn-sm { min-block-size: var(--tap-sm); padding-inline: var(--s-4); font-size: var(--fs-sm); }
.btn-block { inline-size: 100%; white-space: normal; text-wrap: balance; }
/* fiyat bolmesi (onepage .btn__fiyat) */
.btn__price {
  padding-inline-start: var(--s-3);
  margin-inline-start: var(--s-1);
  border-inline-start: var(--hairline) solid color-mix(in srgb, currentColor 35%, transparent);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.btn-icon {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap-md);
  block-size: var(--tap-md);
  padding: 0;
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-text-primary);
  transition: border-color var(--dur-mikro) var(--ease-durum), background-color var(--dur-mikro) var(--ease-durum);
}
.btn-icon:hover { border-color: var(--color-border-hover); background: var(--color-surface-hover); }

/* 4.2 alti cizili baglanti (onepage .baglanti) */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-text-primary);
  font-weight: var(--fw-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--s-2);
  transition: color var(--dur-mikro) var(--ease-durum), text-decoration-color var(--dur-mikro) var(--ease-durum);
}
.link-u:hover { color: var(--color-text-link); text-decoration-color: currentColor; text-decoration-thickness: var(--hairline); }
.link-u .ic { transition: transform var(--dur-mikro) var(--ease-durum); }

/* 4.3 rozet: kucuk, buyuk harf; "Yeni" mercan dolgu (onepage .rozet) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--color-muted-bg);
  color: var(--color-muted-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
  line-height: 1.4;
  letter-spacing: var(--tr-badge);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-new { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
.badge-ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
.badge-warn { background: var(--color-warn-bg); color: var(--color-warn-text); }
.badge-error { background: var(--color-error-bg); color: var(--color-error-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
/* makine anahtari: kucuk harf mono, harf araligi yok (Turkce buyuk harf "i"yi bozar) */
.badge-code { font-family: var(--font-mono); font-weight: var(--fw-mid); letter-spacing: 0; text-transform: none; }

/* 4.4 segment: tek kapta hap secenekler; secili perde ile ters cevrilir
   (onepage secili cip). aria-pressed (filtre) ya da aria-selected (sekme). */
.seg {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--r-pill);
  background: var(--color-surface-card);
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--tap-sm);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mid);
  white-space: nowrap;
  transition: background-color var(--dur-mikro) var(--ease-durum), color var(--dur-mikro) var(--ease-durum), transform var(--dur-mikro) var(--ease-durum);
}
.seg__opt:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.seg__opt:active { transform: scale(var(--press)); }
.seg__opt:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) { background: var(--color-action-ink); color: var(--color-action-on-ink); font-weight: var(--fw-strong); }
.seg__opt:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):hover { background: var(--color-action-ink-hover); }
.seg__opt:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) .count { color: inherit; }
/* bolunmus segment: sekme listesi kabin ic ogesi, yaninda sekme olmayan bir
   baglanti (01 "Kesfet") durur ve ince ayiriciyla ayrilir. Kaydirma yalniz
   sekme listesinde: dar ekranda sekmeler kayar, baglanti hep gorunur. Dolgu
   kaydirma kabinin icinde kalir ki odak halkasi kirpilmasin. Dis kap .seg'in
   kaydirma kabi olarak kalir: en kucuk genisligi 0, izgara izini sisirmez. */
.seg--split { padding: 0; }
.seg__tabs { display: flex; gap: var(--s-1); min-inline-size: 0; padding: var(--s-1); overflow-x: auto; scrollbar-width: none; border-inline-end: var(--hairline) solid var(--color-border-default); }
.seg__more { flex: none; margin: var(--s-1); color: var(--color-text-primary); text-decoration: none; }

/* 4.5 arama alani (onepage .ara): yuzey zemin, 10 kose, odakta mercan */
.search { position: relative; inline-size: min(var(--search-w), 100%); }
.search .ic { position: absolute; inset-inline-start: var(--s-4); inset-block-start: 50%; translate: 0 -50%; color: var(--color-text-secondary); pointer-events: none; }
.input {
  inline-size: 100%;
  min-block-size: var(--field-h);
  padding: 0 var(--s-4);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--r-1);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--fs-md);
  transition: border-color var(--dur-mikro) var(--ease-durum);
}
.input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.input:hover { border-color: var(--color-border-hover); }
.input:focus-visible { outline-offset: var(--rule); border-color: var(--color-focus); }
.search .input { padding-inline-start: calc(var(--s-4) + var(--icon) + var(--s-3)); }
.search .input::-webkit-search-cancel-button { display: none; }

/* yerel secim kutusu (onepage .secim) */
.select { position: relative; display: inline-grid; }
.select select {
  appearance: none;
  min-block-size: var(--tap-md);
  padding: 0 calc(var(--s-4) + var(--icon-sm) + var(--s-2)) 0 var(--s-4);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--r-1);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.app:dir(rtl) .select select { padding: 0 var(--s-4) 0 calc(var(--s-4) + var(--icon-sm) + var(--s-2)); }
.select select:hover { border-color: var(--color-border-hover); }
.select .ic { position: absolute; inset-inline-end: var(--s-3); inset-block-start: 50%; translate: 0 -50%; color: var(--color-text-secondary); pointer-events: none; }

/* 4.6 tik listesi */
.ticks { display: grid; gap: var(--s-3); }
.ticks li { display: flex; align-items: start; gap: var(--s-3); }
.ticks .ic { margin-block-start: var(--s-1); color: var(--color-text-primary); }

/* 4.7 cerceveli ekran goruntusu: sade krom cubuk + alan adi hapi,
   ic halka + ust isik + derin golge (bu setin onepage'e eki) */
.frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--color-surface-card);
  box-shadow: var(--ring-in), var(--light-top), var(--shadow-frame);
}
.frame__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--chrome-h);
  border-block-end: var(--hairline) solid var(--color-border-default);
}
.frame__url {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--fs-label);
  line-height: 1;
  direction: ltr;
  max-inline-size: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

/* 4.8 bos durum */
.empty { display: grid; gap: var(--s-3); justify-items: start; padding-block: var(--s-12); border-block-start: var(--hairline) solid var(--color-border-default); }
.empty p:not(.h-3, .form-act) { color: var(--color-text-secondary); max-inline-size: var(--w-lede); }
.card .empty { padding-block: var(--s-2); border-block-start: 0; }

/* ---------- 5. site kabugu ---------- */

/* 5.1 header: yapiskan, opak salon, ince cizgi. onepage'in kaydirinca
   saklanan header'i ve ilerleme cizgisi BURADA YOK (sakin satis yuzeyi). */
.hd {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--color-surface-page);
  border-block-end: var(--hairline) solid var(--color-border-default);
}
.hd__in { display: flex; align-items: center; gap: var(--s-8); min-block-size: var(--head-h); }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tr-brand);
  text-decoration: none;
  direction: ltr;
}
.brand .lamp { --lamp: var(--lamp-sm); }
.hd__nav ul, .ft__cols ul { margin: 0; padding: 0; list-style: none; }
.hd__nav ul { display: flex; gap: var(--s-1); }
.hd__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-sm);
  padding: 0 var(--s-3);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mid);
  text-decoration: none;
}
/* onepage nav cizgisi: 2 px mercan, scaleX ile buyur */
.hd__nav a::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-3);
  inset-block-end: var(--s-1);
  block-size: var(--rule);
  background: var(--color-action-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-temel) var(--ease-durum);
}
.app:dir(rtl) .hd__nav a::after { transform-origin: right; }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); }
.hd__act { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.hd__menu { display: none; }

/* 5.2 dil secici: disclosure (aria-expanded + aria-controls), 8 dil.
   Dosyasi basilmayan dil mockup'ta baglanti degildir. */
.lng { position: relative; }
.lng__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--tap-sm);
  padding: 0 var(--s-3);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tr-brand);
  transition: border-color var(--dur-mikro) var(--ease-durum);
}
.lng__btn:hover { border-color: var(--color-border-hover); }
.lng__btn[aria-expanded="true"] { border-color: var(--color-focus); }
.lng__btn .ic-chev { transition: transform var(--dur-mikro) var(--ease-durum); }
.lng__btn[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
.lng__list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s-2));
  z-index: 50;
  display: grid;
  min-inline-size: var(--lng-w);
  padding: var(--s-2);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--r-2);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-pop);
}
.lng__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: var(--tap-sm);
  padding: 0 var(--s-3);
  border-radius: var(--r-1);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.lng__opt .ic { visibility: hidden; color: var(--color-text-link); }
a.lng__opt:hover { background: var(--color-surface-sunken); }
.lng__opt[aria-current="true"] { font-weight: var(--fw-strong); }
.lng__opt[aria-current="true"] .ic { visibility: visible; }
.lng__opt.is-yok { color: var(--color-text-secondary); }
.lng__opt .meta { font-size: var(--fs-label); }

/* 5.3 mobil menu: tam ekran diyalog; acikken sayfa inert, odak tuzagi */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-4) var(--edge) var(--s-10);
  overflow-y: auto;
  background: var(--color-surface-page);
}
.menu__top { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--head-h-sm); border-block-end: var(--hairline) solid var(--color-border-default); }
.menu__links { display: grid; }
.menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--s-16);
  border-block-end: var(--hairline) solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-strong);
  text-decoration: none;
}
.menu__links a .ic { color: var(--color-text-secondary); }
.menu__langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.menu__langs :is(a, span) {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-md);
  padding: 0 var(--s-4);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--r-1);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.menu__langs [aria-current="true"] { border-color: var(--color-focus); font-weight: var(--fw-strong); }
.menu__langs span { color: var(--color-text-secondary); }
.menu__foot { display: grid; gap: var(--s-3); margin-block-start: auto; }
:root.is-kilit { overflow: hidden; }

/* 5.4 footer: sakin, cok sutunlu (onepage'in dev kapanis cumlesi YOK) */
.ft { border-block-start: var(--hairline) solid var(--color-border-default); padding-block: var(--s-20) var(--s-10); }
.ft__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-10); }
.ft__brand { display: grid; gap: var(--s-4); align-content: start; max-inline-size: 34ch; color: var(--color-text-secondary); }
.ft__brand .cluster { margin-block-start: var(--s-2); }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.ft__h { margin-block-end: var(--s-3); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--color-text-secondary); }
.ft__cols a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--s-8);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-mikro) var(--ease-durum);
}
.ft__cols a:hover { color: var(--color-text-link); }
.ft__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  margin-block-start: var(--s-16);
  padding-block-start: var(--s-6);
  border-block-start: var(--hairline) solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}
.ft__lng { display: flex; align-items: center; gap: var(--s-3); }
/* M-5: mockup'ta JS'li <select>; burada duz baglanti listesi - dil
   degistirmek tanitim sayfasinda yan etkisiz bir GET'tir. */
.ft__lng-list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; }
.ft__lng-list a { color: inherit; }
.ft__lng-list a[aria-current="true"] { color: var(--color-text-primary); font-weight: var(--fw-strong); }

/* ---------- 6. ana sayfa ---------- */

/* 6.1 kahraman: solda metin, sagda cerceveli sahne + sektor sekmeleri.
   onepage'in projeksiyon duvari ve kelime maskesi yerine: onde buyuk
   cerceve, arkada iki kaymis cerceve; sekme degisince sahne capraz gecer. */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--s-10); padding-block: var(--s-16) var(--s-12); }
.hero__txt { grid-column: 1 / span 6; display: grid; gap: var(--s-6); justify-items: start; }
.hero__cta { margin-block-start: var(--s-2); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-1) 0; color: var(--color-text-secondary); font-size: var(--fs-sm); }
.facts li + li::before { content: "\00B7"; margin-inline: var(--s-3); }
.stage { grid-column: 7 / span 6; display: grid; gap: var(--s-6); justify-items: center; }
.stage__view { inline-size: 100%; }
.stage__set { position: relative; aspect-ratio: 6 / 5; }
.stage__set .frame { position: absolute; }
.stage__set .frame--front { inset-inline-start: 0; inset-block-end: 0; inline-size: 80%; z-index: 3; }
.stage__set .frame--b1 { inset-inline-end: 6%; inset-block-start: 9%; inline-size: 62%; z-index: 2; }
.stage__set .frame--b2 { inset-inline-end: 0; inset-block-start: 0; inline-size: 52%; z-index: 1; }
/* arka cerceveler perde altinda kalir: odak ondeki demoda */
.stage__set .frame--b1::after,
.stage__set .frame--b2::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim-soft); }
.stage__set .frame--b2::after { background: var(--color-surface-glass); opacity: 0.7; }

/* 6.2 katalog: yapiskan arac cubugu + masaustunde izgara, telefonda raf.
   onepage'in film seridi rafi ve kart perdesi yerine paspartu kart. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block: var(--s-10) 0;
  padding-block: var(--s-4);
  background: var(--color-surface-page);
  border-block-end: var(--hairline) solid var(--color-border-default);
}
.cat-head { padding-block-end: 0; }
.shelf { padding-block-start: var(--s-12); }
.cat-foot { padding-block-start: var(--s-16); }
.shelf__h { display: flex; align-items: baseline; gap: var(--s-3); margin-block-end: var(--s-6); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-10) var(--s-6); }
.demo { position: relative; display: grid; gap: var(--s-2); align-content: start; }
.demo__link { display: grid; gap: var(--s-3); color: var(--color-text-primary); text-decoration: none; border-radius: var(--r-2); }
.demo__mat {
  position: relative;
  display: block;
  padding: var(--mat);
  border-radius: var(--r-2);
  background: var(--color-surface-card);
  box-shadow: var(--ring-in), var(--light-top);
  transition: transform var(--dur-temel) var(--ease-durum), box-shadow var(--dur-temel) var(--ease-durum);
}
.demo__mat img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: var(--r-1); }
/* Gorseli henuz yuklenmemis demo (P9 oncesi): kapak yerine sessiz bir yuzey.
   Uydurma bir gorsel basmaktansa bos cerceve dogru olani (SPEC-site-04 ilkesi). */
.demo__ph, .frame__ph { display: block; inline-size: 100%; aspect-ratio: 4 / 3; background: var(--color-surface-sunken); }
.demo__ph { border-radius: var(--r-1); }
.demo__new { position: absolute; inset-block-start: calc(var(--mat) + var(--s-3)); inset-inline-start: calc(var(--mat) + var(--s-3)); }
/* onizle hapi: yalniz incelikli imlecte, gorselin kosesinde belirir */
.demo__peek {
  position: absolute;
  inset-block-end: calc(var(--mat) + var(--s-3));
  inset-inline-end: calc(var(--mat) + var(--s-3));
  display: none;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--color-action-ink);
  color: var(--color-action-on-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: 1;
}
.demo__name { display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-1); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.demo__name .ic { color: var(--color-text-secondary); }
.demo__meta { display: flex; flex-wrap: wrap; padding-inline: var(--s-1); color: var(--color-text-secondary); font-size: var(--fs-sm); line-height: 1.4; }
.demo__meta span + span::before { content: "\00B7"; margin-inline: var(--s-2); }
.demo__modes { display: flex; gap: var(--s-2); padding-inline: var(--s-1); margin-block-start: var(--s-1); }
.mode {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--s-8);
  padding: 0 var(--s-3);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--r-pill);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-mikro) var(--ease-durum);
}
.mode:hover { border-color: var(--color-border-hover); }
/* varyant haplari (K-17): satir etiketi (duzen) + haplar (sube); tek eksende
   yalniz haplar. Etiket sutunu en genis etikete gore hizalanir. */
.vary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: center; padding-inline: var(--s-1); margin-block-start: var(--s-1); }
.vary__row { display: contents; }
.vary__k { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.vary__set { display: flex; flex-wrap: wrap; gap: var(--s-2); grid-column: 2; }
.vary__row:not(:has(.vary__k)) .vary__set { grid-column: 1 / -1; }
.mode__dot { inline-size: var(--dot); block-size: var(--dot); border-radius: var(--r-pill); border: var(--hairline) solid var(--color-border-strong); background: var(--c-void); }
.mode__dot--light { background: var(--c-text); }
@media (hover: hover) and (pointer: fine) {
  .demo__peek { display: inline-flex; opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--dur-cikis) var(--ease-cikis), transform var(--dur-cikis) var(--ease-cikis); }
  .demo__link:hover .demo__mat { transform: translateY(var(--lift)); box-shadow: var(--ring-in-on), var(--light-top), var(--shadow-frame); }
  .demo__link:hover .demo__peek { opacity: 1; transform: none; transition: opacity var(--dur-temel) var(--ease-giris), transform var(--dur-temel) var(--ease-giris); }
  .demo__link:hover .demo__name .ic { color: var(--color-text-link); }
}
.cat-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin-block-start: var(--s-16);
  padding: var(--s-8) var(--s-10);
  border-radius: var(--r-2);
  background: var(--color-surface-card);
  box-shadow: var(--ring-in), var(--light-top);
}
.cat-end > div { display: grid; gap: var(--s-1); }

/* 6.3 ozellikler: koltuk bandi; solda yapiskan baslik, sagda iki kolon
   cizgili liste (onepage'in ortali dt/dd jenerigi yerine) */
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-10); }
.feat__head { grid-column: 1 / span 4; display: grid; gap: var(--s-4); align-content: start; position: sticky; inset-block-start: calc(var(--head-h) + var(--s-10)); align-self: start; }
.feat__list { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10) var(--s-8); }
.feat__list li { display: grid; gap: var(--s-3); align-content: start; padding-block-start: var(--s-6); border-block-start: var(--hairline) solid var(--color-border-default); }
.feat__list p { color: var(--color-text-secondary); }
.tile { display: inline-grid; place-items: center; inline-size: var(--tap-sm); block-size: var(--tap-sm); border-radius: var(--r-1); background: var(--color-surface-sunken); color: var(--color-text-primary); }

/* 6.4 lisans: solda dort adim (mercan numara), sagda duz lisans karti.
   onepage'in donuk bileti, zimba delikleri ve kesikli kocani YOK. */
.lic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-10); align-items: start; }
.lic__steps { grid-column: 1 / span 6; display: grid; gap: var(--s-6); }
.steps { counter-reset: none; border-block-end: var(--hairline) solid var(--color-border-default); }
.steps li { display: grid; grid-template-columns: var(--s-10) minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); border-block-start: var(--hairline) solid var(--color-border-default); }
.steps__no { padding-block-start: var(--s-1); color: var(--color-text-link); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: var(--tr-badge); font-variant-numeric: tabular-nums; }
.steps li > div { display: grid; gap: var(--s-2); }
.steps p { color: var(--color-text-secondary); }
.lic-card {
  grid-column: 8 / span 5;
  position: sticky;
  inset-block-start: calc(var(--head-h) + var(--s-10));
  display: grid;
  gap: var(--s-6);
  padding: var(--s-10);
  border-radius: var(--r-3);
  background: var(--color-surface-card);
  box-shadow: var(--ring-in), var(--light-top), var(--shadow-stage);
}
.lic-card__name { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-strong); }
.lic-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.lic-card__amount { font-family: var(--font-display); font-size: var(--fs-price); font-weight: var(--fw-display); line-height: 0.9; letter-spacing: var(--tr-price); font-variant-numeric: tabular-nums; direction: ltr; }
.lic-card__unit { color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.lic-card .ticks { padding-block: var(--s-6); border-block: var(--hairline) solid var(--color-border-default); }
.lic-card__fine { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.lic-card__fine a { color: var(--color-text-primary); }

/* 6.5 SSS: ustte baslik, altta iki kolon yerel akordeon (details).
   onepage'in yapiskan baslik + tek kolon dugme akordeonu yerine. */
.faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-10); margin-block-start: var(--s-12); align-items: start; }
.faq__col { border-block-start: var(--hairline) solid var(--color-border-default); }
.qa { border-block-end: var(--hairline) solid var(--color-border-default); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: var(--s-16);
  padding-block: var(--s-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-strong);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .tile { flex: none; transition: color var(--dur-mikro) var(--ease-durum), background-color var(--dur-mikro) var(--ease-durum); }
.qa summary .tile .ic { transition: transform var(--dur-mikro) var(--ease-durum); }
.qa summary:hover .tile { background: var(--color-surface-pressed); }
.qa[open] summary .tile { color: var(--color-text-link); }
.qa[open] summary .tile .ic { transform: rotate(45deg); }
.qa__a { display: grid; gap: var(--s-3); padding-block-end: var(--s-6); max-inline-size: 60ch; color: var(--color-text-secondary); }
.qa__a a { color: var(--color-text-primary); }

/* ---------- 7. form ve geri bildirim ---------- */

/* 7.1 alan: etiket ustte, ipucu altta; hata kirmizi metin + ikon (renk
   tek basina bilgi tasimaz). Alan anatomisi onepage .ara ile ayni. */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); align-content: start; }
.field__lbl { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--color-text-primary); }
.field__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.field__row a { font-size: var(--fs-sm); }
.field__hint { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.field__err { display: flex; align-items: start; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-mid); color: var(--color-error-text); }
.field__err .ic { margin-block-start: 0.15em; }
.input[aria-invalid="true"] { border-color: var(--color-error-text); }
.input:is(:disabled, [readonly]) { background: var(--color-surface-sunken); border-color: var(--color-border-default); color: var(--color-text-secondary); }
textarea.input { min-block-size: calc(var(--field-h) * 2.5); padding-block: var(--s-3); line-height: var(--lh-body); resize: vertical; }
.input-mono { font-family: var(--font-mono); font-size: var(--fs-base); direction: ltr; }
.input-file { padding-block: var(--s-2); }
.input-file::file-selector-button { margin-inline-end: var(--s-3); min-block-size: calc(var(--field-h) - var(--s-4)); padding-inline: var(--s-4); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--r-pill); background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); cursor: pointer; }
/* alanlar ustten hizalanir (ipucu satiri komsuyu kaydirmaz); duz eylem
   kutusu etiket satiri kadar asagidan baslar, dugme girdiyle ayni hizada */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-min)), 1fr)); gap: var(--s-4); align-items: start; }
.form-grid > :not(.field, .check, fieldset, legend) { margin-block-start: calc(var(--fs-sm) * var(--lh-body) + var(--s-2)); }
.form-grid .span-all { grid-column: 1 / -1; }
.app:not(.app-yonetim) .form-grid { --col-min: var(--col-min-wide); }
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.select.is-block { display: grid; inline-size: 100%; }
.select.is-block select { inline-size: 100%; min-block-size: var(--field-h); font-size: var(--fs-md); }

/* 7.2 onay kutusu: satirin tamami tiklanir, kutu mercan */
.check { display: flex; align-items: start; gap: var(--s-3); min-block-size: var(--tap-md); padding-block: var(--s-2); color: var(--color-text-primary); cursor: pointer; }
.check input { flex: none; inline-size: var(--check); block-size: var(--check); margin: 0; margin-block-start: 0.15em; accent-color: var(--color-action-primary); cursor: pointer; }
.check:has(input:disabled) { color: var(--color-text-secondary); cursor: not-allowed; }
/* iade yok onayi gibi zorunlu kabul: kenarli kutu */
.consent { padding: var(--s-2) var(--s-5); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--r-1); }
.consent:has(input:checked) { border-color: var(--color-focus); }

/* 7.3 bildirim: ton zemini + baslangicta 2 px ton cizgisi + ikon */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-inline-start: var(--rule) solid var(--color-info-text);
  border-radius: var(--r-1);
  background: var(--color-info-bg);
  color: var(--color-text-primary);
  font-size: var(--fs-base);
}
.notice > .ic { margin-block-start: 0.15em; color: var(--color-info-text); }
.notice > div { display: grid; gap: var(--s-2); min-inline-size: 0; }
/* zemin tam genislikte kalir, metin okunur satirda (genis panel/yonetim sutununda
   tek satir 110+ karaktere yayiliyordu; taste_audit olcu sinyali) */
.notice p { max-inline-size: var(--w-prose); }
/* bildirim eylemi dar kapta sarilir (uzun fiil: "Dogrulama baglantisini gonder") */
.notice .btn { white-space: normal; text-wrap: balance; text-align: center; padding-block: var(--s-2); }
.notice .ltr { overflow-wrap: anywhere; }
.notice :is(b, strong) { font-weight: var(--fw-strong); }
.notice .form-act { margin-block-start: var(--s-1); }
.notice-ok { background: var(--color-ok-bg); border-inline-start-color: var(--color-ok-text); }
.notice-ok > .ic { color: var(--color-ok-text); }
.notice-warn { background: var(--color-warn-bg); border-inline-start-color: var(--color-warn-text); }
.notice-warn > .ic { color: var(--color-warn-text); }
.notice-error { background: var(--color-error-bg); border-inline-start-color: var(--color-error-text); }
.notice-error > .ic { color: var(--color-error-text); }

/* 7.4 kart: koltuk yuzeyi, ic halka + ust isik (acik zeminde ince kenar) */
.card {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-8);
  border-radius: var(--r-2);
  background: var(--color-surface-card);
  box-shadow: var(--ring-in), var(--light-top);
}
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.card-head > div { display: grid; gap: var(--s-1); }
.card-danger { box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, var(--color-error-text) 45%, transparent); }
.app-yonetim .card, .paper .card { border: var(--hairline) solid var(--color-border-default); padding: var(--s-6); }

/* 7.5 anahtar: mono, gomuk zemin, kopyala dugmesi; 64 hane 8 haneli gruplar halinde,
   kirilim yalniz grup sinirinda; ilk grup panelde kalan onek */
.key {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  padding-inline-start: var(--s-4);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--r-1);
  background: var(--color-surface-sunken);
}
.key code { display: grid; grid-template-columns: repeat(4, max-content); gap: 0 var(--s-3); flex: 1; min-inline-size: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--color-text-secondary); }
.key__g { white-space: nowrap; }
.key__g:first-child { color: var(--color-text-primary); font-weight: var(--fw-strong); }
.key .copy { flex: none; }
.copy[data-state="copied"] { color: var(--color-ok-text); }
.key-mask { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-base); direction: ltr; unicode-bidi: isolate; }

/* 7.6 tablo: satir cizgisi, sessiz baslik; yonetimde baslik buyuk harf */
.tbl-wrap { overflow-x: auto; }
.tbl { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.tbl caption { padding-block-end: var(--s-3); text-align: start; }
.tbl th {
  padding: var(--s-3) var(--s-4);
  border-block-end: var(--hairline) solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  text-align: start;
  white-space: nowrap;
}
.tbl td { padding: var(--s-4); border-block-end: var(--hairline) solid var(--color-border-default); vertical-align: middle; }
/* gruplu tabloda her tbody bir blok (38 aileleri): ust sinir kalin */
.tbl tbody + tbody > tr:first-child > * { border-block-start: var(--rule) solid var(--color-border-default); }
.tbl :is(th, td):first-child { padding-inline-start: 0; }
.tbl :is(th, td):last-child { padding-inline-end: 0; }
.tbl .end { text-align: end; }
.nowrap { white-space: nowrap; }
.tbl__sub { display: block; margin-block-start: var(--s-1); color: var(--color-text-secondary); font-size: var(--fs-sm); }
.tbl__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.tbl tr.is-off > td { color: var(--color-text-secondary); }
.app-yonetim .tbl th { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.app-yonetim .tbl td { padding-block: var(--s-3); }
/* grup satiri (38: aile) */
.tbl tr.grp > th { padding-block: var(--s-5) var(--s-2); border-block-end-color: var(--color-border-default); color: var(--color-text-primary); font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; }

/* 7.7 satir islemleri (29, 33, 21): tetik satirin sonunda, panel satirin
   ALTINDA akista acilir (tasma yok). Bir satir acik basilir. */
.row-tog .ic-chev { transition: transform var(--dur-mikro) var(--ease-durum); }
.row-tog[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
.tbl tr:has(+ tr.row-ops:not([hidden])) > td { border-block-end-color: transparent; }
.tbl tr.row-ops > td { padding: 0 0 var(--s-4); }
.ops { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4) var(--s-6); padding: var(--s-5); border-radius: var(--r-1); background: var(--color-surface-sunken); }
.ops form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); }
.ops .field { inline-size: var(--col-min); }
.ops p { max-inline-size: var(--w-prose); }
.ops__sep { align-self: stretch; inline-size: var(--hairline); background: var(--color-border-default); }

/* 7.8 acilir (details): kucuk akordeon (anahtarimi kaybettim, ayrinti) */
.disc { border-block: var(--hairline) solid var(--color-border-default); }
.disc summary { display: flex; align-items: center; gap: var(--s-2); min-block-size: var(--tap-md); color: var(--color-text-primary); font-weight: var(--fw-strong); list-style: none; cursor: pointer; }
.disc summary::-webkit-details-marker { display: none; }
.disc summary .ic-chev { margin-inline-start: auto; color: var(--color-text-secondary); transition: transform var(--dur-mikro) var(--ease-durum); }
.disc[open] summary .ic-chev { transform: rotate(180deg); }
.disc__body { display: grid; gap: var(--s-4); padding-block: var(--s-1) var(--s-5); color: var(--color-text-secondary); }
/* kapali govde yerlesimde de yok: Chrome ::details-content govdeyi kutuda tutar */
.disc:not([open]) > .disc__body { display: none; }

/* 7.9 sonuc isareti (basari, baglanti, engel) */
.mark { display: inline-grid; place-items: center; inline-size: var(--done); block-size: var(--done); border-radius: var(--r-pill); background: var(--color-ok-bg); color: var(--color-ok-text); }
.mark .ic { inline-size: calc(var(--done) * 0.43); block-size: calc(var(--done) * 0.43); }
.mark-stop { background: var(--color-error-bg); color: var(--color-error-text); }
.mark-link { background: var(--color-surface-tint); color: var(--color-text-link); }

/* 7.10 deger listesi: sol sessiz anahtar, sag deger; satir cizgili */
.kv { display: grid; }
.kv > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-2) var(--s-6); padding-block: var(--s-3); border-block-end: var(--hairline) solid var(--color-border-default); }
.kv > div:first-child { border-block-start: var(--hairline) solid var(--color-border-default); }
.kv dt { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.kv dd { font-weight: var(--fw-mid); overflow-wrap: anywhere; }
.kv .kv__total { padding-block: var(--s-4); }
.kv .kv__total :is(dt, dd) { color: var(--color-text-primary); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
.kv-flat > div:first-child { border-block-start: 0; }
.kv-flat > div:last-child { border-block-end: 0; }

/* 7.11 tutar: Unbounded, rakam hizali */
.amount { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-display); line-height: 1; letter-spacing: var(--tr-price); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* 7.12 yol (WordPress menu yolu): "Gorunum > SCP > Lisans" */
/* menu yolu satir ici akar (atomik kutu degil): izleyen noktalama satir basina dusmez;
   her bolum kendi icinde bolunmez */
.path { font-weight: var(--fw-strong); color: var(--color-text-primary); }
.path > span { white-space: nowrap; }
.path .ic { inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-inline: var(--s-1); vertical-align: middle; color: var(--color-text-secondary); }

/* ---------- 8. uyelik kabugu (09-13) ----------
   Bolunmus: solda koltuk bandi (marka, tek cumle, tik listesi, 01'in
   cerceveli sahnesinden kucuk kopya), sagda form. onepage duvari DEGIL. */
.auth { display: grid; grid-template-columns: minmax(0, var(--w-side)) minmax(0, 1fr); min-block-size: var(--app-h); }
.auth__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-10) var(--s-10);
  background: var(--color-surface-card);
  border-inline-end: var(--hairline) solid var(--color-border-default);
}
/* yan cumle formun h1'iyle yarismaz: bir adim kucuk, ikincil renk (h1 28, bu 20) */
.auth__say { color: var(--color-text-secondary); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-head); line-height: var(--lh-snug); letter-spacing: var(--tr-head); text-wrap: balance; }
.auth__side .ticks { color: var(--color-text-secondary); font-size: var(--fs-base); }
.auth__side .ticks .ic { color: var(--color-text-link); }
.auth__stage { margin-block-start: auto; }
.auth__stage .stage__set { aspect-ratio: 4 / 3; }
.auth__stage .frame--front { inline-size: 84%; }
.auth__stage .frame--b1 { inline-size: 66%; inset-inline-end: 0; inset-block-start: 0; }
/* arka cercevenin adresi on cercevenin arkasinda kesik kalir ("...rri..."): cubuk bos */
.auth__stage .frame--b1 .frame__url { visibility: hidden; }
.auth__main { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--s-5) var(--edge) var(--s-8); }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: var(--head-h-sm); }
.auth__top .brand { display: none; }
.auth__body { flex: 1; display: grid; align-content: center; padding-block: var(--s-10) var(--s-12); }
.auth__form { display: grid; gap: var(--s-8); inline-size: min(100%, var(--w-auth)); margin-inline: auto; }
.auth__head { display: grid; gap: var(--s-3); }
.auth__head p { color: var(--color-text-secondary); }
.auth__alt { padding-block-start: var(--s-6); border-block-start: var(--hairline) solid var(--color-border-default); color: var(--color-text-secondary); font-size: var(--fs-sm); }
.auth__fine { color: var(--color-text-secondary); font-size: var(--fs-sm); }
/* hukuki baglanti satir sonunda bolunmez */
.auth__fine a { white-space: nowrap; }

/* ---------- 9. kasa kabugu (14, 14b, 15, 15b, 16, 17) ----------
   Ince ust cubuk (marka + guvenli odeme notu + dil), ortada tek sutun
   icerik, altta yasal satir. Header menusu yok: dikkat islemde. */
.ck { display: flex; flex-direction: column; min-block-size: var(--app-h); }
.ck__bar { border-block-end: var(--hairline) solid var(--color-border-default); }
.ck__bar .wrap { display: flex; align-items: center; gap: var(--s-4) var(--s-6); min-block-size: var(--head-h-sm); }
.ck__safe { display: inline-flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; color: var(--color-text-secondary); font-size: var(--fs-sm); }
.ck__main { flex: 1; padding-block: var(--s-12) var(--s-16); }
.ck__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); inline-size: min(100%, var(--w-sheet)); margin-inline: auto; }
.ck__head { display: grid; gap: var(--s-4); justify-items: start; }
.ck__head p:not(.label) { color: var(--color-text-secondary); max-inline-size: var(--w-prose); }
.ck__foot { border-block-start: var(--hairline) solid var(--color-border-default); padding-block: var(--s-5); color: var(--color-text-secondary); font-size: var(--fs-sm); }
.ck__foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); }
.ck__foot ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.ck__foot a { color: var(--color-text-primary); }
/* siparis satiri: urun + meta solda, tutar sagda */
.sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.sum > div { display: grid; gap: var(--s-1); }
.sum__name { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
.sum__price { display: grid; justify-items: end; gap: var(--s-1); }
.app:dir(rtl) .sum__price { justify-items: start; }
/* sonuc basi: isaret + baslik yan yana */
.result { display: flex; align-items: center; gap: var(--s-5); }
.result > div { display: grid; gap: var(--s-2); min-inline-size: 0; }
.result p { color: var(--color-text-secondary); }
/* eslestirme: WordPress -> SCP baglanti seridi */
.pair { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-1); background: var(--color-surface-sunken); font-weight: var(--fw-strong); }
.pair .ic-sm { color: var(--color-text-secondary); }
.pair__site { font-family: var(--font-mono); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }

/* ---------- 10. uygulama kabugu: musteri paneli + yonetim ----------
   Ust cubuk + yan menu + ana sutun. Aktif oge 2 px mercan cizgi
   (header nav cizgisinin dikey kardesi). Dar cercevede yan menu yatay
   kaydirmali serit olur. Yonetimde zemin acik, olcu yogun. */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: auto 1fr; min-block-size: var(--app-h); }
.app-yonetim .shell { grid-template-columns: var(--side-w-admin) minmax(0, 1fr); }
.shell__top {
  grid-column: 1 / -1;
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  min-block-size: var(--head-h-sm);
  padding-inline: var(--s-6);
  border-block-end: var(--hairline) solid var(--color-border-default);
  background: var(--color-surface-page);
}
.shell__ctx { padding-inline-start: var(--s-4); border-inline-start: var(--hairline) solid var(--color-border-default); }
.shell__end { display: flex; align-items: center; gap: var(--s-3) var(--s-4); margin-inline-start: auto; }
.who { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-mid); }
.avatar { display: inline-grid; place-items: center; inline-size: var(--avatar); block-size: var(--avatar); border-radius: var(--r-pill); background: var(--color-surface-sunken); color: var(--color-text-primary); font-size: var(--fs-label); font-weight: var(--fw-head); letter-spacing: var(--tr-brand); }
.shell__side { padding: var(--s-6) var(--s-3); border-inline-end: var(--hairline) solid var(--color-border-default); }
.nav-side { display: grid; gap: var(--s-1); position: sticky; inset-block-start: calc(var(--head-h-sm) + var(--s-6)); }
.nav-side :is(a, button) {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: var(--tap-sm);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mid);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-mikro) var(--ease-durum), color var(--dur-mikro) var(--ease-durum);
}
.nav-side :is(a, button):hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.nav-side a[aria-current="page"] { background: var(--color-surface-card); color: var(--color-text-primary); font-weight: var(--fw-strong); }
.nav-side a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: var(--s-2); inline-size: var(--rule); border-radius: var(--r-pill); background: var(--color-action-primary); }
.nav-side a[aria-current="page"] .ic { color: var(--color-text-link); }
.nav-side__sep { block-size: var(--hairline); margin-block: var(--s-3); background: var(--color-border-default); }
.nav-side__h { padding: var(--s-4) var(--s-3) var(--s-1); }
.nav-side__h:first-child { padding-block-start: 0; }
.nav-side__tag { margin-inline-start: auto; color: var(--color-text-secondary); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-badge); text-transform: uppercase; }
.nav-side form { margin: 0; }
.shell__main { min-inline-size: 0; padding: var(--s-10) var(--s-10) var(--s-16); }
.shell__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); max-inline-size: var(--w-main); }
.app-yonetim .shell__top, .app-yonetim .shell__side { background: var(--color-surface-card); }
.app-yonetim .shell__in { max-inline-size: none; gap: var(--s-8); }
.app-yonetim .nav-side a[aria-current="page"] { background: var(--color-surface-tint); }

/* sayfa basi: h1 + tek satir alt metin; eylem varsa sagda */
.p-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.p-head > div { display: grid; gap: var(--s-2); min-inline-size: 0; }
.p-head p { color: var(--color-text-secondary); max-inline-size: var(--w-prose); }
/* bolum: h2 + ipucu + govde */
.sect { display: grid; gap: var(--s-5); align-content: start; }
.sect__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6); }
.sect__head > div { display: grid; gap: var(--s-1); }
.sect__head p { color: var(--color-text-secondary); font-size: var(--fs-sm); max-inline-size: var(--w-prose); }

/* 10.1 lisans karti (18, 19): duz kart, lamba + urun, durum rozeti,
   maskeli anahtar ve uc deger. 01'in lisans kartiyla ayni govde. */
.lcard { display: grid; gap: var(--s-6); padding: var(--s-8); border-radius: var(--r-3); background: var(--color-surface-card); box-shadow: var(--ring-in), var(--light-top); }
.lcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lcard__name { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
.lcard__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-6); border-block: var(--hairline) solid var(--color-border-default); }
.lcard__facts > div { display: grid; gap: var(--s-1); align-content: start; }
.lcard__facts dt { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.lcard__facts dd { font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.lcard__facts dd .meta { display: block; font-weight: var(--fw-mid); }
.lcard.is-off .lcard__name .lamp { background: var(--color-border-strong); }

/* 10.2 hizli erisim: iki kolon satir baglanti */
/* tek yuzey, ic cizgili satirlar: dort ayri kart yerine bir kutu (declutter) */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-2); background: var(--color-surface-card); box-shadow: var(--ring-in); overflow: hidden; }
.quick li:nth-child(n + 3) { border-block-start: var(--hairline) solid var(--color-border-default); }
.quick li:nth-child(even) { border-inline-start: var(--hairline) solid var(--color-border-default); }
.quick a { display: flex; align-items: center; gap: var(--s-4); min-block-size: var(--s-16); padding: var(--s-3) var(--s-5); color: var(--color-text-primary); text-decoration: none; transition: background-color var(--dur-mikro) var(--ease-durum); }
.quick a:hover { background: var(--color-surface-hover); }
.app .quick a:focus-visible { outline-offset: calc(var(--ring) * -2); }
.quick a > span:not(.tile) { display: grid; flex: 1; min-inline-size: 0; }
.quick .meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick a > .ic { color: var(--color-text-secondary); }

/* 10.3 indirme satiri */
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-block: var(--s-6); border-block-end: var(--hairline) solid var(--color-border-default); }
.dl-row:first-child { border-block-start: var(--hairline) solid var(--color-border-default); }
.dl-row > div { display: grid; flex: 1 1 20rem; gap: var(--s-1); }
.dl-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-weight: var(--fw-strong); }
.dl-row p { color: var(--color-text-secondary); font-size: var(--fs-sm); }

/* 10.4 yonetim: ince sayi seridi (27) */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--hairline) solid var(--color-border-default); border-radius: var(--r-2); background: var(--color-surface-card); }
.strip > div { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-inline-start: var(--hairline) solid var(--color-border-default); }
.strip > div:nth-child(4n + 1) { border-inline-start: 0; }
.strip > div:nth-child(n + 5) { border-block-start: var(--hairline) solid var(--color-border-default); }
.strip__n { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-head); line-height: 1.1; font-variant-numeric: tabular-nums; }
.strip__n.is-warn { color: var(--color-warn-text); }
.strip__n { order: -1; }
.strip__k { color: var(--color-text-secondary); font-size: var(--fs-sm); }

/* 10.5 yonetim: koltuk sayaci (yalniz teknik tavan, 29-30) */
.seats { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.seats__row { display: inline-flex; gap: var(--s-1); }
.seat { inline-size: var(--seat); block-size: var(--seat); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--s-1); }
.seat.on { border-color: var(--color-action-ink); background: var(--color-action-ink); }
.seat.full { border-color: var(--color-error-text); background: var(--color-error-text); }
.seat.loc { border-style: dashed; }

/* 10.6 yonetim: kucuk gorsel, ham deger, super etiketi, arac cubugu */
.thumb { inline-size: var(--thumb); block-size: var(--thumb-h); flex: none; border-radius: var(--r-1); object-fit: cover; object-position: top; background: var(--color-surface-sunken); }
.thumb-none { display: inline-grid; place-items: center; color: var(--color-text-secondary); }
.cell-media { display: flex; align-items: center; gap: var(--s-3); }
.raw { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-text-secondary); direction: ltr; unicode-bidi: isolate; }
.raw-wrap { overflow-wrap: break-word; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); }
.filters .field { flex: 0 1 var(--search-w); }
.chain { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-strong); color: var(--color-ok-text); }

/* 10.7 operator girisi (26): kabuksuz, ortada acik kart */
.gate { display: grid; place-items: center; min-block-size: var(--app-h); padding: var(--s-10) var(--edge); }
.gate__card { display: grid; gap: var(--s-6); inline-size: min(100%, var(--w-form)); padding: var(--s-10); border: var(--hairline) solid var(--color-border-default); border-radius: var(--r-2); background: var(--color-surface-card); }
.gate__mark { display: flex; align-items: center; gap: var(--s-3); }

/* ---------- 11. ic sayfa, belge ve dokum ---------- */

/* 11.1 ic tanitim sayfasi basi (05-08) */
.page-head { padding-block: var(--s-16) var(--s-12); }
.page-head .wrap { display: grid; gap: var(--s-5); justify-items: start; }
.page-head :is(.lede, .notice) { max-inline-size: var(--w-prose); }

/* 11.2 iki kolon kural (05: "yil bitince"): ustte cizgi, tik ya da carpi */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); }
.cols-2 > div { display: grid; gap: var(--s-5); align-content: start; padding-block-start: var(--s-6); border-block-start: var(--hairline) solid var(--color-border-default); }
.plain { display: grid; gap: var(--s-3); }
.plain li { display: flex; align-items: start; gap: var(--s-3); }
.plain .ic { margin-block-start: var(--s-1); color: var(--color-text-secondary); }
/* yonetim ozeti Dikkat: satir cizgili, eylem uca; ikon uyari tonunda */
.attn { gap: 0; }
.attn li { flex-wrap: wrap; align-items: center; padding-block: var(--s-3); border-block-start: var(--hairline) solid var(--color-border-default); }
.attn li > span { flex: 1 1 var(--col-min); min-inline-size: 0; }
.attn .ic { margin-block-start: 0; color: var(--color-warn-text); }
.price-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-10); align-items: start; }
.price-row > .stack-lg { grid-column: 1 / span 6; }
.price-row > .lic-card { grid-column: 8 / span 5; position: static; }

/* 11.3 belge: solda yapiskan icindekiler, sagda okunur metin */
.doc { display: grid; grid-template-columns: var(--w-toc) minmax(0, 1fr); gap: var(--s-16); align-items: start; padding-block: var(--s-12) var(--s-24); }
.toc { position: sticky; inset-block-start: calc(var(--head-h) + var(--s-8)); display: grid; gap: var(--s-1); }
.toc .label { margin-block-end: var(--s-3); }
.toc a { display: flex; align-items: center; min-block-size: var(--s-8); padding-inline-start: var(--s-4); border-inline-start: var(--rule) solid var(--color-border-default); color: var(--color-text-secondary); font-size: var(--fs-sm); text-decoration: none; transition: color var(--dur-mikro) var(--ease-durum), border-color var(--dur-mikro) var(--ease-durum); }
.toc a:hover { border-inline-start-color: var(--color-border-hover); color: var(--color-text-primary); }
.prose { display: grid; gap: var(--s-4); max-inline-size: var(--w-prose); }
.prose h2 { margin-block-start: var(--s-10); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-head); line-height: var(--lh-snug); letter-spacing: var(--tr-head); scroll-margin-block-start: calc(var(--head-h) + var(--s-8)); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { margin-block-start: var(--s-4); font-size: var(--fs-md); font-weight: var(--fw-strong); }
.prose :is(ul, ol) { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: var(--s-6); }
.prose li::marker { color: var(--color-text-secondary); }
.prose :not(pre) > code { padding: 0 var(--s-1); border-radius: var(--s-1); background: var(--color-surface-sunken); }
.prose .notice { margin-block: var(--s-2); }

/* 11.4 kagit dokum (24): ekranda koyu salonda acik kagit; yazdirirken
   arac cubugu ve tanitim cercevesi gizlenir */
.rcpt { min-block-size: var(--app-h); padding: var(--s-8) var(--edge) var(--s-16); }
.rcpt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); max-inline-size: var(--w-sheet); margin: 0 auto var(--s-6); }
.rcpt__sheet { display: grid; gap: var(--s-8); max-inline-size: var(--w-sheet); margin-inline: auto; padding: var(--s-12); border-radius: var(--r-2); background: var(--color-surface-card); color: var(--color-text-primary); box-shadow: var(--shadow-frame); }
.rcpt__head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--s-6); }
.rcpt__head > div { display: grid; gap: var(--s-1); }
.rcpt__note { color: var(--color-text-secondary); font-size: var(--fs-sm); }
@media print {
  .rcpt__bar, .skip { display: none !important; }
  .rcpt { padding: 0; min-block-size: 0; }
  .rcpt__sheet { box-shadow: none; padding: 0; }
}

/* ---------- 13. hareket ----------
   Hareketsiz taban: her sey gorunur baslar. Hareket yalniz
   no-preference icinde eklenir (hareket-standardi 6.2).
   Ton: SINEMATIK ama onepage'den farkli imzalar: tek seferlik
   kademeli yukselis, sahne capraz gecisi, kart kalkisi + onizle
   hapi, view() ile 12 px kademeli giris. */
@keyframes yuksel { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes belir { from { opacity: 0; transform: translateY(var(--rise-sm)); } }
@keyframes sahne { from { opacity: 0; transform: translateY(var(--rise-sm)) scale(0.985); } }
@keyframes acil { from { opacity: 0; transform: translateY(calc(var(--s-2) * -1)); } }
@keyframes menu-gir { from { opacity: 0; transform: translateY(calc(var(--s-4) * -1)); } }

@media (prefers-reduced-motion: no-preference) {
  .gir { animation: yuksel var(--dur-sahne) var(--ease-giris) both; }
  .gir-1 { animation-delay: var(--stagger-1); }
  .gir-2 { animation-delay: var(--stagger-2); }
  .gir-3 { animation-delay: var(--stagger-3); }
  .stage__set.is-in .frame { animation: sahne var(--dur-genis) var(--ease-giris) both; }
  .stage__set.is-in .frame--b1 { animation-delay: var(--stagger-1); }
  .stage__set.is-in .frame--b2 { animation-delay: var(--stagger-2); }
  .lng__list:not([hidden]) { animation: acil var(--dur-mikro) var(--ease-giris) both; }
  .menu:not([hidden]) { animation: menu-gir var(--dur-temel) var(--ease-giris) both; }
  .qa[open] .qa__a { animation: acil var(--dur-temel) var(--ease-giris) both; }
  .disc[open] .disc__body { animation: acil var(--dur-temel) var(--ease-giris) both; }
  tr.row-ops:not([hidden]) .ops { animation: acil var(--dur-temel) var(--ease-giris) both; }
  .result .mark { animation: sahne var(--dur-genis) var(--ease-giris) both; }
  .shelf.is-yeni .demo:not([hidden]) { animation: belir var(--dur-temel) var(--ease-giris) both; }
  @supports (animation-timeline: view()) {
    .cards .demo, .feat__list li, .steps li {
      animation: belir linear both;
      animation-duration: auto;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  /* sus hareketi durur; durum (menu, acilir kisim) aninda okunur kalir */
  .app *, .app *::before, .app *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 14. dar cerceve (container sorgusu: cerceve genisligi) ---------- */
@container app (max-width: 68rem) {
  .hd__nav, .hd .lng { display: none; }
  .hd__menu { display: inline-grid; }
  .feat__head { grid-column: 1 / -1; position: static; }
  .feat__list { grid-column: 1 / -1; }
  .lic__steps { grid-column: 1 / span 7; }
  .lic-card { grid-column: 8 / span 5; padding: var(--s-8); }
  .ft__top { grid-template-columns: minmax(0, 1fr); }
  .price-row > .stack-lg { grid-column: 1 / span 7; }
  .doc { grid-template-columns: minmax(0, var(--col-min)) minmax(0, 1fr); gap: var(--s-10); }
  .shell__main { padding-inline: var(--s-8); }
}
@container app (max-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-10) var(--s-16); }
  .hero__txt, .stage { grid-column: 1 / -1; }
  .stage { justify-items: start; }
  .feat, .lic { grid-template-columns: minmax(0, 1fr); }
  .lic__steps, .lic-card { grid-column: 1 / -1; position: static; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__cols { grid-template-columns: minmax(0, 1fr); }
  .faq__col + .faq__col { border-block-start: 0; }
  .sec { padding-block: var(--s-16); }
  /* ic sayfa: tek sutun; icindekiler metnin ustunde sarilan liste */
  .price-row, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .price-row > :is(.stack-lg, .lic-card) { grid-column: 1 / -1; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding-block-start: var(--s-6); }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
  .toc .label { flex-basis: 100%; margin-block-end: var(--s-1); }
  .toc a { padding-inline-start: 0; border-inline-start: 0; min-block-size: var(--tap-sm); }
  .page-head { padding-block: var(--s-10) var(--s-8); }
  /* uyelik: yan panel kalkar, marka ust cubuga gecer */
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__side { display: none; }
  .auth__top .brand { display: inline-flex; }
  /* kabuk: yan menu sarilan satirlar (kaydirmali serit ogeleri ve odagi gizliyordu) */
  .shell, .app-yonetim .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .shell__side { padding: var(--s-1) var(--s-4); border-inline-end: 0; border-block-end: var(--hairline) solid var(--color-border-default); }
  .nav-side { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); position: static; }
  .nav-side li { flex: none; }
  .nav-side :is(a, button) { min-block-size: var(--tap-md); border-radius: 0; }
  .nav-side a[aria-current="page"], .app-yonetim .nav-side a[aria-current="page"] { background: transparent; }
  .nav-side a[aria-current="page"]::before { inset-inline: var(--s-3); inset-block: auto 0; inline-size: auto; block-size: var(--rule); }
  .nav-side__sep, .nav-side__h { display: none; }
  .auth__back { display: none; }
  .shell__main { padding: var(--s-8) var(--edge) var(--s-12); }
}
@container app (max-width: 40rem) {
  .hd, .feat__head, .lic-card { --head-h: var(--head-h-sm); }
  .hd__in { gap: var(--s-3); }
  .hd .hide-sm { display: none; }
  .toolbar .search { inline-size: 100%; }
  .seg { inline-size: 100%; }
  /* telefonda raf: tek kart + komsunun kenari, yatay kaydirma */
  .cards {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--edge) * -1);
    padding: var(--s-1) var(--edge) var(--s-4);
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
  }
  .demo { flex: none; inline-size: var(--rail-card); scroll-snap-align: start; }
  .feat__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .cat-end { padding: var(--s-6); }
  .cat-end .btn { inline-size: 100%; }
  .lic-card { padding: var(--s-6); }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__cta .btn { flex: 1 1 auto; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
  .facts li + li::before { content: none; }
  .stage__set .frame--b2 { display: none; }
  .stage__set .frame--front { inline-size: 86%; }
  .stage__set .frame--b1 { inline-size: 70%; inset-inline-end: 0; inset-block-start: 4%; }
  /* form ve kart: dar dolgu, tek kolon */
  .card, .lcard { padding: var(--s-6); }
  .lcard__facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .quick { grid-template-columns: minmax(0, 1fr); }
  .quick li:nth-child(even) { border-inline-start: 0; }
  .quick li + li { border-block-start: var(--hairline) solid var(--color-border-default); }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  /* sonuc isareti basligin ustune: tek uzun kelime ("baglayamadik") isaretin yaninda sigmaz */
  .result { flex-direction: column; align-items: start; }
  .ck__main { padding-block: var(--s-8) var(--s-12); }
  /* kasa notu ikinci satira iner, dil dugmesi cercevede kalir */
  .ck__bar .wrap { flex-wrap: wrap; padding-block: var(--s-3); }
  .ck__safe { order: 1; flex-basis: 100%; margin-inline-start: 0; }
  /* anahtar: iki grup bir satir, Kopyala altta */
  .key { flex-wrap: wrap; }
  .key code { flex-basis: 100%; grid-template-columns: repeat(2, max-content); }
  /* sarilan fiyat blogu basa hizali (uca hizali havada kaliyordu) */
  .sum__price { justify-items: start; }
  .ck__bar .lng { margin-inline-start: auto; }
  .rcpt__sheet { padding: var(--s-6); }
  .ops { padding: var(--s-4); }
  .ops__sep { display: none; }
  .form-act .btn { flex: 1 1 auto; }
  /* kabuk: yardim baglantilari ve ad gizlenir, bas harf kalir */
  .shell__top { padding-inline: var(--s-4); gap: var(--s-3); }
  .who__name, .shell__ctx, .shell__end .meta { display: none; }
  /* panel ust cubugu: avatar kalkar, Cikis yalniz ikon (ad aria-label'da) */
  .shell__end .who, .shell__end .btn__t { display: none; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div:nth-child(odd) { border-inline-start: 0; }
  .strip > div:nth-child(n + 3) { border-block-start: var(--hairline) solid var(--color-border-default); }
  /* musteri tablosu: satir karta doner, etiket hucrenin ustune gelir */
  .tbl-stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); }
  .tbl-stack, .tbl-stack tbody { display: block; }
  .tbl-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); border-block-end: var(--hairline) solid var(--color-border-default); }
  .tbl-stack tr.row-ops { padding-block-start: 0; }
  .tbl-stack tr:has(+ tr.row-ops:not([hidden])) { border-block-end-color: transparent; }
  .tbl-stack td, .tbl-stack tr.row-ops > td { display: block; padding: 0; border: 0; }
  .tbl-stack td:first-child, .tbl-stack tr.row-ops > td { grid-column: 1 / -1; }
  .tbl-stack td[data-k]::before { content: attr(data-k); display: block; color: var(--color-text-secondary); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label); text-transform: uppercase; }
  .tbl-stack .end { text-align: start; }
  .tbl-stack .tbl__act { justify-content: flex-start; }
}
@container app (max-width: 26rem) {
  .hd__act .btn__price { display: none; }
  .hd__act { gap: var(--s-1); }
  .qa summary { font-size: var(--fs-md); }
}

/* Dil secimi, oneksiz yuzey kipi (P4): select + gonderme dugmesi. Tanitim
   sayfasindaki `.lng` disclosure'in yerini alir, cunku uyelik/kasa/panel
   yollari dil oneki almaz ve secim bir POST'tur (K-14). JS gerekmez. */
.lngf { display: flex; align-items: center; gap: var(--s-2); }
.lngf .select select { min-block-size: var(--tap-sm); padding-block: 0; font-size: var(--fs-sm); }