/* Operatör paneli — paylaşılan kabuk.
 *
 * ⚠️ NEDEN VAR: dört sayfa dört ayrı kopyaydı. Ölçüldü — 4 dosyada birebir
 * aynı 48 satır, 3 dosyada 46, 2 dosyada 104. Kopyalamanın bedeli çoktan
 * ödenmeye başlamıştı: üç farklı `api()`, aynı adı taşıyan iki farklı
 * `kis()`, sohbet.html'de tanımsız kalan `--grid`, dört farklı hata
 * gösterimi. Tek kaynak bunları bir noktada topluyor.
 */

/* ═══ 1. Jetonlar ═══════════════════════════════════════════════
 *
 * ⚠️ Kategorik renk sırası SABİT, döngüye sokulmaz. Sıra CVD güvenliğinin
 * kendisi: mavi→turuncu→su yeşili→sarı dizisi renk körlüğü altında da
 * ayrışacak şekilde seçilmiş ve doğrulandı (açık temada en kötü komşu
 * çifti ΔE 9.1, koyuda 8.4; taban 8).
 *
 * ⚠️ Açık temada 3. ve 4. slot yüzeyle 3:1 kontrastın altında. Bu bilinçli:
 * karşılığı GÖRÜNÜR ETİKET ya da tablo görünümü — grafik modülü ikisini de
 * basıyor. Renk tek başına anlam taşımıyor.
 *
 * ⚠️ Durum renkleri (--olumlu/--uyari/--ciddi/--kritik) seri renklerinden
 * AYRI ve asla "5. seri" olarak kullanılmaz; her zaman ikon + metinle
 * birlikte çıkarlar.
 */
:root {
  color-scheme: light;

  /* yüzeyler ve mürekkep */
  --yuzey:        #fcfcfb;
  --zemin:        #f9f9f7;
  --tuval:        #f2f1ee;
  --murekkep:     #0b0b0b;
  --murekkep-2:   #52514e;
  --murekkep-3:   #898781;
  --kenarlik:     rgba(11, 11, 11, 0.10);
  --izgara:       #e1e0d9;
  --eksen:        #c3c2b7;

  /* kategorik seriler — sıra sabit */
  --seri-1: #2a78d6;   /* mavi      */
  --seri-2: #eb6834;   /* turuncu   */
  --seri-3: #1baf7a;   /* su yeşili */
  --seri-4: #eda100;   /* sarı      */

  /* sıralı rampa (huni gibi ölçekli değerler) */
  --rampa-1: #86b6ef;
  --rampa-2: #5598e7;
  --rampa-3: #2a78d6;
  --rampa-4: #1c5cab;

  /* durum — asla seri olarak kullanılmaz */
  --olumlu:       #0ca30c;
  --olumlu-yazi:  #006300;
  --uyari:        #fab219;
  --ciddi:        #ec835a;
  --kritik:       #d03b3b;

  --golge: 0 1px 2px rgba(11, 11, 11, .04), 0 8px 24px rgba(11, 11, 11, .06);
  --r: 10px;          /* köşe yarıçapı */
  --kenar-en: 216px;  /* kenar çubuğu */
}

/* ⚠️ İki mekanizma birden: `prefers-color-scheme` işletim sistemini,
 * `data-theme` kullanıcının kendi seçimini karşılıyor. Kullanıcı seçimi
 * her zaman kazanmalı, o yüzden `:where(:not([data-theme="light"]))`. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --yuzey: #1a1a19; --zemin: #0d0d0d; --tuval: #141413;
    --murekkep: #ffffff; --murekkep-2: #c3c2b7; --murekkep-3: #898781;
    --kenarlik: rgba(255, 255, 255, 0.10);
    --izgara: #2c2c2a; --eksen: #383835;
    --seri-1: #3987e5; --seri-2: #d95926; --seri-3: #199e70; --seri-4: #c98500;
    --rampa-1: #184f95; --rampa-2: #256abf; --rampa-3: #3987e5; --rampa-4: #6da7ec;
    --olumlu-yazi: #0ca30c;
    --golge: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --yuzey: #1a1a19; --zemin: #0d0d0d; --tuval: #141413;
  --murekkep: #ffffff; --murekkep-2: #c3c2b7; --murekkep-3: #898781;
  --kenarlik: rgba(255, 255, 255, 0.10);
  --izgara: #2c2c2a; --eksen: #383835;
  --seri-1: #3987e5; --seri-2: #d95926; --seri-3: #199e70; --seri-4: #c98500;
  --rampa-1: #184f95; --rampa-2: #256abf; --rampa-3: #3987e5; --rampa-4: #6da7ec;
  --olumlu-yazi: #0ca30c;
  --golge: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);
}

/* ═══ 2. Reset ve tipografi ═════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 20px; margin: 0; letter-spacing: -0.015em; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; font-weight: 600; color: var(--murekkep-2); }
.alt { color: var(--murekkep-2); font-size: 13px; margin: 2px 0 0; }
.yardim { font-size: 12px; color: var(--murekkep-3); line-height: 1.6; }
a { color: var(--seri-1); }

/* Sayı hizası — tablolarda basamaklar alt alta gelsin. */
.sayi, td.sayi, .kpi-deger, .g-tablo td { font-variant-numeric: tabular-nums; }

