/* ============================================================
   shared.css - SCP LOJISTIK urun tasarim sistemi (mockup seti)
   ============================================================
   Stil: Swiss + Flat (katalog birincil onerisi, kullanici secimi).
   Temalar: :root (acik, varsayilan) + html[data-theme='dark'].
   White-label: html[data-tenant='kaya'] yalnizca --brand* token'larini
   ezer; durum renkleri, yikici eylem, tipografi ve olculer platform
   sabitidir (08-ux-arayuz-standardi.md 3i, Cc-5).
   Kaynak paletler: tokens/colors.json (make_palette "#1E3A8A", acik 7/7,
   koyu 7/7) ve tokens/colors.kaya.json (make_palette "#C2410C", 7/7, 7/7).
   Birincil eylem rengi girdi rengidir (#1E3A8A, beyaz metin 10.36:1);
   rampa yumusak yuzeyler icin kullanilir. Olcumler: 00-mimari.md 4.
   Ekran kodunda var() disina cikma; ham hex, px, ms yasak.
   ============================================================ */

:root {
  /* ---- Okuma genisligi (govde paragrafi 60-75ch; taste_audit) ---- */
  --measure: 75ch;

  /* ---- Yuzey ---- */
  --bg-page:   #F4F6F9;
  --bg-card:   #FFFFFF;
  --bg-subtle: #EEF0F4;
  --bg-inset:  #E9EBEF;
  --bg-hover:  #EEF0F4;

  /* ---- Kenarlik ---- */
  --border:        #D7DAE0;
  --border-strong: #808693;

  /* ---- Metin ---- */
  --text:  #2A2E35;
  --muted: #5F636C;
  --faint: #6A6E77;

  /* ---- Marka (tenant ezer) ---- */
  --brand:        #1E3A8A;
  --brand-hover:  #243F92;
  --brand-active: #152343;
  --brand-soft:   #E3EBFE;
  --brand-tint:   #F2F6FE;
  --brand-text:   #1E3A8A;
  --on-brand:     #FFFFFF;
  --brand-mark:   #1E3A8A;

  /* ---- Secim ve durum vurgusu (platform sabiti; tenant ezmez).
     Durum asla marka renginden turetilmez: turuncu/kirmizi markali bir
     tenant'ta secili oge hata durumuyla karismasin (08 Ç-5 kritigi). ---- */
  --sel-soft:   #E3EBFE;
  --sel-tint:   #F2F6FE;
  --sel-text:   #1E3A8A;
  --sel-line:   #1E3A8A;

  /* ---- Grafik serileri (platform sabiti; tenant markasıyla DEĞİŞMEZ, 09 §3.4) ---- */
  --chart-1: #1E3A8A;
  --chart-2: #0F766E;
  --chart-3: #A16207;
  --chart-4: #6B7280;
  --chart-seq-1: #E3EBFE;
  --chart-seq-2: #AAC4FD;
  --chart-seq-3: #6A8FE5;
  --chart-seq-4: #405FAC;
  --chart-seq-5: #1E3A8A;
  /* Renk ornegi (kullanicinin girdigi marka rengi; temayla DEGISMEZ, koyuda ezilmez; 721) */
  --swatch-1: #6A8FE5;
  --swatch-2: #405FAC;
  --swatch-3: #C2410C;
  --swatch-4: #0F766E;

  /* ---- Yikici (platform sabiti) ---- */
  --danger:        #BD413F;
  --danger-hover:  #A83836;
  --danger-active: #852A29;
  --on-danger:     #FFFFFF;

  /* ---- Durum (platform sabiti; ikon + kelime + renk) ---- */
  --ok-text:      #1F6B45;
  --ok-soft:      #E4F2EA;
  --warn-text:    #7A4D00;
  --warn-soft:    #FBEFDC;
  --danger-text:  #A83836;
  --danger-soft:  #FEE4E1;
  --info-text:    #0B5E7A;
  --info-soft:    #E1F1F7;
  --neutral-text: #4B4E55;
  --neutral-soft: #E9EBEF;

  /* ---- Odak halkasi (WCAG 2.4.7 / 2.4.13, 3:1) ---- */
  --ring-color: #1E3A8A;
  --ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--ring-color);

  /* ---- Golge: duz dunya; yalnizca yuzen katmanlar ---- */
  --shadow-pop:   0 8px 24px -8px rgba(21, 35, 67, 0.28);  /* kenarsiz: pencere, toast */
  --shadow-menu:  0 4px 10px -4px rgba(21, 35, 67, 0.22);  /* kenarli: liste kutusu, acilir panel */
  --shadow-stage: 0 30px 60px -24px rgba(5, 8, 16, 0.7);
  --scrim:        rgba(21, 28, 41, 0.5);

  /* ---- Tipografi ---- */
  --font-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* ---- Bosluk ritmi (4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Olcu ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --h-chip: 36px;
  --h-control: 44px;
  --h-row: 52px;
  --h-topbar: 60px;
  --w-sidebar: 232px;
  --w-panel: 360px;
  --w-fact: 150px;
  --w-leg: 170px;
  --w-doc: 190px;
  --w-search: 520px;
  --w-toast: 560px;
  --w-dialog: 520px;
  --w-pop: 340px;
  --w-stat: 140px;
  --h-shell: 860px;
  --w-a4: 794px;     /* A4 genisligi: 210 mm @ 96 dpi (belge onizleme) */
  --w-auth: 420px;   /* giris karti */
  --w-field: 240px;  /* form izgarasi en dar sutun */
  --h-map: 380px;    /* sematik harita */
  --h-cal: 104px;    /* takvim gunu en az yukseklik */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --line-2: 2px;
  --line-3: 3px;

  /* ---- Mobil (sürücü; 08 M-3, M-10, E-2, E-3) ---- */
  --m-target: 48px;
  --m-cta: 56px;
  --m-topbar: 56px;
  --m-nav: 64px;

  /* ---- Hareket ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-spin: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Kagit (A4 belge onizleme): temadan bagimsiz beyaz sayfa.
     Koyu temada da PDF gibi beyaz kalir; .doc-page yuzey ve metin
     token'larini bunlara yeniden baglar. --brand-print tenant ezer. ---- */
  --paper:             #FFFFFF;
  --paper-subtle:      #F4F6F9;
  --paper-line:        #D7DAE0;
  --paper-line-strong: #808693;
  --paper-text:        #2A2E35;
  --paper-muted:       #5F636C;
  --brand-print:       #1E3A8A;

  /* ---- Sematik harita (SVG altlik; olculdu: etiket/kara 6.93, su 5.75) ---- */
  --map-land:        #F2F1EC;
  --map-water:       #CADFEA;
  --map-park:        #DFEAD8;
  --map-block:       #E4E2DA;
  --map-road:        #FFFFFF;
  --map-road-edge:   #CDD0D6;
  --map-major:       #F8E2AE;
  --map-major-edge:  #D9B868;
  --map-label:       #4E525A;
  --map-water-label: #275670;

  /* ---- Tanitim katmani baglama (SHOWCASE.md 3) ---- */
  --sc-stage:        #13161C;
  --sc-stage-2:      #1C2028;
  --sc-stage-line:   #2C323D;
  --sc-stage-text:   #FFFFFF;
  --sc-stage-muted:  #B4BAC6;
  --sc-stage-faint:  #949AA6;
  --sc-accent:       #89A9F3;
  --sc-bezel:        #05070A;
  --sc-device-bg:    var(--bg-page);
  --sc-device-text:  var(--text);
  --sc-font-display: var(--font-ui);
  --sc-font-ui:      var(--font-ui);
  --sc-shadow:       var(--shadow-stage);
}

/* ---- Tenant: Kaya Hafriyat (yalnizca marka katmani) ---- */
html[data-tenant='kaya'] {
  --brand:        #C2410C;
  --brand-hover:  #AB3705;
  --brand-active: #882902;
  --brand-soft:   #FEE5DD;
  --brand-tint:   #FFF3EF;
  --brand-text:   #AB3705;
  --on-brand:     #FFFFFF;
  --brand-mark:   #C2410C;
  --brand-print:  #C2410C;
  --sc-accent:    #F68865;
}

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme='dark'] {
  --bg-page:   #1B1D22;
  --bg-card:   #24272D;
  --bg-subtle: #2D3037;
  --bg-inset:  #33363D;
  --bg-hover:  #2D3037;

  --border:        #3C4048;
  --border-strong: #7A808C;

  --text:  #EDF2FC;
  --muted: #B9BEC7;
  --faint: #A3A8B2;

  --brand:        #7BA1FB;
  --brand-hover:  #96B6FD;
  --brand-active: #AAC4FD;
  --brand-soft:   #23345E;
  --brand-tint:   #1E2840;
  --brand-text:   #A9C2FC;
  --on-brand:     #0B0B0C;
  --brand-mark:   #7BA1FB;

  --sel-soft:   #23345E;
  --sel-tint:   #1E2840;
  --sel-text:   #A9C2FC;
  --sel-line:   #7BA1FB;

  --chart-1: #7BA1FB;
  --chart-2: #2DD4BF;
  --chart-3: #FACC15;
  --chart-4: #9CA3AF;
  --chart-seq-1: #23345E;
  --chart-seq-2: #314A88;
  --chart-seq-3: #5376CC;
  --chart-seq-4: #89A9F3;
  --chart-seq-5: #CADAFD;

  --danger:        #E26560;
  --danger-hover:  #F28880;
  --danger-active: #FFACA4;
  --on-danger:     #0B0B0C;

  --ok-text:      #8BD9AE;
  --ok-soft:      #1C3328;
  --warn-text:    #F5C774;
  --warn-soft:    #3A2E14;
  --danger-text:  #FFA39B;
  --danger-soft:  #43201E;
  --info-text:    #86CDEA;
  --info-soft:    #163240;
  --neutral-text: #CDD1D8;
  --neutral-soft: #33363D;

  --ring-color: #96B6FD;
  --shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 4px 10px -4px rgba(0, 0, 0, 0.55);
  --scrim:      rgba(5, 7, 10, 0.66);

  --sc-stage:   #0E1014;
  --sc-stage-2: #171A20;

  /* Harita koyu (olculdu: etiket/kara 9.38, su 7.76); kagit token'lari ezilmez */
  --map-land:        #202328;
  --map-water:       #172733;
  --map-park:        #1E2A22;
  --map-block:       #2A2D33;
  --map-road:        #3A3E46;
  --map-road-edge:   #16181C;
  --map-major:       #5B4E30;
  --map-major-edge:  #2A2416;
  --map-label:       #C3C8D1;
  --map-water-label: #93BFD6;
}
html[data-theme='dark'][data-tenant='kaya'] {
  --brand:        #FD774C;
  --brand-hover:  #FE9A79;
  --brand-active: #FEAE94;
  --brand-soft:   #4A1F10;
  --brand-tint:   #34180D;
  --brand-text:   #FEAE94;
  --on-brand:     #0B0B0C;
  --brand-mark:   #FD774C;
}

/* ============================================================
   TEMEL
   ============================================================ */
html { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

.sc-index { font-family: var(--font-ui); }
.shell, .m-app, .auth {
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.shell *, .m-app *, .auth * { box-sizing: border-box; }
.shell ::selection, .m-app ::selection, .auth ::selection { background: var(--sel-soft); color: var(--text); }

.icon { inline-size: var(--icon-md); block-size: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon-lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.icon-xl { inline-size: var(--icon-xl); block-size: var(--icon-xl); }

.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* data-state ile degisen oge: hidden her zaman gizler (sinifin display'i ezmez; app.js setState) */
/* hidden her zaman gizler: display tanimli bilesenler (.field, .stack, .quick, .form-grid...) dahil */
[hidden] { display: none !important; }

.shell a, .m-app a, .auth a { color: var(--brand-text); text-underline-offset: 0.2em; }
.shell a:hover, .m-app a:hover, .auth a:hover { text-decoration-thickness: var(--line-2); }

.shell :focus-visible, .m-app :focus-visible, .auth :focus-visible, .sc-theme:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ============================================================
   WEB KABUGU
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  min-block-size: var(--h-shell);
  background: var(--bg-page);
  position: relative;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-card);
  border-inline-end: 1px solid var(--border);
}
.brandmark { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
.brandmark-logo {
  display: grid; place-items: center;
  inline-size: var(--sp-10); block-size: var(--sp-10);
  border-radius: var(--r-md);
  background: var(--brand-mark);
  color: var(--on-brand);
  font-weight: 700; font-size: var(--fs-16);
}
.brandmark-name { font-weight: 700; font-size: var(--fs-15); line-height: var(--lh-tight); }
.brandmark-sub { font-size: var(--fs-12); color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Menu grup basligi: rol menusu modullere ayrilir (G-1: ust duzeyde en cok 7 oge) */
.nav-group { margin-block-start: var(--sp-3); padding: 0 var(--sp-3) var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.nav-group:first-child { margin-block-start: 0; }
.nav-label { padding: 0 var(--sp-3); margin-block-end: var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--h-control);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.shell a.nav-item { color: var(--text); text-decoration: none; }
.nav-item .icon { color: var(--muted); }
/* Üst düzey ikonlar (ana sayfa, departman grupları) logo rengiyle; grup içindekiler gri (PO 16.10). */
.nav > .nav-item .icon, .nav-grup > summary .icon { color: var(--brand-mark); }
.nav-item:hover { background: var(--bg-hover); }
.nav-item:active { background: var(--bg-inset); }
.nav-item[aria-current='page'] { background: var(--sel-soft); font-weight: 600; }
.shell a.nav-item[aria-current='page'], .nav-item[aria-current='page'] .icon { color: var(--sel-text); }
.nav-item .count { margin-inline-start: auto; }
/* Panel menüsü departman grubu (PO 16.10): JS'siz <details>; özet tıklanınca açılır/kapanır. */
.nav-grup > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--h-control);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-grup > summary::-webkit-details-marker { display: none; }
.nav-grup > summary:hover { background: var(--bg-hover); }
.nav-grup > summary .nav-grup-ok { color: var(--muted); }
.nav-grup-ad { flex: 1; min-inline-size: 0; }
.nav-grup-ok { transition: transform var(--dur-fast) var(--ease-out); }
.nav-grup[open] > summary .nav-grup-ok { transform: rotate(180deg); }
.nav-grup[open] > summary .count { display: none; }
.nav-grup-ogeler { display: flex; flex-direction: column; gap: var(--sp-1); padding-block-end: var(--sp-2); padding-inline-start: var(--sp-4); }
.menu-paneli .nav-grup > summary { min-block-size: var(--sp-12); }

.side-foot { margin-block-start: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-block-start: 1px solid var(--border); }
.avatar {
  display: grid; place-items: center; flex: none;
  inline-size: var(--sp-10); block-size: var(--sp-10);
  border-radius: var(--r-full);
  background: var(--bg-inset); color: var(--text);
  font-weight: 600; font-size: var(--fs-14);
}
.who-name { font-weight: 600; line-height: var(--lh-tight); }
.who-role { font-size: var(--fs-13); color: var(--muted); }

.main { display: flex; flex-direction: column; min-inline-size: 0; }
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--h-topbar);
  padding: var(--sp-2) var(--sp-6);
  background: var(--bg-card);
  border-block-end: 1px solid var(--border);
}
.topbar .menu-btn { display: none; }
/* Dar ekranda ana menü (panel kabuğu): JS'siz <details>, kenar menü gizlenince görünür (900 px
   kuralı). Panel üst çubuğun altında tam genişlik açılır; dokunma hedefleri ≥ 48 px (UX M-3). */
.menu-acici { display: none; }
.menu-acici > summary { list-style: none; min-block-size: var(--sp-12); min-inline-size: var(--sp-12); }
.menu-acici > summary::-webkit-details-marker { display: none; }
.menu-acici[open] > summary { background: var(--sel-soft); border-color: var(--sel-soft); color: var(--sel-text); }
.menu-paneli {
  position: absolute; z-index: 30;
  inset-inline: 0; inset-block-start: 100%;
  max-block-size: calc(100dvh - var(--h-topbar)); overflow-y: auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: var(--bg-card);
  border-block-end: 1px solid var(--border-strong);
  box-shadow: var(--shadow-menu);
}
.menu-paneli .nav-item { min-block-size: var(--sp-12); }
.search {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1; min-inline-size: 0; max-inline-size: var(--w-search);
  min-block-size: var(--h-control);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--muted);
}
.search input {
  flex: 1; min-inline-size: 0; inline-size: 100%; border: 0; background: transparent;
  font: inherit; color: var(--text);
  min-block-size: var(--h-control);
}
.search input:focus-visible { box-shadow: none; }
.search:focus-within { box-shadow: var(--ring); border-color: var(--ring-color); }
.search input::placeholder { color: var(--muted); }
.kbd {
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-2);
  min-block-size: var(--sp-6);
  border: 1px solid var(--border);
  border-block-end-width: var(--line-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-12); font-weight: 600; color: var(--muted);
  background: var(--bg-subtle);
  white-space: nowrap;
}
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-suzgec { display: flex; align-items: center; gap: var(--sp-2); min-inline-size: 0; }
.topbar-suzgec .seg { flex-wrap: wrap; }

.content { padding: var(--sp-6) var(--sp-7) var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.page-head h1 { margin: 0; font-size: var(--fs-28); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
.page-sub { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-15); }
/* align-items: center — eylem satırında uzun bir öğe (ör. etiket + segment + ipucu) olunca düğmeler
   onun yüksekliğine uzamasın (varsayılan stretch). */
.page-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.section-head h2 { margin: 0; font-size: var(--fs-18); font-weight: 600; line-height: var(--lh-tight); }
.section-head .aside { margin-inline-start: auto; }

/* ============================================================
   DUGME (8 durum: default, hover, focus, active, disabled,
   loading, error-yok, selected-yok)
   Birincil dugme SCP'de devre disi gosterilmez (08 Cc-4).
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--h-control);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit; font-weight: 600; font-size: var(--fs-14); line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.shell a.btn, .m-app a.btn, .auth a.btn { text-decoration: none; }
.btn .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.shell a.btn-primary, .m-app a.btn-primary, .auth a.btn-primary { color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-active); }
.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border-strong); }
.shell a.btn-secondary, .m-app a.btn-secondary, .auth a.btn-secondary { color: var(--text); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-secondary:active { background: var(--bg-inset); }
.btn-ghost { background: transparent; color: var(--text); }
.shell a.btn-ghost, .auth a.btn-ghost { color: var(--text); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost:active { background: var(--bg-inset); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-danger:active { background: var(--danger-active); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { min-block-size: var(--sp-10); padding: 0 var(--sp-3); }
.btn-block { display: flex; inline-size: 100%; }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  inline-size: var(--icon-sm); block-size: var(--icon-sm);
  border: var(--line-2) solid var(--on-brand); border-inline-end-color: transparent;
  border-radius: var(--r-full);
  animation: spin var(--dur-spin) linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--text); border-inline-end-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center; position: relative;
  inline-size: var(--h-control); block-size: var(--h-control);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { background: var(--bg-inset); }
.icon-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.icon-btn[aria-pressed='true'], .icon-btn[aria-expanded='true'] { background: var(--sel-soft); color: var(--sel-text); }
.dot-badge {
  position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1);
  min-inline-size: var(--sp-5); block-size: var(--sp-5);
  padding: 0 var(--sp-1);
  border-radius: var(--r-full);
  background: var(--danger); color: var(--on-danger);
  font-size: var(--fs-12); font-weight: 700; line-height: var(--sp-5); text-align: center;
}

.link-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--sp-8);
  padding: 0 var(--sp-1);
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--brand-text);
  font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.link-btn:hover { text-decoration-thickness: var(--line-2); }
.link-btn:active { color: var(--text); }
.link-btn .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* ============================================================
   DURUM ROZETI: ikon + kelime + renk (G-9)
   ============================================================ */
.st {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--sp-6);
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-13); font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}
.st .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.st-ok      { color: var(--ok-text);      background: var(--ok-soft); }
/* SPEC-fiyatsiz-kuyrugu-06: Kapandı, Teslim edildi'den ayırt edilen koyu olumlu ton. */
.st-ok-strong { color: var(--ok-soft); background: var(--ok-text); }
.st-warn    { color: var(--warn-text);    background: var(--warn-soft); }
.st-danger  { color: var(--danger-text);  background: var(--danger-soft); }
.st-info    { color: var(--info-text);    background: var(--info-soft); }
.st-neutral { color: var(--neutral-text); background: var(--neutral-soft); }
.st-lg { min-block-size: var(--sp-8); padding: 0 var(--sp-3); font-size: var(--fs-15); }
.st-lg .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }

.count {
  display: inline-grid; place-items: center;
  min-inline-size: var(--sp-6); block-size: var(--sp-6);
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--bg-inset); color: var(--text);
  font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums;
}
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--sp-6);
  font-size: var(--fs-13); color: var(--muted); white-space: nowrap;
}
.tag .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* Eklenti (lisansli modul) ve Mevzuat rozeti: notr, durum degil; ikon + kelime.
   Eklenti kesikli cerceve (takilabilir), Mevzuat dolgulu (yasal zorunluluk). */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--sp-6);
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--neutral-text);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap; vertical-align: middle;
}
.badge .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.badge-addon { border-style: dashed; border-color: var(--border-strong); background: var(--bg-card); }
.badge-law { background: var(--neutral-soft); }
.nav-item .badge { margin-inline-start: auto; }

/* Maskeli kisisel veri (TCKN, telefon, IBAN): son haneler gorunur; "Goster" yalnizca
   yetkiliye cizilir, app.js [data-reveal] acar, denetim kaydi toast'u verir, 30 sn sonra kapatir. */
.mask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.mask-val { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mask.is-revealed .mask-val { padding: 0 var(--sp-1); border-radius: var(--r-xs); background: var(--warn-soft); color: var(--warn-text); }
.mask .link-btn { min-block-size: var(--sp-6); font-size: var(--fs-13); }
.m-app .mask .link-btn { min-block-size: var(--m-target); font-size: var(--fs-15); }
.mask-lock { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-13); font-weight: 400; color: var(--muted); }
.mask-lock .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* Belge gecerliligi (D12, PO 13.10: belgesi dolmus arac atanabilir, uyari gorunur): tarih + durum rozeti.
   Gecerli st-ok, 30 gun ve alti st-warn, suresi gecmis st-danger. */
.validity { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.validity-date { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track { margin: 0; padding: 0; list-style: none; }
.track-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-block-end: 1px solid var(--border); }
.track-row:first-child { padding-block-start: 0; }
.track-row:last-child { padding-block-end: 0; border-block-end: 0; }
.track-row .row-title, .track-row .row-sub { white-space: normal; overflow-wrap: anywhere; }
.track-row .validity { align-items: flex-end; text-align: end; }

/* ============================================================
   CIP (hazir filtre, W-10) ve KAYITLI GORUNUM (W-5)
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--h-chip);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--bg-card); color: var(--text);
  font: inherit; font-size: var(--fs-14); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.chip .chk { display: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.chip:hover { background: var(--bg-hover); }
.chip:active { background: var(--bg-inset); }
.chip[aria-pressed='true'] { background: var(--sel-soft); border-color: var(--sel-line); color: var(--sel-text); font-weight: 600; }
.chip[aria-pressed='true'] .chk { display: block; }
.chip[disabled] { opacity: 0.5; cursor: not-allowed; }

.views { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-block-end: 1px solid var(--border); }
/* Baglanti sekmesi (her .views icinde): a.view-tab + aria-current="page" */
.shell .views a.view-tab { color: var(--muted); text-decoration: none; }
.shell .views a.view-tab:hover { color: var(--text); }
.shell .views a.view-tab[aria-current='page'] { color: var(--text); font-weight: 600; border-block-end-color: var(--brand); }
/* Modul alt gezinmesi: kardes sayfalar baglanti sekmesi (aria-current="page"), _araclar/menu_esitle.py uretir */
.subnav { margin-block-end: var(--sp-5); }
.shell .subnav a.view-tab { color: var(--muted); text-decoration: none; }
.shell .subnav a.view-tab:hover { color: var(--text); }
.shell .subnav a.view-tab[aria-current='page'] { color: var(--text); font-weight: 600; border-block-end-color: var(--brand); }
.shell .subnav a.view-tab[aria-current='page'] .icon { color: var(--brand-text); }
/* Yatay tasma ipucu (W-3): sagda devami varsa kenar solar (app.js data-more-right) */
.table-wrap[data-more-right], .views[data-more-right], .anchor-tabs[data-more-right] {
  -webkit-mask-image: linear-gradient(to left, transparent, var(--text) var(--sp-8));
  mask-image: linear-gradient(to left, transparent, var(--text) var(--sp-8));
}
.view-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--h-control);
  padding: 0 var(--sp-3);
  border: 0; border-block-end: var(--line-3) solid transparent;
  margin-block-end: -1px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 500; cursor: pointer;
}
.view-tab:hover { color: var(--text); background: var(--bg-hover); }
.view-tab:active { background: var(--bg-inset); }
.view-tab[aria-selected='true'] { color: var(--text); font-weight: 600; border-block-end-color: var(--brand); }
.view-tab[aria-selected='true'] .count { background: var(--brand); color: var(--on-brand); }

.seg { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); border-radius: var(--r-sm); background: var(--bg-inset); }
.seg button {
  min-block-size: var(--sp-10); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 500; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked='true'], .seg button[aria-pressed='true'] { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ============================================================
   ALAN, GIRDI, COMBOBOX (W-18, W-19, W-22)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-inline-size: 0; }
