:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --fg: #182230;
  --fg-muted: #5b6878;
  --line: #d9dfe7;
  --heat: #2f6fb0;
  --sole: #1f8a4c;
  --bad: #b3261e;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --panel: #1c1f24;
    --fg: #eef1f5;
    --fg-muted: #98a2af;
    --line: #333941;
    --heat: #4f8fe8;
    --bad: #ff8a80;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
[hidden] { display: none !important; }

.sv-page { display: grid; gap: 20px; max-width: 1500px; margin-inline: auto; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sv-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.sv-head { display: grid; gap: 6px; flex: 1 1 20rem; min-width: 0; }
.sv-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.9rem; text-wrap: balance; }
.sv-lead { margin: 0; max-width: 70ch; color: var(--fg-muted); }
.sv-lead b { font-weight: 600; color: var(--fg); }
.cikis-dugme { font: inherit; font-size: .85rem; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }

.sv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.sv-kpi { display: grid; gap: 4px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.sv-kpi-v { font-family: var(--serif); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.sv-kpi-l { color: var(--fg-muted); font-size: .82rem; }

.sv-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.sv-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font: inherit; color: var(--fg-muted); cursor: pointer; }
.sv-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 600; }
.sv-tab:focus-visible, .sv-sort:focus-visible, .cikis-dugme:focus-visible, .giris-dugme:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.sv-section { display: grid; gap: 20px; min-width: 0; }
.sv-card { display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.sv-card-head { display: grid; gap: 4px; }
.sv-card h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.sv-note { margin: 0; color: var(--fg-muted); font-size: .82rem; max-width: 80ch; }
.sv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sv-input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.sv-search { flex: 1 1 14rem; }
.sv-count { color: var(--fg-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

.sv-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .82rem; color: var(--fg-muted); }
.sv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv-sw { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.p30 { --p: 30%; }
.p65 { --p: 65%; }
.p100 { --p: 100%; }

.sv-wrap { position: relative; min-width: 0; }
/* Tablolar sayfayla birlikte kayar. Dar ekranda yatay kaydırma, geniş ekranda sayfaya yapışan başlık satırı kullanılır. */
.sv-scroll { overflow-x: auto; }
@media (min-width: 1500px) {
  .sv-scroll { overflow: visible; }
  .sv-table th { position: sticky; top: 0; }
}
.sv-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; font-size: .82rem; }
.sv-table th { z-index: 1; background: var(--panel); text-align: left; font-weight: 600; color: var(--fg-muted); padding: 4px; white-space: nowrap; }
.sv-sort { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sv-table th[aria-sort="ascending"] .sv-sort::after { content: " ↑"; }
.sv-table th[aria-sort="descending"] .sv-sort::after { content: " ↓"; }
.sv-table th[aria-sort] .sv-sort { color: var(--fg); }
.sv-table td { padding: 4px; vertical-align: middle; }
.sv-table td.sv-key { white-space: nowrap; }
.sv-table th.sv-num, .sv-table td.sv-num { text-align: right; }
.sv-table th.sv-m, .sv-table td.sv-m { text-align: center; min-width: 6.5rem; }
.sv-m { border-radius: 3px; }
.sv-fill { background: color-mix(in srgb, var(--heat) var(--p, 0%), transparent); }
.sv-hot { color: #fff; }
.sv-peak { box-shadow: inset 0 0 0 2px var(--fg); font-weight: 600; }
.sv-sole { background: var(--sole); color: #fff; font-weight: 600; }
.sv-zero { color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.sv-none { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line) 3px 4px); }
.sv-names { min-width: 16rem; color: var(--fg-muted); }
.sv-names div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sv-tip { position: absolute; z-index: 3; max-width: min(26rem, 90%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .25); padding: 6px 10px; font-size: .82rem; pointer-events: none; display: none; }
.sv-tip.on { display: block; }
.sv-tip-h { color: var(--fg-muted); }
.sv-method { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 6px; color: var(--fg-muted); max-width: 80ch; }
.sv-hata { color: var(--bad); }

body.tek-acik .tek-haric { display: none; }

.giris-govde { min-height: 100vh; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.giris-kart { width: min(100%, 24rem); display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.giris-kart h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; text-wrap: balance; }
.giris-form { display: grid; gap: 8px; }
.giris-form label { font-size: .85rem; font-weight: 600; }
.giris-form .sv-input { width: 100%; padding: 10px 12px; }
.giris-hata { margin: 0; color: var(--bad); font-size: .85rem; }
.giris-dugme { font: inherit; font-weight: 600; color: var(--bg); background: var(--fg); border: 0; border-radius: 8px; padding: 10px 12px; margin-top: 4px; cursor: pointer; }

/* Kullanıcı, tıklanır sayı kutuları, görüşme alanı ve giriş kayıtları */
:root { --ok-text: #1a7f43; }
@media (prefers-color-scheme: dark) { :root { --ok-text: #4cc380; } }

.sv-ben { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.sv-ben-ad { color: var(--fg-muted); font-size: .85rem; }
.sv-ben-sec { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--fg-muted); }

button.sv-kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.sv-kpi:hover { border-color: var(--fg-muted); }
button.sv-kpi:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
button.sv-kpi[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.sv-kpi-git { color: var(--fg-muted); font-size: .72rem; }
button.sv-kpi:hover .sv-kpi-git, button.sv-kpi[aria-pressed="true"] .sv-kpi-git { color: var(--fg); }

.sv-dugme { cursor: pointer; }
.sv-table th.sv-gorus, .sv-table td.sv-gorus { white-space: nowrap; }
.sv-table td.sv-gorus { padding: 2px 4px; }
.g-satir { display: flex; gap: 4px; align-items: center; }
.g-btn { font: inherit; font-size: .72rem; line-height: 1.2; color: var(--fg-muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.g-btn:hover { color: var(--fg); border-color: var(--fg-muted); }
.g-btn[aria-pressed="true"] { background: var(--sole); border-color: var(--sole); color: #fff; }
.g-btn[aria-pressed="true"]::before { content: "✓ "; }
.g-not { font: inherit; font-size: .75rem; width: 11rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.g-btn:focus-visible, .g-not:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.g-btn:disabled, .g-not:disabled { opacity: .6; cursor: progress; }

.sv-durum { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; margin: 0; z-index: 5; max-width: min(24rem, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .82rem; box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.sv-durum:empty { display: none; }
.sv-durum.hata { color: var(--bad); border-color: var(--bad); }

.sonuc-basarili { color: var(--ok-text); font-weight: 600; }
.sonuc-hatali, .sonuc-engellendi { color: var(--bad); font-weight: 600; }
.sonuc-cikis { color: var(--fg-muted); }

/* Değişiklik kayıtları */
.sv-table td.sv-deg { min-width: 16rem; max-width: 28rem; vertical-align: top; overflow-wrap: anywhere; }
.sv-deg .sv-yok { color: var(--fg-muted); }
.sv-eski-d, .sv-yeni-d { border-radius: 3px; padding: 0 4px; margin-inline: -4px; }
.sv-eski-d { background: color-mix(in srgb, var(--bad) 22%, transparent); }
.sv-yeni-d { background: color-mix(in srgb, var(--sole) 30%, transparent); }
.sv-table td.sv-belge-ad { vertical-align: top; }
.sv-belge-ad .sv-yok { color: var(--fg-muted); font-size: .75rem; }
.sv-table td.sv-ust { vertical-align: top; }