/* ═══ 3. Kabuk ══════════════════════════════════════════════════ */
.kabuk { display: grid; grid-template-columns: var(--kenar-en) minmax(0, 1fr); min-height: 100vh; }

.kenar {
  background: var(--yuzey);
  border-right: 1px solid var(--kenarlik);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.kenar-marka b { font-weight: inherit; }
.kenar-marka { font-weight: 650; font-size: 15px; padding: 0 10px 16px; letter-spacing: -0.01em; }
.kenar-marka small { display: block; font-weight: 400; font-size: 11px; color: var(--murekkep-3); letter-spacing: 0; }

.kenar-bag {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--murekkep-2); text-decoration: none; font-size: 14px;
}
.kenar-bag:hover { background: var(--tuval); color: var(--murekkep); }
/* ⚠️ Aktif durum aria-current'tan geliyor — görsel vurgu ve ekran okuyucu
 * tek kaynaktan beslensin, ikisi ayrışmasın. */
.kenar-bag[aria-current="page"] { background: var(--tuval); color: var(--murekkep); font-weight: 600; }
.kenar-bag[aria-current="page"] .kenar-ikon { color: var(--seri-1); }
.kenar-ikon { width: 18px; text-align: center; flex: none; font-size: 15px; }
.kenar-rozet {
  margin-left: auto; font-size: 11px; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px; background: var(--seri-1); color: #fff;
}
.kenar-dip { margin-top: auto; padding-top: 14px; display: flex; gap: 6px; }

.icerik { padding: 22px 26px 60px; max-width: 1440px; }
.baslik-serit {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.baslik-arac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Kalibrasyon/sohbet editörleri geniş tuval istiyor: kenar çubuğu raya iner.
 * ⚠️ KAYBOLMAZ — eski panelde nav tamamen yok oluyordu ve operatör geri
 * dönemiyordu. */
.kabuk[data-ray] { --kenar-en: 60px; }
.kabuk[data-ray] .kenar-bag span:not(.kenar-ikon),
.kabuk[data-ray] .kenar-marka b,
.kabuk[data-ray] .kenar-marka small,
.kabuk[data-ray] .kenar-rozet { display: none; }
.kabuk[data-ray] .kenar-marka { text-align: center; padding: 0 0 14px; }
.kabuk[data-ray] .kenar-bag { justify-content: center; padding: 10px 0; }
.kabuk[data-ray] .icerik { max-width: none; }

@media (max-width: 1100px) {
  .kabuk { --kenar-en: 60px; }
  .kenar-bag span:not(.kenar-ikon), .kenar-marka small, .kenar-rozet { display: none; }
  .kenar-marka { text-align: center; padding: 0 0 14px; }
  .kenar-bag { justify-content: center; padding: 10px 0; }
}
@media (max-width: 720px) {
  .kabuk { grid-template-columns: 1fr; }
  .kenar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    height: auto; flex-direction: row; justify-content: space-around;
    border-right: 0; border-top: 1px solid var(--kenarlik); padding: 6px 4px; z-index: 30;
  }
  .kenar-marka { display: none; }
  .kenar-dip { margin: 0; padding: 0; }
  .icerik { padding: 16px 14px 90px; }
}

/* ═══ 4. Bileşenler ═════════════════════════════════════════════ */
.kart {
  background: var(--yuzey); border: 1px solid var(--kenarlik);
  border-radius: var(--r); padding: 18px; margin-bottom: 16px;
}
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kart-baslik h2 { margin: 0; }

.satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.satir.dagit { justify-content: space-between; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .izgara-2, .izgara-3 { grid-template-columns: 1fr; } }

