/* ============================================================
   up.ai — Belediye AI Asistan Platformu · Tasarım Sistemi
   Faz 0 mockup · Saf HTML+CSS+JS · harici bağımlılık yok
   ------------------------------------------------------------
   Kullanım: her sayfa <link rel="stylesheet" href="../assets/css/tokens.css">
   Gerekenler: mock-data.js, app.js (+ sohbet sayfaları: chat-core.js)
   ============================================================ */

/* ---------- 1. Token’lar ---------- */
:root {
  color-scheme: light;
  /* Renk — mürekkep (metin) — P1-Contrast: WCAG AA 4.5:1 minimum
     Önceki: --ink-400 #8399a7 (3.2:1 FAIL), --ink-500 #5f7787 (4.6:1 sınırda)
     Yeni: --ink-400 #57707f (kart üstünde 5.21:1 →  AA), --ink-500 #455866 (8.5:1 →  AAA),
           --ink-600 #2a3a44 (12.5:1 →  AAA) */
  --ink-900: #0e1b21;
  --ink-800: #1c2f38;
  --ink-700: #33454f;
  --ink-600: #2a3a44;
  --ink-500: #455866;
  --ink-400: #57707f;
  --ink-300: #aebfc9;
  --ink-200: #d3dfe5;
  --ink-100: #e7eef2;
  --ink-050: #f2f6f8;

  /* Renk — marka (kamu turkuazı: güven + su) */
  --brand-50:  #eefaf9;
  --brand-100: #d6f2f1;
  --brand-200: #ade4e6;
  --brand-300: #7bd0d6;
  --brand-400: #45b3bf;
  --brand-500: #2198a7;
  --brand-600: #12798b;
  --brand-700: #0e6272;
  --brand-800: #0d4f5c;
  --brand-900: #0c414c;

  /* Durum renkleri */
  --ok-600:    #067647;  --ok-500: #059669;  --ok-100: #ecfdf3;  --ok-border: #a6f4c5;
  --warn-700:  #92400e;  --warn-600: #b45309; --warn-100: #fffaeb; --warn-border: #fde68a;
  --danger-700:#9f1239;  --danger-600:#c22b4a; --danger-100:#fff1f3; --danger-border:#fecdd6;
  /* row--warn/danger tablo satırı hover yüzeyi — koyu temada flip eder (sabit #fdf3d7/#ffe3e9 koyuda metni yok ediyordu) */
  --warn-100-hover: #fdf3d7;  --danger-100-hover: #ffecf0;
  --info-600:  #175cd3;  --info-100: #eff8ff; --info-200: #4d80cc; --info-border: #b2ddff;
  --violet-600:#6941c6;  --violet-100:#f4f3ff;

  /* Yüzeyler */
  --paper: #f4f7f8;
  --card:  #ffffff;
  --line:      #dce5ea;
  --line-soft: #e9f0f3;

  /* Tema-kören dolgu/yüzey çiftleri (koyu tema düzeltmeleri):
     --on-brand         brand dolgusu (brand-700/800) üstü metin — koyu temada döner
     --surface-inverse  her iki temada koyu kalan yüzey (nav/toast/fab/bulkbar)
     --switch-track     anahtar track’i — kart yüzeyinden 3:1 ayrışır
     --icon-brand       koyu temada açılan brand yüzeylerde (brand-50) ikon rengi
     --focus-halo       :focus-visible destek halesi */
  --on-brand: #ffffff;
  --surface-inverse: #0e1b21;
  --switch-track: #7d94a2;
  --icon-brand: #12798b;
  --focus-halo: rgba(14, 27, 33, .85);

  /* Tipografi */
  --font-ui: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem;    --fs-18: 1.125rem;  --fs-20: 1.25rem;
  --fs-24: 1.5rem;    --fs-30: 1.875rem; --fs-38: 2.375rem;
  --lh-tight: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7;

  /* Boşluk (4’lü ölçek) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Köşe */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Gölge */
  --sh-xs: 0 1px 2px rgba(14, 27, 33, .05);
  --sh-sm: 0 1px 2px rgba(14, 27, 33, .06), 0 2px 8px rgba(14, 27, 33, .05);
  --sh-md: 0 2px 4px rgba(14, 27, 33, .05), 0 8px 24px rgba(14, 27, 33, .09);
  --sh-lg: 0 12px 48px rgba(14, 27, 33, .16);

  /* Hareket */
  --ease: cubic-bezier(.32, .72, .35, 1);
  --tr-fast: 140ms var(--ease);
  --tr-med: 240ms var(--ease);
}