.field > label, .field-label { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.req { color: var(--danger-text); }
.input, .select {
  inline-size: 100%;
  min-block-size: var(--h-control);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text);
  font: inherit; font-size: var(--fs-14);
}
.input::placeholder { color: var(--muted); }
/* Metin alani: .input ile ayni dil, cok satir */
textarea.input { min-block-size: calc(var(--h-control) * 2.5); padding-block: var(--sp-2); line-height: var(--lh-body); resize: vertical; }
/* Mobil (surucu uygulamasi, portal): alan >= 48 px, metin >= 16 px (08 M-3) */
.m-app .input, .m-app .select { min-block-size: var(--m-target); font-size: var(--fs-16); }
.m-app .field > label, .m-app .label { font-size: var(--fs-16); }
/* Anahtar: <input type="checkbox" role="switch" class="switch"> (acik/kapali tek bakista; renk platform secim tonu) */
.switch { appearance: none; position: relative; flex: none; inline-size: var(--sp-10); block-size: var(--sp-6); margin: 0; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--bg-inset); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.switch::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: var(--line-2); inline-size: var(--sp-4); block-size: var(--sp-4); border-radius: var(--r-full); background: var(--bg-card); box-shadow: 0 0 0 1px var(--border-strong); transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease-out); }
.switch:checked { background: var(--sel-line); border-color: var(--sel-line); }
.switch:checked::after { transform: translate(var(--sp-4), -50%); box-shadow: none; }
.switch:focus-visible { outline: none; box-shadow: var(--ring); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
/* Tablo alt satiri varsayilan tek satir; uzun aciklamada kirilsin */
.row-sub.is-wrap, .table .row-sub.is-wrap { white-space: normal; }
.input:hover, .select:hover { border-color: var(--text); }
.input:focus-visible, .select:focus-visible { border-color: var(--ring-color); box-shadow: var(--ring); outline: none; }
.input[disabled] { opacity: 0.5; cursor: not-allowed; }
.input[aria-invalid='true'] { border-color: var(--danger); border-width: var(--line-2); }
.input.is-filled { background: var(--sel-tint); }
.field-hint { font-size: var(--fs-13); color: var(--muted); }
.field-error { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-13); font-weight: 500; color: var(--danger-text); }
.field-error .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 1px; }
/* Girdi + sondaki ikon dugmesi (parola goster, temizle) */
.input-wrap { position: relative; }
.input-wrap .input { padding-inline-end: calc(var(--h-control) + var(--sp-1)); }
.input-wrap .icon-btn { position: absolute; inset-block-start: 0; inset-inline-end: 0; color: var(--muted); }
.input-wrap .icon-btn:hover { color: var(--text); }
/* Form izgarasi (adimli form, ayar formu): alan sutunlari kendiliginden kirilir */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-field)), 1fr)); gap: var(--sp-4) var(--sp-5); }
.form-grid .field-wide { grid-column: 1 / -1; }

.combo { position: relative; }
.combo .input { padding-inline-end: var(--sp-10); }
.combo-caret { position: absolute; inset-inline-end: var(--sp-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.listbox {
  position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% + var(--sp-1));
  margin: 0; padding: var(--sp-1);
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
}
.listbox[hidden] { display: none; }
.listbox-label { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.option {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--sp-10);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.option:hover, .option.is-active { background: var(--bg-hover); }
.option[aria-selected='true'] { background: var(--sel-soft); color: var(--sel-text); font-weight: 600; }
.option .aside { margin-inline-start: auto; font-size: var(--fs-13); color: var(--muted); }

.checkbox {
  inline-size: var(--sp-5); block-size: var(--sp-5);
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Hizli giris satiri (W-21) */
.quick {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
  align-items: start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.quick > .btn { margin-block-start: calc(var(--fs-13) * 1.5 + var(--sp-1)); }
.quick-title { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 600; }
.quick-title .aside { margin-inline-start: auto; font-weight: 400; font-size: var(--fs-13); color: var(--muted); display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ============================================================
   KART, PANEL, PANO (W-28: bir kart one cikar)
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  min-inline-size: 0;
}
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-tight); }
.card-head .aside { margin-inline-start: auto; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: var(--sp-4) var(--sp-5) 0; }

.lead-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.lead-value { font-size: var(--fs-48); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lead-label { font-size: var(--fs-16); color: var(--muted); }

.stat {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.shell a.stat { color: var(--text); text-decoration: none; }
a.stat:hover { background: var(--bg-hover); }
a.stat:active { background: var(--bg-inset); }
.stat-value { font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.stat-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-13); color: var(--muted); }
.stat-label .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.delta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-13); font-weight: 600; }
.delta .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.delta-up { color: var(--ok-text); }
.delta-down { color: var(--danger-text); }

/* Uyari karti: eylem icerir (W-30). Renkli kenar cizgisi yok (craft-floor). */
.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.alert-icon { display: grid; place-items: center; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-sm); }
.alert-warn .alert-icon   { background: var(--warn-soft);   color: var(--warn-text); }
.alert-danger .alert-icon { background: var(--danger-soft); color: var(--danger-text); }
.alert-info .alert-icon   { background: var(--info-soft);   color: var(--info-text); }
.alert-ok .alert-icon     { background: var(--ok-soft);     color: var(--ok-text); }
.alert-title { font-weight: 600; }
.alert-text { font-size: var(--fs-13); color: var(--muted); }

.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
}
.banner-warn   { background: var(--warn-soft);   color: var(--warn-text); }
.banner-danger { background: var(--danger-soft); color: var(--danger-text); }
.banner-info   { background: var(--info-soft);   color: var(--info-text); }
.banner-ok     { background: var(--ok-soft);     color: var(--ok-text); }
.banner .banner-text { flex: 1; min-inline-size: 0; font-weight: 500; }
.banner .banner-text strong { font-weight: 700; }

/* Govde paragrafi okuma genisligini asmaz (sayfa alt satiri, banner, ipucu, not). */
main p { max-inline-size: var(--measure); }

/* ============================================================
   TABLO (W-1..W-9): ilk sutun insan okunur, baslik ve ilk sutun
   sabit, sayilar saga + tabular, toplam sayi gorunur.
   ============================================================ */
.table-wrap {
  position: relative;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--border); }
.table th {
  position: sticky; inset-block-start: 0; z-index: 2;
  background: var(--bg-subtle);
  font-size: var(--fs-13); font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.table td { background: var(--bg-card); }
.table .sticky-col { position: sticky; inset-inline-start: 0; z-index: 1; }
.table th.sticky-col { z-index: 3; }
/* Satir basligi (tbody th[scope=row]) sutun basligi gibi yapismaz, gri zemin almaz (PLT-3). */
.table tbody th[scope='row'] { inset-block-start: auto; z-index: 1; background: var(--bg-card); font-size: var(--fs-14); font-weight: 500; color: var(--text); white-space: normal; }
.table tbody th[scope='row']:not(.sticky-col) { position: static; }
.table .num { text-align: end; white-space: nowrap; }
.table .sel { inline-size: var(--sp-10); padding-inline-end: 0; }
.table tbody tr:hover td { background: var(--bg-hover); }
.table tbody tr[aria-selected='true'] td { background: var(--sel-tint); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-block-end: 0; }
.table tfoot td { background: var(--bg-subtle); font-weight: 700; border-block-start: 1px solid var(--border-strong); border-block-end: 0; }
.row-title { font-weight: 600; color: var(--text); white-space: nowrap; }
.table .row-sub, .table .mono, .table .tnum, .table .st { white-space: nowrap; }
.shell a.row-title { color: var(--text); text-decoration: none; }
.shell a.row-title:hover { text-decoration: underline; color: var(--brand-text); }
.row-sub { font-size: var(--fs-13); color: var(--muted); }
.row-actions { display: flex; justify-content: flex-end; gap: var(--sp-1); }
.th-sort {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--sp-8);
  padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer;
}
.th-sort:hover { color: var(--text); }
.th-sort .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
th[aria-sort='ascending'] .th-sort, th[aria-sort='descending'] .th-sort { color: var(--text); }
th[aria-sort='descending'] .th-sort .icon { transform: rotate(180deg); }
th[aria-sort='none'] .th-sort .icon { opacity: 0.6; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); color: var(--muted); border-block-start: 1px solid var(--border); background: var(--bg-card); }
.table-foot .aside { margin-inline-start: auto; }
.cell-empty { color: var(--muted); font-style: italic; }
.cell-error { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--danger-text); font-weight: 600; }
.cell-error .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* Toplu islem cubugu (W-25) */
.actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--sel-tint);
  border: 1px solid var(--sel-line);
  border-radius: var(--r-md);
}
.actionbar[hidden] { display: none; }
.actionbar .sel-count { font-weight: 700; }
.actionbar .aside { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.toolbar .aside { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.total-line { font-size: var(--fs-15); color: var(--muted); }
.total-line strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   DETAY SAYFASI (W-14..W-17)
   ============================================================ */
.object-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.object-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.object-id h1 { margin: 0; font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.object-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-fact), 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0; grid-column: 1 / -1; }
.facts dt { font-size: var(--fs-13); color: var(--muted); }
.facts dd { margin: var(--sp-1) 0 0; font-weight: 600; font-size: var(--fs-15); font-variant-numeric: tabular-nums; }

.anchor-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-block-end: 1px solid var(--border); position: sticky; inset-block-start: 0; z-index: 4; background: var(--bg-page); }
.anchor-tabs a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--h-control); padding: 0 var(--sp-3);
  border-block-end: var(--line-3) solid transparent; margin-block-end: -1px;
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.shell .anchor-tabs a { color: var(--muted); text-decoration: none; }
.shell .anchor-tabs a:hover { color: var(--text); background: var(--bg-hover); }
.shell .anchor-tabs a[aria-current='true'] { color: var(--text); font-weight: 600; border-block-end-color: var(--brand); }

.legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-leg), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.leg { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
.leg-mark { display: flex; align-items: center; gap: var(--sp-2); }
.leg-dot { display: grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: var(--r-full); background: var(--bg-inset); color: var(--muted); flex: none; }
.leg-line { flex: 1; block-size: var(--line-2); background: var(--border); }
.leg.is-done .leg-dot { background: var(--ok-soft); color: var(--ok-text); }
.leg.is-done .leg-line { background: var(--ok-text); }
.leg.is-current .leg-dot { background: var(--brand); color: var(--on-brand); }
.leg-title { font-weight: 600; }
.leg-meta { font-size: var(--fs-13); color: var(--muted); }

.timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3) 0; border-block-end: 1px solid var(--border); }
.tl-item:last-child { border-block-end: 0; }
.tl-icon { display: grid; place-items: center; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: var(--r-full); background: var(--bg-inset); color: var(--muted); }
.tl-text { font-weight: 500; }
.tl-meta { font-size: var(--fs-13); color: var(--muted); }
.tl-time { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-doc), 1fr)); gap: var(--sp-3); }
.doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--text); text-decoration: none;
}
.shell a.doc { color: var(--text); text-decoration: none; }
.shell a.doc:hover { background: var(--bg-hover); }
.doc-icon { display: grid; place-items: center; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-text); }
.doc.is-missing { border-style: dashed; border-color: var(--border-strong); }
.doc.is-missing .doc-icon { background: var(--warn-soft); color: var(--warn-text); }
.doc.is-expiring .doc-icon { background: var(--warn-soft); color: var(--warn-text); }
.doc.is-expired .doc-icon { background: var(--danger-soft); color: var(--danger-text); }
.doc-name { font-weight: 600; }
.doc-meta { font-size: var(--fs-13); color: var(--muted); }

/* Anahtar-deger listesi */
.kv { display: grid; grid-template-columns: minmax(min(var(--sp-16) * 2, 40%), 1fr) auto; gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv .kv-total { padding-block-start: var(--sp-2); border-block-start: 1px solid var(--border-strong); font-size: var(--fs-16); color: var(--text); font-weight: 700; }

/* Yatay cubuk grafik (pano; gercekte ECharts) */
.bars { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.bar-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 7.5rem); align-items: center; gap: var(--sp-3); }
.bar-name { font-weight: 500; overflow-wrap: anywhere; }
.bar-track { block-size: var(--sp-3); border-radius: var(--r-xs); background: var(--bg-inset); overflow: hidden; min-inline-size: var(--sp-16); }
.bar-fill { display: block; block-size: 100%; inline-size: var(--v); background: var(--brand); border-radius: var(--r-xs); }
.bar-fill.is-neg { background: var(--danger); }
.bar-value { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Acilir panel (bildirimler) */
.pop-wrap { position: relative; }
.popover {
  position: absolute; z-index: 30;
  inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-2));
  inline-size: var(--w-pop); max-inline-size: 90vw;
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
}
.popover[hidden] { display: none; }
.popover-title { padding: var(--sp-2) var(--sp-3); font-weight: 600; }
.pop-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
button.pop-item { inline-size: 100%; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.shell a.pop-item { color: var(--text); text-decoration: none; }
.shell a.pop-item:hover { background: var(--bg-hover); }

/* Bos durum (D-4, G-10) */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-card);
}
.empty-icon { display: grid; place-items: center; inline-size: var(--sp-12); block-size: var(--sp-12); border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text); }
.empty h2, .empty h3 { margin: 0; font-size: var(--fs-18); }
.empty p { margin: 0; color: var(--muted); max-inline-size: 46ch; }
.empty .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

.skeleton { display: block; block-size: var(--sp-3); border-radius: var(--r-xs); background: var(--bg-inset); }

/* Yan panel (W-20: modal olmayan) */
.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-panel); gap: var(--sp-5); align-items: start; }
.side-panel { position: sticky; inset-block-start: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.side-panel h2 { margin: 0; font-size: var(--fs-18); }
.side-panel > .badge, .side-panel > .st, .side-panel > * > .badge:only-child, .side-panel > * > .st:only-child { align-self: flex-start; }

/* Izgaralar */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-5); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.grow { flex: 1; min-inline-size: 0; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-stat), 1fr)); gap: var(--sp-1); padding: var(--sp-2); }

/* ============================================================
   TOAST: Geri al (H-3; en az 10 sn, ustune gelince/odakta durur)
   ============================================================ */
