:root {
  --bg: #f5f6f8;
  --yuzey: #ffffff;
  --yazi: #1a2230;
  --soluk: #647084;
  --cizgi: #e2e6ec;
  --vurgu: #1459a6;
  --vurgu-yazi: #ffffff;
  --tehlike: #b3261e;
  --iptal: #8a94a6;
  --golge: 0 1px 2px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151c;
    --yuzey: #1a212c;
    --yazi: #e8ecf3;
    --soluk: #98a3b6;
    --cizgi: #2b3443;
    --vurgu: #5aa2ee;
    --vurgu-yazi: #0b1220;
    --tehlike: #f28b82;
    --iptal: #78839a;
    --golge: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--yazi);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
.sayi { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* üst çubuk */
.ust {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.ust h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.sekmeler { display: flex; gap: 4px; flex: 1; }
.sekme {
  border: 0; background: none; padding: 7px 14px; border-radius: 8px;
  color: var(--soluk); cursor: pointer; font-weight: 550;
}
.sekme:hover { background: var(--bg); }
.sekme[aria-selected="true"] { background: var(--vurgu); color: var(--vurgu-yazi); }

main { max-width: 1400px; margin: 0 auto; padding: 16px; }
[hidden] { display: none !important; }

/* düğmeler */
.dugme {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-weight: 550;
}
.dugme:hover { border-color: var(--soluk); }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.dugme.tehlike { color: var(--tehlike); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* kartlar */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 16px; box-shadow: var(--golge); }
.kart .etiket { color: var(--soluk); font-size: 13px; }
.kart .deger { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kart .alt { color: var(--soluk); font-size: 13px; margin-top: 2px; }

.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: var(--golge); }
.panel h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.panel-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-ust h2 { margin: 0; }

.segment { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; }
.segment button { border: 0; background: var(--yuzey); padding: 6px 12px; cursor: pointer; color: var(--soluk); font-weight: 550; }
.segment button + button { border-left: 1px solid var(--cizgi); }
.segment button[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-yazi); }

/* grafik */
#grafik svg { width: 100%; height: auto; display: block; }
#grafik text { fill: var(--soluk); font-size: 11px; }
#grafik .deger { fill: var(--yazi); font-weight: 600; }
#grafik rect.cubuk { fill: var(--vurgu); }
#grafik rect.cubuk:hover { opacity: .8; }
#grafik line { stroke: var(--cizgi); }

/* tablolar */
.kaydir { overflow: auto; max-height: 72vh; border: 1px solid var(--cizgi); border-radius: 8px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; text-align: left; }
th { position: sticky; top: 0; background: var(--yuzey); z-index: 2; font-size: 13px; color: var(--soluk); font-weight: 600; }
td.sayi, th.sayi { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
.rapor td:first-child, .rapor th:first-child { position: sticky; left: 0; background: var(--yuzey); z-index: 1; font-weight: 600; border-right: 1px solid var(--cizgi); }
.rapor th:first-child { z-index: 3; }
.rapor td.hucre { cursor: pointer; }
.rapor td.hucre:hover { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.rapor td.bos { color: var(--cizgi); cursor: default; }
.rapor td.bos:hover { outline: 0; }
.rapor tfoot td { position: sticky; bottom: 0; background: var(--yuzey); font-weight: 700; border-top: 2px solid var(--cizgi); border-bottom: 0; }
.rapor th.ay { cursor: pointer; }
.rapor th.ay:hover, .rapor td.grup:hover { color: var(--vurgu); }
.rapor td.grup { cursor: pointer; }
.rapor .toplam { font-weight: 650; border-left: 1px solid var(--cizgi); }

.arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.arac input, .arac select, dialog input, dialog select, dialog textarea {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.arac input[type="search"] { flex: 1 1 220px; }
.arac .bosluk { flex: 1; }
.ozet { color: var(--soluk); font-size: 13px; margin: 0 0 8px; }
#kayit-tablo th { cursor: pointer; user-select: none; }
#kayit-tablo th[aria-sort] { color: var(--yazi); }
#kayit-tablo tr.iptal td { color: var(--iptal); }
#kayit-tablo tr.iptal td.ad { text-decoration: line-through; }
#kayit-tablo td.not { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--soluk); }
#kayit-tablo tbody tr { cursor: pointer; }
#kayit-tablo tbody tr:hover td { background: color-mix(in srgb, var(--vurgu) 7%, transparent); }
.rozet { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--cizgi); color: var(--soluk); }
.rozet.iptal { color: var(--tehlike); border-color: currentColor; }
.rozet.durum { color: var(--vurgu); border-color: currentColor; }

/* form penceresi */
dialog { border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey); color: var(--yazi); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
dialog::backdrop { background: rgba(10, 14, 22, .5); }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
dialog header { padding: 16px 20px 0; font-size: 17px; font-weight: 650; }
.alanlar { padding: 12px 20px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alanlar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); }
.alanlar label.tam { grid-column: 1 / -1; }
.alanlar input, .alanlar select, .alanlar textarea { width: 100%; color: var(--yazi); font-size: 15px; }
dialog footer { display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--cizgi); }
dialog footer .bosluk { flex: 1; }
.form-hata { color: var(--tehlike); padding: 0 20px; font-size: 14px; min-height: 0; }

.bildirim { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--yazi); color: var(--yuzey); padding: 9px 16px; border-radius: 8px; z-index: 50; font-weight: 550; }

@media (max-width: 640px) {
  .alanlar { grid-template-columns: 1fr; }
  main { padding: 10px; }
  .kart .deger { font-size: 22px; }
}

/* giriş sayfası */
.giris { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.giris form { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 24px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--golge); }
.giris h1 { margin: 0; font-size: 19px; }
.giris p { margin: 0; color: var(--soluk); font-size: 14px; }
.giris input { border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 8px; padding: 9px 12px; }
.giris .hata { color: var(--tehlike); font-size: 14px; min-height: 20px; }