/* ---------- 2. Sıfırlama + taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--ink-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
/* Temel ikon boyutu — bağlamsal kurallar (.btn .icon vb.) bunu ezer;
   SVG’e attribute da verildiği için ikonsuz kapsayıcılarda taşma olmaz */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.badge .icon { width: 13px; height: 13px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::placeholder { color: var(--ink-400); }
::selection { background: var(--brand-200); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* RTL (sağdan sola) — Arapça, İbranice, Farsça, Urdu. dir="rtl" ile aktive olur.
   Browser varsayılan olarak metni çevirir; flex/grid ve absolute pozisyonlu
   elementler için explicit yön çevirmesi gerekebilir. */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .nav-item { padding-right: 12px; padding-left: 0; }
[dir="rtl"] .nav-item__count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .stepper .step__line { /* RTL’de line bağlantı yönü */ }
/* Chat mesaj balonları: kullanıcı balonu sağda, asistan solda (LTR’deki gibi) */
[dir="rtl"] .msg--user .msg__body { align-items: flex-start; }
[dir="rtl"] .msg--bot .msg__body { align-items: flex-end; }
/* Form alanları: icon solda değil sağda */
[dir="rtl"] .input-group > [data-icon]:first-child,
[dir="rtl"] .input-group > .icon:first-child { left: auto; right: 12px; }
[dir="rtl"] .input-group > input { padding-left: 12px; padding-right: 38px; }
/* Dropdown ok */
[dir="rtl"] .select { background-position: left 12px center; padding-left: 36px; padding-right: 13px; }
/* Tab işaretleme */
[dir="rtl"] .tab.is-active { border-bottom-color: var(--brand-600); }
/* Zaman çizelgesi: dikey bağlantı çizgisi dot kolonunu (sağ) takip eder */
[dir="rtl"] .timeline__item::before { left: auto; right: 13px; }
/* Tooltip pozisyonu */
[dir="rtl"] #up-tooltip { direction: rtl; }
/* Skip link (RTL’de sağ üstten değil sol üstten) */
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

/* Senaryo 144: Dark theme — kullanıcı sistem tercihi veya explicit seçim.
   Prefers-color-scheme: dark media query ile otomatik; up.theme.set() ile explicit.
   Token’lar override edilir — her component bu değişkenlerden okur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e1419;
    --card: #1a2329;
    --ink-900: #f2f6f8;
    --ink-800: #e7eef2;
    --ink-700: #d3dfe5;
    --ink-600: #aebfc9;
    --ink-500: #8399a7;
    --ink-400: #7f97a6;
    --ink-300: #4a6070;
    --ink-200: #33454f;
    --ink-100: #1c2f38;
    --ink-050: #182530;
    --line: #33454f;
    --line-soft: #2a3a44;
    --brand-50: #0c414c;
    --brand-100: #0e6272;
    --brand-200: #12798b;
    --brand-700: #7bd0d6;
    --brand-800: #ade4e6;
    --ok-100: #064e2f;
    --ok-500: #34d399;
    --ok-600: #6ce9a6;
    --ok-border: #35ab72;
    --warn-100: #6e3008;
    --warn-600: #fde68a;
    --warn-700: #fde68a;
    --warn-border: #d98e3f;
    --danger-100: #7a0e2a;
    --danger-600: #fda4af;
    --danger-700: #fecdd6;
    --danger-border: #dc6c86;
    --warn-100-hover: #76380c;
    --danger-100-hover: #8c1032;
    --info-100: #14306e;
    --info-600: #93c5fd;
    --info-200: #93c5fd;
    --info-border: #5580d4;
    --violet-100: #2e2657;
    --violet-600: #bdb2ff;
    --on-brand: #0e1b21;
    --switch-track: #5b7383;
    --icon-brand: #45b3bf;
    --focus-halo: rgba(255, 255, 255, .95);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --sh-md: 0 2px 8px rgba(0, 0, 0, .45);
    --sh-lg: 0 12px 48px rgba(0, 0, 0, .6);
  }
  /* Koyu tema — bileşen düzeyi düzeltmeler:
     .btn--danger dolgu üstü metin + hover guard (danger-700 artık flip ediyor),
     nav hot sayaç metni, .citation sup, .demo-fab hover, .modal kenarı, tablo/hbar/odak halkaları */
  :root:not([data-theme="light"]) .btn--danger { color: #7a0e2a; }
  :root:not([data-theme="light"]) .btn--danger:hover { background: #9f1239; color: #fff; }
  /* danger-600 flip’i (koyuda #fda4af) hot sayaç üstünde #fff metni okunmaz yapıyor —
     btn--danger kalıbıyla aynı koyu kırmızı mürekkep */
  :root:not([data-theme="light"]) .nav-item__count--hot { color: #7a0e2a; }
  :root:not([data-theme="light"]) .citation sup { color: #fff; }
  :root:not([data-theme="light"]) .demo-fab:hover { background: #1c2f38; }
  :root:not([data-theme="light"]) .modal { border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .hbar__track { box-shadow: inset 0 0 0 1px var(--switch-track); }
  :root:not([data-theme="light"]) .table tbody tr:hover { background: color-mix(in srgb, var(--brand-200) 50%, var(--card)); }
  :root:not([data-theme="light"]) .input:focus, :root:not([data-theme="light"]) .select:focus,
  :root:not([data-theme="light"]) .textarea:focus, :root:not([data-theme="light"]) .otp-cell:focus {
    box-shadow: 0 0 0 3px var(--brand-200);
  }
  :root:not([data-theme="light"]) .input.is-invalid:focus, :root:not([data-theme="light"]) .select.is-invalid:focus,
  :root:not([data-theme="light"]) .textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-100) 70%, transparent);
  }
  :root:not([data-theme="light"]) .composer:focus-within { box-shadow: 0 0 0 3px var(--brand-200), var(--sh-sm); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1419;
  --card: #1a2329;
  --ink-900: #f2f6f8;
  --ink-800: #e7eef2;
  --ink-700: #d3dfe5;
  --ink-600: #aebfc9;
  --ink-500: #8399a7;
  --ink-400: #7f97a6;
  --ink-300: #4a6070;
  --ink-200: #33454f;
  --ink-100: #1c2f38;
  --ink-050: #182530;
  --line: #33454f;
  --line-soft: #2a3a44;
  --brand-50: #0c414c;
  --brand-100: #0e6272;
  --brand-200: #12798b;
  --brand-700: #7bd0d6;
  --brand-800: #ade4e6;
  --ok-100: #064e2f;
  --ok-500: #34d399;
  --ok-600: #6ce9a6;
  --ok-border: #35ab72;
  --warn-100: #6e3008;
  --warn-600: #fde68a;
  --warn-700: #fde68a;
  --warn-border: #d98e3f;
  --danger-100: #7a0e2a;
  --danger-600: #fda4af;
  --danger-700: #fecdd6;
  --danger-border: #dc6c86;
  --warn-100-hover: #76380c;
  --danger-100-hover: #8c1032;
  --info-100: #14306e;
  --info-600: #93c5fd;
  --info-200: #93c5fd;
  --info-border: #5580d4;
  --violet-100: #2e2657;
  --violet-600: #bdb2ff;
  --on-brand: #0e1b21;
  --switch-track: #5b7383;
  --icon-brand: #45b3bf;
  --focus-halo: rgba(255, 255, 255, .95);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-md: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-lg: 0 12px 48px rgba(0, 0, 0, .6);
}
/* Koyu tema (explicit) — bileşen düzeyi düzeltmeler; @media bloğundakiyle aynı set */
:root[data-theme="dark"] .btn--danger { color: #7a0e2a; }
:root[data-theme="dark"] .btn--danger:hover { background: #9f1239; color: #fff; }
:root[data-theme="dark"] .nav-item__count--hot { color: #7a0e2a; }
:root[data-theme="dark"] .citation sup { color: #fff; }
:root[data-theme="dark"] .demo-fab:hover { background: #1c2f38; }
:root[data-theme="dark"] .modal { border: 1px solid var(--line); }
:root[data-theme="dark"] .hbar__track { box-shadow: inset 0 0 0 1px var(--switch-track); }
:root[data-theme="dark"] .table tbody tr:hover { background: color-mix(in srgb, var(--brand-200) 50%, var(--card)); }
:root[data-theme="dark"] .input:focus, :root[data-theme="dark"] .select:focus,
:root[data-theme="dark"] .textarea:focus, :root[data-theme="dark"] .otp-cell:focus {
  box-shadow: 0 0 0 3px var(--brand-200);
}
:root[data-theme="dark"] .input.is-invalid:focus, :root[data-theme="dark"] .select.is-invalid:focus,
:root[data-theme="dark"] .textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-100) 70%, transparent);
}
:root[data-theme="dark"] .composer:focus-within { box-shadow: 0 0 0 3px var(--brand-200), var(--sh-sm); }

/* P0-5: Yüksek kontrast modu — WCAG 2.2 + 5378 sayılı Kanun.
   prefers-contrast: more (macOS Increase Contrast / Windows karşıtlık bayrağı) ve
   forced-colors: active (Windows karşıtlık temaları) İKİ AYRI medya modudur;
   Chrome/Edge ikisini de eşleştirir, Firefox yalnızca forced-colors'ı.
   Alternatif palet: daha koyu mürekkep, daha doygun brand renkleri, net border’lar. */
@media (prefers-contrast: more) {
  :root {
    --ink-900: #000000;
    --ink-800: #0a1419;
    --ink-700: #182530;
    --ink-600: #2a3a44;
    --ink-500: #4a5b66;
    --brand-700: #06404a;
    --brand-800: #042e36;
    --brand-600: #0a5d6b;
    --ok-600: #044e2f;
    --warn-700: #6e3008;
    --danger-700: #7a0e2a;
    --line: #4a5b66;
    --line-soft: #2a3a44;
  }
  .card, .modal, .opt-card, .chip { border-width: 2px !important; }
  .btn { border-width: 2px !important; font-weight: 700; }
  a { text-decoration: underline; }
  /* Kullanıcı forced-colors modunda ise (Windows High Contrast) */
}
/* prefers-contrast × koyu tema kesişimi: contrast bloğunun çıplak :root'u (0,1,0)
   koyu blokların (0,2,0) UNDER'ındaki warn-700/danger-700/brand-600/line değerlerini
   sızdırıyordu — koyuya uygun karşılıklar, koyu bloklardan SONRA (geçmiş kaynak
   sırası, eşit specificity) yazılır ki kesişimde kazansın. */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-600: #45b3bf; --line: #5f7787; --warn-700: #ffd7a3; --danger-700: #ffc2c9;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --brand-600: #45b3bf; --line: #5f7787; --warn-700: #ffd7a3; --danger-700: #ffc2c9;
  }
}
@media (forced-colors: active) {
  .opt-card.is-selected { outline: 3px solid Highlight; outline-offset: 2px; }
  .badge { border: 1px solid ButtonText; }
  .btn--primary { background: Highlight; color: HighlightText; border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight !important; }
  /* Firefox/WinHC yalnızca forced-colors eşleştirdiği için güçlendirmelerin
     kopyası burada da gerekli (Chrome'da prefers-contrast bloğu zaten eşleşir).
     a { text-decoration } eklenmedi: UA forced-colors modunda link altı çizgisini
     kendisi geri koyar. */
  .card, .modal, .opt-card, .chip { border-width: 2px !important; }
  .btn { border-width: 2px !important; font-weight: 700; }
}

/* P2-4: prefers-reduced-motion — hareket azaltma isteği (vestibüler bozukluk, dikkat).
   Animasyonlar/transitions 0.01ms’ye iner, scroll-behavior auto olur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wdg-fab::after, .pulse, .spin { animation: none !important; }
}

/* P2-Focus indicator güçlendirme — WCAG 2.4.11 Focus Not Obscured + 2.4.7 Focus Visible.
   2px solid + 2px offset — daha kalın, daha kontrastlı, klavye kullanıcı için net. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--brand-500, #1e6091) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-sm, 4px);
  box-shadow: 0 0 0 1px var(--focus-halo);
}
button:focus-visible, .btn:focus-visible, a:focus-visible {
  outline-offset: 3px !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--brand-500, #1e6091);
}

/* B2: Kolay mod — yaşlı/görme zorluğu olan vatandaşlar için font + buton büyütme.
   localStorage('up-easy-mode') ile persist — sohbet.html / widget-demo.html’de toggle. */
body.easy-mode { font-size: calc(var(--fs-15) * 1.3); }
body.easy-mode .msg__bubble { font-size: calc(var(--fs-15) * 1.25); line-height: 1.7; padding: 16px 20px; }
body.easy-mode .chip { font-size: calc(var(--fs-13) * 1.25); padding: 10px 18px; }
body.easy-mode .btn { font-size: calc(var(--fs-14) * 1.2); padding: 12px 22px; }
body.easy-mode .kpi__value { font-size: calc(var(--fs-30) * 1.2); }
body.easy-mode .composer__input { font-size: calc(var(--fs-15) * 1.3); }
body.easy-mode .composer__send { width: 52px; height: 52px; }
body.easy-mode .composer__send .icon { width: 22px; height: 22px; }
body.easy-mode .composer__voice { width: 48px; height: 48px; }
body.easy-mode .page-head h1 { font-size: calc(var(--fs-24) * 1.25); }
body.easy-mode .quickreplies .chip { font-size: calc(var(--fs-14) * 1.2); padding: 12px 20px; }

/* Ay takvimi — randevu.html + admin tarafı için (yeniden kullanılabilir) */
.month-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.month-header__title { font-weight: 700; font-size: var(--fs-15); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.month-grid { display: flex; flex-direction: column; gap: 6px; }
.month-grid__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month-grid__weekdays span { text-align: center; font-size: var(--fs-11); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.month-grid__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { position: relative; aspect-ratio: 1; min-height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color var(--tr-fast), background var(--tr-fast); }
.cal-cell:hover:not(.is-disabled):not(.is-empty) { border-color: var(--brand-400); }
.cal-cell__day { font-size: var(--fs-13); font-weight: 600; color: var(--ink-900); }
.cal-cell__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok-500); }
.cal-cell.is-active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 2px var(--brand-100); }
.cal-cell.is-active .cal-cell__day { color: var(--brand-800); font-weight: 700; }
.cal-cell.is-empty { background: transparent; border: none; cursor: default; pointer-events: none; }
.cal-cell.is-empty:hover { border: none; }
.cal-cell.is-closed { background: var(--ink-100); border-color: transparent; cursor: not-allowed; color: var(--ink-400); }
.cal-cell.is-closed .cal-cell__day { color: var(--ink-400); }
.cal-cell.is-full { background: var(--warn-100); border-color: var(--warn-border); cursor: not-allowed; opacity: .7; }
.cal-cell.is-full .cal-cell__day { color: var(--warn-700); }
.cal-cell.is-disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .cal-cell { min-height: 38px; } .cal-cell__day { font-size: var(--fs-12); } }

/* B5: CSAT — konuşma sonu değerlendirme kartı (thumb + puan + yorum) */
.csat-card { background: var(--brand-50); border: 1.5px solid var(--brand-200); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.csat-card.is-done { background: var(--ok-100); border-color: var(--ok-border); }
.csat-card__title { font-weight: 700; color: var(--ink-900); font-size: var(--fs-14); }
.csat-card__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csat-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-600); }
.csat-btn:hover { border-color: var(--brand-400); color: var(--brand-700); }
.csat-btn.is-on { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.csat-btn .icon { width: 16px; height: 16px; }
.csat-select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--fs-13); background: var(--card); }
.csat-text { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-13); resize: vertical; font-family: inherit; }