.toast-host { position: absolute; inset-inline: 0; inset-block-end: var(--sp-6); display: flex; justify-content: center; pointer-events: none; z-index: 40; padding: 0 var(--sp-4); }
/* Mobilde toast alt eylem bandinin (kamera, ayak, menu) hemen ustunde durur; ana dugmeyi ortmez */
.m-cam-bar, .m-foot, .m-nav { position: relative; }
.m-app .toast-host { inset-block-end: calc(100% + var(--sp-2)); }
.toast {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  max-inline-size: var(--w-toast);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--text); color: var(--bg-card);
  box-shadow: var(--shadow-pop);
  font-weight: 500;
}
.toast .icon { color: var(--bg-card); }
.toast-msg { flex: 1; min-inline-size: 0; }
.toast .btn-undo {
  min-block-size: var(--sp-10); padding: 0 var(--sp-3);
  border: 1px solid var(--bg-card); border-radius: var(--r-sm);
  background: transparent; color: var(--bg-card);
  font: inherit; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.toast .btn-undo:hover { background: var(--muted); }
.toast .btn-undo:focus-visible { box-shadow: 0 0 0 2px var(--text), 0 0 0 4px var(--bg-card); outline: none; }
.toast .btn-x { inline-size: var(--sp-10); block-size: var(--sp-10); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--bg-card); cursor: pointer; display: grid; place-items: center; }
.toast .btn-x:hover { background: var(--muted); }
.toast .btn-x:focus-visible { box-shadow: 0 0 0 2px var(--text), 0 0 0 4px var(--bg-card); outline: none; }

/* ============================================================
   ONAY PENCERESI (yalnizca H-4 listesi: disari giden, geri
   cagrilamayan islem). Sonuc sayiyla, dugme eylemin adini tasir.
   ============================================================ */
.dialog-scrim { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sp-5); background: var(--scrim); }
.dialog-scrim[hidden] { display: none; }
.dialog {
  inline-size: 100%; max-inline-size: var(--w-dialog);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-pop);
}
.dialog h2 { margin: 0; font-size: var(--fs-20); line-height: var(--lh-tight); }
.dialog p { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

/* ============================================================
   SAHNE TEMA DUGMESI (tanitim katmani; urun disi)
   ============================================================ */
.sc-theme {
  position: fixed; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--h-control); padding: 0 var(--sp-4);
  border: 1px solid var(--sc-stage-line); border-radius: var(--r-full);
  background: var(--sc-stage-2); color: var(--sc-stage-text);
  font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 600;
  cursor: pointer;
}
.sc-theme:hover { border-color: var(--sc-accent); }
.sc-theme:active { background: var(--sc-stage); }
.sc-theme .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.sc-theme .i-sun { display: none; }
html[data-theme='dark'] .sc-theme .i-sun { display: block; }
html[data-theme='dark'] .sc-theme .i-moon { display: none; }

/* Motor duzeltmesi: frames.css .sc-status-bar content-box oldugu icin 30 + 10
   dolgu = 40 px kaplar, .sc-screen 30 varsayar; ekranin alti 10 px kirpilir.
   Vendored dosyaya dokunmadan burada ezilir (MOCKUP.md, motor notu). */
.sc-status-bar { box-sizing: border-box; }

/* ============================================================
   MOBIL: SURUCU UYGULAMASI ve TASERON MOBIL WEB
   Hedef >= 48dp, birincil 56dp, govde >= 16, anahtar bilgi >= 20,
   kritik metin >= 7:1 (08 M-3, M-10, E-3).
   ============================================================ */
.m-app {
  display: flex; flex-direction: column;
  block-size: 100%;
  background: var(--bg-page);
  font-size: var(--fs-16);
  position: relative;
}
.m-top {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--m-topbar);
  padding: 0 var(--sp-2) 0 var(--sp-4);
  background: var(--bg-card);
  border-block-end: 1px solid var(--border);
}
.m-top h1 { margin: 0; flex: 1; min-inline-size: 0; font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-tight); }
.m-top .m-icon-btn:first-child { margin-inline-start: calc(var(--sp-2) * -1); }
.m-icon-btn {
  display: grid; place-items: center; position: relative; flex: none;
  inline-size: var(--m-target); block-size: var(--m-target);
  border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--text);
  cursor: pointer;
}
.m-icon-btn:hover { background: var(--bg-hover); }
.m-icon-btn:active { background: var(--bg-inset); }
.m-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.m-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--bg-card); border-block-start: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }

.m-sync {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--m-target);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-15); font-weight: 600;
}
.m-sync-ok   { background: var(--ok-soft);   color: var(--ok-text); }
.m-sync-warn { background: var(--warn-soft); color: var(--warn-text); }
.m-sync .m-sync-act { margin-inline-start: auto; }
.m-app a.m-sync { text-decoration: none; }
.m-app a.m-sync-ok { color: var(--ok-text); }
.m-app a.m-sync-warn { color: var(--warn-text); }
.m-app a.m-sync:hover span { text-decoration: underline; }
.m-app a.m-icon-btn { color: var(--text); }

.m-label { font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.m-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.m-route { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.m-stop { display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr); gap: var(--sp-3); }
.m-stop-rail { display: flex; flex-direction: column; align-items: center; }
.m-stop-dot { inline-size: var(--sp-4); block-size: var(--sp-4); margin-block-start: var(--sp-1); border-radius: var(--r-full); border: var(--line-3) solid var(--text); background: var(--bg-card); }
.m-stop:last-child .m-stop-dot { background: var(--text); }
.m-stop-line { flex: 1; inline-size: var(--line-2); background: var(--border-strong); margin: var(--sp-1) 0; min-block-size: var(--sp-4); }
.m-stop-body { padding-block-end: var(--sp-3); }
.m-stop-kind { font-size: var(--fs-15); color: var(--text); font-weight: 600; }
.m-stop-name { font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-tight); color: var(--text); }
.m-stop-addr { font-size: var(--fs-16); color: var(--text); }
.m-key { font-size: var(--fs-22); font-weight: 700; color: var(--text); line-height: var(--lh-tight); }
.m-key.mono { font-size: var(--fs-22); }
.m-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-16); color: var(--text); }
.m-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }

.m-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: var(--m-cta);
  padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: var(--fs-18); font-weight: 700;
  cursor: pointer;
}
a.m-cta, .m-app a.m-cta { color: var(--on-brand); text-decoration: none; }
.m-cta:hover { background: var(--brand-hover); }
.m-cta:active { background: var(--brand-active); }
.m-cta.is-loading { position: relative; color: transparent; pointer-events: none; }
.m-cta.is-loading::after { content: ''; position: absolute; inline-size: var(--icon-lg); block-size: var(--icon-lg); border: var(--line-3) solid var(--on-brand); border-inline-end-color: transparent; border-radius: var(--r-full); animation: spin var(--dur-spin) linear infinite; }
.m-cta .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.m-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: var(--m-target);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--text);
  font: inherit; font-size: var(--fs-16); font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.m-app a.m-btn { color: var(--text); text-decoration: none; }
.m-btn:hover { background: var(--bg-hover); }
.m-btn:active { background: var(--bg-inset); }
.m-btn-danger { border-color: var(--danger); color: var(--danger-text); }
.m-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.m-steps { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.m-steps li { flex: 1; block-size: var(--sp-2); border-radius: var(--r-xs); background: var(--bg-inset); }
.m-steps li.is-done { background: var(--ok-text); }
.m-steps li.is-current { background: var(--brand); }
.m-step-text { font-size: var(--fs-15); color: var(--text); font-weight: 600; }

.m-list { margin: 0; padding: 0; list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.m-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-block-size: var(--sp-16);
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.m-app a.m-item { color: var(--text); text-decoration: none; }
.m-item:last-child { border-block-end: 0; }
a.m-item:hover { background: var(--bg-hover); }
a.m-item:active { background: var(--bg-inset); }
.m-item-title { font-weight: 600; font-size: var(--fs-16); }
.m-item-sub { font-size: var(--fs-14); color: var(--muted); }
.m-item-icon { display: grid; place-items: center; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-md); background: var(--bg-inset); color: var(--text); }
.m-item-end { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

.m-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-block-size: var(--m-nav);
  padding-block-end: var(--sp-5);
  background: var(--bg-card);
  border-block-start: 1px solid var(--border);
}
.m-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  min-block-size: var(--m-target);
  border: 0; background: transparent;
  color: var(--muted); text-decoration: none;
  font: inherit; font-size: var(--fs-13); font-weight: 600;
  cursor: pointer;
}
.m-app a.m-nav-item { color: var(--muted); text-decoration: none; }
.m-nav-item:hover { color: var(--text); }
.m-nav-item .m-nav-pill { display: grid; place-items: center; inline-size: var(--sp-16); block-size: var(--sp-8); border-radius: var(--r-full); }
.m-app a.m-nav-item[aria-current='page'] { color: var(--text); }
.m-nav-item[aria-current='page'] .m-nav-pill { background: var(--sel-soft); color: var(--sel-text); }

/* Kamera vizoru (POD/EIR). Gercek kamera akisi yerine cerceve + yonerge;
   gri yer tutucu kutu degil, cihazin kamera arayuzu. */
.m-viewfinder {
  position: relative; flex: 1; min-block-size: 0;
  display: grid; place-items: center;
  background: var(--sc-bezel);
  color: var(--sc-stage-text);
  overflow: hidden;
}
.m-vf-frame {
  position: relative;
  inline-size: 78%; aspect-ratio: 3 / 4;
  border: var(--line-2) solid var(--sc-stage-muted);
  border-radius: var(--r-md);
  display: grid; place-items: center;
}
.m-vf-hint { position: absolute; inset-inline: var(--sp-4); inset-block-start: var(--sp-4); text-align: center; font-size: var(--fs-16); font-weight: 600; color: var(--sc-stage-text); }
.m-vf-doc { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--sc-stage-muted); font-size: var(--fs-14); }
.m-shutter {
  display: grid; place-items: center;
  inline-size: var(--sp-16); block-size: var(--sp-16);
  border: var(--line-3) solid var(--sc-stage-text); border-radius: var(--r-full);
  background: transparent; color: var(--sc-stage-text); cursor: pointer;
}
.m-shutter span { inline-size: var(--sp-12); block-size: var(--sp-12); border-radius: var(--r-full); background: var(--sc-stage-text); }
.m-shutter:hover span { background: var(--sc-stage-muted); }
.m-shutter:focus-visible { box-shadow: 0 0 0 2px var(--sc-bezel), 0 0 0 4px var(--sc-stage-text); outline: none; }
.m-cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sp-4); background: var(--sc-bezel); }
.m-cam-bar .m-icon-btn { color: var(--sc-stage-text); }
.m-cam-bar .m-icon-btn:hover { background: var(--sc-stage-2); }

.m-thumbs { display: flex; gap: var(--sp-2); }
.m-thumb { display: grid; place-items: center; inline-size: var(--m-cta); block-size: var(--m-cta); border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-text); }

/* Govde tasinca overflow:hidden tasiyan cocuklar (ornek .m-list) flex ile
   2 px'e cokuyordu; cocuklar kuculmez, govde kayar. */
.m-body > * { flex-shrink: 0; }

/* ============================================================
   GALERI (index) ince ayarlari
   ============================================================ */
.sc-index .sc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-block-start: var(--sp-5); color: var(--sc-stage-muted); font-size: var(--fs-14); }
.sc-index .sc-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sc-swatch { inline-size: var(--sp-4); block-size: var(--sp-4); border-radius: var(--r-xs); border: 1px solid var(--sc-stage-line); }
.sc-swatch-navy { background: var(--brand); }
.sc-swatch-kaya { background: var(--sc-accent); }
/* Kart altligi ayni satirda ayni hizada; surucu kartlari genis ekranda tek satirda 4'lu */
.sc-index .sc-card { display: flex; flex-direction: column; }
.sc-index .sc-card .sc-desc { padding-block-end: var(--sp-4); }
.sc-index .sc-card .sc-meta { margin-block-start: auto; }
@media (min-width: 1180px) {
  .sc-index .sc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sc-index .sc-card { grid-column: span 4; }
  .sc-index .sc-card.sc-quad { grid-column: span 3; }
}

/* ============================================================
   ADIMLI FORM (sihirbaz yerine). Kapsayici [data-states] durumu
   kendi icinde tutar; adim paneli data-state="N", "Ileri"
   data-advance="N+1", "Geri" data-back. app.js adim gostergesini
   (.steps [data-step]) esler: once gelenler .is-done, simdiki
   aria-current="step". Ozet adimi .summary; "Duzenle" data-advance.
   ============================================================ */
.wizard { display: flex; flex-direction: column; gap: var(--sp-6); }
.steps { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.step { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 0; min-inline-size: 0; color: var(--muted); font-weight: 500; }
.step:last-child { flex: 0 1 auto; }
.step::after { content: ""; flex: 1 1 var(--sp-4); min-inline-size: var(--sp-4); block-size: var(--line-2); border-radius: var(--r-xs); background: var(--border); }
.step:last-child::after { display: none; }
.step-mark {
  display: grid; place-items: center; flex: none;
  inline-size: var(--sp-8); block-size: var(--sp-8);
  border: var(--line-2) solid var(--border-strong); border-radius: var(--r-full);
  background: var(--bg-card);
  font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums;
}
.step-chk { display: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.step-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step[aria-current='step'] { color: var(--text); font-weight: 600; }
.step[aria-current='step'] .step-mark { border-color: var(--sel-line); background: var(--sel-line); color: var(--bg-card); }
.step.is-done { color: var(--text); }
.step.is-done .step-mark { border-color: var(--ok-text); background: var(--ok-soft); color: var(--ok-text); }
.step.is-done .step-n { display: none; }
.step.is-done .step-chk { display: block; }
.step.is-done::after { background: var(--ok-text); }
.wizard-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.wizard-panel > h2 { margin: 0; font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-tight); }
.wizard-panel [tabindex='-1']:focus { box-shadow: none; outline: none; }
.wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border); }
.wizard-actions .aside { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.summary { display: flex; flex-direction: column; }
.summary-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0; border-block-end: 1px solid var(--border); }
.summary-sec:first-child { padding-block-start: 0; }
.summary-sec:last-child { border-block-end: 0; }
.summary-sec h3 { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.summary-list { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, var(--w-field)) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .step { flex: none; }
  .step[aria-current='step'] { flex: 1 1 auto; }
  .step[aria-current='step'] .step-name { white-space: normal; line-height: var(--lh-tight); }
  .step:not([aria-current='step']) .step-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .summary-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .summary-list dd { margin-block-end: var(--sp-2); }
}

