/* Panel tasarim dili -- deck'ten (cekirdek/sablon/deck.html.j2) gelir.
   Renk degiskenleri BILINCLI KOPYA: deck sabit 1920x1080 slayt, panel
   akiskan genislikte, duzen paylasilamaz. Ama renk *degismemeli* --
   ayrisma gozle fark edilir bir sorun olur. Deck'teki :root ile birebir
   ayni tutulmali; deck'in renk paleti degisirse burasi da guncellenmeli. */
/* Tarayicinin KENDI cizdigi parcalar icin (tarih secici takvimi, select
   acilir listesi, kaydirma cubuklari, otomatik doldurma). CSS bu parcalara
   ERISEMEZ; tek kol bu. Yoksa koyu panelde beyaz takvim aciliyor --
   14.08.2026'da canlida boyle gorundu. */
:root { color-scheme: dark; }

:root {
  --bg: #060B16;
  --ink: #0B1426;
  --surface: #132139;
  --surface-2: #1B2A4A;
  --gold: #C9A227;
  --gold-br: #F0C64A;
  --text: #F2F5FA;
  --muted: #93A4BF;
  --hot: #FF6B4A;
  --warm: #FFA23A;
  --cool: #4FA8E8;

  /* Cizgi rengi VURGUDAN TURETILIYOR (15.08.2026, White Label).
     Once duz `rgba(201,162,39,.26)` idi; kiraci vurgu rengini
     degistirdiginde kenarliklar ESKI altinda kalir ve panel iki
     renkli gorunurdu.

     Iki bildirim UST USTE: eski deger GERI DONUS -- `color-mix`i
     tanimayan bir tarayici ikinciyi ATAR ve birincide kalir, yani
     kenarliklar kaybolmaz. `--line` White Label listesinde YOK:
     `<input type="color">` alfa uretemiyor (bkz. hesap/tema.py). */
  --line: rgba(201, 162, 39, .26);
  --line: color-mix(in srgb, var(--gold) 26%, transparent);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` HER ZAMAN kazanir.
   CANLIDA OLCULDU (15.08.2026): tarayicinin `[hidden] -> display:none`
   kurali KULLANICI TABAKASINDA degil, UA tabakasinda; yazdigimiz her
   `display` bildirimi onu eziyor. `.js .yan-ortu { display:block }`
   tam boyle etti: karartma katmani `hidden` iken de ekrani kapladi,
   opacity 0 oldugu icin GORUNMUYORDU ama z-index 50 ile ust seridin
   (40) uzerinde durup BUTUN tiklamalari yuttu -- menu, dil secici,
   hesap dugmesi, hicbiri calismadi. Kullanici bildirdi.
   Tek satirlik bu koruma butun `hidden` kullanimlarini kapsiyor;
   her yeni katmanda ayri ayri hatirlanmasi gerekmiyor. */
[hidden] { display: none !important; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-br); }

/* ---------- giris sayfasi ---------- */
.giris-sayfa {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.giris-form {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  padding: 36px 32px;
}

.giris-form h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  color: var(--text);
}

.giris-form p { margin-bottom: 14px; }

.giris-form label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.giris-form input {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 15px;
}

.giris-form input:focus {
  outline: none;
  border-color: var(--gold);
}

.giris-form button,
.panel-filtre button {
  width: 100%;
  margin-top: 8px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.giris-form button:hover,
.panel-filtre button:hover { background: var(--gold-br); }

.errorlist {
  list-style: none;
  color: var(--hot);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ---------- giris alanlari (travoix duzeni) ----------
   Alanlar `form.as_p` yerine TEK TEK yaziliyor; bu bloklar o duzeni
   tasiyor. Bkz. sablonlar/giris.html. */
.giris-form .alan { margin-bottom: 16px; }

/* Etiket solda, "Parolami unuttum" SAGDA -- ayni satirda. */
.giris-form .alan-basi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.giris-form .alan-basi label { margin-bottom: 6px; }
.giris-form .alan-basi a {
  font-size: 13px;
  white-space: nowrap;
}

.giris-form .alan-hata {
  color: var(--hot);
  font-size: 12.5px;
  margin: 6px 0 0;
}

.giris-form .form-uyari {
  background: rgba(255, 107, 74, .14);
  border: 1px solid rgba(255, 107, 74, .35);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.giris-form .form-uyari p { margin: 0; }
.giris-form .form-uyari p + p { margin-top: 6px; }

/* Guvenlik sorusu: solda sabit genislikli rozet, sagda cevap kutusu. */
.captcha-satir { display: flex; align-items: stretch; gap: 10px; }
.captcha-satir .captcha-soru {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 92px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-br);
  letter-spacing: .02em;
  /* Soru bir DEGER, secilip kopyalanmasi gereken bir metin degil;
     kazara secilmesi mobilde metin secim baloncugu aciyordu. */
  user-select: none;
}
.captcha-satir input { flex: 1 1 auto; min-width: 0; }

/* ================= ust serit + yan menu + hesap menusu =================
   Duzen travoix'in panelinden (kullanici istegi, 15.08.2026). Serit
   sablonlar/jinja/_ust.html icinde TEK parca; onceden dokuz sablonda
   elle tekrarlaniyordu ve icerikleri birbirinden farkliydi. */

.ust-serit {
  position: sticky; top: 0; z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

/* Marka hamburgerin SAGINDA ve kalan alani yiyor -- sagdaki simgeler
   boylece hep en sagda kaliyor. */
.ust-serit .marka {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-br);
  letter-spacing: .06em;
  text-decoration: none;
}
/* Uzun kiraci adi simgeleri ekrandan itmesin. */
.ust-serit .marka span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ust-serit .marka-logo { max-height: 30px; width: auto; }

.ust-sag { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* Simge dugmeleri. Etiket seciciyle DEGIL `button.ust-simge` ile
   yaziliyor: bu depoda genis dugme kurallari iki kez sizdi (filtre
   kisayollari, parola goz dugmesi) ve ikisinde de sebep ozgullugu
   dusuk birakmakti. */
.ust-serit button.ust-simge,
.yan-menu button.ust-simge {
  width: 38px; height: 38px;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  border: none; border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}
.ust-serit button.ust-simge:hover,
.yan-menu button.ust-simge:hover {
  color: var(--text); background: var(--surface-2);
}
.ust-serit button.ust-simge svg,
.yan-menu button.ust-simge svg { width: 20px; height: 20px; display: block; }
.bildirim-dugmesi.bildirim-abone { color: var(--gold-br); }

/* Dil secici seride sigsin; kendi genel form stilini kullanmasin. */
.ust-serit .dil-secici { margin: 0; width: auto; }
.ust-serit .dil-secici select {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 7px 8px;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- sag ust hesap menusu ---------- */
.hesap-sarmal { position: relative; flex: 0 0 auto; }

.hesap-sarmal button.hesap-dugmesi {
  width: 38px; height: 38px;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: var(--ink);
  border: none; border-radius: 50%;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.hesap-sarmal button.hesap-dugmesi:hover { background: var(--gold-br); }

.hesap-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  padding: 6px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.hesap-panel.acik { opacity: 1; transform: translateY(0); }

.hesap-kimlik {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.hesap-kimlik strong { display: block; font-size: 14px; }
/* E-posta uzun olabilir; menuyu genisletmek yerine kirpiliyor. */
.hesap-kimlik span {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hesap-panel a,
.hesap-panel button.hesap-cikis {
  display: block; width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin: 0;
  border: none; border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.hesap-panel a:hover { background: var(--surface-2); }
.hesap-panel button.hesap-cikis { color: var(--hot); }
.hesap-panel button.hesap-cikis:hover { background: rgba(255, 107, 74, .14); }
.hesap-panel form { width: 100%; margin: 0; }

/* ---------- sol acilir menu ----------
   BETIKSIZ DURUM: gizleme kurallari `.js` ile KOSULLU. Betik
   yuklenmezse <html> uzerinde `no-js` kalir, menu de akista duz bir
   liste olarak gorunur -- gizli kalsaydi hicbir baglantiya
   ulasilamazdi. */
.yan-menu {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.yan-ortu { display: none; }

.js .yan-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: 280px; max-width: 84vw;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  border-bottom: none;
  transform: translateX(-100%);
  transition: transform .2s ease;   /* arayuz.js GECIKME ile AYNI */
}
.js .yan-menu.acik { transform: translateX(0); }
/* `kapali` gecis BITTIKTEN sonra ekleniyor: `display:none` gecisi
   oldururdu, o yuzden ayri bir sinif. */
.js .yan-menu.kapali { visibility: hidden; }

.js .yan-ortu {
  display: block;
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 11, 22, .62);
  opacity: 0;
  transition: opacity .2s ease;
  /* IKINCI EMNIYET. Yukaridaki `[hidden]` korumasi bu katmanin
     tiklamalari yutmasini zaten onluyor, ama bu arizanin bedeli TAM
     KILITLENME: gorunmez bir katman butun paneli kullanilamaz yapiyor
     ve kullanici sebebini goremiyor. `hidden` bir gun yanlislikla
     kaldirilirsa katman yine de tiklamalari GECIRIR. */
  pointer-events: none;
}
.js .yan-ortu.acik { opacity: 1; pointer-events: auto; }

.yan-basi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.yan-basi .marka {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  font-weight: 600; font-size: 14px;
  color: var(--gold-br); text-decoration: none;
}
.yan-basi .marka span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yan-basi .marka-logo { max-height: 28px; width: auto; }

.yan-gezinme { padding: 10px 10px 20px; }
.yan-baslik {
  padding: 14px 12px 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
}
.yan-gezinme a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 9px;
  color: var(--text);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
}
.yan-gezinme a:hover { background: var(--surface-2); }
/* Bulunulan sayfa: sol kenarda altin serit. Renk TEK BASINA yeterli
   degil (renk korlugu) -- serit ikinci bir isaret. */
.yan-gezinme a.etkin {
  background: var(--surface-2);
  color: var(--gold-br);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Serit dar ekranda daha az bosluk yesin. */
@media (max-width: 560px) {
  .ust-serit { padding: 10px 12px; gap: 8px; }
  .ust-serit .marka { font-size: 13px; }
  .ust-serit .dil-secici select { padding: 6px 4px; font-size: 12px; }
}

/* ---------- panel govdesi ----------
   NOT: eski `.panel-ust` serit kurallari 15.08.2026'da SILINDI; serit
   `_ust.html` + `.ust-serit` oldu. Kurallar olu kalsaydi `.panel-ust
   button` gibi genis seciciler ileride yeni bir dugmeye sizabilirdi --
   bu depoda ayni sizinti iki kez yasandi (filtre kisayollari, parola
   goz dugmesi). Marka stili `.ust-serit .marka` icinde. */
.panel-govde { padding: 32px; }

.panel-selamlama { color: var(--muted); margin-bottom: 20px; }

/* ---------- bos durum ---------- */
.bos-durum {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 24px;
}

.bos-durum-baslik { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.bos-durum-detay { color: var(--muted); font-size: 14px; }

/* ---------- tazelik bandi ---------- */
.tazelik-bandi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
}

.tazelik-taze { background: rgba(99, 190, 123, .12); color: var(--text); }
.tazelik-eski { background: rgba(255, 107, 74, .14); color: var(--text); }
.tazelik-zaman { color: var(--muted); font-size: 13px; }

/* ---------- dogrulama rozeti ---------- */
.dogrulama-rozeti {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.rozet {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.rozet-tam { background: rgba(99, 190, 123, .18); color: #63BE7B; }
.rozet-kismi { background: rgba(255, 162, 58, .18); color: var(--warm); }
.rozet-yok { background: rgba(147, 164, 191, .18); color: var(--muted); }

.dogrulama-liste {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.dogrulama-liste .kaldi { color: var(--hot); }

/* ---------- KPI seridi ---------- */
.kpi-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-kart {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-baslik {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.kpi-deger { font-size: 28px; font-weight: 700; color: var(--text); }
.kpi-alt { font-size: 13px; color: var(--muted); }
.kpi-yer-tutucu { opacity: .55; }
.kpi-bekleniyor { font-size: 22px; color: var(--muted); }

/* ---------- isi haritasi ----------
   Tablo kurallari cekirdek/sablon/deck.html.j2'nin <style> blogundan
   BILINCLI KOPYA. Kopyanin siniri kesin:

   RENKLER birebir ayni kalmali -- ayrisma gozle fark edilir bir sorun olur
   ve iki ciktiya ayni anda bakan yok. Bu bir SOZ DEGIL, kilit:
   web/panel/testler/test_isi_haritasi.py icindeki
   test_isi_haritasi_RENKLERI_deck_ile_birebir ve
   test_isi_haritasi_renk_degiskenleri_ayni_degerde bir rengi ya da bir
   palet degiskenini degistirince KIRMIZIYA doner (olculdu).

   GEOMETRI ve TIPOGRAFI bilerek AYRISIR -- burayi deck'e esitlemeye
   calisma. Deck sabit 1920x1080 slaytta 17 satir + basligi tasmadan
   sigdirmak zorunda (satir 42px, baslik/hucre 13px); panelin boyle bir
   kisiti yok, dikeyde sayfa kayar, bu yuzden daha yogun bir tablo
   kullanir (satir 38px, baslik/hucre 12px). Ayni sebeple kapsayiciya
   overflow-x:auto eklendi (deck'te yok, gerek yok) ve otel basligi
   klavye/mobil ekranlarda deck'teki sabit 320px yerine min-width:180px
   ile esnetildi. */
.hmap-kapsayici { overflow-x: auto; margin-bottom: 24px; }

table.hmap-tablo { width: 100%; min-width: 760px; table-layout: fixed;
  border-collapse: collapse; }
table.hmap-tablo tr { height: 38px; }
table.hmap-tablo th, table.hmap-tablo td { border: 1px solid rgba(255, 255, 255, .08); }
table.hmap-tablo thead th { background: var(--surface); color: var(--gold-br);
  font-size: 12px; font-weight: 600; text-align: center; padding: 0 2px; }
/* 110px: tam adlar (200 karaktere kadar) buraya ZATEN sigmiyordu ve
   canlida butun satirlar "CRY..." goruntusu veriyordu. Cozum sutunu
   genisletmek DEGIL, kisa ad (Otel.kisa_ad, bkz. goc 0008) -- "Tat Beach"
   en uzun kisa ad ve 110px'e rahat siger. Kalan genislik gun sutunlarina
   gidiyor: 91 gunluk pencerede her piksel sayiyor. */
table.hmap-tablo thead th.otel-basligi { background: var(--ink); width: 110px; }
/* `var(--text)`, sabit `#EDF1F8` DEGIL: bu satir basliklari kiracinin
   metin rengini de almali. Deck 16.08.2026'da paletle baglandiginda
   ustteki `test_isi_haritasi_RENKLERI_deck_ile_birebir` ayrismayi
   yakaladi -- ve yakaladigi sey aslinda panelde de duran bir White
   Label eksigiydi: metni koyulastiran bir kiracida bu basliklar acik
   kalirdi. */
table.hmap-tablo tbody th { width: 110px; text-align: left; font-size: 12px;
  font-weight: 600; color: var(--text); background: var(--surface); padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* padding 2px -> 1px: gun sutunlari arasindaki bosluk kisildi (kullanici
   istegi), boylece ayni genislige daha cok gun sigiyor. */
td.isi { width: auto; text-align: center; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 0 1px; }

/* ---------- doluluk egrisi ---------- */
.egri-kutu {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.egri-baslik { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.egri-svg { display: block; }
.egri-eksen-etiket {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- otel detayi: baslik + veri tablolari ----------
   15.08.2026: bu bolumun HIC kurali yoktu. Baslik tarayicinin
   varsayilan dev <h1>'i olarak, tablolar da ciplak <table> olarak
   ciktigi icin sutunlar hizasizdi ve sayfa "kotu gorunuyor" diye
   bildirildi.

   Pickup ve kapasite tablolari AYNI sinif ciftini paylasiyor
   (`.veri-kutu` / `.veri-tablo`): yapilari birebir ayni ve ayri
   yazilsalardi biri gunun birinde otekinden ayrisirdi -- bu depoda
   isi haritasi CSS'i tam boyle ayrismisti. */
.otel-baslik {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 18px;
}

.veri-kutu {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  /* Dar ekranda tablo KAYAR, kucultmez: sayilar okunabilir kalmali
     (isi haritasiyla ayni karar). */
  overflow-x: auto;
}

.veri-baslik {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text);
}

.veri-tablo {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  font-size: 14px;
}

.veri-tablo th {
  text-align: right;
  padding: 0 0 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.veri-tablo th:first-child { text-align: left; padding-left: 0; }

.veri-tablo td {
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  white-space: nowrap;
}
.veri-tablo td:first-child { padding-left: 0; color: var(--muted); }
.veri-tablo tr:last-child td { border-bottom: none; }

/* `tabular-nums`: rakamlar SABIT genislikte kutulara otursun. Orantili
   yazi tipinde "1" digerlerinden dar oldugu icin sutunlar goz
   hizasinda kayiyordu. */
.veri-tablo .sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.veri-tablo .fark { font-weight: 700; }
/* Renk TEK BASINA bilgi tasimiyor: isaret (+/-) zaten sablonda her
   zaman yaziliyor, renk onu pekistiriyor. Renk korlugu olan kullanici
   isaretten okur. */
.veri-tablo .fark.artis { color: var(--gold-br); }
.veri-tablo .fark.azalis { color: var(--hot); }
.veri-tablo .fark.sabit { color: var(--muted); font-weight: 500; }

.pickup-yok, .kapasite-yok {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

@media (max-width: 560px) {
  .otel-baslik { font-size: 19px; }
  .veri-kutu { padding: 16px 14px; }
}

/* ---------- White Label renk izgarasi ----------
   Kullanici istegi (15.08.2026). Parca `_renk_alanlari.html`, hem
   kiraci yoneticisinin `/yonetim/gorunum/` ekraninda hem sistem
   yoneticisinin sirket sayfasinda kullaniliyor. */
.wl-giris { margin-bottom: 18px; max-width: 56ch; }

.wl-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.wl-renk {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.wl-renk-basi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

/* Rengin ORNEGI. Artik `<input type="color">` DEGIL, duz bir kutu:
   tarayicinin kendi secicisi kullanicinin Android'inde mevcut rengi
   okumuyor ve secim SIYAHA dusuyordu (15.08.2026, ekran goruntusuyle
   bildirildi). Secim asagidaki kaydiraclarla yapiliyor. */
.wl-ornek {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.wl-renk-ad { font-size: 14px; font-weight: 600; }

.wl-renk-aciklama {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
  min-height: 2.9em;    /* kartlar ayni yukseklikte kalsin */
}

/* Hex kutusu. `monospace` + `tnum`: alti basamak goz hizasinda
   okunabilsin, "1" digerlerinden dar olmasin. */
.wl-renk input.wl-renk-kod {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.wl-renk input.wl-renk-kod:focus {
  outline: none; border-color: var(--gold);
}
/* Yarim yazilmis kod. Gonderim ENGELLENMIYOR ama sunucu da bunu
   yakaliyor: alan artik elle yazilabiliyor ve bozuk bir deger
   sessizce dusurulseydi kullanici "kaydedildi" gorup rengin neden
   degismedigini anlayamazdi (bkz. yonetim/renk_formu.py:clean). */
.wl-renk input.wl-renk-kod.gecersiz { border-color: var(--hot); }

/* ---------- renk kaydiraclari ----------
   Betikle URETILIYOR (statik/renk_secici.js): betik yuklenmezse
   ekranda hicbir zaman calismayacak bir denetim durmaz ve hex kutusu
   tek basina calismaya devam eder. */
.wl-kaydiraclar { margin-top: 12px; }

.wl-kaydirac { display: block; margin-bottom: 9px; }
.wl-kaydirac-ad {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Yolun rengini BETIK boyuyor (canli degrade). Bu yuzden
   `background` burada TANIMLANMIYOR -- yazilsaydi satir ici stili
   ezme yarisi cikardi. */
.wl-kaydirac input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.wl-kaydirac input[type="range"]:focus { outline: 2px solid var(--gold); }

/* Tutamak. Webkit ve Gecko AYRI sozde ogeler kullaniyor ve
   birlestirilemiyorlar -- bir seciciyi tanimayan tarayici KURALIN
   TAMAMINI atar, o yuzden iki blok. Beyaz cerceve + koyu kenar:
   tutamak hem acik hem koyu yolda gorunur kalsin. */
.wl-kaydirac input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0B1426;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.wl-kaydirac input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0B1426;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.wl-sifirla {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.wl-onay {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0;
  font-size: 14px;
  cursor: pointer;
}
.wl-onay input { width: auto; }
/* Geri alinamaz eylem: dugme vurgu renginde DEGIL uyari renginde.
   Kaydet ile ayni gorunseydi ikisi karisirdi. */
button.birincil-dugme.wl-tehlike { background: var(--hot); color: #fff; }
button.birincil-dugme.wl-tehlike:hover { filter: brightness(1.1); }

/* ---------- ozel alan adlari ---------- */
.alan-tablo { margin-bottom: 18px; }
.alan-tablo td { vertical-align: middle; }
.alan-eylem { display: flex; gap: 6px; justify-content: flex-end; }
.alan-eylem form { width: auto; margin: 0; }

button.kucuk-dugme {
  width: auto; margin: 0;
  padding: 5px 11px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
button.kucuk-dugme:hover { background: var(--ink); }
/* Silme geri alinamaz: vurgu renginde DEGIL uyari renginde. */
button.kucuk-dugme.tehlike { color: var(--hot); border-color: var(--hot); }
button.kucuk-dugme.tehlike:hover { background: rgba(255, 107, 74, .14); }

.rozet-tamam, .rozet-bekliyor {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.rozet-tamam { background: rgba(99, 190, 123, .16); color: #8FE0A6; }
.rozet-bekliyor { background: rgba(255, 162, 58, .16); color: var(--warm); }

/* Hata satiri: tablonun ICINDE, kendi satirinda. Hucreye sigdirmak
   uzun DNS aciklamalarini kirpardi. */
.alan-hata-satiri td {
  color: var(--warm);
  font-size: 12.5px;
  padding-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.alan-form { margin-bottom: 18px; }

.dns-yonerge {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
}
.dns-baslik { font-weight: 600; margin-bottom: 8px; }
.dns-kayit { list-style: none; margin: 8px 0; }
.dns-kayit li { margin-bottom: 4px; }
.dns-kayit code {
  background: var(--surface-2);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
}

/* ---------- kota (Faz 4'te dolacak) ---------- */
.kota-serit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

.kota-etiket { font-weight: 600; color: var(--text); }

/* ---------- yonetim ekranlari (spec SS12.2 madde 9) ---------- */
.yonetim-gezinme {
  display: flex;
  gap: 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.yonetim-gezinme a { color: var(--muted); text-decoration: none; font-size: 14px; }
.yonetim-gezinme a:hover { color: var(--text); }

.yonetim-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.yonetim-kart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.yonetim-kart b { font-size: 28px; font-weight: 700; }
.yonetim-kart span { color: var(--muted); font-size: 13px; }

.yonetim-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.yonetim-tablo th, .yonetim-tablo td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.yonetim-tablo th { color: var(--muted); font-weight: 600; font-size: 12px; }
.yonetim-tablo code { font-size: 12px; word-break: break-all; }

.yonetim-form { max-width: 560px; margin-bottom: 26px; }
.yonetim-form p { margin-bottom: 12px; }
.yonetim-form label { display: block; color: var(--muted); font-size: 13px; }
.yonetim-form input[type="text"],
.yonetim-form input[type="email"],
.yonetim-form input[type="password"],
.yonetim-form input[type="number"],
.yonetim-form select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
}
.yonetim-form ul { list-style: none; }

.mesajlar { list-style: none; margin-bottom: 18px; }
.mesajlar li { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); }
.mesajlar .success { border-color: #3d7a4a; }
.mesajlar .error { border-color: #8a3b32; }

/* ---------- kapsam secimi (rapor formu) ---------- */
.kapsam-secim { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.kapsam-secim legend { padding: 0 6px; color: var(--muted); font-size: 12px; }
.kapsam-secenek { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.cikti-seti {
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 22px;
  border-top: 1px solid var(--line);
}
.cikti-seti-baslik { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }

/* ---------- yalniz doluluk ciktisi ---------- */
.doluluk-eylemler { display: flex; gap: 10px; margin-bottom: 12px; }
.dugme {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}
.doluluk-cerceve {
  max-height: 78vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.doluluk-cerceve img { display: block; width: 100%; height: auto; }

/* ============================================================
   FORM DENETIMLERI -- ORTAK TABAN
   ============================================================
   Kok neden (14.08.2026, canlida bildirildi): denetimleri YALNIZCA
   .giris-form ve .yonetim-form stilliyordu. Panelin filtre formu ve dil
   secici HIC stillenmemisti, dolayisiyla tarayicinin ontanimli AYDINLIK
   denetimleri koyu zeminde beyaz kutular olarak cikiyordu; coklu otel
   secimi de kendi etiketinin uzerine biniyordu.

   Kural bilerek GENIS: yeni bir form eklendiginde stil yazmayi unutmak
   ayni hatayi tekrar dogururdu. Zaten kendi stili olan iki form
   (.giris-form, .yonetim-form) daha ozgul seciciyle kazanmaya devam
   ediyor. */
.panel-govde select,
.panel-govde input[type="date"],
.panel-govde input[type="text"],
.panel-govde input[type="number"],
.panel-govde input[type="search"],
.dil-secici select {
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  /* 16px ALTINA DUSMESIN: iOS Safari daha kucuk yazi tipli bir alana
     odaklaninca sayfayi kendiliginden yakinlastiriyor ve kullanici
     panelin geri kalanini kaybediyor. */
  font-size: 16px;
  line-height: 1.2;
}

.panel-govde select:focus,
.panel-govde input:focus,
.dil-secici select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* `.ust-eylemler` seridi 15.08.2026'da kaldirildi (bkz. yukarisi).
   Dil secicinin genel kurali duruyor: serit disinda da kullaniliyor. */
.dil-secici select { padding: 7px 8px; font-size: 14px; }

/* ---------- filtre formu ---------- */
.panel-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
}

/* Etiket bir <label>, icinde <span> + denetim. Dikey yiginmazsa metin
   denetimin uzerine biner (canlida boyle gorundu). */
.filtre-alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filtre-alan > span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.panel-filtre button { width: auto; margin-top: 0; padding: 10px 20px; }

/* Coklu otel secimi. `size` sablonda 4; yuksekligi burada sabitlemiyoruz
   ki dil/yazi tipi degisince satirlar kirpilmasin. */
.panel-filtre select[multiple] {
  min-width: 280px;
  max-width: 100%;
  padding: 4px;
  font-size: 14px;
}

.panel-filtre select[multiple] option {
  padding: 6px 8px;
  border-radius: 6px;
}

/* Secili secenegin arka plani. `background-color` tek basina Chrome'da
   cogu surumde yok sayilir; gradyan bicimi yaygin kullanilan gecerli
   yoldur. Canlida gozle DOGRULANACAK -- dogrulanmadan "calisiyor"
   denmeyecek. */
.panel-filtre select[multiple] option:checked {
  background: linear-gradient(var(--gold), var(--gold));
  color: var(--ink);
  font-weight: 600;
}

/* HTMX gostergesi: kural yoksa "Yenileniyor..." metni HER ZAMAN gorunur
   kalir (htmx yalnizca .htmx-request sinifini ekler, gizlemeyi CSS'e
   birakir). */
.htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--muted);
  font-size: 13px; align-self: center; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ============================================================
   KIRILMA NOKTALARI
   ============================================================
   Bu dosyada 14.08.2026'ya kadar TEK BIR @media kurali yoktu; panel
   yalnizca genis ekranda kullanilabilirdi. Iki esik:
     900px -- tablet/kucuk dizustu: ust serit ve filtre dikeye doner
     560px -- telefon: ic bosluklar ve tipografi sikilasir
   Isi haritasi tablosu zaten .hmap-kapsayici { overflow-x:auto } ile
   yatay kayiyor; min-width:900px oldugu icin dar ekranda KUCULMUYOR,
   KAYIYOR -- sayilar okunabilir kalsin diye bilincli. */
@media (max-width: 900px) {
  .panel-govde { padding: 20px 18px; }

  /* Filtre alanlari tam genislige yayilsin; yan yana sikismis iki tarih
     alani telefonda dokunulamayacak kadar dar kaliyordu. */
  .panel-filtre { flex-direction: column; align-items: stretch; }
  .filtre-alan { width: 100%; }
  .panel-filtre select,
  .panel-filtre input[type="date"] { width: 100%; }
  .panel-filtre select[multiple] { min-width: 0; }
  .panel-filtre button { width: 100%; }

  .kpi-serit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .tazelik-bandi { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 560px) {
  .panel-govde { padding: 16px 14px; }
  .panel-filtre { padding: 14px; }

  .kpi-serit { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-kart { padding: 14px; }
  .kpi-deger { font-size: 22px; }

  .egri-kutu { padding: 16px 14px; }
  .yonetim-tablo { font-size: 13px; }
  .yonetim-tablo th, .yonetim-tablo td { padding: 8px 8px; }
}

/* Yonetim tablolari da dar ekranda tasiyordu; kapsayici sablonda degil
   burada cozuluyor cunku birden cok sablon ayni tabloyu kullaniyor. */
@media (max-width: 900px) {
  .yonetim-tablo { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------- Son Durum */
.canli-beklemede { padding: 24px; text-align: center; }
.hiz-siniri-notu { color: #E0B44F; font-size: 13px; margin: 8px 0 0; }
.canli-cikti { margin-top: 20px; }
.canli-cikti button { width: auto; }

@media (max-width: 640px) {
  .doluluk-tablo { font-size: 13px; }
  .doluluk-tablo th, .doluluk-tablo td { padding: 4px 6px; }
  .sutun-gosterge { flex-wrap: wrap; gap: 10px; }
}

/* 22px: dugmenin kendi margin-top'u 8px, yani baglanti dugmeye
   YAPISIK duruyordu (14.08.2026 canlida gorundu). */
.giris-yardim { margin-top: 22px; font-size: 13px; text-align: center; }
.giris-yardim a { text-decoration: underline; }
/* GENEL kural. Once yalnizca `.giris-form` kapsaminda tanimliydi ve
   sinifi giris ekrani disinda kullanan uc sablon (sistem_kiraci,
   sistem_kayitlar, yonetim_gorunum) HICBIR stil almiyordu. Ustteki
   `* { margin: 0 }` sifirlamasi yuzunden alt boslugu da yoktu:
   sirket sayfasinda "Ozel alan adi" aciklamasi tablonun baslik
   satirina yapisti (16.08.2026 canlida gorundu).
   Alt bosluk 12px -- `.sistem-bolum h2`nin 10px'inden bir tik fazla,
   cunku bu metin bir basligi DEGIL bir icerik blogunu ayiriyor. */
.ikincil-metin { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
/* Giris formunda bosluk `p + p` ile zaten veriliyor; oradaki sikisik
   duzeni bozmamak icin alt bosluk SIFIRLANIYOR. */
.giris-form .ikincil-metin { margin-bottom: 0; }
.giris-form p + p { margin-top: 10px; }

/* Filtre kisayollari. `.baglanti-dugme`: eylem bir DUGME olmali
   (klavye/ekran okuyucu icin), ama gorsel olarak baglanti gibi
   durmali -- panelin genel buton stili (dolu altin blok) burada
   filtreyi golgede birakirdi. */
/* TEK SATIR: dar ekranda alt alta dusup uc satir kaplamasindansa
   yatay kaysin (15.08.2026 kullanici istegi). */
.filtre-kisayol {
  display: flex; gap: 18px; align-items: center;
  margin: -8px 0 20px; font-size: 13px;
  flex-wrap: nowrap; white-space: nowrap;
  overflow-x: auto;
}
.panel-filtre + .filtre-kisayol { margin-top: 4px; }
/* `.panel-filtre button` altin blok stili veriyor ve kisayollar artik
   FORMUN ICINDE -- o kural buraya sizip dugmeleri sari kutu yapiyordu
   (kullanici mobilde gordu). Ozgullugu asan bir secici ile geri
   aliniyor. */
.panel-filtre .baglanti-dugme,
.baglanti-dugme {
  width: auto; margin: 0; padding: 0;
  background: none; border: none;
  color: var(--gold-br); font-size: 13px; font-weight: 400;
  text-decoration: underline; cursor: pointer;
}
.panel-filtre .baglanti-dugme:hover,
.baglanti-dugme:hover { background: none; color: var(--text); }


/* ------------------------------------------- Doluluk Grafigi
   Veboni "Group Forecast" duzeni: kart basina KPI + gun gun yigilmis
   sutun. SVG DEGIL, flex -- yatay cevrilince genisler ve rakamlar
   ezilmez (bkz. web/panel/doluluk_grafigi.py). */
.dg-kart {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 18px 20px 14px;
  margin-bottom: 18px;
}
.dg-kart-grup { border-top: 3px solid var(--gold); }
.dg-kart-baslik {
  font-size: 15px; font-weight: 700; text-align: center;
  margin-bottom: 12px; color: var(--text);
}

.dg-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.dg-kpi-yuzde {
  font-size: 30px; font-weight: 700; color: var(--cool);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dg-kpi-satir { font-size: 14px; font-variant-numeric: tabular-nums; }
.dg-kpi-satir em { color: var(--muted); font-style: normal; margin-right: 6px; }

.dg-gosterge { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px;
  color: var(--muted); margin-bottom: 8px; }
.dg-gosterge span::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 6px; border-radius: 2px;
}
.gosterge-dolu::before  { background: var(--cool); }
.gosterge-bos::before   { background: #63BE7B; }
.gosterge-asiri::before { background: var(--hot); }

/* align-items:flex-end -- sutunlar TABANDAN yukselir. Gun kutulari
   flex:1 oldugu icin sutun sayisi degisince genislik kendiliginden
   ayarlanir; yatay cevirmek de ayni yoldan calisir. */
.dg-grafik {
  display: flex; align-items: flex-end; gap: 2px;
  height: 190px; padding-top: 4px;
}
.dg-gun { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end;
  min-width: 0; }
.dg-sutun {
  width: 100%; display: flex; flex-direction: column;
  border-radius: 2px 2px 0 0; overflow: hidden; min-height: 1px;
}
.dg-p-bos, .dg-p-dolu {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dg-p-dolu { background: var(--cool); }
.dg-p-bos  { background: #63BE7B; }
/* Kapasite asimi: sutunun TAMAMI kirmizi -- kaynak ekran da boyle
   gosteriyor. Sessizce normal bir sutun gibi durmamali. */
.dg-sutun-asiri .dg-p-dolu { background: var(--hot); }
.dg-p-bos b, .dg-p-dolu b {
  font-size: 10px; font-weight: 600; color: #0B1426;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dg-p-dolu b { color: #06121F; }

@media (max-width: 640px) {
  .dg-kart { padding: 14px 12px 10px; }
  .dg-grafik { height: 150px; gap: 1px; }
  .dg-kpi-yuzde { font-size: 26px; }
}
/* Yatay / genis ekran: grafik yukselsin ki genisleyen sutunlar bas1k
   gorunmesin (kullanicinin "yatay dondurunce daha detayli" istegi). */
@media (min-width: 900px) {
  .dg-grafik { height: 240px; }
}

/* ------------------------------------------- Isi Haritasi basligi */
.hmap-bolum { margin-bottom: 24px; }
.bolum-baslik { font-size: 17px; margin: 0 0 2px; }
.bolum-alt-baslik { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

@media (max-width: 640px) {
  .dg-alt { font-size: 11px; gap: 10px; }
  .dg-ad { font-size: 13px; }
}

/* Birincil eylem dugmesi. `.panel-filtre button` zaten altin blok; bu sinif AYNI gorunumu form disindaki tekil
   eylemlere tasir. Kullanici bu ikisini "link gibi duruyor, buton
   olsun" diye bildirdi (14.08.2026): tarayicinin varsayilan gri
   dugmesi koyu panelde tiklanabilir GORUNMUYORDU. */
button.birincil-dugme {
  width: auto;
  margin-top: 10px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button.birincil-dugme:hover { background: var(--gold-br); }

/* Belirsiz ("gidip gelen") ilerleme cubugu. Video uretiminde gercek
   yuzde yok; sahte bir sayi gostermektense hareket gosteriliyor. */
.ilerleme-belirsiz { position: relative; overflow: hidden; }
.ilerleme-kayan {
  position: absolute; top: 0; bottom: 0; width: 35%;
  background: var(--gold);
  border-radius: inherit;
  animation: kayan-ilerleme 1.4s ease-in-out infinite;
}
@keyframes kayan-ilerleme {
  0%   { left: -35%; }
  100% { left: 100%; }
}
/* Hareketi azalt tercihine SAYGI: surekli kayan bir seri vestibuler
   rahatsizlik tetikleyebiliyor. Animasyon yerine sabit yarim cubuk. */
@media (prefers-reduced-motion: reduce) {
  .ilerleme-kayan { animation: none; left: 0; width: 50%; }
}
.ilerleme-not {
  flex-basis: 100%;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* Gecen sure sayaci. Tek isi "burada bir sey suruyor" demek: cubuk
   parca basina (15-20 sn'de bir) kipirdiyor ve aradaki olu zaman
   "donmus" gibi okunuyordu -- bir kullanici 91 saniye bekleyip cikis
   yapti (15.08.2026, canlida olculdu). `tabular-nums`: rakam
   degisirken genislik oynamasin, yoksa sayac titrer. */
.gecen-sure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 13px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* "Sayfayi kapatabilirsiniz" guvencesi. Nottan AYRI ve daha gorunur:
   ayrilmanin guvenli oldugunu bilmek, olcumdeki kullanicinin
   eksigiydi. */
.ilerleme-guvence {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(79, 168, 232, .12);
  border: 1px solid rgba(79, 168, 232, .3);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
}

/* ---------------------------------------------- marka + logo */
/* Marka artik BAGLANTI: tiklaninca panel ana sayfasina gider
   (14.08.2026 kullanici istegi). <a> varsayilan alti cizgisi ust
   cubukta gurultu yapiyor, kaldirildi. */
a.marka {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
a.marka:hover span { color: var(--text); }
.marka-logo { height: 28px; width: auto; display: block; }

.giris-logo { text-align: center; margin-bottom: 18px; }
.giris-logo img { max-height: 64px; max-width: 100%; }
.logo-onizleme { max-height: 60px; max-width: 240px; }

/* ---------------------------------------------- sistem yonetimi */
.sistem-bolum {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.sistem-bolum h2 { font-size: 17px; margin-bottom: 10px; }
.sistem-bolum h3 { font-size: 15px; margin: 20px 0 8px; }
.yonetim-form { max-width: 520px; }
.yonetim-form p { margin-bottom: 12px; }
.yonetim-form label { display: block; font-size: 13px; color: var(--muted);
  margin-bottom: 4px; }
.yonetim-form input, .yonetim-form select {
  width: 100%; background: var(--ink);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: 14px;
}
.yonetim-form .helptext { display: block; font-size: 12px;
  color: var(--muted); margin-top: 4px; }

/* ============================================================
   RAPOR DURUM SAYFASI
   ============================================================
   Bu sayfanin HIC stili yoktu (14.08.2026'da olculdu): anlatim
   kutulari PDF satirina yapisiyordu, dugmeler tarayicinin gri
   varsayilaniydi ve slaytlar mobilde kucultmuyordu. Kullanici
   ucunu de bildirdi. */

.cikti-listesi { list-style: none; margin: 8px 0 0; }
.cikti-listesi li { padding: 4px 0; }
.cikti-boyut { color: var(--muted); font-size: 13px; margin-left: 6px; }

/* Anlatim bolumu DOSYALARDAN ayrik dursun -- "cok bitisik PDF satiri
   ile" (kullanici). */
.anlatim-bolum {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.anlatim-bolum h2 { margin-bottom: 14px; }

/* Metin kutulari: mobilde ALT ALTA, genis ekranda iki sutun. Eskiden
   satir ici akiyor ve dar ekranda ust uste biniyorlardi. */
.anlatim-bolum form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px) {
  .anlatim-bolum form { grid-template-columns: 1fr 1fr; }
}

.anlatim-parca {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 10px 12px;
}
.anlatim-no {
  color: var(--gold-br); font-weight: 700; font-size: 13px;
  min-width: 18px; padding-top: 8px;
}
.anlatim-parca textarea {
  flex: 1; min-width: 0;             /* min-width:0 -- flex cocugu
                                        tasmasin (mobilde tasiyordu) */
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;              /* varsayilan monospace idi */
  line-height: 1.45;
  resize: vertical;
}
.anlatim-parca textarea:focus { outline: none; border-color: var(--gold); }

/* Dugmeler SON metin kutusunun altinda, SAGDA (kullanici istegi).
   grid-column: 1/-1 -- iki sutunlu duzende tam genislik kaplasin. */
.anlatim-eylemler {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.anlatim-eylemler .birincil-dugme small {
  font-weight: 400; opacity: .8; margin-left: 4px;
}
button.ikincil-dugme {
  width: auto; margin: 0;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 15px;
  cursor: pointer;
}
button.ikincil-dugme:hover { background: var(--surface-2); }
.anlatim-eylemler .birincil-dugme { margin-top: 0; }

.ses-kapisi { margin-top: 16px; }
.kapali-not { color: var(--muted); font-size: 14px; }

/* Slaytlar: mobilde KUCULSUN. Eskiden sabit boyuttaydi ve ekrani
   tasiriyordu (kullanici bildirdi). auto-fill + minmax: genis ekranda
   yan yana, dar ekranda tek sutun. */
.slayt-serit { margin-top: 32px; }
/* MOBILDE TEK SUTUN (kullanici istegi): iki slayt yan yana
   okunmuyordu. 560px ustunde iki, 900px ustunde uc sutun -- telefon
   yatay cevrilince kendiliginden genisliyor. */
.slayt-kutular {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 560px) {
  .slayt-kutular { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .slayt-kutular { grid-template-columns: repeat(3, 1fr); }
}
.slayt-kutu {
  position: relative; display: block;
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--ink);
}
.slayt-kutu img {
  display: block;
  width: 100%; height: auto;         /* orani koru, tasma */
}
.slayt-no {
  position: absolute; left: 6px; top: 6px;
  background: rgba(11,20,38,.8); color: var(--gold-br);
  font-size: 12px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
}

/* Video oynatici ve genel gorunum goruntusu de tasmasin. */
.rapor-video, .genel-gorunum-kutu img {
  display: block; width: 100%; height: auto; max-width: 100%;
}

/* Kucuk ekranda gorsel govde daralsin. */
@media (max-width: 640px) {
  .anlatim-eylemler { justify-content: stretch; }
  .anlatim-eylemler button { flex: 1 1 100%; }
}

/* Slayt alt seridi: indirme dugmesi. `figure`/`figcaption` -- gorsel ve
   ona ait eylem anlamsal olarak bir arada. */
.slayt-kutu { display: flex; flex-direction: column; }
.slayt-kutu > a { position: relative; display: block; }
.slayt-alt {
  display: flex; justify-content: flex-end;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.slayt-indir { font-size: 13px; text-decoration: none; }
.slayt-indir:hover { text-decoration: underline; }

/* Bolum basligi + eylem. Mobilde ALT ALTA ve ARALIKLI, genis ekranda
   ayni satirda. "Yeni sirket ac" basliga yapisikti (kullanici bildirdi). */
.bolum-basligi {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  margin-bottom: 18px;
}
.bolum-basligi h1 { margin: 0; }
a.birincil-baglanti {
  display: inline-block;
  background: var(--gold); color: var(--ink);
  border-radius: 8px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
a.birincil-baglanti:hover { background: var(--gold-br); }
@media (max-width: 560px) {
  .bolum-basligi { flex-direction: column; align-items: stretch; }
  a.birincil-baglanti { text-align: center; }
}

/* Filtre kisayollari artik FORMUN ICINDE, Uygula'nin ustunde. */
.panel-filtre .filtre-kisayol { margin: 4px 0 10px; }

/* ------------------------------------------- parola goster/gizle
   Betik alani bir `.parola-sarmal` icine aliyor (bkz.
   statik/parola_goster.js). Alan `width:100%` oldugu icin dugme
   MUTLAK konumlandiriliyor -- akista birakilsaydi alani daraltir ya
   da alt satira duserdi.

   SECICI OZGULLUGU TUZAGI (15.08.2026, canlida gorundu): burasi
   once yalniz `.parola-goz` (0,1,0) idi, ama `.giris-form button`
   (0,1,1) DAHA OZGUL. Altin blok stili dugmeye siziyor, "Goster"
   tam genislikte sari bir tugla olup parola alaninin USTUNE biniyordu
   -- kullanici ekran goruntusuyle bildirdi. Ayni sizinti bir gun once
   filtre kisayollarinda da yasandi. Cozum: sarmali da secicilere
   katarak (0,2,1) ozgulluge cikmak. */
.parola-sarmal { position: relative; display: block; }
.parola-sarmal input { width: 100%; padding-right: 46px; }
.parola-sarmal button.parola-goz {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.parola-sarmal button.parola-goz:hover {
  color: var(--text);
  background: var(--surface-2);
}
.parola-sarmal button.parola-goz svg {
  width: 20px; height: 20px; display: block;
}

.kod-hata {
  background: rgba(255,107,74,.14);
  border: 1px solid rgba(255,107,74,.35);
  border-radius: 8px;
  padding: 9px 12px; margin-bottom: 14px;
  font-size: 13px; color: var(--text);
}