:root {
  --zemin: #f4f6f9;
  --kart: #ffffff;
  --metin: #14202e;
  --soluk: #55627a;
  --cizgi: #d5dbe5;
  --vurgu: #1d4f91;
  --vurgu-ustu: #ffffff;
  --uyari: #8a4b00;
  --uyari-zemin: #fff3dc;
  --tamam: #17663a;
  --hata: #a32020;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0f151d;
    --kart: #18212d;
    --metin: #e8edf4;
    --soluk: #a3afc2;
    --cizgi: #2e3a4a;
    --vurgu: #8fb8f0;
    --vurgu-ustu: #0f151d;
    --uyari: #ffcf85;
    --uyari-zemin: #3a2a0c;
    --tamam: #7ed6a1;
    --hata: #ff9c9c;
  }
}
* { box-sizing: border-box; }
html { font-size: 106.25%; }
body {
  margin: 0;
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--zemin);
  color: var(--metin);
}
.ust, main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.ust { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
p { margin: 0; }
.soluk { color: var(--soluk); }
section { margin-top: 28px; }

.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; }
button, .dugme, select, input, textarea {
  font: inherit;
  color: inherit;
  min-height: 44px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--kart);
  padding: 8px 14px;
}
button, .dugme { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button[aria-pressed="true"], button.ana {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-ustu);
  font-weight: 600;
}
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }

.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 16px; }
.kart .deger { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tablo-sarici { overflow-x: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--cizgi); white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
thead th { font-weight: 600; color: var(--soluk); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; }
.rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--uyari-zemin); color: var(--uyari); }
.tamam { color: var(--tamam); }

form.kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; }
.alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
label { display: grid; gap: 4px; }
input, select, textarea { width: 100%; }
.genis { grid-column: 1 / -1; }
.satir { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.secenekler { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; margin: 0; }
.secenekler label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.secenekler input { width: 22px; height: 22px; min-height: 0; }
.mesaj { min-height: 1.5em; }
.mesaj.hata { color: var(--hata); }
.mesaj.iyi { color: var(--tamam); }
td input { width: 110px; text-align: right; }
td button { min-height: 44px; }