/* Tablo satırı uyarıları — dilekçeler.html (`:11-16`) + admin/randevular.html için ortak */
.table tbody tr.row--warn td { background: var(--warn-100); }
.table tbody tr.row--warn:hover td { background: var(--warn-100-hover); }
.table tbody tr.row--danger td { background: var(--danger-100); }
.table tbody tr.row--danger:hover td { background: var(--danger-100-hover); }
.table tbody tr.row--warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-600); }
.table tbody tr.row--danger td:first-child { box-shadow: inset 3px 0 0 var(--danger-600); }

/* Filtre çubuğu toolbar — admin/randevular.html filtre alanı */
.booking-toolbar { padding: 12px 16px; margin-bottom: 16px; }

/* Drawer içi sayaç pill — yaklaşan randevu countdown */
.countdown-pill { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Erişilebilirlik yardımcıları (WCAG 2.1 AA hedefi) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand-700); color: var(--on-brand); padding: 10px 16px; border-radius: 0 0 var(--r-md) 0; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 3. Yerleşim ---------- */
.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); }
.container--narrow { max-width: 780px; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page-body { flex: 1; padding: var(--sp-8) 0 var(--sp-12); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-wrap { flex-wrap: wrap; }
/* Dar ekranda .row'lar (nowrap buton zincileri: operasyon-merkezi deployment
   butonları vb.) kapsayıcıyı büyütüp doküman genişliğini şişiriyordu — 640 altında
   sarar; sığan satırlarda görünüm değişmez */
@media (max-width: 640px) { .row { flex-wrap: wrap; row-gap: 8px; } }
/* Dar ekranda .row-between içindeki nowrap .btn (randevu Adım 3 onay CTA'sı)
   satıra sığmadığında buton taşıp dokümanı şişirmek yerine etiket metnini sarar */
@media (max-width: 640px) { .row-between .btn { white-space: normal; } }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: var(--sp-5); }
/* Grid ögesi min-width:auto taşması: 1fr kolonlar ögenin min-content'i yüzünden
   kapsayıcıyı büyütüyordu (dashboard kart kolonları +40..104px). Ögeler daralabilir;
   iç içerik kendi taşmasını yönetir (.table-wrap içi scroll, ellipsis, flex-wrap). */
.grid > * { min-width: 0; }
/* minmax(0,1fr): 1fr'nin auto minimum'u iç min-content'lerle (nowrap başlık, sabit kolonlu
   iç grid) track'i büyütüp dış grid'i kapsayıcıdan taşırıyordu — track her zaman daralabilir */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .grid-5 { grid-template-columns: 1fr; } }

/* ---------- 4. Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 9px 16px; font-size: var(--fs-14); font-weight: 600; line-height: 1.3;
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; }
.btn--primary { background: var(--brand-700); color: var(--on-brand); box-shadow: var(--sh-xs); }
.btn--primary:hover { background: var(--brand-800); }
.btn--secondary { background: var(--card); color: var(--ink-800); border-color: var(--line); box-shadow: var(--sh-xs); }
.btn--secondary:hover { border-color: var(--brand-300); color: var(--brand-700); }
.btn--ghost { background: transparent; color: var(--ink-600); }
.btn--ghost:hover { background: var(--ink-050); color: var(--ink-900); }
.btn--danger { background: var(--danger-600); color: #fff; }
.btn--danger:hover { background: var(--danger-700); }
.btn--ghost-danger { background: transparent; color: var(--danger-600); }
.btn--ghost-danger:hover { background: var(--danger-100); color: var(--danger-700); }
.btn--lg { padding: 12px 22px; font-size: var(--fs-16); border-radius: var(--r-lg); }
.btn--sm { padding: 5px 12px; font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md); border: none;
  background: transparent; color: var(--ink-500); cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.icon-btn:hover { background: var(--ink-050); color: var(--ink-900); }
.icon-btn .icon { width: 18px; height: 18px; }

/* ---------- 5. Rozet / çip / nokta ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--ok      { background: var(--ok-100); color: var(--ok-600); border-color: var(--ok-border); }
.badge--warn    { background: var(--warn-100); color: var(--warn-700); border-color: var(--warn-border); }
.badge--danger  { background: var(--danger-100); color: var(--danger-700); border-color: var(--danger-border); }
.badge--info    { background: var(--info-100); color: var(--info-600); border-color: var(--info-border); }
.badge--brand   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.badge--neutral { background: var(--ink-050); color: var(--ink-600); border-color: var(--line); }
.badge--violet  { background: var(--violet-100); color: var(--violet-600); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge .dot.is-pulse { animation: pulse 1.6s infinite; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: var(--fs-13); font-weight: 500; color: var(--ink-700);
  cursor: pointer; transition: border-color var(--tr-fast), color var(--tr-fast), background var(--tr-fast);
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }
.chip .icon { width: 14px; height: 14px; color: var(--ink-400); }
.chip:hover .icon { color: var(--icon-brand); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line); color: var(--ink-700); background: var(--card); }
/* Devre dışı çipler (chat-core: dolu gün / kapalı salon) — tıklama bilgi toast’ı verir,
   o yüzden pointer-events kapatılmaz (randevu.html’deki desenle aynı) */
.chip.is-disabled { opacity: .55; cursor: not-allowed; }
.chip.is-disabled:hover { border-color: var(--line); color: var(--ink-700); background: var(--card); }