/* ============================================================
   A4 BELGE SAYFASI (hakedis kapagi, irsaliye, makbuz, ekstre,
   bekleme kaniti). Tuval uzerinde beyaz kagit; koyu temada da
   beyaz kalir (yuzey/metin token'lari --paper-*'a baglanir).
   Durum rengi kagitta kullanilmaz: durum kelimeyle yazilir.
   Yazdirirken yalnizca .doc-page basilir.
   ============================================================ */
.doc-canvas { display: flex; justify-content: center; padding: var(--sp-8) var(--sp-5); border-radius: var(--r-md); background: var(--bg-inset); overflow: auto; }
.doc-page {
  --bg-card: var(--paper); --bg-subtle: var(--paper-subtle); --bg-inset: var(--paper-subtle); --bg-hover: var(--paper-subtle);
  --border: var(--paper-line); --border-strong: var(--paper-line-strong);
  --text: var(--paper-text); --muted: var(--paper-muted); --faint: var(--paper-muted);
  --brand-mark: var(--brand-print); --brand-text: var(--brand-print); --on-brand: var(--paper);
  position: relative; isolation: isolate; flex: none; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-6);
  inline-size: var(--w-a4); max-inline-size: 100%;
  min-block-size: calc(var(--w-a4) * 1.4142);
  padding: var(--sp-12);
  border: 1px solid var(--paper-line);
  background: var(--paper); color: var(--paper-text);
  font-size: var(--fs-13); line-height: var(--lh-body);
  color-scheme: light;
}
.doc-page > * { position: relative; z-index: 1; }
.doc-page[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-size: calc(var(--fs-48) * 2.5); font-weight: 700; letter-spacing: 0.1em;
  color: var(--paper-subtle);
  transform: rotate(-30deg);
  pointer-events: none;
}
.doc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-6); padding-block-end: var(--sp-5); border-block-end: var(--line-2) solid var(--brand-print); }
.doc-org { display: flex; align-items: flex-start; gap: var(--sp-3); min-inline-size: 0; }
.doc-logo { display: grid; place-items: center; flex: none; inline-size: var(--sp-12); block-size: var(--sp-12); border-radius: var(--r-sm); background: var(--brand-print); color: var(--paper); font-size: var(--fs-20); font-weight: 700; }
.doc-org-name { font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-tight); }
.doc-org-addr { font-size: var(--fs-12); color: var(--paper-muted); }
.doc-title { text-align: end; }
.doc-title h2 { margin: 0; font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0.02em; }
.doc-no { font-family: var(--font-mono); font-weight: 500; }
/* A4 belgesinin ust bilgi izgarasi: yalniz .doc-page icinde (belge kartindaki span.doc-meta ile carpismasin) */
.doc-page .doc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); margin: 0; font-size: inherit; color: inherit; }
.doc-page .doc-meta dt { font-size: var(--fs-12); color: var(--paper-muted); }
.doc-page .doc-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.doc-party { padding: var(--sp-3); border: 1px solid var(--paper-line); border-radius: var(--r-xs); }
.doc-party h3, .doc-h { margin: 0 0 var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--paper-muted); }
.doc-scroll { overflow-x: auto; }
.doc-table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { padding: var(--sp-2); border: 1px solid var(--paper-line); text-align: start; vertical-align: top; }
.doc-table th { background: var(--paper-subtle); font-size: var(--fs-12); font-weight: 600; }
.doc-table .num { text-align: end; white-space: nowrap; }
.doc-table tfoot td { background: var(--paper-subtle); font-weight: 700; }
.doc-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) 0; align-self: flex-end; min-inline-size: 50%; margin: 0; }
.doc-totals dt { padding-inline-end: var(--sp-6); color: var(--paper-muted); }
.doc-totals dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-totals .doc-grand { padding-block-start: var(--sp-2); border-block-start: var(--line-2) solid var(--paper-text); font-size: var(--fs-15); font-weight: 700; color: var(--paper-text); }
.doc-note { margin: 0; font-size: var(--fs-12); color: var(--paper-muted); }
.doc-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.sign-box { display: flex; flex-direction: column; gap: var(--sp-1); min-block-size: calc(var(--sp-16) * 2); padding: var(--sp-3); border: 1px solid var(--paper-line); border-radius: var(--r-xs); }
.sign-role { font-size: var(--fs-12); font-weight: 600; color: var(--paper-muted); }
.sign-name { font-weight: 600; }
.sign-line { margin-block-start: auto; padding-block-start: var(--sp-1); border-block-start: 1px solid var(--paper-line-strong); font-size: var(--fs-12); color: var(--paper-muted); }
.sign-done { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); font-weight: 600; }
.sign-done .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.doc-foot { margin-block-start: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--paper-line); font-size: var(--fs-12); color: var(--paper-muted); }
@media (max-width: 600px) {
  .doc-canvas { padding: var(--sp-3); }
  .doc-page { min-block-size: 0; padding: var(--sp-5); }
  .doc-head, .doc-parties, .doc-sign { grid-template-columns: minmax(0, 1fr); }
  .doc-title { text-align: start; }
  .doc-page .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-totals { min-inline-size: 100%; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .sc-stage { padding: 0; background: none; }
  .sc-stage * { visibility: hidden; }
  .sc-showcase, .sc-browser, .shell, .main, .content, .doc-canvas { position: static; overflow: visible; }
  .doc-page, .doc-page * { visibility: visible; }
  .doc-page { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; max-inline-size: none; min-block-size: 0; padding: 0; border: 0; }
}

/* ============================================================
   SEMATIK HARITA (SVG). Altlik app.js'ten gelir: .map[data-map=
   "korfez"|"sehir"] icindeki svg.map-svg'nin (viewBox 0 0 720 360)
   basina kara, su, yol ve yer adi katmani eklenir. Ekran yalnizca
   ust katmani cizer: rota, bolge (geofence), nokta, arac. Atif
   satiri zorunlu. 15 dk'dan eski konum .is-stale + "eski" kelimesi.
   ============================================================ */
.map { position: relative; aspect-ratio: 2 / 1; min-block-size: calc(var(--h-map) * 0.75); max-block-size: calc(var(--h-map) * 1.5); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--map-land); inline-size: 100%; }
.map-lg { aspect-ratio: 16 / 10; min-block-size: var(--h-map); max-block-size: calc(var(--h-map) * 2); }
.map-svg { display: block; inline-size: 100%; block-size: 100%; font-family: var(--font-ui); }
.map-land { fill: var(--map-land); }
.map-water { fill: var(--map-water); }
.map-park { fill: var(--map-park); }
.map-block { fill: var(--map-block); }
.map-pier { fill: var(--map-block); stroke: var(--map-road-edge); stroke-width: 1; }
.map-coast { fill: none; stroke: var(--map-road-edge); stroke-width: 1; }
.map-road-edge, .map-road, .map-major-edge, .map-major, .map-minor-edge, .map-minor { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-minor-edge { stroke: var(--map-road-edge); stroke-width: calc(var(--sp-1) + var(--line-2)); }
.map-minor { stroke: var(--map-road); stroke-width: var(--sp-1); }
.map-road-edge { stroke: var(--map-road-edge); stroke-width: calc(var(--sp-2) + var(--line-2)); }
.map-road { stroke: var(--map-road); stroke-width: var(--sp-2); }
.map-major-edge { stroke: var(--map-major-edge); stroke-width: calc(var(--sp-3) + var(--line-2)); }
.map-major { stroke: var(--map-major); stroke-width: var(--sp-3); }
.map-text { fill: var(--map-label); font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.02em; paint-order: stroke; stroke: var(--map-land); stroke-width: var(--sp-1); stroke-linejoin: round; }
.map-text-lg { font-size: var(--fs-14); font-weight: 600; }
.map-text-water { fill: var(--map-water-label); stroke: var(--map-water); font-style: italic; }
.map-text-park { stroke: var(--map-park); }
/* Ust katman */
.map-route { fill: none; stroke: var(--sel-line); stroke-width: var(--sp-1); stroke-linecap: round; stroke-linejoin: round; }
.map-route.is-plan { stroke: var(--muted); stroke-width: var(--line-3); stroke-dasharray: var(--sp-2) var(--sp-2); }
.map-fence { fill: var(--info-soft); fill-opacity: 0.75; stroke: var(--info-text); stroke-width: var(--line-2); stroke-dasharray: var(--sp-2) var(--sp-1); }
.map-fence.is-alert { fill: var(--warn-soft); stroke: var(--warn-text); }
.map-pt { fill: var(--bg-card); stroke: var(--text); stroke-width: var(--line-3); }
.map-pt.is-end { fill: var(--text); }
.map-pt.is-stop { fill: var(--warn-soft); stroke: var(--warn-text); }
.map-veh-dot { stroke: var(--bg-card); stroke-width: var(--line-3); }
.map-veh-dir { fill: var(--bg-card); }
.map-veh.is-ok .map-veh-dot { fill: var(--ok-text); }
.map-veh.is-warn .map-veh-dot { fill: var(--warn-text); }
.map-veh.is-danger .map-veh-dot { fill: var(--danger-text); }
.map-veh.is-info .map-veh-dot { fill: var(--info-text); }
.map-veh.is-stale .map-veh-dot { fill: var(--neutral-soft); stroke: var(--neutral-text); stroke-width: var(--line-2); stroke-dasharray: var(--line-3) var(--line-2); }
.map-veh.is-stale .map-veh-dir { fill: var(--neutral-text); }
.map-veh-ring { fill: none; stroke: none; }
.map-veh.is-sel .map-veh-ring { stroke: var(--sel-line); stroke-width: var(--line-3); }
.map-tag { fill: var(--text); font-size: var(--fs-13); font-weight: 600; paint-order: stroke; stroke: var(--bg-card); stroke-width: var(--sp-1); stroke-linejoin: round; }
.map-tag .map-tag-sub { fill: var(--muted); font-weight: 500; }
/* Uste binen HTML: yakinlastirma, secili arac karti, guncellik, atif */
.map-ctrl { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); }
.map-ctrl .icon-btn { border-radius: 0; }
.map-ctrl .icon-btn + .icon-btn { border-block-start: 1px solid var(--border); }
.map-card {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
  max-inline-size: min(var(--w-pop), calc(100% - var(--h-control) - var(--sp-10)));
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-card); box-shadow: var(--shadow-menu);
}
.map-card-title { font-weight: 700; }
.map-card .row-sub { font-size: var(--fs-13); color: var(--muted); }
.map-time, .map-attrib { position: absolute; inset-block-end: 0; margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--bg-card); font-size: var(--fs-12); color: var(--muted); }
.map-time { inset-inline-start: 0; display: inline-flex; align-items: center; gap: var(--sp-1); border-start-end-radius: var(--r-xs); }
.map-time .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.map-attrib { inset-inline-end: 0; border-start-start-radius: var(--r-xs); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--muted); }
.map-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.map-key { flex: none; inline-size: var(--sp-4); block-size: var(--sp-4); border: var(--line-2) solid var(--bg-card); border-radius: var(--r-full); box-shadow: 0 0 0 1px var(--border-strong); }
.map-key.is-ok { background: var(--ok-text); }
.map-key.is-warn { background: var(--warn-text); }
.map-key.is-danger { background: var(--danger-text); }
.map-key.is-info { background: var(--info-text); }
.map-key.is-stale { border: var(--line-2) dashed var(--neutral-text); background: var(--neutral-soft); box-shadow: none; }
.map-key-route { inline-size: var(--sp-6); block-size: var(--sp-1); border: 0; border-radius: var(--r-xs); background: var(--sel-line); box-shadow: none; }
.map-key-plan { inline-size: var(--sp-6); block-size: 0; border: 0; border-block-start: var(--line-3) dashed var(--muted); border-radius: 0; box-shadow: none; }
.map-key-fence { border: var(--line-2) dashed var(--info-text); border-radius: var(--r-xs); background: var(--info-soft); box-shadow: none; }
.map-key-pt { border: var(--line-3) solid var(--text); background: var(--bg-card); box-shadow: none; }
@media (max-width: 600px) {
  .map-ctrl { display: none; }
  .map-card { inset-inline-end: var(--sp-3); max-inline-size: none; padding: var(--sp-2) var(--sp-3); }
  .map-time { inset-block-end: calc(var(--fs-12) * 1.5 + var(--sp-2)); border-start-end-radius: 0; border-end-end-radius: var(--r-xs); }
}

