/*
  Purpose / Amaç: DESIGN_SYSTEM belirteçleri ve M1 bileşenleri.
  Kural: ekranda sabit renk/boşluk yazılmaz — yalnızca bu belirteçler (§15 UIStandard).
  Tema: açık varsayılan; koyu değerler SEÇİLMİŞ karşılıklardır, otomatik ters çevirme değil.
*/

:root {
  /* Yüzey ve mürekkep — DESIGN_SYSTEM §2.1 */
  --plane: #f9f9f7;
  --surface-1: #fcfcfb;
  --ink-primary: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #898781;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, .10);
  /* Durum — §2.2 (sabit, temalanmaz) */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  /* Boşluk/köşe — §4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane: #0d0d0d;
    --surface-1: #1a1a19;
    --ink-primary: #ffffff;
    --ink-secondary: #c3c2b7;
    --hairline: #2c2c2a;
    --border: rgba(255, 255, 255, .10);
    color-scheme: dark;
  }
}

/* --- Temel ------------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 16px; } /* §12 erişilebilirlik: gövde 16px altına inmez */
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--s4); }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--s3); }
h3 { font-size: 1rem; font-weight: 600; margin: var(--s5) 0 var(--s2); }
.muted { color: var(--ink-secondary); font-size: .875rem; }
code { font-size: .875rem; }

/* Odak halkası her zaman görünür (§12) — outline:none YASAK */
:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* --- Üst çubuk ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}
.brand { font-weight: 650; color: var(--ink-primary); text-decoration: none; }
.langs a { color: var(--ink-secondary); text-decoration: none; padding: var(--s1) var(--s2); }
.langs a:hover { color: var(--ink-primary); }
.langs a[aria-current="true"] { color: var(--ink-primary); font-weight: 600; }
.topbar-end { display: flex; align-items: center; gap: var(--s3); }

/* Müşteri markası — ÜRÜNÜN YANINDA, yerine değil (D-56).
   Ürün markası 650 ağırlıkta ve tam renkte; müşteri markası ikincil renkte, daha
   küçük ve logosu ürün markasının görsel ağırlığını AŞAMAZ (yükseklik sınırı).
   Dar ekranda müşteri markası gizlenir — ürün kimliği hiçbir kırılımda kaybolmaz. */
.brand-sep { color: var(--ink-muted); }
.brand-customer {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--ink-secondary); font-size: .875rem;
  max-width: 22ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.brand-logo { height: 20px; width: auto; max-width: 80px; object-fit: contain; }
@media (max-width: 599px) {
  .brand-sep, .brand-customer { display: none; }
}

/* --- Kabuk ve gezinme — DESIGN_SYSTEM §5 Layout.patterns ----------------
   expanded (>1024): kalıcı YAN gezinme + içerik
   medium (600–1024): üstte yatay kayan şerit
   compact (<600): ALT çubuk (birincil eylem baş parmak erişiminde)
   Her kırılımda `minmax(0, 1fr)`: içerik kolonu KÜÇÜLEBİLİR olmalı, yoksa geniş tablo
   sayfa gövdesini yatay kaydırır (§5 "sayfa gövdesi yatay kaymaz"). */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.sidenav { display: flex; gap: var(--s1); }
.sidenav a {
  color: var(--ink-secondary); text-decoration: none;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  min-height: 44px; display: flex; align-items: center; white-space: nowrap;
}
.sidenav a:hover { background: var(--plane); color: var(--ink-primary); }
.sidenav a[aria-current="page"] { background: var(--plane); color: var(--ink-primary); font-weight: 600; }

@media (min-width: 1025px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); }
  .sidenav {
    flex-direction: column; align-self: start; position: sticky; top: 0;
    padding: var(--s4) var(--s3); border-inline-end: 1px solid var(--hairline);
    max-height: 100vh; overflow-y: auto;
  }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .sidenav {
    overflow-x: auto; padding: var(--s2) var(--s4);
    border-bottom: 1px solid var(--hairline);
  }
}
@media (max-width: 599px) {
  /* Alt çubuk: parmak erişimi. Sayfa altına çubuk kadar boşluk bırakılır. */
  .sidenav {
    position: fixed; inset: auto 0 0 0; z-index: 10;
    overflow-x: auto; padding: var(--s2);
    background: var(--surface-1); border-top: 1px solid var(--hairline);
  }
  .page { padding-bottom: calc(44px + var(--s6)); }
}

/* --- Sayfa ve kart ------------------------------------------------------ */
/* `width: 100%` ŞART: `margin: 0 auto` bir ızgara öğesinde `stretch`i iptal eder ve kutu
   `fit-content`e döner — o da içeriğin min-content'ine kilitlenip kabından TAŞAR
   (mevzuat ekranı 390px'te 801px'e şişiyordu, §5 yasağı). Kesin genişlik + max-width
   ortalamayı bozmadan bunu keser. */
.page { width: 100%; padding: var(--s5); max-width: 1200px; margin: 0 auto; min-width: 0; }
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
  /* §5 MUST: geniş tablo KENDİ KABINDA yatay kayar — sayfa gövdesi kaymaz */
  overflow-x: auto;
}
.narrow { max-width: 420px; margin: var(--s7) auto 0; }
.card-sub { border-top: 1px solid var(--hairline); margin-top: var(--s4); padding-top: var(--s3); }
.card-sub summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }

/* --- Liste+detay (geniş ekran) — DESIGN_SYSTEM §5 ----------------------- */
/* minmax(0, …): ızgara kolonu içeriğin min-content'inin ALTINA inebilmeli. Düz `1fr`
   yazılırsa geniş içerik (mevzuat kural tablosu) kolonu şişirir ve SAYFA GÖVDESİ yatay
   kayar — §5 yasağı. Panellerin kendi `overflow-x: auto`'su ancak kolon küçülebilirse iş görür. */
