/* QATI Analytics — tasarım sistemi. Tüm renkler :root tokenlarından gelir. */
:root{
  /* Zemin: derin gece mavisi / turkuaz; vurgu: altın */
  --obsidian:#06111C; --panel:#0B1A28; --panel-2:#102435; --line:#1C3A4D;
  --fg:#E6EEF4; --muted:#8FB3C4; --muted-2:#56788A;
  --gold:#D4AF37; --gold-light:#FBE7A6; --gold-deep:#8C6A1C; --ivory:#F2EBDA;
  --good:#3CCF91; --warn:#E3B04B; --bad:#F06565; --info:#38BDF8;
  --good-bg:#0E2E26; --warn-bg:#2A2414; --bad-bg:#2E1820;
  --f-disp:"Syncopate","Arial Black",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:10px; --gap:16px; --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--obsidian);color:var(--fg);font:15px/1.5 var(--f-body);padding-inline:16px;padding-block:0 48px}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-light)}
.wrap{max-width:var(--max);margin:0 auto}

/* Üst çubuk */
.topbar{display:flex;align-items:center;gap:14px;padding-block:14px;border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:10px;color:var(--fg)}
.topbar .brand img{width:34px;height:34px}
.topbar .brand b{font:700 1.05rem var(--f-disp);letter-spacing:.08em;color:var(--gold)}
.topbar .brand small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topbar .spacer{flex:1}
.topbar .mode{font:500 .72rem var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.topbar .mode.live{color:var(--good);border-color:var(--good)}

nav.pages{display:flex;gap:4px;overflow-x:auto;padding-block:10px;border-bottom:1px solid var(--line);scrollbar-width:none}
nav.pages a{white-space:nowrap;padding:7px 12px;border-radius:7px;font-size:.88rem;color:var(--muted)}
nav.pages a:hover{color:var(--fg);background:var(--panel)}
nav.pages a.active{color:var(--obsidian);background:var(--gold);font-weight:600}

/* Sayfa başı: 1 cümle + ışık */
.head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;padding-block:22px 8px}
.head h1{font:700 1.35rem/1.2 var(--f-disp);letter-spacing:.04em;margin:0;text-wrap:balance}
.head .q{color:var(--muted);font-size:.85rem;margin:2px 0 0}
.head .summary{flex-basis:100%;font-size:1.05rem;max-width:72ch}
.light{display:inline-flex;align-items:center;gap:8px;font:600 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px;border:1px solid var(--line)}
.light::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--muted)}
.light.good{color:var(--good);border-color:var(--good)}.light.good::before{background:var(--good)}
.light.warn{color:var(--warn);border-color:var(--warn)}.light.warn::before{background:var(--warn)}
.light.bad{color:var(--bad);border-color:var(--bad)}.light.bad::before{background:var(--bad)}
.asof{font:400 .74rem var(--f-mono);color:var(--muted-2)}

/* Kartlar */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);margin-block:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h3{margin:0 0 6px;font:600 .74rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .big{font:500 1.6rem var(--f-mono);font-variant-numeric:tabular-nums;line-height:1.1}
.card .sub{color:var(--muted);font-size:.84rem;margin-top:4px}
.card p{margin:.4rem 0 0}
.card.accent{border-color:var(--gold-deep)}

/* KPI şeridi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.kpi .l{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font:500 1.15rem var(--f-mono);font-variant-numeric:tabular-nums}
.kpi .d{font:400 .78rem var(--f-mono)}
.up{color:var(--good)}.down{color:var(--bad)}.flat{color:var(--muted)}

/* Açılır detay */
details.sec{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-block:10px}
details.sec>summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
details.sec>summary::after{content:"+";margin-left:auto;color:var(--gold);font-family:var(--f-mono)}
details.sec[open]>summary::after{content:"−"}
details.sec>.body{padding:0 16px 16px;border-top:1px solid var(--line)}

/* Tablolar */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
table.compact{min-width:0}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{font:600 .72rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td{font:400 .9rem var(--f-mono)}
th:first-child,td:first-child{text-align:left}
td.txt{font-family:var(--f-body);white-space:normal;min-width:220px}
tr.hi td{background:color-mix(in srgb,var(--gold) 10%,transparent)}

/* Etiketler */
.pill{display:inline-block;font:600 .7rem var(--f-body);letter-spacing:.04em;padding:2px 9px;border-radius:99px;border:1px solid}
.pill.good{color:var(--good);border-color:var(--good);background:var(--good-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.pill.gold{color:var(--gold);border-color:var(--gold-deep)}
.pill.muted{color:var(--muted);border-color:var(--line)}
.sample{display:inline-block;font:600 .64rem var(--f-mono);letter-spacing:.1em;color:var(--warn);border:1px dashed var(--warn);padding:1px 7px;border-radius:4px;vertical-align:middle}

/* Formlar */
form.grid{display:grid;gap:12px}
label.f{display:grid;gap:4px;font-size:.82rem;color:var(--muted)}
input,select,textarea{font:500 .95rem var(--f-mono);color:var(--fg);background:var(--obsidian);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%}
input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{font:600 .9rem var(--f-body);padding:9px 16px;border-radius:7px;border:1px solid var(--gold-deep);background:var(--panel-2);color:var(--gold);cursor:pointer}
.btn.primary{background:var(--gold);color:var(--obsidian);border-color:var(--gold)}
.btn:hover{filter:brightness(1.1)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{font:600 .9rem var(--f-body);padding:8px;border:0;background:var(--obsidian);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"].long{background:var(--good);color:var(--obsidian)}
.seg button[aria-pressed="true"].short{background:var(--bad);color:var(--obsidian)}

.verdict{margin-top:14px;padding:12px 14px;border-radius:8px;font-weight:500}
.verdict.good{background:var(--good-bg);color:var(--good)}.verdict.warn{background:var(--warn-bg);color:var(--warn)}.verdict.bad{background:var(--bad-bg);color:var(--bad)}

/* Uyum skoru grupları */
.groups{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.group{text-align:center;padding:8px 4px;border-radius:6px;border:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.group b{display:block;font:600 1rem var(--f-mono)}
.group.long{border-color:var(--good);color:var(--good)}.group.short{border-color:var(--bad);color:var(--bad)}
@media (max-width:560px){.groups{grid-template-columns:repeat(3,1fr)}.row2{grid-template-columns:1fr}}

/* Alt bilgi ve beyan */
footer{margin-top:32px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:.8rem}
.disclosure{font-size:.76rem;line-height:1.5;color:var(--muted-2);max-width:90ch}
.note{color:var(--muted);font-size:.85rem;max-width:75ch}
.two{display:grid;grid-template-columns:360px 1fr;gap:var(--gap);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}