/* ============================================================
   TAKVIM IZGARASI (ay): izin takvimi, bakim plani, vade takvimi.
   table.cal-grid; gun hucresi td (.is-weekend, .is-holiday,
   .is-out = baska ay, aria-current="date" = bugun). Olay cipi
   a.cal-ev + .st-* durum rengi + ikon + kelime. 600 alti cipte
   yalnizca ikon kalir, metin ekran okuyucuda.
   ============================================================ */
.cal { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cal-head h2 { margin: 0 var(--sp-2) 0 0; font-size: var(--fs-18); font-weight: 600; line-height: var(--lh-tight); }
.cal-head .aside { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cal-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); }
.cal-grid { inline-size: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cal-grid th { padding: var(--sp-2); border-block-end: 1px solid var(--border); background: var(--bg-subtle); font-size: var(--fs-13); font-weight: 600; color: var(--muted); text-align: start; }
.cal-grid th abbr { text-decoration: none; }
.cal-grid td { block-size: var(--h-cal); padding: var(--sp-1) var(--sp-1) var(--sp-2); border: 1px solid var(--border); vertical-align: top; }
.cal-grid tr > :first-child { border-inline-start: 0; }
.cal-grid tr > :last-child { border-inline-end: 0; }
.cal-grid tbody tr:last-child td { border-block-end: 0; }
.cal-grid .is-weekend { background: var(--bg-subtle); }
.cal-grid .is-holiday { background: repeating-linear-gradient(135deg, var(--bg-subtle) 0 var(--sp-2), var(--bg-inset) var(--sp-2) var(--sp-3)); }
.cal-grid td[aria-current='date'] { background: var(--sel-tint); }
.cal-top { display: flex; align-items: flex-start; gap: var(--sp-1); min-inline-size: 0; margin-block-end: var(--sp-1); }
.cal-n { display: inline-grid; place-items: center; flex: none; min-inline-size: var(--sp-6); block-size: var(--sp-6); padding: 0 var(--sp-1); border-radius: var(--r-full); font-size: var(--fs-13); font-weight: 600; }
.cal-grid .is-out .cal-n { color: var(--muted); font-weight: 400; }
.cal-grid td[aria-current='date'] .cal-n { background: var(--sel-line); color: var(--bg-card); }
.cal-today { padding-block-start: var(--sp-1); font-size: var(--fs-12); font-weight: 600; line-height: 1.25; color: var(--sel-text); }
.cal-hol { min-inline-size: 0; padding-block-start: var(--sp-1); font-size: var(--fs-12); font-weight: 500; line-height: 1.25; color: var(--muted); }
.cal-evs { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.cal .cal-ev {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  min-block-size: var(--sp-6); padding: var(--sp-1);
  border-radius: var(--r-xs);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.25;
  text-decoration: none; white-space: normal; overflow: hidden;
}
.cal .cal-ev.st-ok { color: var(--ok-text); }
.cal .cal-ev.st-warn { color: var(--warn-text); }
.cal .cal-ev.st-danger { color: var(--danger-text); }
.cal .cal-ev.st-info { color: var(--info-text); }
.cal .cal-ev.st-neutral { color: var(--neutral-text); }
.cal-ev .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.cal-ev-text { min-inline-size: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.cal a.cal-ev:hover .cal-ev-text { text-decoration: underline; }
.cal .cal-more { min-block-size: var(--sp-6); font-size: var(--fs-12); }
@media (max-width: 600px) {
  .cal-grid th { padding: var(--sp-2) 0; text-align: center; }
  .cal-grid td { block-size: var(--sp-16); padding: var(--sp-1) 0; }
  .cal-top { justify-content: center; }
  .cal-today, .cal-hol, .cal-ev-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cal-evs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cal .cal-ev { justify-content: center; align-items: center; min-inline-size: var(--sp-6); padding: 0; }
  .cal .cal-more { padding: 0; }
}

/* ============================================================
   SAYAC KARTI (free-time/demuraj, KVKK 30 gun, ihlal 72 saat,
   U-ETDS 6 saat). Kalan sure buyuk; esik durumu rozetle (ikon +
   kelime) ve cubuk rengiyle: .is-ok / .is-warn / .is-danger.
   Cubuk --v = kalan pay. Renkli kenar cizgisi yok.
   ============================================================ */
.countdown { display: flex; flex-direction: column; gap: var(--sp-3); }
.countdown-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.countdown-title { font-size: var(--fs-15); font-weight: 600; }
.countdown-head .st { margin-inline-start: auto; }
.countdown-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); margin: 0; font-size: var(--fs-36); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.countdown-unit { margin-inline-end: var(--sp-2); font-size: var(--fs-18); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.countdown.is-danger .countdown-value { color: var(--danger-text); }
.countdown-meter { block-size: var(--sp-2); overflow: hidden; border-radius: var(--r-full); background: var(--bg-inset); }
.countdown-meter > span { display: block; block-size: 100%; inline-size: var(--v); border-radius: inherit; background: var(--ok-text); }
.countdown.is-warn .countdown-meter > span { background: var(--warn-text); }
.countdown.is-danger .countdown-meter > span { background: var(--danger-text); }
.countdown-meta { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.m-app .countdown-meta { font-size: var(--fs-15); }

/* ============================================================
   GIRIS SAYFASI (main.auth, kabuksuz; .sc-browser icinde).
   Ortada kart: tenant markasi, alanlar, birincil eylem, ikincil
   baglantilar. Iki adimli dogrulama: 6 kutulu kod (app.js
   [data-otp]: ileri/geri odak, yapistirma dagitir). Hata: ust
   banner role="alert" + alanlarda aria-invalid + .field-error.
   ============================================================ */
.auth {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  min-block-size: var(--h-shell);
  padding: var(--sp-10) var(--sp-4);
  background: var(--bg-page);
}
.auth-card { display: flex; flex-direction: column; gap: var(--sp-5); inline-size: 100%; max-inline-size: var(--w-auth); padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.auth-brand { display: flex; align-items: center; gap: var(--sp-3); }
.auth h1 { margin: 0; font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.auth-sub { margin: calc(var(--sp-3) * -1) 0 0; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.auth-row a, .auth-links a { font-size: var(--fs-13); font-weight: 600; }
.auth-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--h-control); font-weight: 500; cursor: pointer; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border); }
.auth-links a { display: inline-flex; align-items: center; min-block-size: var(--sp-6); }
.auth-foot { margin: 0; font-size: var(--fs-13); color: var(--muted); text-align: center; }
.otp { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.otp legend { padding: 0; margin-block-end: var(--sp-2); }
.otp-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, var(--m-target))) var(--sp-1) repeat(3, minmax(0, var(--m-target))); gap: var(--sp-2); }
.otp-boxes .otp-box { min-block-size: var(--m-cta); padding: 0; text-align: center; font-size: var(--fs-24); font-weight: 600; font-variant-numeric: tabular-nums; }
.otp-boxes .otp-box:nth-child(4) { grid-column: 5; }
@media (max-width: 480px) {
  .auth { justify-content: flex-start; min-block-size: 0; padding: var(--sp-6) var(--sp-4); }
  .auth-card { padding: var(--sp-5); }
  .otp-boxes { gap: var(--sp-1); }
}

/* ============================================================
   DUYARLILIK: tarayici cercevesi 480 altinda kalkar; kabuk da
   daralir (verify_responsive 280/320/414).
   ============================================================ */
@media (max-width: 1100px) {
  .grid-lead, .with-panel { grid-template-columns: minmax(0, 1fr); }
  .side-panel { position: static; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick > .btn { grid-column: 1 / -1; margin-block-start: 0; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar { position: relative; }
  .menu-acici { display: block; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .object-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  /* Menü + zil + Parola + Çıkış 320 px'e sığmazsa sağ grup alt satıra iner (yatay taşma yok). */
  .topbar { flex-wrap: wrap; }
  .views, .anchor-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .views > *, .anchor-tabs > a { flex: none; }
  .topbar { padding-inline: var(--sp-3); }
  .topbar .kbd { display: none; }
  /* Süzgeç kendi satırında, seçenekler sarılır: hiçbir seçenek kaydırmanın arkasında saklanmaz. */
  .topbar-suzgecli { flex-wrap: wrap; }
  .topbar-suzgec { order: 1; flex: 1 1 100%; }
  .quick { grid-template-columns: minmax(0, 1fr); }
  .page-head h1, .object-id h1 { font-size: var(--fs-24); }
  .lead-value { font-size: var(--fs-36); }
  .page-actions { margin-inline-start: 0; }
  .bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .alert { grid-template-columns: auto minmax(0, 1fr); }
  .alert > :last-child { grid-column: 1 / -1; justify-self: start; }
  .sc-theme { position: static; display: flex; margin: var(--sp-4) auto 0; } /* verify_overflow @320/414 */
}

@media (prefers-reduced-motion: reduce) {
  .shell *, .m-app *, .auth *, .sc-theme { transition: none !important; animation: none !important; }
  .btn.is-loading::after, .m-cta.is-loading::after { border-inline-end-color: var(--on-brand); opacity: 0.6; }
}

/* ============================================================
   EKRANA OZEL KATMAN
   Onek = ekran: .sv- 02, .sd- 03, .om- 04, .hk- 05, .cm- 06, .yp- 07,
   .kh- 08, .tk- 10, .gk- 11, .bs- 12, .th- 13. Uygulamada Jinja makrosu
   veya Flutter widget'i olarak bilesenlesir; birden cok ekranda tekrarlanan
   kaliplar once ortak secicilerle toplandi.
   ============================================================ */

/* ---- Ortak kaliplar ---- */
/* Acilir dugme oku aria-expanded ile doner */
.sv-toggle .sv-chev, .sd-toggle .sd-chev, .hk-toggle .hk-chev, .th-toggle .th-chev { transition: transform var(--dur-fast) var(--ease-out); }
.sv-toggle[aria-expanded='true'] .sv-chev, .sd-toggle[aria-expanded='true'] .sd-chev,
.hk-toggle[aria-expanded='true'] .hk-chev, .th-toggle[aria-expanded='true'] .th-chev { transform: rotate(180deg); }
/* Toplam cizgisi kesintisiz anahtar-deger listesi */
.cm-bakiye .kv, .om-panel .kv, .hk-kv { column-gap: 0; }
.cm-bakiye .kv dt, .om-panel .kv dt, .hk-kv dt { padding-inline-end: var(--sp-4); }
/* Ustte acilan H-4 penceresi */
.dialog-scrim.cm-scrim-top, .dialog-scrim.hk-scrim-top { place-items: start center; padding-block-start: var(--sp-16); }
/* Yapiskan ilk sutunun ayraci (secim kutusu + kayit no ayni hucrede, W-3) */
.sv-table .sticky-col, .om-table .sticky-col { box-shadow: inset -1px 0 0 var(--border); }
/* Nav olmayan mobil ayakta home indicator payi */
.tk-foot, .th-foot { padding-block-end: var(--sp-8); }

/* ---- 01 Dispec Panosu: aractan gelen surucu (salt okunur), atanmayi bekleyen satirlar ---- */
@media (min-width: 1101px) {
  .quick.dp-quick { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.95fr) auto; }
}
.dp-src { font-weight: 400; color: var(--muted); }
.dp-ro { display: flex; align-items: center; min-block-size: var(--h-control); font-size: var(--fs-14); font-weight: 600; overflow-wrap: anywhere; }
.dp-ro-hint { display: flex; }
.dp-ro-hint .link-btn { min-block-size: var(--sp-6); margin-inline-start: calc(var(--sp-1) * -1); font-size: var(--fs-13); }
@media (max-width: 1100px) {
  .dp-sur { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
  .dp-sur .field-label { flex-basis: 100%; }
}
.dp-pend { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border); }
.dp-pend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-block-size: var(--sp-12); padding: var(--sp-2); border-block-end: 1px solid var(--border); border-radius: var(--r-sm); }
.shell a.dp-pend-row { color: var(--text); text-decoration: none; }
.shell a.dp-pend-row:hover { background: var(--bg-hover); }
.shell a.dp-pend-row:hover .row-title { color: var(--brand-text); text-decoration: underline; }
.dp-pend li:last-child .dp-pend-row { border-block-end: 0; }
.dp-pend-row .row-sub { display: block; }
.dp-pend-row .icon-sm { color: var(--muted); }
/* Secilemeyen satir: option gorunumunde ama tiklanmaz (belge icin degil; D12 PO 13.10'dan beri uyarir) */
.dp-blocked { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--sp-10); padding: var(--sp-2) var(--sp-3); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.dp-blocked .aside { margin-inline-start: auto; font-size: var(--fs-13); color: var(--danger-text); text-decoration: none; }

/* ---- 02 Sevkiyatlar: 7 sutun cerceveye sigar, dar ekranda tablo yatay kayar (W-3) ---- */
.sv-table { min-inline-size: calc(var(--w-panel) * 2.6); }
.sv-table th, .sv-table td { padding-inline: var(--sp-3); }
.sv-table th:not(.sticky-col), .sv-table td:not(.sticky-col) { padding-inline: var(--sp-2); }
.sv-table th.num, .sv-table td.num { padding-inline-end: var(--sp-4); }
.sv-table .sv-wrap { white-space: normal; }
.sv-id { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: var(--sp-3); }
.sv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.sv-sep { inline-size: 1px; align-self: stretch; margin-block: var(--sp-1); background: var(--border); }
.sv-late { margin-block-start: var(--sp-1); }
.sv-foot-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.sv-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-fact), 1fr)); gap: 0 var(--sp-4); margin: 0; padding: 0; list-style: none; }
.sv-check { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--h-control); cursor: pointer; }
.sv-status { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sv-status[hidden] { display: none; }
@media (max-width: 900px) {
  .sv-table { min-inline-size: calc(var(--w-dialog) * 2); }
}
@media (max-width: 600px) {
  .sv-sep { display: none; }
}

/* ---- 03 Sefer Detayi: durum menusu, konum satiri, bekleme notu, bagli kayitlar (W-17) ---- */
.sd-opt { inline-size: 100%; align-items: center; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.sd-opt:hover { background: var(--bg-hover); }
.sd-opt:active { background: var(--bg-inset); }
.sd-loc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: var(--fs-15); color: var(--muted); }
.sd-loc strong { color: var(--text); font-weight: 600; }
/* Ayrac onceki ogenin sonunda: satir kirilinca yeni satir "·" ile baslamaz */
.sd-loc > strong:not(:last-child)::after, .sd-loc > span:not(:last-child)::after { content: "·"; margin-inline-start: var(--sp-2); color: var(--muted); font-weight: 400; }
.sd-docs { grid-template-columns: repeat(auto-fit, minmax(var(--w-doc), 1fr)); }
/* Taban .doc-meta (A4 belge sayfasi) 3 sutunlu grid; belge kartinda duz satir kalmali */
.sd-docs .doc-meta { display: block; }
.sd-uetds .countdown-meta { max-inline-size: 72ch; }
.sd-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-2); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border); }
.sd-links { margin: 0; padding: 0; list-style: none; }
.sd-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-block-size: var(--sp-16); padding: var(--sp-2); border-block-end: 1px solid var(--border); border-radius: var(--r-sm); }
.shell a.sd-link { color: var(--text); text-decoration: none; }
.shell a.sd-link:hover { background: var(--bg-hover); }
.sd-links li:last-child .sd-link { border-block-end: 0; }
.sd-link-icon { display: grid; place-items: center; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-sm); background: var(--bg-inset); color: var(--muted); }
.sd-link .icon-sm { color: var(--muted); }
.sd-locked { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-weight: 500; }
.sd-sub { font-weight: 400; }
.facts dd .sd-sub { font-size: var(--fs-13); }
.sd-facts { grid-template-columns: repeat(auto-fit, minmax(calc(var(--w-fact) * 0.85), 1fr)); }
.sd-facts-wide { grid-template-columns: repeat(auto-fit, minmax(calc(var(--w-fact) * 1.6), 1fr)); }
.sd-note .grow { flex-basis: calc(var(--w-fact) * 1.6); }
@media (max-width: 900px) {
  .sd-pop .popover { inset-inline-end: auto; inset-inline-start: 0; }
}
@media (max-width: 600px) {
  .sd-pop .popover { max-inline-size: calc(100vw - var(--sp-16) - var(--sp-8)); }
  .sd-shell .leg-line { display: none; }
  /* Dar ekranda bacaklar alt alta: noktalardan gecen dikey ray sirayi gosterir */
  .sd-shell .legs { grid-template-columns: minmax(0, 1fr); }
  .sd-shell .leg { padding-inline-start: calc(var(--sp-8) + var(--sp-3)); }
  .sd-shell .leg-mark { position: absolute; inset-inline-start: 0; inset-block-start: var(--sp-4); z-index: 1; }
  .sd-shell .leg::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc((var(--sp-8) - var(--line-2)) / 2); inline-size: var(--line-2); background: var(--border); }
  .sd-shell .leg:first-child::before { inset-block-start: var(--sp-4); }
  .sd-shell .leg:last-child::before { inset-block-end: auto; block-size: var(--sp-4); }
  .sd-shell .leg.is-done::before { background: var(--ok-text); }
}