/* ---------- 6. Kart ---------- */
.card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card--pad { padding: var(--sp-6); }
.card--flat { box-shadow: none; }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line-soft);
}
.card-header h2, .card-header h3 { font-size: var(--fs-15); font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.card-header h2 .icon, .card-header h3 .icon { width: 16px; height: 16px; color: var(--brand-600); }
.card-body { padding: var(--sp-6); }
.card-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line-soft); background: var(--ink-050); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* KPI kartı */
.kpi { padding: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-size: var(--fs-13); font-weight: 600; color: var(--ink-500); }
.kpi__value { font-size: var(--fs-30); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.kpi__value small { font-size: var(--fs-14); font-weight: 600; color: var(--ink-400); letter-spacing: 0; }
.kpi__trend { font-size: var(--fs-12); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kpi__trend--up { color: var(--ok-600); }
.kpi__trend--down { color: var(--danger-600); }
.kpi__trend--flat { color: var(--ink-400); }

/* ---------- 7. Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-13); font-weight: 600; color: var(--ink-700); }
.field__hint { font-size: var(--fs-12); color: var(--ink-400); }
.field__req { color: var(--danger-600); }
.input, .select, .textarea {
  width: 100%; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 13px; font-size: var(--fs-14); color: var(--ink-900);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
/* Validasyon hata durumu — VKN, KEP, OTP gibi inputlarda kullanılır.
   Focus invalid üzerindeyse kırmızı focus ring kalsın; kullanıcı düzeltmeyi bitirene kadar görünür. */
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger-600); }
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-100) 70%, transparent); }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7787' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.input--search { padding-left: 38px; }
.input--tnum { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.input-group { position: relative; }
/* data-icon span sarmalayıcısı da aynı konumu alır (hydrateIcons SVG’yi span içine gömer) */
.input-group > .icon, .input-group > [data-icon] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-400); pointer-events: none; }
.input-group > [data-icon] .icon { width: 16px; height: 16px; color: var(--ink-400); }
/* hydrate sonrası kalan span sarmalayıcı (attribute silinir) — tüm sayfalarda ortak */
.input-group > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.input-group .icon { width: 16px; height: 16px; color: var(--ink-400); }

/* OTP kutuları */
.otp-row { display: flex; gap: 10px; }
.otp-cell {
  width: 48px; height: 56px; text-align: center; font-size: var(--fs-24); font-weight: 700;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card);
  font-variant-numeric: tabular-nums; transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.otp-cell:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.otp-cell.is-filled { border-color: var(--brand-400); background: var(--brand-50); }
.otp-cell.is-error { border-color: var(--danger-600); background: var(--danger-100); }

/* Anahtar (feature flag) */
.switch { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 1; margin: 0; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--switch-track); transition: background var(--tr-med); }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-xs); transition: transform var(--tr-med); }
.switch input:checked ~ .switch__track { background: var(--brand-600); }
.switch input:checked ~ .switch__thumb { transform: translateX(16px); }
.switch input:focus-visible ~ .switch__track { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Checkbox */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand-600); cursor: pointer; flex-shrink: 0; }

/* ---------- 8. Tablo ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th {
  text-align: left; font-size: var(--fs-12); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-400); padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--ink-050); white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background var(--tr-fast); }
.table tbody tr:hover { background: var(--brand-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }
.table__id { font-weight: 600; color: var(--ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 9. Yönetim paneli iskeleti ---------- */
.shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }
/* Not: 900px altında .shell__nav artık gizlenmez — off-canvas çekmece bloğuna
   (aşağıda, temel .shell__nav tanımından SONRA) bakın. Eski display:none kuralı
   zaten çalışmıyordu: temel tanım kaynak sırasında daha sonra geldiği için onu
   eziyor, nav 100vh'lik tam genişlik blok olarak içeriğin üstünde yığılıyordu. */

.shell__nav {
  background: var(--surface-inverse); color: #aebfc9;
  display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: var(--sp-2) var(--sp-3) var(--sp-6); }
.brand__mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.brand__name { color: #fff; font-weight: 700; font-size: var(--fs-15); line-height: 1.2; }
.brand__sub { font-size: var(--fs-11); color: #8399a7; }

.nav-group { margin-top: var(--sp-5); }
.nav-group__title { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8399a7; padding: 0 12px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md);
  color: #aebfc9; font-size: var(--fs-14); font-weight: 500; cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast); text-decoration: none !important;
}
.nav-item .icon { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.is-active { background: var(--brand-600); color: #fff; }
.nav-item__count { margin-left: auto; background: rgba(255,255,255,.12); color: #fff; font-size: var(--fs-11); font-weight: 700; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.nav-item__count:empty { display: none; }
.nav-item__count--hot { background: var(--danger-600); }

.shell__main { min-width: 0; display: flex; flex-direction: column; background: var(--paper); }
.topbar {
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-8);
  min-height: 64px; background: var(--card); border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
  /* P1: uzun crumb/badge tek satırda sığmayınca 64px kutudan dikey taşıyordu —
     sarabilir; tek satırda min-height görünüm değişmez */
  flex-wrap: wrap; row-gap: 4px;
}
/* Vatandaş sayfaları: yapışkan üst bar (chat-topbar ile kullanılır) */
.vtop { position: sticky; top: 0; z-index: 20; }
.topbar__title { font-size: var(--fs-16); font-weight: 700; color: var(--ink-900); }
.topbar__crumb { font-size: var(--fs-13); color: var(--ink-400); }
.content { padding: var(--sp-8); max-width: 1600px; width: 100%; }

/* Avatar */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 700; flex-shrink: 0; }
.avatar--lg { width: 44px; height: 44px; font-size: var(--fs-16); }
.avatar--bot { background: var(--brand-700); color: var(--on-brand); border-radius: 12px; }

/* ---------- 10. Sohbet ---------- */
.chat-page { display: flex; flex-direction: column; height: 100vh; background: var(--paper); }
.chat-topbar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  background: var(--card); border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--sh-xs); z-index: 10;
  /* P0: nowrap buton zinciri doküman genişliğini büyütüyordu (sohbet@360 +319px,
     vtop sayfaları +206px) — sarar; tek satırda görünüm değişmez */
  flex-wrap: wrap; row-gap: 8px;
}
/* Vatandaş auth üst barı (giris.html) — aynı aile, sarmasız taşıyordu */
.auth-top { flex-wrap: wrap; row-gap: 8px; }
/* P0 (corrected_fix): .grow flex:1/min-width:0 olduğu için dolu barlarda tenant adı
   12-35px'e çöküp 3 satıra sarıyordu (768/360'ta ölçüldü) — min-width adı korur,
   sığmayan butonlar flex-wrap ile alt satıra iner */
.chat-topbar .grow { min-width: 120px; }
.chat-topbar__name { font-size: var(--fs-15); font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.chat-topbar__status { font-size: var(--fs-12); color: var(--ok-600); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ---------- 9b. Mobil iskelet (≤900px) + laptop ikon-nav (901-1100px) ----------
   Kanonik sınıflar (app.js toggler'ı bunları yönetir):
   .nav-toggle          topbar içindeki hamburger butonu (900 üstünde gizli)
   .nav-scrim           açık drawer arkasındaki karartma katmanı
   .shell__nav.is-open  açık drawer
   Bu blok bilinçli olarak temel .shell__nav/.topbar/.content tanımlarından
   SONRA gelir — eşit specificity'de kaynak sırası kazanır. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  /* P0: nav display:none ile erişilmezdi (14 admin sayfası). Off-canvas drawer:
     kalkıkta ekran dışında (visibility ile klavye odağı da dışarıda), .is-open'da soldan girer.
     İç scroll (overflow-y:auto) ve koyu yüzey (surface-inverse) temel tanımdan korunur. */
  .shell__nav {
    position: fixed; inset: 0 auto 0 0; z-index: 120;
    width: 280px; max-width: 84vw;
    height: 100vh; height: 100dvh;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .24s var(--ease), visibility 0s linear .24s;
    box-shadow: var(--sh-lg);
  }
  .shell__nav.is-open {
    transform: none; visibility: visible;
    transition: transform .24s var(--ease);
  }
  [dir="rtl"] .shell__nav { inset: 0 0 0 auto; transform: translateX(100%); }
  [dir="rtl"] .shell__nav.is-open { transform: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card); color: var(--ink-600); cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
  }
  .nav-toggle:hover { background: var(--ink-050); color: var(--ink-900); }
  .nav-toggle .icon { width: 20px; height: 20px; }

  /* Karartma: app.js yalnızca drawer açıkken body'e ekler; tıklama/Escape kapatır */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 110;
    border: none; padding: 0; background: rgba(14, 27, 33, .5);
    animation: fadeIn .18s var(--ease);
  }

  /* P1: dar ekranda topbar kompakt padding alır ve sarar; content padding 32→16
     (360px'te kullanılabilir genişlik 296→328px) */
  .topbar { padding: 8px 16px; row-gap: 6px; }
  .content { padding: 16px; }
}
@media (max-width: 768px) {
  /* P1: 768-900 arasında kolon daralırken crumb gizlenir (başlık kalır);
     nowrap badge artık 150px'te kesilir — topbar'ı yatay taşmaz */
  .topbar__crumb { display: none; }
  .topbar .badge { max-width: 150px; overflow: hidden; }
}
@media (max-width: 640px) {
  /* P0: sohbet üst barındaki metinli butonlar ikon-butona iner
     (min-content ~569px → ~250px; #auth-label gibi span etiketleri gizlenir) */
  .chat-topbar .btn--sm span:not([data-icon]) { display: none; }
  /* P0 (corrected_fix): sarılan satırda 36px ikon butonlar ezilip bozulmasın */
  .chat-topbar .icon-btn { flex-shrink: 0; }
}

