/* Die Übersicht — Aussehen.

   Eigene Datei, nicht `stil.css` erweitert: dort ist alles auf ein Kind mit
   einem Finger ausgelegt, große Flächen und große Schrift. Hier sitzt ein
   Erwachsener vor einer Tabelle mit 500 Zeilen und will viel auf einmal sehen.
   Dieselben Farben, das genaue Gegenteil an Dichte. */

:root {
  --papier: #ffffff;
  --zemin: #fafbfc;
  --tinte: #16181d;
  --leise: #6b7280;
  --linie: #e6e8ec;
  --akzent: #1f6feb;
  --dogru: #157f4b;
  --dogru-zemin: #e8f6ee;
  --bekleme: #9a6212;
  --bekleme-zemin: #fdf3e3;
  --yanlis: #b4451c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--zemin);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.sayfa {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* Der Rückweg in die App. Vom iPad-Startbildschirm gibt es keinen
   Zurück-Knopf — ohne ihn säße man in der Übersicht fest. */
.geri {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--leise);
  text-decoration: none;
  font-size: 13px;
}

.geri:hover { color: var(--tinte); }

h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.altbaslik { margin: 0 0 20px; color: var(--leise); }

/* ------------------------------------------------------------- Kennzahlen */

.kutular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.kutu {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 12px 14px;
}

.kutu .sayi { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.kutu .ad { color: var(--leise); font-size: 12px; margin-top: 2px; }
.kutu .ek { color: var(--leise); font-size: 12px; margin-top: 6px; }

/* ------------------------------------------------------------------ Reiter */

.reiterler {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 16px;
}

.reiter {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font: inherit;
  font-weight: 550;
  color: var(--leise);
  cursor: pointer;
  margin-bottom: -1px;
}

.reiter:hover { color: var(--tinte); }
.reiter[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--tinte); }

/* ------------------------------------------------------------------ Filter */

.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.suzgec input[type="search"] {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 8px 12px;
  font: inherit;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--papier);
  color: inherit;
}

.suzgec input[type="search"]:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }

.suzgec select {
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--papier);
  color: inherit;
}

.sonuc-sayisi { color: var(--leise); font-size: 13px; margin-left: auto; }

/* ------------------------------------------------------------------ Tabelle */

.kaydir {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: auto;
  max-height: calc(100vh - 300px);
}

table { border-collapse: collapse; width: 100%; }

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--papier);
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--leise);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--linie);
}

thead th.siralanabilir { cursor: pointer; user-select: none; }
thead th.siralanabilir:hover { color: var(--tinte); }

tbody tr.satir { cursor: pointer; }
tbody tr.satir:hover { background: var(--zemin); }
tbody tr.acik { background: var(--zemin); }

td.kelime { font-weight: 600; white-space: nowrap; }
td.kisa { max-width: 320px; }

/* Lange Texte in der Zeile auf zwei Zeilen kappen — beim Aufklappen steht
   alles vollständig da. */
.kirp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--leise);
}

.sayi-hucre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zaman { white-space: nowrap; color: var(--leise); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Abzeichen */

.rozet {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  border: 1px solid var(--linie);
  color: var(--leise);
}

.rozet.oturdu { background: var(--dogru-zemin); color: var(--dogru); border-color: transparent; }
.rozet.calisiliyor { background: var(--bekleme-zemin); color: var(--bekleme); border-color: transparent; }
.rozet.tam { background: var(--dogru-zemin); color: var(--dogru); border-color: transparent; }
.rozet.eksik { background: var(--bekleme-zemin); color: var(--bekleme); border-color: transparent; }
.rozet.yok { color: var(--leise); }

/* ------------------------------------------------------------- Aufgeklappt */

td.ayrinti { background: var(--zemin); padding: 0 10px 16px; }

.ayrinti-ic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  padding-top: 4px;
}

.blok h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blok p { margin: 0 0 10px; }
.blok .ornek { font-style: italic; color: var(--leise); }

.secenek-listesi { list-style: none; margin: 0 0 10px; padding: 0; }

.secenek-listesi li {
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--linie);
  margin-bottom: 4px;
  background: var(--papier);
}

.secenek-listesi li.dogru {
  background: var(--dogru-zemin);
  border-color: transparent;
  color: var(--dogru);
  font-weight: 550;
}

.ses-listesi { list-style: none; margin: 0; padding: 0; }

.ses-satir {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid var(--linie);
}

.ses-satir:last-child { border-bottom: 0; }
.ses-satir .etiket { flex: 0 0 84px; color: var(--leise); font-size: 12px; padding-top: 3px; }
.ses-satir .metin { flex: 1; min-width: 0; }
.ses-satir.yanlis-yol .metin { color: var(--leise); }

.oynat {
  appearance: none;
  border: 1px solid var(--linie);
  background: var(--papier);
  border-radius: 8px;
  width: 30px;
  height: 26px;
  cursor: pointer;
  flex: 0 0 auto;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

.oynat:hover { border-color: var(--tinte); }
.oynat[disabled] { opacity: 0.35; cursor: default; }
.oynat.calan { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* ------------------------------------------------------------------ Hinweis */

.not {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--bekleme);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  color: var(--leise);
}

.not b { color: var(--tinte); font-weight: 600; }

.bos { padding: 28px; text-align: center; color: var(--leise); }

/* ------------------------------------------------------------------- Login */

.perde {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.perde form { width: min(340px, 90vw); display: flex; flex-direction: column; gap: 10px; }

.perde input {
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--linie);
  border-radius: 9px;
}

.perde button {
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 9px;
  background: var(--tinte);
  color: var(--papier);
  cursor: pointer;
}

.hata { color: var(--yanlis); }