button, .dugme {
  font: inherit; color: var(--murekkep); background: var(--yuzey);
  border: 1px solid var(--kenarlik); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled), .dugme:hover { border-color: var(--murekkep-3); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.birincil { background: var(--seri-1); border-color: var(--seri-1); color: #fff; }
button.tehlike { color: var(--kritik); }
button.kucuk, .dugme.kucuk { padding: 3px 9px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--seri-1); outline-offset: 2px; }

input, select, textarea {
  font: inherit; color: var(--murekkep); background: var(--yuzey);
  border: 1px solid var(--kenarlik); border-radius: 8px; padding: 7px 11px;
}
textarea { resize: vertical; }
label.kutu { font-size: 13px; color: var(--murekkep-2); display: flex; align-items: center; gap: 6px; }
label.kutu input { width: auto; }
.alan { display: grid; grid-template-columns: 116px 1fr; gap: 8px; align-items: center;
        font-size: 13px; color: var(--murekkep-2); margin-bottom: 8px; }
.alan input, .alan select { width: 100%; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--murekkep-2);
     padding: 8px 10px; border-bottom: 1px solid var(--izgara); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--izgara); vertical-align: middle; }
td.sag, th.sag { text-align: right; }
.tablo-kaydir { overflow-x: auto; }

/* Rozet — durum her zaman ikon + metinle, yalnız renkle DEĞİL. */
.rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
         padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.rozet.olumlu { color: var(--olumlu-yazi); }
.rozet.uyari  { color: #8a5b00; }
.rozet.kritik { color: var(--kritik); }
.rozet.sessiz { color: var(--murekkep-3); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .rozet.uyari { color: var(--uyari); } }
:root[data-theme="dark"] .rozet.uyari { color: var(--uyari); }

.hap { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
       background: var(--tuval); color: var(--murekkep-2); }

.uyari-kutu { border: 1px solid var(--uyari); border-radius: 9px; padding: 11px 13px;
              font-size: 13px; margin-bottom: 14px; }
.uyari-kutu.kritik { border-color: var(--kritik); }

/* ⚠️ BİLGİ KUTUSU UYARI KUTUSUNDAN AYRI — RENK BİR ANLAM TAŞIYOR.
   İlk yazımda bu metni `.uyari-kutu` ile koydum: turuncu kenarlık "burada
   bir sorun var" demek ve operatör her açılışta düzeltilecek bir şey arıyor.
   Ekranın hangi işe yaradığını anlatan bir açıklama uyarı değildir; sessiz
   bir kenarlıkla durmalı. */
.bilgi-kutu { border: 1px solid var(--kenarlik); border-radius: 9px;
              padding: 11px 13px; font-size: 13px; margin-bottom: 14px;
              color: var(--murekkep-2); }
.bilgi-kutu b { color: var(--murekkep); }

.bos { color: var(--murekkep-3); font-size: 13px; padding: 22px 0; text-align: center; }
.bos b { display: block; color: var(--murekkep-2); font-size: 14px; margin-bottom: 4px; }

/* İskelet — yükleme sırasında düzen zıplamasın. */
.iskelet { border-radius: 6px; background: var(--izgara); height: 14px; margin: 8px 0;
           animation: iskelet-yanip 1.4s ease-in-out infinite; }
@keyframes iskelet-yanip { 0%, 100% { opacity: .45 } 50% { opacity: .8 } }
@media (prefers-reduced-motion: reduce) { .iskelet { animation: none } }

/* ═══ 5. Giriş ══════════════════════════════════════════════════ */
#giris { max-width: 340px; margin: 14vh auto; }
#giris .hata { color: var(--kritik); font-size: 13px; min-height: 18px; }

/* ═══ 6. Bildirim ═══════════════════════════════════════════════
 * ⚠️ Tek hata kanalı. Önce dört ayrı yol vardı (durumYaz / alert /
 * console.error / loginErr) ve operatör hatayı kaçırıyordu. */
.bildirim-yigin { position: fixed; top: 16px; right: 16px; z-index: 60;
                  display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.bildirim { background: var(--yuzey); border: 1px solid var(--kenarlik);
            border-left-width: 3px; border-radius: 8px; padding: 10px 13px;
            font-size: 13px; box-shadow: var(--golge); display: flex; gap: 9px; align-items: flex-start; }
.bildirim.hata   { border-left-color: var(--kritik); }
.bildirim.basari { border-left-color: var(--olumlu); }
.bildirim.bilgi  { border-left-color: var(--seri-1); }
.bildirim button { border: 0; background: none; padding: 0 2px; margin-left: auto; color: var(--murekkep-3); }

/* ═══ 7. Kızak (sağdan açılan bağlam paneli) ════════════════════ */
.kizak-perde { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 40; }
.kizak { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
         background: var(--yuzey); border-left: 1px solid var(--kenarlik);
         z-index: 41; overflow-y: auto; padding: 18px; box-shadow: var(--golge); }

.gizli { display: none !important; }