.split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--s5); }
.pane-list, .pane-detail {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  max-width: 900px;
}
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr); }  /* medium/compact: tek kolon */
}

/* --- Ağaç ---------------------------------------------------------------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-inline-start: var(--s4); border-inline-start: 1px solid var(--hairline); }
.tree a {
  display: block; padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-primary); text-decoration: none;
  min-height: 44px; display: flex; align-items: center; gap: var(--s2); /* §15 hedef */
}
.tree a:hover { background: var(--plane); }
/* Ölçek: blok altındaki bölümler KAPALI açılır (D-54). Özet satırı da 44px hedef (§15). */
.tree-group > summary {
  cursor: pointer; list-style: none;
  padding: var(--s2) var(--s3); margin-inline-start: var(--s4);
  min-height: 44px; display: flex; align-items: center;
  color: var(--ink-secondary); font-size: .875rem; border-radius: var(--r-sm);
}
.tree-group > summary:hover { background: var(--plane); color: var(--ink-primary); }
.tree-group > summary::before { content: "▸"; margin-inline-end: var(--s2); }
.tree-group[open] > summary::before { content: "▾"; }
.tree a[aria-current="true"] { background: var(--plane); font-weight: 600; }

/* --- Form ---------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack label { display: flex; flex-direction: column; gap: var(--s1); font-size: .875rem; font-weight: 500; }
/* DIKKAT: `.stack label` (0,1,1) `.row`'dan (0,1,0) daha ozgul; ozel eziciyi
   KALDIRMA, yoksa onay kutusu ve metni ALT ALTA ve ortalanmis dizilir
   (giris ekraninda "Beni hatirla", oylamada evet/hayir/cekimser). */
.stack label.row { flex-direction: row; align-items: center; min-height: 44px; }
/* flex-wrap YOKSA satir min-content'in altina inemez ve sayfa YATAY KAYAR (§5 yasak):
   uzun etiketli dugme + metin kutusu dar ekrana sigmiyordu. */
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row > input, .row > select { min-width: 0; }
input, select {
  font: inherit; color: var(--ink-primary);
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  min-height: 44px;  /* §15 dokunma hedefi */
}
/* Onay kutusu ve radyo METIN KUTUSU degildir: kutu gorunumunu almaz.
   §15 dokunma hedefini saran ETIKET tasir (yukaridaki .stack label.row). */
input[type="checkbox"], input[type="radio"] {
  min-height: 0; padding: 0; border: none; background: none;
  inline-size: 1.125rem; block-size: 1.125rem;
  flex: none; accent-color: var(--ink-primary);
}
input:focus, select:focus { border-color: var(--ink-secondary); }

/* --- Düğme — ekranda TEK birincil eylem (DS1) ---------------------------- */
.btn {
  font: inherit; font-weight: 600;
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s4);
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s cubic-bezier(.2,0,0,1);
}
.btn.primary { background: var(--ink-primary); color: var(--surface-1); }
.btn.ghost { background: transparent; color: var(--ink-primary); border-color: var(--hairline); }
.btn.ghost:hover { background: var(--plane); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* --- Tablo — tutarlar sağa, tabular (DESIGN_SYSTEM §7) ------------------- */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
  text-align: start; color: var(--ink-muted); font-weight: 500;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline);
}
.table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline); }
.num { font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.facts dt { color: var(--ink-muted); font-size: .875rem; }
.facts dd { margin: 0; }

/* --- Mali pano: kahraman rakam + istatistik satırı (DESIGN_SYSTEM §7/§10) - */
.hero-card { margin-bottom: var(--s4); }
.hero-label { color: var(--ink-secondary); font-size: .875rem; font-weight: 500; }
.hero-figure { font-size: 2rem; font-weight: 650; line-height: 1.25; margin: var(--s1) 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--s4); margin-bottom: var(--s5); }
.stat-figure { font-size: 1.25rem; font-weight: 600; }

/* Dayanak satırı (RuleBasisLine — D-18): mevzuattan türeyen rakamın kaynağı */
.basis-line { color: var(--ink-secondary); font-size: .875rem; margin-top: var(--s1); }

/* Durum rozetleri — renk tek başına anlam taşımaz; ikon+metin eşlik eder (§2.2) */
.badge.b-good { border-color: var(--status-good); color: var(--status-good); }
.badge.b-warning { border-color: var(--status-warning); }
.badge.b-serious { border-color: var(--status-serious); color: var(--status-serious); }

.notice {
  background: var(--surface-1);
  border: 1px solid var(--status-good);
  border-inline-start-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}

/* --- Rozet ve uyarı ------------------------------------------------------ */
.badge {
  display: inline-block; font-size: .75rem; font-weight: 500;
  color: var(--ink-secondary);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0 var(--s2); vertical-align: middle;
}
.alert {
  background: var(--surface-1);
  border: 1px solid var(--status-serious);
  border-inline-start-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.invite-link {
  display: block; word-break: break-all;
  background: var(--plane); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s3);
}

/* --- Yazdırma (DESIGN_SYSTEM §11) ---------------------------------------- */
/* Yazdırılan belgede marka — D-56. Üst bilgi MÜŞTERİ, alt satır ÜRÜN (kaldırılamaz). */
.print-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.print-brand-logo { height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.print-brand-name { font-weight: 600; font-size: 1.125rem; }
.print-product-line {
  margin-top: var(--s6); padding-top: var(--s2);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: .75rem;
}

@media print {
  /* .no-print: şablonların güvendiği kaçış — tanımsız kalırsa ekran öğesi kâğıda basılır */
  .topbar, .sidenav, .btn, form, details, .langs, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .pane-list, .pane-detail { border: none; padding: 0; }
}