/* P1: 901-1100px laptop bandı — 256px nav + 64px padding içerikte yalnız 581-780px
   bırakıyordu (1024'te usable, nav'ın gizli olduğu 768 ile AYNI). Nav 64px ikon-mod'a
   iner. Etiketler HTML'de metin düğümü olduğundan font-size:0 ile görselden çekilir
   (DOM'da kalır, ekran okuyucu okumaya devam eder); ≤900'de çekmece tam etiketli açılır. */
@media (min-width: 901px) and (max-width: 1100px) {
  .shell { grid-template-columns: 64px 1fr; }
  .shell__nav { padding: 20px 8px; }
  .shell__nav .brand { justify-content: center; gap: 0; padding: 8px 0 24px; }
  .brand__name, .brand__sub { display: none; }
  .nav-group { margin-top: 16px; }
  .nav-group__title { display: none; }
  .shell__nav .nav-item { justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
  .nav-item .icon { width: 20px; height: 20px; }
  .nav-item__count { display: none; }
}
/* P1: geniş tablolarda dar ekranda kolon gizleme sınıfı (sayfalar .hide-md işaretler)
   + 768 altında hücre padding'i 32→20px/kolon */
@media (max-width: 1100px) { .hide-md { display: none; } }
@media (max-width: 768px) { .table th, .table td { padding: 8px 10px; } }
.chat-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.chat-inner { max-width: 780px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }

/* Kompakt (widget) mod — gömülü sohbet penceresi (widget-demo.html) */
.chat-scroll--compact .chat-inner { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
.chat-scroll--compact .msg__bubble { font-size: var(--fs-14); padding: 10px 13px; }
.chat-scroll--compact .msg__body { max-width: 92%; }

.msg { display: flex; gap: 12px; animation: fadeUp .3s var(--ease) both; }
.msg__avatar { width: 34px; height: 34px; flex-shrink: 0; }
.msg__body { max-width: 86%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.msg--user { flex-direction: row-reverse; }
.msg--user .msg__body { align-items: flex-end; }
.msg__bubble { padding: 12px 16px; border-radius: 16px; font-size: var(--fs-15); line-height: var(--lh-relaxed); }
.msg--bot .msg__bubble { background: var(--card); border: 1px solid var(--line-soft); box-shadow: var(--sh-xs); border-top-left-radius: 6px; color: var(--ink-800); }
.msg--user .msg__bubble { background: var(--brand-700); color: var(--on-brand); border-top-right-radius: 6px; }
.msg__bubble b, .msg__bubble strong { color: var(--ink-900); font-weight: 700; }
.msg--user .msg__bubble b { color: var(--on-brand); }
.msg__bubble ul { padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.msg__time { font-size: var(--fs-11); color: var(--ink-400); }

/* Yazıyor göstergesi */
.typing { display: inline-flex; gap: 5px; padding: 14px 18px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }

/* FIX-5: stream yanıtı yazılırken yazıyor imleci + soluk metin; akış bitince normale döner */
.streaming::after { content: '▍'; margin-left: 1px; animation: pulse 1s steps(2) infinite; }
.stream-placeholder { color: var(--ink-400); }

/* Belirleyici sistem işlemi (tool call) görselleştirmesi */
.toolcall {
  border: 1px dashed var(--brand-300); background: var(--brand-50);
  border-radius: 12px; overflow: hidden; font-size: var(--fs-12); color: var(--ink-600);
}
.toolcall__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: default; font-weight: 600; color: var(--brand-800); }
.toolcall__head .icon { width: 14px; height: 14px; }
.toolcall__name { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-weight: 600; }
.toolcall__meta { margin-left: auto; display: flex; gap: 10px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.toolcall__body { padding: 8px 12px; border-top: 1px dashed var(--brand-200); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 11.5px; color: var(--ink-500); overflow-x: auto; }
.toolcall__body .k { color: var(--violet-600); } .toolcall__body .s { color: var(--ok-600); } .toolcall__body .n { color: var(--warn-700); }

/* Kaynak çipleri (citation) */
.citations { display: flex; flex-wrap: wrap; gap: 6px; }
.citation {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 600; color: var(--brand-800);
  background: var(--brand-50); border: 1px solid var(--brand-200);
  padding: 3px 10px; border-radius: 8px; cursor: default;
}
.citation .icon { width: 12px; height: 12px; }
.citation sup { font-size: 9px; background: var(--brand-200); color: var(--brand-900); border-radius: 4px; padding: 1px 4px; }

/* Doğrulanmış tutar rozeti */
.verified-amount {
  display: flex; align-items: center; gap: 10px;
  background: var(--ok-100); border: 1px solid var(--ok-border);
  border-radius: 12px; padding: 10px 14px;
}
.verified-amount__num { font-size: var(--fs-20); font-weight: 700; color: var(--ok-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verified-amount__note { font-size: var(--fs-12); color: var(--ink-600); }
.verified-amount .icon { width: 18px; height: 18px; color: var(--ok-600); flex-shrink: 0; }

/* Sohbet alt bileşenleri */
.quickreplies { display: flex; flex-wrap: wrap; gap: 8px; }
.composer { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 18px; transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.composer:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100), var(--sh-sm); }
.composer__input { flex: 1; border: none; outline: none; resize: none; background: transparent; padding: 9px 0; font-size: var(--fs-15); max-height: 120px; line-height: var(--lh-normal); }
.composer__send { width: 42px; height: 42px; border-radius: 14px; border: none; background: var(--brand-700); color: var(--on-brand); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--tr-fast), opacity var(--tr-fast); }
.composer__send:hover { background: var(--brand-800); }
.composer__send:disabled { opacity: .4; cursor: default; }
.composer__send .icon { width: 18px; height: 18px; }
.composer__voice { width: 38px; height: 38px; border: none; background: transparent; color: var(--ink-500); border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--tr-fast), background var(--tr-fast); }
.composer__voice:hover { background: var(--ink-050); color: var(--brand-700); }
.composer__voice.is-recording { color: var(--danger-600); animation: pulse 1.2s infinite; }
.composer__voice .icon { width: 18px; height: 18px; }
.composer-note { font-size: var(--fs-11); color: var(--ink-400); text-align: center; padding: var(--sp-2) var(--sp-4) var(--sp-3); }
/* a11y (WCAG 1.4.1): soluk not metnindeki bağlantılar alt çizgiyle ayrışır */
.composer-note a { text-decoration: underline; text-underline-offset: 2px; }

/* Geri bildirim (beğen/beğenme) */
.fb-row { display: flex; gap: 4px; }
.fb-btn { border: none; background: transparent; color: var(--ink-400); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--tr-fast), color var(--tr-fast); }
.fb-btn:hover { background: var(--ink-050); color: var(--ink-600); }
.fb-btn.is-on { color: var(--icon-brand); background: var(--brand-50); }
.fb-btn .icon { width: 15px; height: 15px; }

/* ---------- 11. SLA / durum ---------- */
.sla-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.sla-pill .icon { width: 13px; height: 13px; }
.sla--safe   { background: var(--ok-100); color: var(--ok-600); border-color: var(--ok-border); }
.sla--warn   { background: var(--warn-100); color: var(--warn-700); border-color: var(--warn-border); }
.sla--danger { background: var(--danger-100); color: var(--danger-700); border-color: var(--danger-border); }
.sla--done   { background: var(--ink-050); color: var(--ink-400); border-color: var(--line); }

/* Zaman çizelgesi (dilekçe akışı) */
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: 14px; position: relative; padding-bottom: var(--sp-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.timeline__item:last-child::before { display: none; }
.timeline__dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink-100); color: var(--ink-400); z-index: 1; }
.timeline__dot .icon { width: 14px; height: 14px; }
.timeline__item.is-done .timeline__dot { background: var(--ok-100); color: var(--ok-600); }
.timeline__item.is-now .timeline__dot { background: var(--brand-600); color: #fff; box-shadow: 0 0 0 4px var(--brand-100); }
.timeline__title { font-size: var(--fs-14); font-weight: 600; color: var(--ink-900); }
.timeline__meta { font-size: var(--fs-12); color: var(--ink-400); margin-top: 2px; }
.timeline__desc { font-size: var(--fs-13); color: var(--ink-600); margin-top: 4px; }

/* Adım göstergesi */
.stepper { display: flex; align-items: center; gap: 0; width: 100%; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.step__num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 700; background: var(--ink-100); color: var(--ink-400); flex-shrink: 0; transition: all var(--tr-med); }
.step__label { font-size: var(--fs-13); font-weight: 600; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step__line { flex: 1; height: 2px; background: var(--line); margin: 0 10px; min-width: 12px; }
.step.is-done .step__num { background: var(--ok-100); color: var(--ok-600); }
.step.is-done .step__label { color: var(--ink-600); }
.step.is-done .step__line { background: var(--ok-border); }
.step.is-now .step__num { background: var(--brand-700); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-100); }
.step.is-now .step__label { color: var(--ink-900); }

/* ---------- 12. Uyarı / çağrı kutusu ---------- */
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); font-size: var(--fs-13); line-height: var(--lh-normal); border: 1px solid; }
.callout .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.callout--info    { background: var(--info-100); border-color: var(--info-border); color: var(--info-600); }
.callout--info .icon { color: var(--info-600); }
.callout--warn    { background: var(--warn-100); border-color: var(--warn-border); color: var(--warn-700); }
.callout--warn .icon { color: var(--warn-600); }
.callout--ok      { background: var(--ok-100); border-color: var(--ok-border); color: var(--ok-600); }
.callout--ok .icon { color: var(--ok-600); }
.callout--danger  { background: var(--danger-100); border-color: var(--danger-border); color: var(--danger-700); }
.callout--danger .icon { color: var(--danger-600); }
.callout b { font-weight: 700; }