/* ---- 04 On Muhasebe: liste karti, musteri grup basligi, hep acik yan panel, salt okunur KDV ---- */
.om-lead { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.om-lead-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.om-lead-sum { font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-note { margin: 0; padding: 0 var(--sp-5) var(--sp-3); color: var(--muted); }
.om-views { padding-inline: var(--sp-3); }
.om-group-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.om-group-id { flex: 1 1 auto; min-inline-size: 0; }
.om-group-name { margin: 0; font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-tight); }
.om-group-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-inline-start: auto; font-size: var(--fs-15); }
.om-group-sum strong { font-size: var(--fs-16); }
.om-others-head { border-block-start: 1px solid var(--border); margin-block-start: var(--sp-5); }
.om-bar { margin: 0 var(--sp-5) var(--sp-3); }
.om-list .om-wrap { border-inline: 0; border-radius: 0; }
.om-id { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: var(--sp-3); }
.om-table th:not(.sticky-col), .om-table td:not(.sticky-col) { padding-inline: var(--sp-3); }
.om-cust .row-sub { white-space: normal; }
.shell .om-cust a.row-title { color: var(--brand-text); text-decoration: underline; text-underline-offset: 0.2em; }
.om-cust .om-go { inline-size: var(--sp-8); padding-inline: 0 var(--sp-3); color: var(--muted); text-align: end; }
/* Yan panel hep acik; cubuktaki "Fatura bilgisi gir" yalnizca panel tablonun altina dustugunde (<=1100) gorunur */
.om-bar .om-jump { display: none; }
.om-panel h2 { line-height: var(--lh-tight); }
.om-panel-sub { margin: var(--sp-1) 0 0; color: var(--muted); }
.om-r4 { align-items: flex-start; flex-wrap: nowrap; }
.om-r4 .banner-text { font-weight: 400; }
.om-ro { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--h-control); font-weight: 600; font-size: var(--fs-15); color: var(--text); }
.om-ro .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--muted); }
.om-hint { margin: 0; }
.om-commit { inline-size: 100%; }
.om-create { justify-content: center; }
.om-create .badge { margin-inline-start: var(--sp-1); }
.om-fark { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.om-side .alert { grid-template-columns: auto minmax(0, 1fr); }
.om-side .alert > :last-child { grid-column: 2; justify-self: start; }
@media (max-width: 1100px) {
  .om-bar .om-jump { display: inline-flex; }
}
@media (max-width: 600px) {
  /* Telefonda oncelik: sefer, teslim, navlun; Konteyner (3) ve Belgeler (4) gizlenir */
  .om-table th:nth-child(3), .om-table td:nth-child(3),
  .om-table th:nth-child(4), .om-table td:nth-child(4) { display: none; }
  .om-table th:not(.sticky-col), .om-table td:not(.sticky-col) { padding-inline: var(--sp-2); }
  .om-table .sticky-col { padding-inline: var(--sp-3) var(--sp-2); }
  .om-table th.num, .om-table td.num { padding-inline-end: var(--sp-3); }
  .om-table .om-id { gap: var(--sp-2); }
  /* Diger musteriler: en eski teslim gizlenir, ad kirilir; ok (affordance) ekranda kalir */
  .om-cust th:nth-child(3), .om-cust td:nth-child(3) { display: none; }
  .om-cust th:not(.sticky-col), .om-cust td:not(.sticky-col) { padding-inline: var(--sp-2); }
  .shell .om-cust a.row-title { white-space: normal; }
  .om-note { padding-inline: var(--sp-4); }
  .om-group-head { padding-inline: var(--sp-4); }
  .om-bar { margin-inline: var(--sp-4); }
  .om-lead-sum { font-size: var(--fs-20); }
}

/* ---- 05 Nakliyeci Hakedisi: tur sekmeleri, fiyat ekle formu, fiyatsiz satir, kesinti listesi ---- */
.shell .hk-types a.view-tab { color: var(--muted); text-decoration: none; }
.shell .hk-types a.view-tab:hover { color: var(--text); }
.shell .hk-types a.view-tab[aria-current='page'] { color: var(--text); font-weight: 600; border-block-end-color: var(--brand); }
.shell .hk-types a.view-tab[aria-current='page'] .icon { color: var(--brand-text); }
.hk-shell 
.hk-banner .banner-text { flex: 1 1 16rem; margin: 0; max-inline-size: 65ch; }
.hk-banner > .icon { flex: none; }
.hk-banner > .btn { margin-inline-start: auto; }
.hk-lead { margin-block-end: var(--sp-4); }
.hk-lead .lead-value { font-size: var(--fs-36); }
.hk-toggle[aria-expanded='true'] { background: var(--bg-inset); }
.hk-price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: start; gap: var(--sp-4); }
.hk-price-row > .btn { margin-block-start: calc(var(--fs-13) * 1.5 + var(--sp-1)); }
.hk-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--h-control); margin-block-start: calc(var(--fs-13) * 1.5 + var(--sp-1)); cursor: pointer; font-size: var(--fs-14); font-weight: 500; }
.hk-sub { margin: 0; color: var(--muted); font-size: var(--fs-15); }
.hk-wrap { border-inline: 0; border-radius: 0; }
.hk-table .hk-narrow, .hk-table tr.hk-n { display: none; }
.hk-table tbody tr.hk-missing td { background: var(--danger-soft); }
.hk-table tbody tr.hk-missing .row-sub { color: var(--danger-text); }
.hk-table .hk-subhead th { position: static; background: var(--bg-subtle); color: var(--text); font-size: var(--fs-14); white-space: normal; border-block-start: 1px solid var(--border-strong); }
.hk-table tbody tr.hk-subhead:hover th { background: var(--bg-subtle); }
.hk-table tfoot .row-sub { font-weight: 400; white-space: normal; }
.hk-kv .hk-kv-sep { padding-block-start: var(--sp-2); border-block-start: 1px solid var(--border); color: var(--text); font-weight: 600; }
.hk-note { margin: var(--sp-3) 0 0; }
.hk-cuts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hk-cuts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3); padding: var(--sp-3) 0; border-block-end: 1px solid var(--border); }
.hk-cuts li:first-child { padding-block-start: 0; }
.hk-cuts li:last-child { border-block-end: 0; padding-block-end: 0; }
.hk-cuts .row-sub { white-space: normal; }
/* Kesinti kaynagi (311, 237), vergi parametresi etiketi, fatura no satiri, olgu alt satiri */
.hk-src { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: var(--sp-6); margin-block-start: var(--sp-1); font-size: var(--fs-13); }
.hk-src .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.hk-param { margin: var(--sp-3) 0 0; }
.shell .hk-param a.tag { text-decoration: none; color: var(--text); }
.shell .hk-param a.tag:hover { background: var(--bg-hover); }
.hk-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.hk-inv-kv { margin-block: var(--sp-3); }
.hk-fact-sub { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-13); font-weight: 400; }
@media (max-width: 900px) {
  .hk-price-row { grid-template-columns: minmax(0, 1fr); }
  .hk-price-row > .btn, .hk-check { margin-block-start: 0; }
  .hk-price-row > .btn { justify-self: start; }
}
/* 600 alti: Tarih ve Guzergah sutunu kalkar, Sefer hucresinde alt satir olur; fiyat sutunu ekranda kalir */
@media (max-width: 600px) {
  .hk-table th:nth-child(2), .hk-table th:nth-child(3), .hk-table td:nth-child(2), .hk-table td:nth-child(3) { display: none; }
  .hk-table .hk-narrow { display: block; white-space: normal; }
  .hk-table tr.hk-w { display: none; }
  .hk-table tr.hk-n:not([hidden]) { display: table-row; }
}

/* ---- 06 Cari Mutabakat: anahtar bilgi alt satiri, dar ekranda bakiye rakami ---- */
.cm-sub { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-13); font-weight: 400; color: var(--muted); }
.cm-text { max-inline-size: 65ch; margin: 0; }
.cm-table .cm-narrow { display: none; }
/* 7 sutun cerceveye sigsin: aciklama Fis turu hucresinde alt satir, yatay dolgu daralir */
.cm-table th, .cm-table td { padding-inline: var(--sp-3); }
.cm-table td .row-sub { white-space: normal; }
/* 600 alti: Vade, Fis turu, Fis no, Borc, Alacak sutunu kalkar; aciklama ve tutar Tarih hucresinde
   alt satir olur, yuruyen bakiye ekranda kalir (390'da dort sayi sutunu sigmiyor, bakiye tasiyordu) */
@media (max-width: 600px) {
  .cm-table th:nth-child(n+2):nth-child(-n+6), .cm-table td:nth-child(n+2):nth-child(-n+6) { display: none; }
  .cm-table .cm-narrow { display: block; white-space: normal; }
  .cm-table tfoot .cm-narrow { font-weight: 400; }
}
@media (max-width: 360px) {
  .cm-bakiye .lead-value { font-size: var(--fs-28); }
}