/* ---------- 13. Sekmeler ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { padding: 10px 16px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-500); border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--tr-fast), border-color var(--tr-fast); }
.tab:hover { color: var(--ink-900); }
.tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* ---------- 14. Modal + Toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(14, 27, 33, .5); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); animation: fadeIn .18s var(--ease); }
.modal { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; animation: fadeUp .22s var(--ease); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.modal__head h3 { font-size: var(--fs-16); font-weight: 700; }
.modal__body { padding: var(--sp-6); }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line-soft); background: var(--ink-050); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Sağ çekmece (drawer): modal-backdrop ile birlikte kullanılır */
.modal--sheet { justify-content: flex-end; padding: 0; }
.drawer { max-width: 560px; height: 100vh; max-height: 100vh; border-radius: 24px 0 0 24px; animation: slideIn .25s var(--ease); }

/* P1: bottom 20→72 — demo-fab (bottom:20, ~40px) ve sticky .kb-bulkbar (bottom:12,
   ~49px) aynı köşeyi paylaşıyordu; toast artık üstlerinden başlar. Admin kabuğunda
   bulkbar'ın üstünde biraz daha yüksekten. Drawer (sağ sayfa) footer butonları da
   [vh-45..vh-21] bandında kaldığından 72px tostu artık örtmez. */
.toast-host { position: fixed; bottom: 72px; right: 20px; z-index: 150; display: flex; flex-direction: column; gap: 10px; }
body:has(.shell) .toast-host { bottom: 84px; }
/* P1 (bilgi-bankasi 209): görünür .kb-bulkbar (sticky bottom:12) toast'ın altında
   kalmasın — seçiliyken Yayına al / Taslağa çek / Sil butonları tıklanamaz olur.
   CDP gerçek ölçüm (360px): bar 3 satıra sarılıp h≈123px → max footprint 12+123=135px;
   140px barı tümüyle temizler (bulgu metnindeki 132px, 2 satırlık ~94px varsayımına
   dayanıyordu; gerçek render daha yüksek). :has'sız tarayıcıya 1100 altı fallback —
   kaynakta 640 bloğundan önce durur, mobildeki sol-alt kuralı baskın kalır. */
body:has(.kb-bulkbar:not(.hide)) .toast-host { bottom: 140px; }
@media (max-width: 1100px) { .toast-host { bottom: 140px; } }
/* P1: 640 altında toast sol alta geçer — sağ alttaki wdg-fab (bottom:88) ve
   demo-fab ile köşe paylaşımını tam bırakır */
@media (max-width: 640px) {
  .toast-host { right: auto; left: 16px; bottom: 16px; }
  .toast { max-width: calc(100vw - 32px); }
}
.toast { display: flex; align-items: center; gap: 10px; background: var(--surface-inverse); color: #fff; font-size: var(--fs-13); font-weight: 500; padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--sh-lg); animation: fadeUp .25s var(--ease); max-width: 380px; cursor: pointer; }
.toast .icon { width: 16px; height: 16px; flex-shrink: 0; }
.toast--ok .icon { color: #6ce9a6; } .toast--danger .icon { color: #fda4af; }

/* ---------- 15. Boş durum ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--sp-16) var(--sp-6); }
.empty__icon { width: 56px; height: 56px; border-radius: 18px; background: var(--brand-50); color: var(--icon-brand); display: flex; align-items: center; justify-content: center; }
.empty__icon .icon { width: 26px; height: 26px; }
.empty__title { font-size: var(--fs-16); font-weight: 700; color: var(--ink-900); }
.empty__desc { font-size: var(--fs-13); color: var(--ink-500); max-width: 380px; }

/* ---------- 16. Sayfa üstü / tipografi yardımcıları ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-24); font-weight: 700; color: var(--ink-900); letter-spacing: -.3px; }
.page-head .sub { font-size: var(--fs-14); color: var(--ink-500); margin-top: 4px; }

.text-xs { font-size: var(--fs-12); } .text-sm { font-size: var(--fs-13); } .text-md { font-size: var(--fs-14); } .text-lg { font-size: var(--fs-16); }
.text-dim { color: var(--ink-500); } .text-faint { color: var(--ink-400); } .text-ink { color: var(--ink-900); }
.text-ok { color: var(--ok-600); } .text-danger { color: var(--danger-600); } .text-warn { color: var(--warn-600); } .text-brand { color: var(--brand-700); }
.fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }
.nowrap { white-space: nowrap; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.hide { display: none !important; }

/* ---------- 17. Vatandaş kapak öğeleri ---------- */
/* Hero dolgu-yüzeyidir: duraklar bilinçli LITERAL’dir (koyu temada flip etmez),
   böylece #fff başlık / alt metin / CTA iki temada da aynı kontrastta kalır. */
.hero { background: linear-gradient(160deg, #0c414c, #12798b 55%, #0e6272); color: #fff; border-radius: var(--r-xl); padding: var(--sp-12); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(173,228,230,.22), transparent); }
.hero h1 { font-size: var(--fs-38); font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.hero p { color: #eaf7f8; font-size: var(--fs-16); max-width: 560px; }
.hero .btn--primary { background: #fff; color: #0d4f5c; }
.hero .btn--primary:hover { background: #eefaf9; }

.module-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); height: 100%; }
.module-card__icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.module-card__icon .icon { width: 22px; height: 22px; }
.module-card h3 { font-size: var(--fs-18); font-weight: 700; }
.module-card__features { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-13); color: var(--ink-600); }
.module-card__features li { display: flex; gap: 8px; align-items: flex-start; }
.module-card__features .icon { width: 15px; height: 15px; color: var(--ok-600); flex-shrink: 0; margin-top: 2px; }

.trust-strip { display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: center; padding: var(--sp-6) 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--ink-600); font-weight: 500; }
.trust-item .icon { width: 17px; height: 17px; color: var(--brand-600); }

/* Demo paneli (sağ alt köşe, sunum aracı) */
.demo-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-inverse); color: #fff; border: none; border-radius: var(--r-pill); padding: 10px 18px; font-size: var(--fs-13); font-weight: 700; cursor: pointer; box-shadow: var(--sh-lg); }
.demo-fab .icon { width: 15px; height: 15px; }
.demo-fab:hover { background: var(--ink-800); }
.demo-panel { position: fixed; right: 20px; bottom: 68px; z-index: 95; width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-5); animation: fadeUp .2s var(--ease); }
.demo-panel h4 { font-size: var(--fs-13); font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 7px; margin-bottom: var(--sp-3); }
.demo-panel h4 .icon { width: 14px; height: 14px; color: var(--warn-600); }
.demo-panel .field + .field { margin-top: var(--sp-3); }
.demo-panel .check { font-size: var(--fs-13); color: var(--ink-700); padding: 4px 0; }
.demo-note { font-size: 11px; color: var(--ink-400); margin-top: 10px; line-height: 1.5; }

/* ---------- 18. Animasyonlar ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* Mini bar chart (raporlar) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: var(--sp-2); }
.bars__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars__bar { width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); transition: transform var(--tr-med); min-height: 3px; }
.bars__bar:hover { filter: brightness(1.12); }
.bars__label { font-size: 10.5px; color: var(--ink-400); font-weight: 600; }
.bars__value { font-size: 10.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* Donut (raporlar) — conic-gradient ile */
.donut { width: 132px; height: 132px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut::after { content: ''; position: absolute; inset: 18px; background: var(--card); border-radius: 50%; }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut__center b { font-size: var(--fs-24); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.donut__center span { font-size: var(--fs-11); color: var(--ink-400); font-weight: 600; }
.legend { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-13); }
.legend__item { display: flex; align-items: center; gap: 8px; color: var(--ink-600); }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend__val { margin-left: auto; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* HBar (raporlar) */
.hbar { display: flex; flex-direction: column; gap: 12px; }
.hbar__row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 12px; font-size: var(--fs-13); }
/* P2: grid-2 kartlarda 641-960px arasında track 4-68px'e dejenere oluyordu —
   1100 altında sabit kolonlar daralır (150→110, 52→44), label ellipsis'i devralır */
@media (max-width: 1100px) {
  .hbar__row { grid-template-columns: minmax(0, 110px) 1fr 44px; gap: 8px; }
}
.hbar__label { color: var(--ink-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar__track { height: 10px; background: var(--ink-050); border-radius: 999px; overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }
.hbar__val { text-align: right; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* Entegrasyon kartları */
.int-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.int-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.int-card__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.int-card__icon .icon { width: 20px; height: 20px; }
.int-card h4 { font-size: var(--fs-15); font-weight: 700; color: var(--ink-900); }
.int-card__meta { font-size: var(--fs-12); color: var(--ink-400); display: flex; flex-direction: column; gap: 3px; }
.int-card__meta b { color: var(--ink-600); font-weight: 600; }
.int-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); font-size: var(--fs-12); color: var(--ink-400); }

.icon-tile--ok     { background: var(--ok-100); color: var(--ok-600); }
.icon-tile--warn   { background: var(--warn-100); color: var(--warn-600); }
.icon-tile--danger { background: var(--danger-100); color: var(--danger-600); }
.icon-tile--brand  { background: var(--brand-50); color: var(--brand-700); }
.icon-tile--info   { background: var(--info-100); color: var(--info-600); }
.icon-tile--violet { background: var(--violet-100); color: var(--violet-600); }

/* ===== up.ai — Hard gate eklemeleri =====
   .uyz-rozeti             EU AI Act Md.50 kalıcı rozet (üst bar akışında, statik)
   .kvkk-aydinlatma        KVKK m.11 aydınlatma snippet (callout--info bazlı)
   .toolcall-confirm       chat-core human-in-the-loop onay chip’i
   .kvkk-ticari-checkbox   KVKK 2025/1072 ticari elektronik ileti checkbox’ı (ayrı tutulmuş)
   .otp-cell               6-haneli OTP input hücresi (56x56, focus ring, auto-advance)
   .uyz-consent-banner     Üretken Yapay Zekâ ilk onay banner’ı
*/

/* P0: rozet artık viewport köşesinde fixed DEĞİL — üst barın (topbar/chat-topbar/vtop)
   akışında son statik öğe olarak sağda durur (app.js relocateUyzRozet taşır).
   margin-left:auto flex barlarda sağa yaslar; fixed kalıntıları (top/right/z) temizlendi.
   Böylece 'Asistana Sor', ikon butonlar ve operatör avatarının ÜSTÜNE binmez. */
.uyz-rozeti {
  position: static; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: #0e7490; color: #fff;               /* a11y: AAA — opak, alpha yok */
  border: 1px solid var(--brand-700); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: var(--fs-12); font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: background var(--tr-fast), transform var(--tr-fast);
}
.uyz-rozeti:hover { background: var(--brand-700); color: var(--on-brand); transform: translateY(-1px); }
.uyz-rozeti .icon { width: 14px; height: 14px; }

/* a11y (axe link-in-text-block, M6 turu): soluk metin akışındaki bağlantılar
   yalnız renkle değil alt çizgiyle de ayrışır — WCAG 1.4.1 */
.text-faint a, .text-dim a { text-decoration: underline; text-underline-offset: 2px; }
.text-faint a:hover, .text-dim a:hover { text-decoration-thickness: 2px; }

.kvkk-aydinlatma {
  font-size: var(--fs-13); line-height: 1.5;
  border: 1px solid var(--info-200, #93c5fd);
}
.kvkk-aydinlatma summary { list-style: none; outline: none; }
.kvkk-aydinlatma summary::-webkit-details-marker { display: none; }
.kvkk-aydinlatma summary .icon { width: 14px; height: 14px; color: var(--info-600, #1d4ed8); }

.toolcall-confirm {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 8px 0; padding: 12px 14px;
  background: var(--warn-100); color: var(--warn-700, #92400e);
  border: 1.5px solid var(--warn-border, #fbbf24); border-radius: var(--r-md);
  font-size: var(--fs-14); font-weight: 600;
  min-height: 44px;
}
.toolcall-confirm .icon { width: 18px; height: 18px; color: var(--warn-600, #d97706); }
.toolcall-confirm .actions { display: flex; gap: 6px; }
/* P2: 480 altında onay satırı metni 73px'e sıkışıyordu (sabit icon+aksiyonlar kaymadan) —
   metin üstte tam genişlik, İptal/Onayla altta sağda */
@media (max-width: 480px) {
  .toolcall-confirm { flex-wrap: wrap; align-items: flex-start; }
  .toolcall-confirm .actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
}

.kvkk-ticari-checkbox {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 6px; padding: 10px 12px;
  background: var(--ink-050); border: 1px dashed var(--ink-200);
  border-radius: var(--r-sm); font-size: var(--fs-12); color: var(--ink-600);
}
.kvkk-ticari-checkbox input { margin-top: 2px; flex-shrink: 0; }
.kvkk-ticari-checkbox b { color: var(--ink-700); }

/* 6 haneli OTP hücreleri (NIST SP 800-63B §5.1.4 uyumlu).
   P1: 6×56+5×8=376px, dar formda (254-270px) 4+2 olmak üzere İKİ satıra bölünüyordu —
   artık tek satır: hücreler orantılı küçülür. Dikkat: bu clamp yalnız .otp-grid
   hücrelerine uygulanır; 583. satırdaki .otp-row varyantı (48x56) korunur. */
.otp-grid { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.otp-grid .otp-cell {
  width: clamp(34px, calc((100% - 40px) / 6), 56px);
  height: clamp(48px, 14vw, 64px);
  font-size: clamp(18px, 5vw, 28px);
}
.otp-cell {
  width: 56px; height: 64px; text-align: center;
  font: 600 28px/1 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-900);
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.otp-cell:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.otp-cell:disabled { background: var(--ink-100); color: var(--ink-400); cursor: not-allowed; }
.otp-cell.otp-cell--ok { border-color: var(--ok-500); background: var(--ok-100); }

.uyz-consent-banner {
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r-md); color: var(--ink-800);
}
.uyz-consent-banner .icon { width: 20px; height: 20px; color: var(--brand-700); flex-shrink: 0; }
.uyz-consent-banner a { color: var(--brand-700); text-decoration: underline; }
.uyz-consent-banner a:hover { color: var(--brand-800); }

.icon-tile--ink    { background: var(--ink-050); color: var(--ink-500); }

/* ---------- 19. Sihirbaz / Kurulum Bileşenleri (kurulum.html) ----------
   Tekrarlanabilir bileşenler: wiz-layout, steps-nav, opt-card, chan-row,
   hue-preview, dropzone, gr-row, cert-level, sum-row, launch-ok,
   origin-row, dns-code, dns-step, text-link, ladder.
   kurulum.html içinde sayfa-spesifik inline style yok; tüm varyasyonlar
   burada yaşar ve başka onboarding akışları (örn. yeni entegrasyon wizard)
   aynı class’ları kullanabilir. */

/* İki kolonlu sihirbaz iskeleti: sol adım listesi + sağ içerik.
   P1: kırılım 960→1100 — shell nav (900) ile 961-1100 arasında ÇİFT kenar çubuğu
   (256+260+20+64=600px krom) oluşuyordu; paket kartları 91-137px'e sıkışıyordu. */
@media (max-width: 1100px) {
  .wiz-layout { grid-template-columns: 1fr; }
  .wiz-layout__nav { position: static; }
}

/* Sol: dikey adım listesi (tıklanabilir) */
.steps-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 84px; }

/* Mobil: dikey adım listesi →  yatay scroll edilebilir kompakt bar.
   Kullanıcı parmağıyla yana kaydırarak adım görebilir; sticky kalmaz (ekran alanı kısıtlı).
   .is-now hâlâ görsel olarak işaretli kalır. (1100: wiz-layout kırılımıyla hizalı) */
@media (max-width: 1100px) {
  .wiz-layout__nav { padding: 6px 4px !important; }
  .steps-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding: 4px 6px; position: static; }
  .steps-nav__item { flex-shrink: 0; min-width: 130px; padding: 8px 10px; }
  .steps-nav__meta { display: none; }
  .steps-nav__item.is-done .steps-nav__meta::after { display: none; }
}
@media (max-width: 480px) {
  .steps-nav__item { min-width: 110px; }
  .steps-nav__title { font-size: var(--fs-13); }
  .steps-nav__num { width: 22px; height: 22px; font-size: var(--fs-11); }
}
.steps-nav__item {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md); border: none; background: transparent;
  cursor: pointer; font: inherit; color: var(--ink-600); width: 100%;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.steps-nav__item:hover { background: var(--brand-50); color: var(--brand-800); }
.steps-nav__item[disabled] { cursor: not-allowed; opacity: .55; }
.steps-nav__item.is-now { background: var(--brand-50); color: var(--brand-800); box-shadow: inset 0 0 0 1px var(--brand-200); }
.steps-nav__num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 700; background: var(--ink-100); color: var(--ink-400);
  transition: all var(--tr-med);
}
.steps-nav__item.is-done .steps-nav__num { background: var(--ok-100); color: var(--ok-600); }
.steps-nav__item.is-now .steps-nav__num { background: var(--brand-700); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-100); }
.steps-nav__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.steps-nav__title { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.steps-nav__meta { font-size: var(--fs-11); color: var(--ink-400); line-height: 1.4; }
.steps-nav__item.is-now .steps-nav__title { color: var(--ink-900); }
.steps-nav__item.is-done .steps-nav__meta::after { content: ' · tamam'; color: var(--ok-600); font-weight: 600; }
.steps-nav__num .icon { width: 13px; height: 13px; }

/* Seçim kartları (radio) — paket, kanal, altyapı.
   Tek-tık seçim kartları; radio input gizli, görsel feedback sağlanır. */
.opt-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 14px 16px; cursor: pointer; height: 100%;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}
.opt-card:hover { border-color: var(--brand-400); }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card.is-selected { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100), var(--sh-sm); background: var(--brand-50); }
.opt-card:focus-within { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.opt-card__radio {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--ink-300); position: relative; transition: border-color var(--tr-fast);
}
.opt-card__radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-700);
  transform: scale(0); transition: transform var(--tr-med);
}
.opt-card.is-selected .opt-card__radio { border-color: var(--brand-700); }
.opt-card.is-selected .opt-card__radio::after { transform: scale(1); }
.opt-card__title { font-size: var(--fs-14); font-weight: 700; color: var(--ink-900); }
.opt-card__desc { font-size: var(--fs-12); color: var(--ink-600); line-height: 1.5; }
.opt-card__price { font-size: var(--fs-16); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* Öne çıkarılmış kart (paket 3, "en çok seçilen" gibi vurgular) */
.opt-card--featured { border-color: var(--brand-300); }
.opt-card--featured .opt-flag {
  position: absolute; top: -9px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: var(--brand-700); color: var(--on-brand); padding: 2px 8px; border-radius: var(--r-pill);
}

/* Kanal satırı: switch + etiket + not (kanal seçimi için yatay kart) */
.chan-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.chan-row .icon-tile { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* opt-card içinde küçük ikon kutusu (domain adımı kart üstü) */
.opt-card .icon-tile { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Origin input radio-kart içinde tıklanabilir kalsın (gizli input override) */
.opt-card input[type="text"] { position: static; opacity: 1; pointer-events: auto; width: auto; }

/* Logo rengi hue slider önizleme */
.hue-preview { display: flex; align-items: center; gap: 12px; }
.hue-preview__mark {
  width: 40px; height: 40px; border-radius: 12px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--tr-med);
}
.hue-preview__mark .icon { width: 20px; height: 20px; }
input[type="range"].hue-slider { flex: 1; accent-color: var(--brand-600); }

/* Excel/CSV içe aktarma damla alanı */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 1.5px dashed var(--ink-200); border-radius: var(--r-md); padding: 22px 16px;
  color: var(--ink-500); background: var(--ink-050); transition: border-color var(--tr-fast), background var(--tr-fast);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--brand-400); background: var(--brand-50); }
.dropzone .icon { width: 22px; height: 22px; color: var(--icon-brand); }

/* Golden-record karşılaştırma tablosunda satır vurgusu */
.gr-row--ok td { background: color-mix(in srgb, var(--ok-100) 55%, transparent); }
.gr-row--warn td { background: color-mix(in srgb, var(--warn-100) 55%, transparent); }
.gr-row--err td { background: color-mix(in srgb, var(--danger-100) 55%, transparent); }
.gr-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* S1/S2/S3 rozet açıklama listesi */
.cert-level { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.cert-level:first-of-type { border-top: none; }

/* Özet sayfası satırları */
.sum-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: var(--fs-14); }
.sum-row:last-child { border-bottom: none; }
.sum-row .k { color: var(--ink-500); font-weight: 600; }
@media (max-width: 640px) { .sum-row { grid-template-columns: 1fr; gap: 4px; } }

/* Yayın başarılı durumu */
.launch-ok { text-align: center; padding: var(--sp-10) var(--sp-6); }
.launch-ok__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--sp-4);
  background: var(--ok-100); color: var(--ok-600); border: 1px solid var(--ok-border);
  display: flex; align-items: center; justify-content: center;
}
.launch-ok__icon .icon { width: 30px; height: 30px; }

/* Domain adımı: origin beyan satırı (input + ok rozeti) */
.origin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.origin-row .input { flex: 1; min-width: 200px; }

/* Domain adımı: mono kod bloğu + kopyala butonu */
.dns-code {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--ink-050); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px 8px 12px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px; color: var(--ink-700); overflow-x: auto; white-space: nowrap;
}
.dns-code__val { flex: 1; min-width: 0; }
.dns-code .btn { flex-shrink: 0; }

/* Token yaşam süresi görseli */
.dns-token-info { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ink-050); border-radius: var(--r-sm); font-size: var(--fs-13); }