/* ---- 07 Yonetici Panosu: tiklanabilir cubuk ve satir (W-29), esit cubuk izi ---- */
.shell a.yp-link { color: var(--text); text-decoration: none; border-radius: var(--r-xs); transition: background-color var(--dur-fast) var(--ease-out); }
.shell a.yp-link:hover { background: var(--bg-hover); }
.shell a.yp-link:active { background: var(--bg-inset); }
.shell a.yp-link:hover .yp-u { text-decoration: underline; text-underline-offset: 0.2em; }
.yp-lead { margin-inline: calc(var(--sp-4) * -1); }
.yp-compare { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); align-self: flex-start; padding: var(--sp-1) var(--sp-2); margin-inline: calc(var(--sp-2) * -1); }
.yp-bars .bar-row { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 8.5rem; padding: var(--sp-1) var(--sp-2); margin-inline: calc(var(--sp-2) * -1); }
.yp-bars .bar-name .row-sub { display: block; font-weight: 400; }
.yp-bars .yp-gap { margin-block-start: var(--sp-1); padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--border-strong); }
.yp-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.yp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1); border-block-end: 1px solid var(--border); }
.yp-rows > li:last-child > .yp-row { border-block-end: 0; }
.yp-row .yp-u { display: block; }
.yp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-block-start: var(--sp-1); }
.yp-meta .st { white-space: normal; }
.yp-row-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yp-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.yp-note { margin: var(--sp-4) 0 0; }
.yp-strip { padding: 0; margin-inline: calc(var(--sp-4) * -1); }
/* Panel eylemleri (E4 A1-A3): menu ogesi dugme; kapsam notu; "Tablo olarak goster" */
.yp-pi { inline-size: 100%; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.yp-pi:hover { background: var(--bg-hover); }
.yp-scope { margin: 0; max-inline-size: 70ch; }
.yp-tbl-btn { margin-block-start: var(--sp-3); }
.yp-tbl-btn + .table-wrap { margin-block-start: var(--sp-2); }
/* Zarar cubukla cizilmez (kisa kirmizi cubuk pozitif okunuyordu); iz yerine durum rozeti */
.yp-loss { display: flex; align-items: center; min-inline-size: 0; }
@media (max-width: 600px) {
  .yp-bars .bar-row { grid-template-columns: minmax(0, 1fr) 8.5rem; }
  .yp-bars .yp-loss { grid-column: 1 / -1; grid-row: 2; }
  .yp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yp-strip .stat { padding-inline: var(--sp-2); }
}
/* Dar ekranda tutar adin altina iner; ok (drill-down) sagda kalir */
@media (max-width: 420px) {
  .yp-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .yp-row-value { grid-column: 1; grid-row: 2; font-size: var(--fs-16); }
  .yp-row > .icon { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 360px) {
  .yp-lead .lead-value { font-size: var(--fs-28); }
  .yp-bars .bar-row { grid-template-columns: minmax(0, 1fr) 8rem; }
}

/* ---- 08 Kaya Hafriyat: hizli giriste uzun santiye adlari, dar yan kartta cubuk ---- */
@media (min-width: 1101px) {
  .kh-quick { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.55fr) minmax(0, 1fr) auto minmax(0, 0.85fr) auto; }
}
.kh-bars .bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-2); }
.kh-bars .bar-track { grid-column: 1 / -1; grid-row: 2; }
/* Surucu: aractan gelen salt okunur deger + Degistir (alan sayilmaz, W-21 en cok 5 zorunlu) */
.kh-ro { display: flex; align-items: center; min-block-size: var(--h-control); font-size: var(--fs-15); font-weight: 600; white-space: nowrap; }
.kh-ro-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); }
.kh-ro-hint .link-btn { min-block-size: var(--sp-6); font-size: var(--fs-13); }
/* Atanmadi 0: buyuk sifir yerine duz metin */
.kh-none { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); color: var(--muted); }
.kh-none .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.kh-table .kh-narrow { display: none; }
.kh-eq { margin-block-start: var(--sp-3); }
/* 600 alti: Guzergah sutunu kalkar (Posta hucresinde alt satir olur); Varis ve durum ekranda kalir.
   "Ac" sutunu da kalkar: posta no zaten detay baglantisi, dugme 390'da kenardan tasiyordu. */
@media (max-width: 600px) {
  .kh-table th:nth-child(2), .kh-table td:nth-child(2), .kh-table th:nth-child(4), .kh-table td:nth-child(4) { display: none; }
  .kh-table th, .kh-table td { padding-inline: var(--sp-3); }
  .kh-table .kh-narrow { display: block; white-space: normal; }
  .kh-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-strip .kh-none { grid-column: 1 / -1; }
  .kh-strip .stat { padding-inline: var(--sp-2); }
}

/* ---- 09 Siradaki Isim: adim ilerletme (M-2), sakin "tumu gonderildi" seridi ---- */
.si-step { display: flex; flex-direction: column; gap: var(--sp-2); }
.si-step[hidden] { display: none; }
/* Her sey yolundayken serit renk tasimaz; dolgu yalnizca uyari durumunda (.m-sync-warn) */
.m-app a.m-sync-ok { background: transparent; color: var(--muted); font-weight: 500; border-block-end: 1px solid var(--border); }
.m-app a.m-sync-ok .icon { color: var(--ok-text); }

/* ---- 10 Teslim Kaniti: vizor yukseklige gore olceklenir, kamera secenekleri, cekilen sayfalar ---- */
.tk-step { flex: none; padding-inline-end: var(--sp-2); font-size: var(--fs-16); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-vf { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.tk-hint { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; }
.tk-vf .m-vf-hint { position: static; margin: 0; font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.tk-hint-sub { margin: 0; font-size: var(--fs-16); color: var(--sc-stage-muted); }
.tk-vf .m-vf-frame { flex: 1; min-block-size: 0; inline-size: auto; max-inline-size: 100%; }
.tk-vf .m-vf-doc { text-align: center; }
.m-cam-bar .tk-cam-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  min-inline-size: var(--m-target); min-block-size: var(--m-target);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--sc-stage-text);
  font: inherit; font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-tight);
  cursor: pointer;
}
.m-cam-bar .tk-cam-opt:hover { background: var(--sc-stage-2); }
.m-cam-bar .tk-cam-opt:active { background: var(--sc-stage-line); }
.m-cam-bar .tk-cam-opt:focus-visible { outline: none; box-shadow: 0 0 0 var(--line-2) var(--sc-bezel), 0 0 0 var(--sp-1) var(--sc-stage-text); }
.m-cam-bar .tk-flash { justify-self: start; }
.m-cam-bar .tk-gallery { justify-self: end; }
.m-cam-bar .tk-flash[aria-pressed="true"] { background: var(--sc-stage-text); border-color: var(--sc-stage-text); color: var(--sc-bezel); }
.m-cam-bar .tk-flash[aria-pressed="true"] .tk-flash-ic { fill: currentColor; }
.tk-cam-lab { display: inline-flex; align-items: center; gap: var(--sp-1); }
.tk-cam-lab .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.tk-pages { display: flex; align-items: center; gap: var(--sp-3); }
.tk-pages-title { font-size: var(--fs-16); font-weight: 600; color: var(--text); }
.tk-shut[hidden], .tk-pages [hidden] { display: none; }
/* Cekilen sayfa: 3:4 kagit eskizi (metin satirlari + imza), dosya ikonu degil */
.tk-thumb {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
  inline-size: calc(var(--m-cta) * 3 / 4);
  padding: var(--sp-2) var(--sp-1) var(--sp-1);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--bg-card); color: var(--brand-text);
}
.tk-line { block-size: var(--line-2); border-radius: var(--r-xs); background: var(--border-strong); }
.tk-line-short { inline-size: 60%; }
.tk-sign { align-self: flex-end; inline-size: 80%; block-size: auto; margin-block-start: auto; }
/* Teslim alan (TTK 857): ad + imzanin belgede oldugu notu; mobil hedef ve 16 px govde */
.tk-recv { display: grid; gap: var(--sp-1); }
.tk-recv-label { font-size: var(--fs-15); font-weight: 600; }
.tk-input { min-block-size: var(--m-target); font-size: var(--fs-16); }
.tk-recv-hint { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fs-14); color: var(--muted); }
.tk-recv-hint .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
@media (max-width: 480px) {
  .tk-vf .m-vf-frame { flex: none; inline-size: 70%; }
}

/* ---- 11 Gonderim Kuyrugu: bekleyen kayit satiri (saat anahtar bilgi), yukleniyor durumu ---- */
.gk-h { margin: 0; }
.gk-text { margin: 0; font-size: var(--fs-16); color: var(--text); }
.gk-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-14); color: var(--muted); }
.gk-note .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: var(--line-2); }
.gk-item { grid-template-columns: minmax(0, 1fr) auto; }
.gk-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-block-start: var(--sp-1); font-size: var(--fs-14); color: var(--muted); }
.gk-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-tight); color: var(--text); }
.gk-count { font-size: var(--fs-36); font-weight: 700; line-height: 1; }
.gk-time { font-size: var(--fs-14); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.gk-eta { font-size: var(--fs-20); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gk-retry.is-loading { position: relative; color: transparent; pointer-events: none; }
.gk-retry.is-loading::after { content: ""; position: absolute; inline-size: var(--icon-md); block-size: var(--icon-md); border: var(--line-2) solid var(--text); border-inline-end-color: transparent; border-radius: var(--r-full); animation: spin var(--dur-spin) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .gk-retry.is-loading::after { animation: none; border-inline-end-color: var(--text); opacity: 0.6; }
}

/* ---- 12 Bu Ayki Seferlerim: ay secimi (mobil hedef), prim rakami, gun basliklari ---- */
.bs-seg { display: grid; grid-template-columns: 1fr 1fr; }
.bs-seg button { min-block-size: var(--m-target); font-size: var(--fs-16); }
.bs-h { margin: 0; font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-tight); color: var(--text); }
.bs-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.bs-head .bs-h { flex: 1; }
.bs-figure { font-size: var(--fs-36); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.bs-text { margin: 0; color: var(--text); }
.bs-kv { column-gap: 0; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); }
.bs-kv dt { color: var(--text); }
.bs-kv dd { padding-inline-start: var(--sp-4); }
.bs-sub { display: block; font-size: var(--fs-14); color: var(--muted); }
.bs-day { padding: var(--sp-2) var(--sp-4); background: var(--bg-subtle); border-block-end: 1px solid var(--border); font-size: var(--fs-14); font-weight: 600; color: var(--text); }
.bs-item { grid-template-columns: minmax(0, 1fr) auto; }
.bs-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-14); color: var(--muted); }
.bs-amount { font-size: var(--fs-20); color: var(--text); }
.bs-report { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Demo prim notu: pilot tarifesiyle farki soyler (envanter 3, sefer primi tutarlari) */
.bs-demo { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-16); color: var(--muted); }
.bs-demo .icon { flex: none; margin-block-start: var(--line-2); }
.bs-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.bs-panel[hidden] { display: none; }
.bs-panel > * { flex-shrink: 0; }

/* ---- 13 Taseron Hakedis: tenant ust bandi, odenecek tutar, sefer dokumu gruplari, telefonda onay penceresi ---- */
.th-brand { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-inline-size: 0; }
.th-brand-name { display: block; font-size: var(--fs-14); font-weight: 600; color: var(--muted); line-height: var(--lh-tight); }
.th-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.th-title { margin: 0; font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-tight); color: var(--text); }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-16); color: var(--text); }
.th-meta > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.th-lead { display: flex; flex-direction: column; gap: var(--sp-1); }
.th-label { font-size: var(--fs-16); font-weight: 600; color: var(--text); }
.th-amount { margin: 0; font-size: var(--fs-36); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.th-unit { font-size: var(--fs-20); }
.th-card-h { margin: 0; font-size: var(--fs-16); font-weight: 600; color: var(--text); }
.th-kv { column-gap: 0; }
.th-kv dt { color: var(--text); }
.th-kv dd { padding-inline-start: var(--sp-4); }
.th-kv .th-kv-sub { padding-inline-start: var(--sp-3); font-size: var(--fs-14); font-weight: 400; color: var(--muted); }
.th-kv dd.th-kv-sub { padding-inline-start: var(--sp-4); }
.th-sub { display: block; font-size: var(--fs-14); font-weight: 400; color: var(--muted); }
.th-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-subtle); border-block-end: 1px solid var(--border); }
.th-group-title { grid-column: 1 / -1; }
.th-group-total { font-size: var(--fs-16); font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.th-app-name { display: block; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-tight); color: var(--text); }
.th-kv .kv-total { font-size: var(--fs-20); }
.th-item { grid-template-columns: minmax(0, 1fr) auto; }
.th-info { margin: 0; font-size: var(--fs-14); color: var(--muted); text-align: center; }
.th-text { margin: 0 0 var(--sp-3); font-size: var(--fs-16); color: var(--text); }
.th-dialog { padding: var(--sp-5); }
.th-dialog .dialog-actions { flex-direction: column; }

/* ============================================================
   ARANABILIR SECIMIN COMBOBOX KIPI (SPEC-hizli-giris-03, C-2; combobox.js)
   JS'siz radyo listesi aynen gorunur; JS ile liste kutunun altinda acilir
   panel olur, radyolar gizlenir, etkin aday vurgulanir.
   ============================================================ */
[data-combobox].cb-hazir { position: relative; }
[data-combobox].cb-hazir [data-cb-liste] {
  display: none;
  position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 20;
  max-block-size: 20rem; overflow: auto;
  margin-block-start: var(--sp-1); padding: var(--sp-1);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
}
[data-combobox].cb-hazir.cb-acik [data-cb-liste] { display: flex; }
[data-combobox].cb-hazir [data-cb-liste] input[type='radio'] {
  position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none;
}
[data-combobox].cb-hazir [role='option'] { min-block-size: 48px; }
[data-combobox].cb-hazir [role='option'][aria-selected='true'] { background: var(--sel-soft); box-shadow: inset 0 0 0 2px var(--ring-color); }
[data-combobox].cb-hazir .field-hint { display: none; }