/* 3 mini adımlı doğrulama simülasyonu */
.dns-step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.dns-step__num {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-11); font-weight: 700; background: var(--ink-100); color: var(--ink-500);
}
.dns-step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dns-step.is-done .dns-step__num { background: var(--ok-100); color: var(--ok-600); }

/* Küçük metin linki (hata senaryosu vb.) */
.text-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px;
}
.text-link:hover { color: var(--brand-800); }

/* İstek merdiveni tablosu — kompakt padding */
.ladder td, .ladder th { padding-top: 8px; padding-bottom: 8px; }

/* Vendor toplam maliyet özeti — adım 4’te birden fazla vendor seçilirse gösterilir */
.vendor-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; margin-top: 12px;
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r-md); font-size: var(--fs-14);
}
.vendor-total__label { color: var(--ink-700); font-weight: 600; }
.vendor-total__value { color: var(--brand-800); font-weight: 700; font-variant-numeric: tabular-nums; }
.vendor-total__value small { font-weight: 500; color: var(--ink-500); margin-left: 4px; }

/* Bulk işlem barı — admin tabloları için (bilgi bankası, dilekçeler, vb.)
   Seçim yapılınca görünür; birden fazla satır işlemek için sticky alt bar. */
.kb-bulkbar {
  position: sticky; bottom: 12px; z-index: 5;
  margin-top: 12px; padding: 10px 16px;
  background: var(--surface-inverse); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  animation: fadeUp .2s var(--ease);
}
.kb-bulkbar .btn--secondary { color: #e7eef2; border-color: rgba(255,255,255,.2); }
.kb-bulkbar .btn--secondary:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.kb-bulkbar .btn--ghost { color: #aebfc9; }
.kb-bulkbar .btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Platform oturumu şeridi — up.role.get()==='platform' ile açılan merkez ekranlarında
   (operasyon merkezi, kurulum ?mode=new) topbar’ın hemen altında ince bilgi satırı.
   Gerçek üründe bu ekranlar tenant JWT ister; mock’ta izleme amaçlı gösterilir. */
.platform-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px var(--sp-8);
  font-size: var(--fs-12); color: var(--brand-800);
  background: var(--brand-50); border-bottom: 1px solid var(--brand-100);
}
.platform-strip .icon { width: 13px; height: 13px; flex-shrink: 0; }