/* KULLANICI ISTEGI (site geneli gorsel yenileme, tipografi adimi - Helldivers
   Companion referansi): siteninin genel HUD/sci-fi hissi icin Google Fonts'tan
   'Rajdhani' yuklendi. SADECE html/body TABAN yazi tipi degistiriliyor - asagida
   ('Courier New' kalan ~20 spesifik override, orn. .topnav .brand, .dossier*,
   folder-tab/ribbon/badge vb.) BILEREK DOKUNULMADI: bunlar "askeri dosya/
   daktilo" temasinin bilincli vurgu unsurlari, siteyi tek tip sans-serif'e
   cevirmek o kimligi yok ederdi. button/input/textarea/select zaten
   font-family:inherit kullandigi icin bu TEK degisiklik onlarin hepsine
   otomatik yansir. ONEMLI: CSP'de (src/middleware/security.js VE
   public/.htaccess - ikisi de guncellendi, bkz. #303 GA gecmisi) hem
   fonts.googleapis.com (style-src) hem fonts.gstatic.com (font-src) izinli
   olmali yoksa font sessizce yuklenemez ve fallback'e (Courier New) duser. */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
/* KULLANICI BULGUSU (konsol uyarisi): "Define @import rules at the top of
   the stylesheet" - Ortacag/Gunumuz donem temalari icin eklenen Cinzel/Inter
   @import satirlari yanlislikla dosyanin ORTASINA (baska kurallardan SONRA)
   eklenmisti. CSS SPESIFIKASYONU GEREGI @import SADECE dosyanin EN BASINDA
   (baska hicbir kuraldan once) gecerlidir - aksi halde tarayici o @import'u
   SESSIZCE YOK SAYAR (hata vermez, font hic yuklenmez, fallback'e duser).
   Bu yuzden Ortacag/Gunumuz temalari suana kadar Cinzel/Inter YERINE hep
   Rajdhani/Courier New gorunuyordu. Duzeltme: ikisi de buraya, ilk @import'un
   hemen altina tasindi - asagida (html[data-era=...] bloklarinda) SADECE
   font-family kullanimlari kaldi, @import'lar degil. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #030503;
  --bg-elevated: #060b06;
  --bg-card: #050905;
  --border: #1c3a1c;
  --border-strong: #2e7d4f;

  --green: #4ef07a;
  --green-dim: #2e7d4f;
  --green-bright: #9dffc0;
  --amber: #e8c34d;
  --amber-dim: #a98d2e;

  --red: #ff5c4d;
  --red-dark: #7a2620;

  --text: #cdeed9;
  --text-dim: #4a8f66;

  --success: #4ef07a;
  --danger: #ff5c4d;

  /* eski degisken adlariyla uyumluluk icin (bazi eski inline stiller hala kullaniyor) */
  --olive: #4ef07a;
  --olive-dark: #2e7d4f;

  /* KULLANICI ISTEGI (Meclis Faz 5D): "Görevli Paneli" icin, mevcut yesil
     (.report-dossier) ve amber (.file-folder-row) ile KARISMAYAN, resmi/
     kisitli-erisim hissi veren AYRI bir ucuncu vurgu rengi - celik mavisi. */
  --steel: #6b9fd4;
  --steel-dim: #3c5f80;

  /* KULLANICI ISTEGI (#528, tema tutarsizliklarini bul/duzelt): parlak/renkli
     bir arkaplan (rutbe/rozet/badge/aktif buton) uzerine yazilan "koyu metin"
     icin site genelinde YEDI farkli, birbirinden bagimsiz secilmis neredeyse-
     siyah ton kullaniliyordu (var(--ink), var(--ink), var(--ink), var(--ink), var(--ink),
     var(--ink) - hicbiri paylasilan bir degiskene bagli degildi, her biri ayri
     bir ozellik eklenirken elle secilmisti). Gorsel olarak neredeyse ayirt
     edilemez ayni "koyu mürekkep" kavramini YEDI KEZ TEKRAR ETMEK yerine tek,
     paylasilan bir degisken tanimlandi - hem tutarlilik hem tek yerden
     yonetim icin. */
  --ink: #101008;

  /* KULLANICI ISTEGI (Galaktik/Ortacag/Gunumuz donem temalari): html/body'nin
     taban yazi tipi artik degiskene bagli - varsayilan (Galaktik) mevcut
     Rajdhani'yi AYNEN korur, era bloklari asagida bunu farkli bir yazi tipiyle
     override eder. Bkz. public/shared/nav.js ERA_THEME_KEY/applyEraTheme(). */
  --font-body: 'Rajdhani', 'Courier New', Courier, sans-serif;
}

/* KULLANICI ISTEGI: "bu tema tonumuz bazen gözümüzü alıyor, yoruyor - göz
   yormayan modunu yapalım" ile baslayan Loş tema, once ayri bir gunes/ay
   dugmesiyle acilip kapaniyordu (bkz. #446, 2. yeniden tasarim gecmisi -
   ZEMIN KOYU KALIYOR, sadece eski sert siyah+neon-yesil kontrasti
   yumusatilmis/soluklastirilmis bir versiyondu). SONRA kullanici istegiyle
   ("loş temayı da o bara ekleyelim, 4 tema seçeneğimiz olsun, bu vesileyle
   daha güzel yapalım") bu tema BURADA IKI SEY BIRDEN degisti: (1) ayri
   dugme/attribute (data-theme="light") KALDIRILDI, artik asagidaki
   Galaktik/Ortacag/Gunumuz ile AYNI mekanizmayi (data-era) paylasan 4.
   secenek - bkz. public/shared/nav.js ERA_THEME_KEY/ERA_THEME_LABELS.los;
   (2) renk paleti, kullaniciya ONCE gorsel onizleme olarak sunulup
   onaylandiktan SONRA uygulanan YENI bir "loş orman/antrasit" paletiyle
   degistirildi - eskisi gibi soluk gri-zeytin degil, daha "canli" (yine
   goz yormayan, koyu zeminli) bir ton. */
html[data-era="los"] {
  --bg: #1a1f1c;
  --bg-elevated: #212823;
  --bg-card: #1e2420;
  --border: #333d35;
  --border-strong: #4d5c50;

  --green: #7fb896;
  --green-dim: #5c8a70;
  --green-bright: #a3d4b6;
  --amber: #c9a464;
  --amber-dim: #9c7d4a;

  --red: #c17361;
  --red-dark: #8f4f42;

  --text: #d3d8cd;
  --text-dim: #8f9a8a;

  --success: #7fb896;
  --danger: #c17361;

  --olive: #7fb896;
  --olive-dark: #5c8a70;

  --steel: #7fa8c4;
  --steel-dim: #557087;

  --ink: #101008;
}
/* Loş, ACIK/beyaz zeminli DEGIL - koyu temanin zenginlestirilmis bir
   versiyonu, bu yuzden CRT tarama-cizgisi efektinin kaldirilmasina gerek
   yok (zaten koyu zemin uzerinde sorunsuz gorunuyor). */

/* ============================================================
   KULLANICI ISTEGI: "TGF olarak galaktik savaslarin disinda gunumuz
   ve ortacag savaslari da yapiyoruz - 3 farkli temaya butonla
   gecebilir miyiz?" (sonra Loş de eklenip 4 oldu, yukarida bkz.) -
   kullanicinin kendi secimine gore SADECE GORSEL YUZEY (renk paleti +
   yazi tipi + hafif arkaplan dokusu) degisir - sayfa yapisi/metinler/
   ozellikler AYNI kalir (derin reskin degil, sadece yuzey - kullaniciyla
   boyle scope edildi). Secim + attribute mantigi icin bkz.
   public/shared/nav.js ERA_THEME_KEY/applyEraTheme(). Varsayilan
   (attribute yokken) mevcut Galaktik/sci-fi temadir - yukaridaki :root
   blogu hic degismedi. Cinzel/Inter @import'lari dosyanin EN BASINA
   tasindi (bkz. yukarida Rajdhani'nin hemen alti) - CSS kurali geregi
   @import sadece orada gecerli, burada olsalar sessizce yok sayilirlardi. */

/* --- Ortaçağ: eskimiş pergament/deri + tunç-altın ve koyu kızıl vurgular --- */
html[data-era="ortacag"] {
  --bg: #241a10;
  --bg-elevated: #2f2214;
  --bg-card: #2a1e12;
  --border: #4a3620;
  --border-strong: #7a5a2e;

  --green: #c9a24a;
  --green-dim: #8a7038;
  --green-bright: #e8c878;
  --amber: #b5502f;
  --amber-dim: #8a3d24;

  --red: #9c2b2b;
  --red-dark: #6b1d1d;

  --text: #e9d8b6;
  --text-dim: #a8916a;

  --success: #c9a24a;
  --danger: #9c2b2b;

  --olive: #c9a24a;
  --olive-dark: #8a7038;

  --steel: #8a6a45;
  --steel-dim: #5c4830;

  --ink: #1a1208;

  --font-body: 'Cinzel', 'Courier New', Courier, serif;
}
html[data-era="ortacag"] {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% -10%, rgba(201,162,74,0.10), transparent 60%),
    var(--bg);
}

/* --- Günümüz: temiz/modern, soğuk gri-mavi tonlar --- */
html[data-era="gunumuz"] {
  --bg: #11151b;
  --bg-elevated: #171c24;
  --bg-card: #141922;
  --border: #262e3a;
  --border-strong: #384456;

  --green: #3aa0ff;
  --green-dim: #2a6fa8;
  --green-bright: #7dc4ff;
  --amber: #f2a93c;
  --amber-dim: #b3792a;

  --red: #e5484d;
  --red-dark: #9e2f33;

  --text: #dbe4ee;
  --text-dim: #7c8ba0;

  --success: #3aa0ff;
  --danger: #e5484d;

  --olive: #3aa0ff;
  --olive-dark: #2a6fa8;

  --steel: #6b9fd4;
  --steel-dim: #3c5f80;

  --ink: #0c1016;

  --font-body: 'Inter', 'Rajdhani', 'Courier New', sans-serif;
}
html[data-era="gunumuz"] {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px),
    var(--bg);
}

* { box-sizing: border-box; }

/* KULLANICI ISTEGI (#451): "Sitede dosya ve fotoğrafları ölçekleyebilelim.
   Bazen fotoğraflar büyük oluyor falan taşıyor, bunları ölçütleyebilelim."
   Site genelinde GUVENLIK AGI: hicbir yerde ozel bir class/inline-style ile
   zaten sabitlenmemis bir <img>/<video>, kendi kapsayicisindan (kart, modal,
   dossier vs.) TASAMAZ - dogal (orijinal) genislik/yukseklik oraninda otomatik
   kuculur. Sabit width+height+object-fit kullanan TUM mevcut avatar/ikon/
   dossier-photo/courtroom-seat-photo gibi ozel class'lar CSS ozguculugu
   geregi bu kuraldan DAHA GUCLU oldugu icin hicbir sekilde etkilenmez/degismez. */
img, video {
  max-width: 100%;
  height: auto;
}

/* KULLANICI BULGUSU: "site arkaplanı kayboldu, siyah sadece - foto ekleme
   kısmında yüklü ama gelmiyor, tekrar yükleyince de gelmiyor". Kok neden: bu
   kural eskiden "html, body { background: ... }" seklindeydi - yani HEM html
   HEM body kendi opak arkaplanina sahipti. nav.js'teki applySiteBackground()
   ise yuklenen ozel gorseli, body'nin ICINE, position:fixed + z-index:-1 bir
   div olarak ekliyor (bkz. public/shared/nav.js #site-bg-layer). SORUN: body
   kendi basina bir "stacking context" OLUŞTURMUYOR (position/opacity/transform
   yok) - bu durumda negatif z-index'li bir alt eleman, body'nin KENDI kutu
   arkaplaniyla AYNI (kok) stacking context'te "in-flow, konumlandirilmamis
   kutular" katmaninda yarisir, ki bu katman negatif z-index'ten SONRA
   boyanir. Yani body'nin kendi opak degrade arkaplani, ozel yuklenen gorselin
   TAM USTUNE boyaniyordu - gorsel dogru yuklenmis olsa bile HICBIR ZAMAN
   gorunmuyordu. Duzeltme: opak arkaplan SADECE html'de kalsin (canvas'a
   yayilir, en altta), body'nin KENDI arkaplani transparent olsun - boylece
   body'nin arkaplan katmaninda artik boyanacak opak bir sey kalmiyor ve
   negatif z-index'li ozel gorsel katmani (varsa) gorunur hale geliyor. */
html {
  margin: 0;
  min-height: 100%;
  /* KULLANICI BULGUSU: "mobil olcude bazi seyler sagsa tasiyor, zoom-out'ta
     site tuhaf durdu" - herhangi bir ogenin (harita tasma payi, genis dosya
     karti, vb.) viewport genisligini asmasi durumunda tarayici sayfayi yatay
     kaydirilabilir yapiyor ve bu, dar ekranlarda igerigin "saga kaymis" gibi
     hissettirmesine yol aciyordu. html+body seviyesinde bir GUVENLIK AGI:
     herhangi bir alt oge tasarsa bile yatay scroll/kayma OLUSMAZ, tasan kisim
     sadece gorunmez olur - kok nedeni (asagida .dossier-body-wrap mobil
     yigma kurali) ayrica duzeltildi ama bu genel guvenlik agi olarak kalir. */
  overflow-x: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
}
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
}

a { color: var(--green); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; color: var(--green-bright); }

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ---------- Top nav (terminal baslik cubugu) ---------- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}

.topnav .brand {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 17px;
  color: var(--green);
  text-shadow: 0 0 6px rgba(78,240,122,0.4);
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
}
.topnav .brand::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--green);
  box-shadow: 0 0 6px 2px rgba(78,240,122,0.7);
  margin-right: 8px;
  animation: pulse-led 2s infinite;
  vertical-align: middle;
}
@keyframes pulse-led {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.topnav .links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.topnav .links a {
  color: var(--green-dim);
  padding: 6px 10px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.topnav .links a:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(78,240,122,0.06);
}
.topnav .links a.active {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

.topnav .right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  /* KULLANICI BULGUSU: "profil kısmı sol alta geçti" - .topnav flex-wrap:wrap
     oldugu icin (bkz. yukarida) bu blok tek basina yeni bir satira dustugunde,
     .topnav'in justify-content:space-between kurali TEK bir ogeyi o satirin
     SOL ucuna sabitliyordu (space-between'in matematiksel sonucu). Asil tetikleyici
     nav.js'teki bir rutbe ikonu hatasiydi (duzeltildi), ama bu satir olmadan
     ayni gorunum baska bir nedenle (uzun kullanici adi, cok rozet vb.) yine
     olusabilirdi - margin-left:auto ile bu blok sardigi satirda HER ZAMAN
     saga yaslanir, "sol alta dusme" hissi bir daha olusmaz.
  */
  margin-left: auto;
  /* KULLANICI BULGUSU (bu tur): "Rütbe level kredi çıkış ekranı gözükemiyor,
     zoomout yapınca daha kötü oluyor" - GERCEK KOK NEDEN: bu blok
     (ana-ekrana-ekle + tema + yardim + zil + user-chip + Cikis butonu) kendi
     ICINDE hicbir zaman SARMIYORDU (flex-wrap tanimli degildi). Dar ekranlarda
     bu ogelerin toplam genisligi viewport'u astiginda, .topnav'in KENDISI
     sarabiliyordu (flex-wrap:wrap) ama .right TEK BIR PARCA olarak sardigi
     icin kendi icindeki butonlar satirin disina TASIYOR ve html/body'deki
     genel overflow-x:hidden guvenlik agi bu tasan kismi (Cikis butonu, kredi,
     rutbe rozeti) SESSIZCE GORUNMEZ yapiyordu - kullanici "gozukmuyor" olarak
     algiliyordu. Zoom-out bunu DUZELTMIYORDU, cunku sorun olcek degil, TASMA/
     KIRPILMA idi - butun sayfa kucalinca digger oranlar da bozuluyor, daha
     kotu gorunuyordu. Duzeltme: mobilde (asagidaki media query) bu bloga
     flex-wrap:wrap veriliyor - artik sigmayan butonlar KIRPILMIYOR, bir alt
     satira geciyor (goruluyor).
  */
}

.bell-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--green);
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bell-btn:hover { border-color: var(--green); background: rgba(78,240,122,0.08); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-family: 'Courier New', monospace;
}
.user-chip .lvl {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--border-strong);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}
.user-chip .credits {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Buttons / inputs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn:hover { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn.orange, .btn.solid { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn.orange:hover, .btn.solid:hover { background: var(--green-bright); border-color: var(--green-bright); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--ink); border-color: var(--red); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.small { padding: 5px 9px; font-size: 12.5px; }

input, textarea, select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 14.5px;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(78, 240, 122, 0.15);
}
label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); display: block; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* KULLANICI BULGUSU: "profilinde bildirim ayarları, tik kutularıyla yazılar
   çok ayrı gayrı birbirinden mesafesi çok açık." Kok neden: yukaridaki genel
   "input, textarea, select { padding: 8px 11px; width: 100%; }" kurali TUM
   input turlerine (checkbox/radio dahil) uygulaniyordu - bu, kutucugun
   gorunmez kutusunu tam genislige (width:100%) ve buyuk bir padding'e
   zorluyor, boylece checkbox ile yanindaki metin/etiket arasinda buyuk,
   tikanmis bir bosluk olusuyordu. Bu SADECE profildeki bildirim tercihlerini
   degil, admin panelindeki butun checkbox'lari (gorev/rutbe/rozet yetki
   bayraklari, acik/kapali anahtarlari) ve anket/oylama radyo dugmelerini de
   etkiliyordu - bu yuzden duzeltme TEK bir yerde degil, kok neden olarak TUM
   checkbox/radio elemanlarini kapsayacak sekilde global yapildi (bkz. daha
   once tek bir checkbox icin elle eklenmis "style=\"width:auto;\"" workaround'u
   - admin.js "Yayında" checkbox'i - artik gereksiz ama zararsiz kaliyor). */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--green);
}

/* ---------- Cards / kutular (referans "FOLDERS" gorunumu) ----------
   KULLANICI ISTEGI (site geneli sadelestirme, panel/kart adimi - Helldivers
   Companion referansi: "yazı fontu, tematiği, sadeliği... ne kadar hoş"):
   .card, TUM sitede (25 dosya) tekrar eden EN TEMEL/EN YAYGIN konteyner -
   burasi degisince en genis, en dusuk riskli etki alani elde edilir (icerik/
   yapisi hicbir HTML/JS DEGISMEDI, sadece kabuk gorunumu). Eskiden kenarlik
   parlak yesildi (--border-strong) ve kose kesikti (radius:0) - bircok kart
   ust uste dizilince ("kutu icinde kutu") gozu yoran, sert/kalabalik bir
   his veriyordu. Simdi: kenarlik daha SOLUK/sakin (--border), koseler
   hafifce yumusatildi (4px) - Helldivers Companion'daki sade, az-gurultulu
   HUD panelleri gibi. Daha once .mission-card/.dossier gibi ozel/vurgu
   gerektiren siniflar icin BILEREK BIRAKILAN guclu kenarlik+golge dili
   (bkz. gorev karti turu) BURADA DEGISTIRILMEDI - sadece en GENERIK, "duz
   metin/form" konteyneri sakinlestirildi. */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px;
  margin-bottom: 18px;
}
.card h2, .card h3 { margin-top: 0; }

/* KULLANICI ISTEGI (#451): ilan karti gorseli (public/listings-ui.js
   listingCardHtml()) hicbir kisitlama olmadan basiliyordu - yuksek cozunurluklu
   bir foto yuklenince kart tamamen tasiyordu. Simdi diger tum kart gorselleri
   gibi sabit yukseklik + object-fit:cover ile cerceveleniyor. */
.listing-card img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* KULLANICI ISTEGI (sadelestirme): .section-title, "dossier/damga/ribbon" gibi
   bilincli KORUNAN daktilo-kimlik unsurlarindan FARKLI olarak, site genelinde
   NEREDEYSE HER SAYFADA tekrar eden GENEL bir baslik etiketi (Gorev Paneli,
   Canli Savas Haritasi, vb.) - bu yuzden Rajdhani'ye gecirildi, daha
   HAFIF/az-gurultulu bir "konsol basligi" hissi icin (harfler arasi bosluk
   biraz azaltildi cunku Rajdhani zaten Courier'dan daha genis/okunakli). */
.section-title {
  font-family: 'Rajdhani', 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--green);
  text-transform: uppercase;
  margin: 26px 0 10px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.section-title::before { content: '// '; color: var(--green-dim); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  color: var(--green);
  background: transparent;
}
.badge.level { color: var(--green); border-color: var(--border-strong); }
.badge.nesil { color: var(--red); border-color: var(--red-dark); }
.badge.role-admin { background: var(--green); color: var(--ink); border-color: var(--green); }
.badge.role-member { color: var(--text-dim); border-color: var(--border); }
.badge.credits { color: var(--amber); border-color: var(--amber-dim); }

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  font-size: 20px;
  line-height: 1;
  margin-right: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
  cursor: default;
  /* KULLANICI BULGUSU: rozetleri buyutunce (28px->44px), TEK bir emoji/karakter
     OLMAYAN ikon metinleri (orn. admin'in "ikon" alanina bir sayi/kisa metin de
     yazabildigi ozel rozetler) artik kutudan tasip bir SONRAKI rozetle
     cakisiyor/"birbirine giriyor" gibi gorunuyordu - kutu hicbir zaman tasan
     icerigi KESMIYORDU (overflow ayari yoktu). */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

/* ---------- Ozel (parlayan) rozetler - TGF Ofis Yetkilisi / Arsiv Muhafizi ----------
   KULLANICI ISTEGI: yetki sahibi uyeler icin gold-blink (yanip sonen) rozet,
   savas gunlugu yazarlari icin silver-static (sabit parlak) rozet - bkz.
   src/userView.js specialBadgesFor(). */
.badge-special {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  margin-right: 6px;
  margin-bottom: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.badge-special.gold-blink {
  background: rgba(255, 215, 0, 0.12);
  border-color: #ffd700;
  color: #ffd700;
  animation: badge-gold-blink 1.6s ease-in-out infinite;
}
.badge-special.silver-static {
  background: rgba(192, 192, 192, 0.12);
  border-color: #c0c0c0;
  color: #e8e8e8;
  box-shadow: 0 0 6px 1px rgba(192, 192, 192, 0.35);
}
@keyframes badge-gold-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px 1px rgba(255, 215, 0, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 12px 3px rgba(255, 215, 0, 0.85); }
}

/* KULLANICI ISTEGI: "Profillere eklenebilen yanıp sönen animasyonumuzu, üyelere
   kendimizce bişeylerde ekleyebileceğimiz şekilde panelde bir yer oluştur" -
   normal (admin tarafindan olusturulan/verilen) rozet katalogu artik yukaridaki
   .badge-special ile AYNI gorsel dilde blink/glow efekti tasiyabiliyor, ama
   SABIT altin/gumus yerine rozetin KENDI 'color' alanini kullanan GENEL bir
   versiyon (bkz. src/routes/badges.js EFFECT_VALUES, public/profil.js
   badgesHtml()) - .badge-icon (profildeki ikon rozetleri) uzerine eklenir,
   renk --badge-glow custom property olarak inline set edilir.
   DUZELTME: bu yorum blogu ESKIDEN hic kapatilmamisti (kapanis isareti
   eksikti) - bu yuzden asagidaki .effect-blink/.effect-glow/@keyframes
   badge-custom-blink TAMAMEN yorum icinde kalip HICBIR ZAMAN calismiyordu
   (kullanici "rozetler parlayip sonecekti, bunlar olmuyor" diye bildirdi -
   kok neden buydu). NOT: bu aciklamanin ILK versiyonu yanlislikla yorum
   KAPATMA isaretinin kendisini (egik cizgi + yildiz) DUZ METIN olarak
   iceriyordu - bu da YORUMU ERKEN KAPATIP dosyanin geri kalaninin BOZUK CSS
   olarak parse edilmesine yol acmisti (kullanicinin "tum efektler kayboldu"
   bildirimi buradan geliyordu) - simdi o karakterler tamamen metinden
   cikarildi. */
.effect-blink {
  animation: badge-custom-blink 1.6s ease-in-out infinite;
}
.effect-glow {
  box-shadow: 0 0 7px 2px var(--badge-glow, currentColor);
}
@keyframes badge-custom-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px 1px var(--badge-glow, currentColor); }
  50% { opacity: 0.5; box-shadow: 0 0 12px 3px var(--badge-glow, currentColor); }
}

/* KULLANICI ISTEGI (#332/#333, sonra #343 ile GENISLETILDI): "Görev dosyasının
   tarzını, gerçek bir askeri dosya stilinde yapmalıyız" - ilk surumde sade bir
   "operasyon dosyasi" (rivet noktalari + kesikli cizgi + damga) idi. Kullanici
   daha sonra ekte bir "TÜRK GALAKTİK FEDERASYONU" askeri KİMLİK KARTI gorseli
   verip bu temaya gore genisletilmesini istedi: ust seritte federasyon adi +
   amblem + yildizlar, uye fotografi/rutbe alani, BECERİLER/GÜÇLÜ YÖNLER
   (gorev tanimlanirken admin doldurur - bkz. src/routes/tasks.js POST /),
   DEĞERLENDİRME/TOPLULUĞA KATKILARI (gorev TAMAMLANDIKTAN SONRA admin ayrica
   doldurur - bkz. PATCH /:id/evaluation), rutbe/muhur+imza alani. Icerik
   erisimi olmayanlar icin hala "redacted" (karartilmis) satirlar gosterilir -
   bkz. public/gorevler.js taskCardHtml()/fileBodyHtml().
*/
.dossier {
  position: relative;
  background: linear-gradient(180deg, rgba(78, 240, 122, 0.05), rgba(0, 0, 0, 0) 40%), var(--bg-card);
  /* #637 (panel/kart sadelestirme, "dosya gorunumu de dahil" onayi): kimlik-karti
     kimligi (seritl+damga+fileid) KORUNDU, sadece gorsel AGIRLIK azaltildi -
     daha ince kenarlik, daha yumusak/kucuk golge, kucultulmus/soluklastirilmis
     rivet noktalari. Ribbon'un durum-renklendirmesi (doing/pending_review/
     invalid) fonksiyonel oldugu icin DOKUNULMADI. */
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0 12px;
  margin-bottom: 18px;
  font-family: 'Courier New', monospace;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.dossier.done { opacity: 0.78; }
.dossier.doing .dossier-ribbon { background: linear-gradient(90deg, var(--amber-dim), var(--amber) 50%, var(--amber-dim)); }
.dossier.pending_review .dossier-ribbon { background: linear-gradient(90deg, var(--amber-dim), var(--amber) 50%, var(--amber-dim)); }
/* KULLANICI ISTEGI: gorev silinmeden "gecersiz" kilinabiliyor - diger durumlarin
   AKSINE gorev dosyasi soluk/kirmizimsi ve capraz "IPTAL" damgasi izlenimi verir. */
.dossier.invalid { opacity: 0.6; filter: grayscale(0.4); }
.dossier.invalid .dossier-ribbon { background: linear-gradient(90deg, var(--red-dim, rgba(255,92,77,0.35)), var(--red) 50%, var(--red-dim, rgba(255,92,77,0.35))); }
.dossier::before, .dossier::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  top: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8a8a, #444 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0.7;
  z-index: 2;
}
.dossier::before { left: 9px; }
.dossier::after { right: 9px; }

/* Ust seritte federasyon adi + amblem + yildizlar - kimlik kartinin en
   belirgin gorsel imzasi. */
.dossier-ribbon {
  background: linear-gradient(90deg, var(--olive-dark), var(--olive) 50%, var(--olive-dark));
  color: var(--ink);
  text-align: center;
  padding: 5px 10px 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(0,0,0,0.4);
}
.dossier-ribbon-emblem { font-size: 14.5px; margin: 0 6px; vertical-align: middle; }
.dossier-ribbon-stars { letter-spacing: 3px; font-size: 10.5px; display: block; margin-top: 1px; opacity: 0.85; }

.dossier-topline {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  border-bottom: 1px dashed var(--border);
  padding: 12px 16px 9px; margin-bottom: 10px;
}
.dossier-fileid {
  font-size: 11.5px; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase;
  display: block;
}
.dossier-category {
  font-size: 11.5px; letter-spacing: 1px; color: var(--amber); text-transform: uppercase;
  display: inline-block; margin-top: 2px;
}
.dossier-title {
  font-size: 16px; font-weight: 700; margin: 3px 0 0; color: var(--text); letter-spacing: 0.3px;
}
.dossier-stamp {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 9px; border: 2px solid; border-radius: 2px; transform: rotate(-3deg);
  white-space: nowrap; flex-shrink: 0;
}
.dossier-stamp.locked { color: var(--red); border-color: var(--red); background: rgba(255, 92, 77, 0.08); }
.dossier-stamp.unlocked { color: var(--olive); border-color: var(--olive); background: rgba(78, 240, 122, 0.08); }
.dossier-stamp.pending { color: var(--amber); border-color: var(--amber); background: rgba(232, 195, 77, 0.08); }
.dossier-stamp.archived { color: var(--text-dim); border-color: var(--border-strong); background: rgba(139, 147, 154, 0.08); }
/* TGF Meclis Faz 2 (Soruşturma+İtiraz): 'inceleniyor'/'itiraz edildi' durumlarını
   statik pending/locked'tan ayirmak icin hafif nabiz (pulse) animasyonu - "hala
   isleniyor/beklemede" hissini guclendirir. */
.dossier-stamp.investigating { color: var(--amber); border-color: var(--amber); background: rgba(232, 195, 77, 0.08); animation: dossier-stamp-pulse 1.8s ease-in-out infinite; }
.dossier-stamp.appealed { color: var(--red); border-color: var(--red); background: rgba(255, 92, 77, 0.08); animation: dossier-stamp-pulse 1.8s ease-in-out infinite; }
@keyframes dossier-stamp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* TGF Meclis Faz 3 (Canli Durusma): kucuk, dikkat cekici "canli yayin" rozeti -
   dossier-stamp'lardan farkli olarak kirmizi bir nokta + metin, kirmizi TV canli
   yayin ikonlarina benzer bir gorsel dil kullanir. */
.hearing-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--red);
  margin-top: 4px;
  animation: dossier-stamp-pulse 1.4s ease-in-out infinite;
}

/* TGF Meclis Faz 3 ek: "sandalye/masa gibi bi alan olacakti, onlari goremedim" -
   Yargic Masasi'nin salt metin etiketi yerine gercek bir mahkeme salonu
   diyagrami: ustte yargic karsisi, iki yaninda davaci/davali koltuklari, altinda
   soz sirasindaki (galeri) uyeler icin kucuk koltuk etiketleri. Konusan kisi
   (davaci, davali ya da galeriden biri) 'speaking' sinifiyla vurgulanir. */
.courtroom { margin: 10px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.courtroom-bench {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-align: center;
  padding: 6px 14px; border: 2px solid var(--border-strong); border-radius: 4px 4px 2px 2px;
  background: var(--bg-elevated); color: var(--amber); min-width: 160px;
}
.courtroom-bench.active { border-color: var(--red); color: var(--red); animation: dossier-stamp-pulse 1.8s ease-in-out infinite; }
.courtroom-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.courtroom-seat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border: 2px solid var(--border); border-radius: 4px;
  background: var(--bg-elevated); min-width: 88px;
}
.courtroom-seat-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.courtroom-seat-name {
  font-size: 12.5px; font-weight: 700; color: var(--text); max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.courtroom-seat.speaking, .courtroom-podium.speaking {
  border-color: var(--olive); background: rgba(78, 240, 122, 0.08);
  box-shadow: 0 0 0 2px rgba(78, 240, 122, 0.2);
}
.courtroom-podium {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 2px dashed var(--border); border-radius: 4px; font-size: 12.5px; color: var(--text);
}
.courtroom-gallery { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 320px; }
.courtroom-gallery-seat {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elevated); color: var(--text-dim); white-space: nowrap;
}

/* TGF Meclis Faz 5C (#397 devami): KULLANICI ISTEGI - "Yargıç kürsüsünde
   Yargıcın profili/ismi/fotosu, bilirkişiler sağ tarafta masalarda profil
   fotosu+nickiyle." .courtroom-hall, davaci/davali koltuklarini VE (varsa)
   bilirkisi masasini yan yana saran yeni bir yatay sarmalayici - eskiden
   sadece .courtroom-row vardi, bilirkisi masasi onun disina, ayni satira
   eklendi. */
.courtroom-judge-info {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  margin-top: 6px; font-size: 12px;
}
.courtroom-hall { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.courtroom-expert-desk {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border: 2px solid var(--amber-dim); border-radius: 4px;
  background: var(--bg-elevated); min-width: 88px;
}
.courtroom-seat-photo {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-strong);
}
.courtroom-seat-photo-placeholder {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 14.5px; font-weight: 700; color: var(--text-dim);
  border: 1px dashed var(--border); background: var(--bg-elevated);
}

/* KULLANICI ISTEGI: "Yargıç masasının önüne, 6-7 tane daha koltuk koyalım.
   Dava başladığında, canlı izleyiciler o boş koltuklara tıklayıp girsinler,
   ikonları fotoğraflarıyla o koltuğa oturabilsinler. Onları görebilelim. Ve,
   bu masalarıda güzel hizalayalım, mahkemeymiş gibi olsun" - yargic
   kursusu+davaci/davali+bilirkisi masalarinin ALTINA, ayri bir "izleyici
   sirasi" bloğu: 7 sabit koltuk, bos olanlar tiklanabilir (oturmak icin),
   dolu olanlar fotograf+isim gosterir, kendi koltugun tiklanabilir (kalkmak
   icin). Mevcut .courtroom-seat/.courtroom-hall ile AYNI kutu/kenarlik/
   hizalama dili kullanilarak, gercek bir mahkeme salonu sirasi gibi duz bir
   sirada ortalanir. */
.courtroom-audience { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.courtroom-audience-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); }
.courtroom-audience-row {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 520px;
  padding: 8px; border: 1px dashed var(--border); border-radius: 4px; background: rgba(0,0,0,0.08);
}
.courtroom-audience-seat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--bg-elevated); min-width: 54px; transition: border-color 0.15s, transform 0.15s;
}
.courtroom-audience-seat.empty { opacity: 0.55; }
.courtroom-audience-seat.clickable { cursor: pointer; }
.courtroom-audience-seat.clickable:hover { border-color: var(--amber); transform: translateY(-1px); }
.courtroom-audience-seat-icon { font-size: 17px; line-height: 1; }
.courtroom-audience-seat.occupied { opacity: 1; border-color: var(--border-strong); }
.courtroom-audience-seat.mine { border-color: var(--olive); box-shadow: 0 0 0 2px rgba(78, 240, 122, 0.18); }
.courtroom-audience-seat .courtroom-seat-name { max-width: 64px; font-size: 10.5px; }
.courtroom-audience-seat .courtroom-seat-photo,
.courtroom-audience-seat .courtroom-seat-photo-placeholder { width: 26px; height: 26px; }

/* "bu masalarıda güzel hizalayalım, mahkemeymiş gibi olsun" - kursu/hall/
   izleyici sirasi hepsi AYNI merkezi eksende, aralarinda tutarli bosluklarla
   duz bir dikey hiyerarsi olustursun (kursu en ustte/ortada, once davaci-
   davali+bilirkisi, sonra izleyiciler) - .courtroom zaten column+center idi,
   burada sadece satirlar arasi bosluk biraz genisletiliyor. */
.courtroom { gap: 10px; }
.courtroom-hall { gap: 22px; }

/* ============ MECLIS: giriş ekranı (hub) + mahkeme "sahne" teması ============
   KULLANICI ISTEGI (bu tur): Meclis'e girince "Senato mu, Mahkeme mi?" diye
   soran görsel bir giriş ekranı (sol=Senato, sağ=Mahkeme) + Mahkeme bölümüne
   atmosferik bir "salon" hissi (kürsü/kolon/spot ışık) istendi. Sitede 3D/foto-
   gerçekçi bir görsel motor YOK - kullanıcıyla netleştirilen şekilde, tamamen
   CSS gradyan + mevcut ince-çizgi SVG ikon diliyle, siteyle TUTARLI düz bir
   illüstrasyon yaklaşımı kullanıldı (fotogerçekçi/AI görsel DEĞİL). */
.meclis-hub {
  position: relative;
  display: flex;
  margin: 18px 0 22px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  min-height: 230px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.meclis-hub-wing {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.meclis-hub-wing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 3px, transparent 3px 40px);
  pointer-events: none;
}
.meclis-hub-wing:hover { filter: brightness(1.15); }
.meclis-hub-wing:active { transform: scale(0.99); }
.meclis-hub-senato {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(107, 124, 50, 0.4), transparent 65%),
    linear-gradient(165deg, rgba(107, 124, 50, 0.22), rgba(0, 0, 0, 0.6)),
    var(--bg-panel, #0d1710);
  border-right: 1px solid var(--border-strong);
}
.meclis-hub-mahkeme {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(178, 58, 46, 0.32), transparent 65%),
    linear-gradient(195deg, rgba(178, 58, 46, 0.2), rgba(0, 0, 0, 0.6)),
    var(--bg-panel, #0d1710);
}
.meclis-hub-icon { position: relative; z-index: 1; color: var(--text); opacity: 0.92; }
.meclis-hub-title { position: relative; z-index: 1; font-size: 21px; font-weight: 800; letter-spacing: 2.5px; color: var(--text); }
.meclis-hub-sub {
  position: relative; z-index: 1;
  font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  max-width: 210px; line-height: 1.5;
}
.meclis-hub-emblem {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-elevated); border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; letter-spacing: 0.5px; color: var(--amber);
  z-index: 2; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
}
.meclis-back-to-hub {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 12.5px; text-decoration: underline; padding: 0 10px 0 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.meclis-back-to-hub:hover { color: var(--green); }
@media (max-width: 640px) {
  .meclis-hub { flex-direction: column; min-height: 0; }
  .meclis-hub-senato { border-right: none; border-bottom: 1px solid var(--border-strong); }
  .meclis-hub-wing { padding: 26px 14px; }
}

/* KULLANICI BULGUSU (duzeltme turu): "mahkeme salonuna giris guzel ama icerisi
   hala dumduz" - onceki surumde atmosfer SADECE en ustteki dekoratif seride
   (.meclis-courtroom-banner) uygulanmisti; formun ve dava listesinin sarildigi
   zemin sitenin geri kalaniyla ayni duz arkaplandi. Duzeltme: butun Mahkeme
   bolumunu saran, asagi kaydirilsa da devam eden kalici bir "salon" zemini -
   kolon dokusu + ustten spot isik + alttan kirmizi vinyet - orijinal onaylanan
   spesifikasyonla birebir ("sayfanin buyuk bir kisminda... arkaplanda, mevcut
   dava/dosya kartlari bunun uzerine yerlesir"). */
.meclis-courtroom-scene {
  position: relative;
  padding: 24px 18px 26px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 46px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(178, 58, 46, 0.16), transparent 65%),
    linear-gradient(180deg, rgba(178, 58, 46, 0.1), rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.72)),
    var(--bg-panel, #0d1710);
}
/* Sahnenin iki yanina, kolonlarin golgede kaldigi izlenimini veren koyu kenar. */
.meclis-courtroom-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, transparent 7%, transparent 93%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}
@media (max-width: 640px) { .meclis-courtroom-scene { padding: 18px 12px 20px; } }

/* Mahkeme "sahne" seridi - artik kendi arkaplanini tasimiyor (bunu saran
   .meclis-courtroom-scene ustleniyor), sadece basligi/ikonu tasiyan seffaf bir
   "levha" - salonun ustune asilmis bir tabela gibi. */
.meclis-courtroom-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.meclis-courtroom-banner-icon { position: relative; z-index: 1; opacity: 0.85; color: var(--text); }
.meclis-courtroom-banner-title { position: relative; z-index: 1; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: var(--text); text-transform: uppercase; }
.meclis-courtroom-banner-sub { position: relative; z-index: 1; font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }

/* KULLANICI ISTEGI (duzeltme turu): "evraklari bu sekilde gorup okuyabilmeli" -
   "Yeni Dava Ac" formu artik genel .card degil, .dossier ile AYNI gorsel dili
   kullanan (seritli baslik + monospace govde + kose rivetleri) bir "dava
   dilekcesi" evraki. Input/textarea/select MEKANIGI DOKUNULMADI (genel
   "input, textarea, select" kurali hala gecerli) - sadece CEVRESI/kimligi
   evrak temasina buruldu. */
.meclis-case-file {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(178, 58, 46, 0.06), rgba(0, 0, 0, 0) 40%), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0 16px;
  font-family: 'Courier New', monospace;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.meclis-case-file::before, .meclis-case-file::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  top: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8a8a, #444 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0.7;
  z-index: 2;
}
.meclis-case-file::before { left: 9px; }
.meclis-case-file::after { right: 9px; }
.meclis-case-file-ribbon {
  background: linear-gradient(90deg, #6b2620, #b23a2e 50%, #6b2620);
  color: var(--text);
  text-align: center;
  padding: 7px 10px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.meclis-case-file-body { padding: 14px 18px 2px; }
.meclis-case-file-body label { font-family: 'Courier New', monospace; }
.meclis-case-file-body input,
.meclis-case-file-body textarea,
.meclis-case-file-body select {
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.28);
}

/* Tam ekran canlı duruşma - KULLANICI ISTEGI: "sayfanın tamamını kullanabiliriz"
   - mevcut yargıç masası/koltuk/chat mekaniği AYNEN korunuyor (bkz. meclis.js
   openHearingFullscreen - DOM taşınmıyor, sadece bu sınıf eklenip position:fixed
   ile panel tam ekranı kaplıyor), sadece aynı "sahne" temasıyla sunuluyor. */
.dossier-section.hearing-fullscreen-active {
  position: fixed !important;
  inset: 0;
  z-index: 500;
  margin: 0;
  border-radius: 0;
  overflow-y: auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 3px, transparent 3px 46px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(178, 58, 46, 0.12), rgba(0, 0, 0, 0.8)),
    var(--bg, #0b0f0c);
}
.dossier-section.hearing-fullscreen-active > * { max-width: 760px; width: 100%; }
body.hearing-fullscreen-open { overflow: hidden; }
.hearing-fullscreen-close {
  display: none;
  position: fixed; top: 14px; right: 14px; z-index: 501;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  color: var(--text); font-family: inherit; font-size: 13px;
  padding: 8px 14px; border-radius: 4px; cursor: pointer;
  align-items: center; gap: 6px;
}
.hearing-fullscreen-close:hover { border-color: var(--red); color: var(--red); }
body.hearing-fullscreen-open .hearing-fullscreen-close { display: inline-flex; }


/* Kimlik karti govdesi: solda uye fotografi + rutbe, sagda dosya icerigi. */
.dossier-body-wrap { display: flex; gap: 14px; padding: 0 16px; flex-wrap: wrap; }
.dossier-photo-col { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dossier-photo {
  width: 76px; height: 76px; border-radius: 3px; object-fit: cover;
  border: 2px solid var(--border-strong); background: var(--bg-elevated);
}
.dossier-photo-placeholder {
  width: 76px; height: 76px; border-radius: 3px; border: 2px dashed var(--border);
  background: var(--bg-elevated); display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--text-dim);
}
.dossier-rank-tag {
  font-size: 11.5px; text-align: center; color: var(--amber); letter-spacing: 0.5px; line-height: 1.3;
}
.dossier-content-col { flex: 1; min-width: 200px; }

.dossier-body { font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--text); white-space: pre-wrap; }

.dossier-section { margin-top: 10px; }

/* KULLANICI BULGUSU: "chate yazı girdikçe aşağı itiyor alanı" - kok neden:
   bu textarea genel "input, textarea, select" kuralindan baska hicbir stil
   almiyordu, yani tarayicinin VARSAYILAN resize tutamaci (kose surukleme)
   acikti - dokunmatikte/farede yanlislikla surukleyince kutu buyuyup altindaki
   "Gönder" butonunu ve geri kalan sayfayi asagi itiyordu. mesajlar.html'deki
   DM sohbet kutusu (.chat-input-row textarea) AYNI SORUNU zaten resize:none +
   sabit min-height ile cozmustu - ayni desen burada da uygulaniyor. */
.hearing-chat-textarea { resize: none; min-height: 40px; }
.dossier-section-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); border-bottom: 1px solid var(--border); padding-bottom: 2px; margin-bottom: 4px;
  display: block;
}
.dossier-section-body { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }

/* KULLANICI ISTEGI: "Görevlerde birden fazla fotoğraf yüklenebilsin." - tamamlama
   kanıtı artık tekil bir görsel yerine küçük bir küçük-resim (thumbnail) galerisi
   olarak gösterilir (bkz. gorevler.js fileBodyHtml, admin.js taskReviewCardHtml). */
.dossier-proof-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dossier-proof-gallery img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border-strong); cursor: zoom-in;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.dossier-proof-gallery img:hover { transform: scale(1.05); border-color: var(--olive); }

/* KULLANICI ISTEGI: "üyenin ismini yazdığımızda üyenin ismi çıksın tıklayabilelim" -
   site genelinde paylasilan kullanici-adi typeahead widget'i (bkz. shared/api.js
   attachUsernameAutocomplete()). Terminal'in kendi @etiketleme acilir listesiyle
   (.mention-suggestions, sadece terminal.html'de) GORSEL OLARAK tutarli ama
   BAGIMSIZ bir sinif seti - boylece diger TUM sayfalarda (banka/mesajlar/meclis/
   admin) da kullanilabilir. */
.username-ac-list {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  max-height: 220px;
  overflow-y: auto;
  z-index: 500;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.username-ac-list.open { display: block; }
.username-ac-item {
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.username-ac-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.username-ac-item:hover, .username-ac-item.active { background: rgba(78,240,122,0.12); color: var(--green); }

.redacted-block { margin: 2px 0 10px; }
.redacted-line {
  height: 10px; margin: 6px 0; border-radius: 1px;
  background: repeating-linear-gradient(45deg, #131313 0, #131313 4px, #060606 4px, #060606 8px);
}
.redacted-line:nth-child(1) { width: 94%; }
.redacted-line:nth-child(2) { width: 76%; }
.redacted-line:nth-child(3) { width: 85%; }

.dossier-locked-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; font-size: 13.5px; color: var(--text-dim);
}

/* Muhur + imza alani - kimlik kartinin alt kosesi. */
.dossier-seal-row {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 8px 16px 0; margin-top: 6px;
}
.dossier-seal {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--red), var(--red-dark) 75%);
  border: 1px solid rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; color: #2a0a06; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transform: rotate(-8deg);
}
.dossier-signature {
  font-size: 11.5px; color: var(--text-dim); font-style: italic; letter-spacing: 0.5px;
}

.dossier-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  border-top: 1px dashed var(--border); padding: 8px 16px 0; margin-top: 10px; font-size: 12.5px;
}

/* KULLANICI BULGUSU: "bu bir dosya gibi değil hiç sanki aşağı doğru inen bir
   AVM faturası... ne kadar boş yerimiz var sağda ve solda?" - eskiden #352
   isteğiyle görev dosyaları dar (460px) + DİKEY istiflenmiş (foto üstte,
   içerik altta, ortalanmış metin) haldeydi - geniş ekranlarda devasa boş
   kenar bırakıyor, içeriği bir kasa fişi gibi aşağı akıtıyordu. Artık CIA/FBI
   dosyası hissi veren GENİŞ/YATAY bir düzene dönüldü: max-width büyütüldü,
   foto solda + içerik sağda YAN YANA duruyor (bu zaten .dossier-body-wrap'in
   VARSAYILAN - hiçbir modifier olmadan da geçerli olan - flex-row davranışı,
   bu yüzden burada flex-direction/text-align override'ı YOK). */
.dossier.dossier-task {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* KULLANICI BULGUSU: "mobil olcude bazi seyler saga tasiyor" - genis/yatay
   duzene gecince (.dossier-body-wrap'in varsayilan yan-yana flex davranisi)
   solda 84px foto + sagda EN AZ 200px icerik kolonu (.dossier-content-col
   min-width:200px) yan yana durmaya calisiyor; bu, dar telefon ekranlarinda
   (~320-360px genislik, sayfa+kart padding'leri dusulunce) container genisligini
   ASIYOR ve yatay tasmaya/kaymaya yol aciyordu. flex-wrap:wrap zaten vardi ama
   min-width:200px, satirin erken sarmasini (wrap) engelleyecek kadar genisti.
   Duzeltme: dar ekranlarda foto+icerigi ALT ALTA yigin (dikey), min-width'i
   kaldirarak container genisligine tam uysun. */
@media (max-width: 480px) {
  .dossier.dossier-task .dossier-body-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dossier.dossier-task .dossier-content-col {
    min-width: 0;
    width: 100%;
    text-align: left;
  }
}

/* KULLANICI ISTEGI: "Profil kartını aşağıya doğru biraz daha büyültelim,
   rozetler baya iyi görünmeli" - SADECE profil sayfasindaki karti (profil.js
   .dossier.dossier-profile) biraz buyutur, gorev dosyalarini (.dossier-vertical)
   ETKILEMEZ. */
.dossier.dossier-profile {
  padding-bottom: 22px;
}
.dossier.dossier-profile .dossier-photo-col {
  flex: 0 0 104px;
}
.dossier.dossier-profile .dossier-photo,
.dossier.dossier-profile .dossier-photo-placeholder {
  width: 96px;
  height: 96px;
}
.dossier.dossier-profile .dossier-photo-placeholder {
  font-size: 34px;
}
.dossier.dossier-profile .dossier-rank-tag {
  font-size: 12.5px;
}
.dossier.dossier-profile .dossier-section {
  margin-top: 16px;
}
.dossier.dossier-profile .dossier-seal-row {
  padding-top: 14px;
  margin-top: 14px;
}

/* TGF Meclis Faz 5C (#397 devami): KULLANICI ISTEGI - "John Wick'teki
   Continental Hotel esintili bir tema/görsel yenileme yapalım dava
   dosyaları için." Temel .dossier görünümü (görevler.js/profil.js'nin
   kullandığı) DEĞİŞTİRİLMEDİ - sadece Meclis dava/kanun kartlarına eklenen
   bu .dossier-case modifier'i ile altın/siyah, "Continental" hissi veren
   bir çerçeve + başlık rengi uygulanır. Yeni bir --gold değişkeni
   EKLENMEDİ; mevcut --amber/--amber-dim (zaten altın tonlarında, hem koyu
   hem açık temada tanımlı) yeniden kullanıldı. */
.dossier.dossier-case {
  border-color: var(--amber-dim);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 195, 77, 0.15);
}
.dossier.dossier-case .dossier-ribbon {
  background: linear-gradient(90deg, var(--amber-dim), var(--amber) 50%, var(--amber-dim));
  color: var(--ink);
}
.dossier.dossier-case .dossier-title {
  color: var(--amber);
  letter-spacing: 0.5px;
}
.dossier.dossier-case::before,
.dossier.dossier-case::after {
  background: radial-gradient(circle at 35% 30%, var(--amber), var(--amber-dim) 70%);
}

/* Görevleri tarihe göre gruplayan akordion ("mazgal") - her tarih grubu ayrı bir
   <details> paneli olarak render edilir (bkz. public/gorevler.js
   groupTasksByDate()), başlıkta tarih + görev sayısı gösterilir, görevler
   tarihlerine göre karışmadan ayrı bölmelerde durur. */
.task-date-accordion {
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  margin-bottom: 16px;
  background: var(--bg-card);
  overflow: hidden;
}
.task-date-accordion summary {
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  background: linear-gradient(90deg, rgba(232, 195, 77, 0.07), transparent);
  border-bottom: 1px dashed var(--border);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.task-date-accordion summary::-webkit-details-marker { display: none; }
.task-date-accordion summary::before {
  content: '▸'; margin-right: 8px; transition: transform 0.15s ease; flex-shrink: 0;
}
.task-date-accordion[open] summary::before { transform: rotate(90deg); }
.task-date-accordion summary .task-date-count {
  font-size: 11.5px; color: var(--text-dim); text-transform: none; letter-spacing: 0.5px; font-weight: 400;
}
.task-date-accordion .task-date-body { padding: 16px 16px 2px; }
.task-date-accordion .task-date-body .dossier:last-child { margin-bottom: 4px; }

/* KULLANICI BULGUSU (yetki genisletme turu, 2. tur): "Üyeler panelinde acayip
   sağa kaymak zorunda kalıyoruz" - eskiden tek bir tablo satirinda 20 kolon
   (10 yetki checkbox'i + nesil override + terminal limiti dahil) yan yana
   diziliyordu. Nadiren degistirilen bu alanlar artik HER UYENIN ALTINDA ayri,
   kapali baslayan bir <details> satirina tasindi (bkz. public/
   admin-mapshapes-users.js userRowHtml) - bu da o satirin/goruntunun stili. */
.user-extra-details { padding: 0; }
.user-extra-details summary {
  cursor: pointer;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-dim);
  list-style: none;
  user-select: none;
}
.user-extra-details summary::-webkit-details-marker { display: none; }
.user-extra-details summary::before { content: '▸ '; color: var(--green); }
.user-extra-details[open] summary::before { content: '▾ '; }
.user-extra-body {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 14px 12px;
  border-top: 1px dashed var(--border);
  align-items: flex-start;
}
.user-extra-field { display: flex; flex-direction: column; gap: 3px; }
.user-extra-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  flex: 1;
  min-width: 220px;
  align-content: flex-start;
}
.user-perm-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.user-perm-check.disabled { color: var(--text-dim); cursor: not-allowed; }

/* KULLANICI ISTEGI (Meclis dava dosyasi turu): "Rapor girdikçe, scrolldan baya
   yorulmaya başladık... dava dosyasının içine klasör şeklinde yüklesinler...
   sarı klasör yapmayalım, daha afilli bişey olsun... yan yana amele gibi
   durmasınlar." - dava dosyasindaki raporlar/deliller artik .file-folder-row
   (amber/manila) İLE AYNI RENK PALETINDE DEGIL, kasitli olarak farkli - koyu
   yesil/siyah "muhurlu rapor" hissi veren, kapali baslayan <details> kartlari
   (bkz. public/meclis.js workflowReportsHtml/evidenceListHtml). Her biri tek
   basina bir satir - "yan yana" degil, dikey/duzenli bir akis. */
.report-dossier-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.report-dossier {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.report-dossier::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent var(--green-dim) transparent transparent;
  opacity: 0.5;
  pointer-events: none;
}
.report-dossier summary {
  cursor: pointer;
  padding: 10px 30px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  font-family: 'Courier New', monospace;
  user-select: none;
}
.report-dossier summary::-webkit-details-marker { display: none; }
.report-dossier summary::before { content: '▸'; color: var(--green); transition: transform 0.15s ease; flex-shrink: 0; }
.report-dossier[open] summary::before { transform: rotate(90deg); }
.report-dossier-icon { font-size: 16px; flex-shrink: 0; }
.report-dossier-type {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green);
}
.report-dossier-meta { font-size: 12.5px; color: var(--text-dim); margin-left: auto; }
.report-dossier-body {
  padding: 0 14px 12px 30px;
  border-top: 1px dashed var(--border);
}
.report-dossier-body-text {
  padding-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* Rapor/delil giris kutularindaki karakter sayaci - KULLANICI ISTEGI: "bide,
   karakter sınırıda belirtilsin raporda." (bkz. public/meclis.js wireCharCounters). */
.char-counter {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 2px;
  font-family: 'Courier New', monospace;
}
.char-counter-near-limit { color: var(--amber); }
.char-counter-at-limit { color: var(--red); }

/* KULLANICI ISTEGI (Meclis Faz 5D, "klasörlemeyi daha şık yapabiliriz"): rapor
   klasörlerine ince bir hover/gecis cilası - tiklanabilir hissi guclendirir,
   yapisal degisiklik yok. */
.report-dossier { transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.report-dossier:hover { border-color: var(--green-dim); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); }
.report-dossier summary:hover .report-dossier-type { color: var(--green-bright); }
.report-dossier[open] { border-color: var(--green-dim); }

/* KULLANICI ISTEGI (Meclis Faz 5D): "dava dosyasında her şey herkesin gireceği
   şey, deliller, atamalar falan bunlar çok karışık... bu paneli yargıç ve
   görevliler görebilmeli" - dosyanin ic-yonetim kismini (sevk/rapor/tanik/
   senato/mufettis/karar) TEK, acik/kapanir bir "Gorevli Paneli" kutusuna
   toplar. Bilerek YESIL (.report-dossier) ve AMBER (.file-folder-row) DISINDA
   UCUNCU bir renk (--steel, celik mavisi) kullanilir - "resmi/kisitli erisim"
   hissi versin, mevcut klasor tipleriyle KARISMASIN. Bkz. public/meclis.js
   staffPanelHtml()/isCaseStaff(). */
.staff-panel {
  margin-top: 14px;
  border: 1px solid var(--steel-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(107, 159, 212, 0.07), rgba(0, 0, 0, 0) 45%), var(--bg-elevated);
  overflow: hidden;
}
.staff-panel-summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(107, 159, 212, 0.16), rgba(107, 159, 212, 0.02));
  border-bottom: 1px solid var(--steel-dim);
  user-select: none;
}
.staff-panel-summary::-webkit-details-marker { display: none; }
.staff-panel-summary::before {
  content: '▾';
  color: var(--steel);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.staff-panel:not([open]) .staff-panel-summary::before { transform: rotate(-90deg); }
.staff-panel-icon { font-size: 15px; flex-shrink: 0; }
.staff-panel-title {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel);
}
.staff-panel-hint { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
.staff-panel-body { padding: 4px 14px 8px; }
.staff-panel-body .dossier-section:first-child { margin-top: 6px; }


/* KULLANICI ISTEGI: "Dava dosyalarında/görev dosyalarında dosyalar birikince
   aşağı scroll yapmamız gerekmesin... klasör sistemi gibi, o dosyanın klasör
   gibi bi simgesi olsun, tıklayınca dosyayı açsın." - hem TGF Meclis (davalar,
   bkz. public/meclis.js caseFolderRowHtml) hem Görevler (bkz. public/gorevler.js
   taskFolderRowHtml) sayfalarında, çok sayıda dosya birikince (ör. tek bir
   etkinlikten 40 kişiye tek tek atanan görev dosyası, ya da uzun bir dava
   listesi) TÜM dosyaların TAM içeriğini alt alta açık render etmek yerine, her
   dosya kompakt bir "klasör satırı" olarak listelenir - tıklanınca SADECE o
   dosyanın tam içeriği (mevcut .dossier görünümü) bir "◀ Listeye Dön" butonuyla
   birlikte gösterilir. Bu iki dosya turunun paylaştığı ORTAK bir görsel dil. */
.file-folder-list { display: flex; flex-direction: column; gap: 10px; }
/* KULLANICI ISTEGI: "görevlerde/davalarda klasörleri arayabilmeliyiz, oyuncu
   nicki veya dosya no gibi bişeyle aratabilelim" - gorevler.js/meclis.js'teki
   arama kutusunun sarmalayicisi; input'un kendisi zaten genel "input, textarea,
   select" kuralindan temalanmis stilini alir, burada sadece disaridan bosluk
   veriliyor. */
.file-search-bar { margin-bottom: 12px; }
.file-search-bar input { font-size: 13.5px; }
/* KULLANICI BULGUSU (#528/#648): arama kutusunun placeholder metninde 🔍 emoji
   kullaniliyordu - "temadan sasma" sikayetiyle ayni sekilde, sitenin geri
   kalaninda kullanilan ince-cizgi SVG ikon diliyle (bkz. shared/nav.js
   svgIcon()) tutarsizdi. Emoji kaldirildi, yerine gercek bir SVG ikon input'un
   SOLUNA sabitlendi (mutlak konumlandirma + input'a sol bosluk). */
.file-search-bar-icon { position: relative; display: flex; align-items: center; }
.file-search-bar-icon svg { position: absolute; left: 12px; color: var(--text-dim); pointer-events: none; }
.file-search-bar-icon input { width: 100%; padding-left: 36px; }
/* KULLANICI ISTEGI (2. tur): "Klasörleri sitenin temasına uygun bir tarzda
   renkte yapalım... daha büyük yapalım." - satirlar artik .dossier ile AYNI
   gorsel dili (koyu-yesil/altin "askeri dosya" paleti, Courier New, ince ust
   "cikinti" seklinde bir klasor sekmesi/tab) paylasiyor, ayrica boyut/dolgu
   belirgin sekilde buyutuldu (eskiden kucuk/duz bir liste satiriydi). */
.file-folder-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 16px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(78, 240, 122, 0.045), rgba(0, 0, 0, 0) 55%), var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-family: 'Courier New', monospace;
}
/* Manila klasor "sekmesi" - ust sol kosede cikinti yapan kucuk altin bir
   etiket, gercek bir dosya klasorunun disari tasan tab'ina benzemesi icin. */
.file-folder-row::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px;
  width: 34px; height: 8px;
  background: linear-gradient(90deg, var(--olive-dark), var(--olive) 50%, var(--olive-dark));
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.file-folder-row:hover {
  border-color: var(--olive);
  background: linear-gradient(180deg, rgba(78, 240, 122, 0.09), rgba(0, 0, 0, 0) 55%), var(--bg-card);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(78, 240, 122, 0.15);
}
.file-folder-icon { font-size: 24px; flex-shrink: 0; color: var(--green); display: inline-flex; align-items: center; }
/* KULLANICI ISTEGI (#528/#652): canli dava satirindaki 🔴 emoji yerine, site
   genelinde zaten kullanilan pulse-led animasyonuyla (bkz. .topnav altindaki
   @keyframes pulse-led) gercek bir kirmizi nokta - digerleriyle ayni SVG-ikon
   diline uyuyor. */
.file-folder-icon-live { color: var(--red); }
.live-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse-led 1.4s infinite;
}
.file-folder-id {
  font-family: 'Courier New', monospace;
  font-size: 13.5px;
  color: var(--amber);
  letter-spacing: 1px;
  flex-shrink: 0;
  font-weight: 700;
}
.file-folder-cat { font-size: 18px; flex-shrink: 0; }
.file-folder-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  flex: 1;
  min-width: 160px;
  letter-spacing: 0.2px;
}
.file-folder-meta { font-size: 14.5px; color: var(--text-dim); flex-shrink: 0; }
.file-folder-status {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--olive);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: 3px 8px;
  flex-shrink: 0;
}
/* KULLANICI ISTEGI (#466 ile ayni ilke, klasor gorunumune tasindi): "kendisine
   atanan bi dosya varsa hep üstte görsün" - kendi dosyasi olan satirlar altin
   renginde ince bir sol serit + rozet ile ayirt edilir, boylece 40 dosyalik bir
   listede bile kullanici KENDI dosyasini ANINDA fark eder (klasoru actigina
   gerek kalmadan). */
.file-folder-mine { border-left: 4px solid var(--amber); }
.file-folder-mine-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 2px;
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(232, 195, 77, 0.08);
}
.file-folder-quick-claim {
  flex-shrink: 0;
}

/* KULLANICI ISTEGI (bu tur): "helldiverscompanion tarzı" bir referans paylaşıldı
   - koyu HUD temalı, izgara (grid) düzeninde, üst şeritte kategori+geri sayım,
   kalın başlık, küçük rozet/istatistik satırı ve renkli bir durum çubuğu olan
   "operasyon panosu" kartları. Görev listesindeki (bkz. gorevler.js
   taskCardGridItemHtml) eski düz metin "klasör satırlarının" YERİNE geçen, tek
   satırlık .file-folder-row temasından TAMAMEN AYRI yeni bir sınıf seti - Meclis
   (davalar) listesi hâlâ eski .file-folder-row/.file-folder-list temasını
   kullanmaya devam ediyor, buraya DOKUNULMADI (kasıtlı - kullanıcı sadece görev
   kartlarını istedi). --mc-accent, JS tarafından görev durumuna göre satır içi
   style ile ayarlanan bir CSS değişkeni (todo/doing/pending_review/done/invalid
   için farklı renk) - kartın üst şeridini, ikonunu ve durum etiketini boyar. */
.mission-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--mc-accent, var(--border-strong));
  border-radius: 6px;
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--mc-accent, var(--olive));
}
/* KULLANICI ISTEGI: kendi dosyasi olan kartlar (bkz. .file-folder-mine ile AYNI
   ilke) altin bir cerceve/rozetle ONE cikarilir - 40 karti tek tek acmadan
   kullanici KENDI gorevini aninda fark eder. */
.mission-card-mine { box-shadow: 0 0 0 2px var(--amber), 0 2px 10px rgba(0, 0, 0, 0.35); }
.mission-card-mine-tag {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink);
  background: var(--amber);
  border-radius: 2px;
  padding: 2px 6px;
  z-index: 2;
}
.mission-card-art {
  position: relative;
  height: 92px;
  flex-shrink: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)),
    var(--bg-panel, #0d1710);
  border-bottom: 1px solid var(--border);
}
.mission-card-art-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 9px;
}
.mission-card-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mission-card-corner {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mission-card-corner.overdue {
  color: var(--ink);
  background: var(--red);
  font-weight: 800;
}
.mission-card-art-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  opacity: 0.16;
  pointer-events: none;
}
.mission-card-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.mission-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mission-card-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.mission-card-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}
.mission-card-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mission-card-progress {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mission-card-progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.mission-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.mission-card-quick-claim { align-self: flex-start; margin-top: 2px; }
/* KULLANICI ISTEGI (bu tur): Savas Gunlukleri (blog) makale kartlari da ayni
   mission-card diline tasindi (bkz. gunlukler.js postCardHtml) - gercek kapak
   fotografi varsa .mission-card-art-icon yerine bu img tam alani kaplar; yoksa
   zaten var olan dekoratif ikon katmani (svgIcon('newspaper')) kullanilir.
   .mission-card-excerpt de ayni kart diline uyan, 3 satirla sinirli ozet metni. */
.mission-card-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.mission-card-excerpt {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .mission-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mission-card-art { height: 74px; }
  .mission-card-title { font-size: 14px; }
}

/* KULLANICI ISTEGI: "tıklanınca kontinental john wickteki gibi bir efektle
   açılsın... 2 saniye falan sürebilir." - bir klasore tiklaninca acilan TAM
   dosya (.dossier), ~2 saniyelik dramatik bir "reveal" ile sahneye girer:
   hafif bulanik/kucuk baslayip buyuyerek netlesir + uzerinden capraz altin
   bir isik huzmesi gecer (Continental otelin mermer koridorundaki isik
   oyununu andiran bir efekt). Salt gorseldir, hicbir islevi ENGELLEMEZ/
   GECIKTIRMEZ - butonlar/formlar animasyon bitmeden de tiklanabilir.
   prefers-reduced-motion: bu efekti tamamen kapatir (erisilebilirlik). */
.dossier-reveal {
  animation: dossierRevealIn 1.9s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.dossier-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(232, 195, 77, 0.0) 35%, rgba(232, 195, 77, 0.4) 48%, rgba(255, 255, 255, 0.65) 50%, rgba(232, 195, 77, 0.4) 52%, rgba(232, 195, 77, 0.0) 65%, transparent);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 6;
  animation: dossierRevealSweep 1.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes dossierRevealIn {
  0% { opacity: 0; transform: scale(0.8) translateY(26px); filter: blur(9px); }
  45% { opacity: 1; transform: scale(1.025) translateY(-3px); filter: blur(0); }
  65% { transform: scale(0.995) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes dossierRevealSweep {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  20% { opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateX(340%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier-reveal { animation: none; }
  .dossier-reveal::after { animation: none; content: none; }
}

/* ---------- Toasts / banners ---------- */
.banner {
  border: 1px solid var(--border-strong);
  background: rgba(78, 240, 122, 0.04);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 14.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--green);
}

.toast-stack {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 600; /* auth-gate(500) ve modal-backdrop(200) katmanlarinin ustunde olmali */
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
}
.toast.error { border-color: var(--red); color: var(--red); }
.toast.ok { border-color: var(--green); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
  /* Uzun icerikli modaller (orn. filo kurma paneli - hedef/sure/uye listesi/gorev
     secimi bir arada) kisa/mobil ekranlarda viewport'tan tasip erisilemez hale
     gelebiliyordu - artik backdrop'un kendisi de gerekirse kaydirilabiliyor. */
  overflow-y: auto;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--green);
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 0 30px rgba(78,240,122,0.08);
  /* Modal'in kendisi viewport yuksekliginin cogunu asmasin, asarsa kendi icinde
     kaydirsin - kisa modaller (cogu) bundan etkilenmez, sadece filo kurma gibi
     uzun formlar mobilde/kisa ekranlarda kesilmek yerine kaydirilabilir olur. */
  max-height: 90vh;
  overflow-y: auto;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-track { background: transparent; }

.empty-hint { color: var(--text-dim); font-size: 14px; font-weight: 500; font-style: italic; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-color: var(--border-strong); }
th { color: var(--green); }
td, th { border-bottom: 1px solid var(--border); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
  .topnav { padding: 8px 12px; }
  .topnav .brand { font-size: 14px; }
  .card { padding: 12px; }
  .page { padding: 0 12px 40px; }
  .user-chip { font-size: 12px; padding: 5px 7px; gap: 5px; flex-wrap: wrap; row-gap: 3px; }
  .modal { padding: 16px; max-width: 100%; }
  /* KULLANICI BULGUSU (bu tur): "Rütbe level kredi çıkış ekranı gözükemiyor" -
     .topnav .right icindeki butonlar (ana-ekrana-ekle/tema/yardim/zil/
     user-chip/Cikis) dar ekranda TEK SATIRDA sigmiyordu ve wrap tanimli
     olmadigi icin sayfa genelindeki overflow-x:hidden guvenlik agi tasan
     kismi (cogunlukla Cikis butonu ve user-chip'in sag ucu) SESSIZCE
     kirpiyordu - kullaniciya "gozukmuyor" gibi geliyordu. Duzeltme: bu
     blok mobilde artik ikinci (gerekirse ucuncu) satira SARIYOR, hicbir
     buton/rozet artik kirpilmiyor/gizlenmiyor.
  */
  .topnav .right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}

/* KULLANICI ISTEGI: "Sitede haritanın çerçevesini sağa ve sola doğru biraz
   büyütebilirsin. Var yer, kenarlarda boşluk var." - .page kapsayicisi
   (max-width:1100px) TUM sayfalarda kullanildigi icin oradan degistirmek
   diger butun sayfalari (formlar, tablolar) da etkiler - onun yerine SADECE
   harita kartina (#battle-map-card) negatif kenar bosluklariyla, ebeveyninin
   (.page) MERKEZINE gore simetrik bir "tasma" (breakout) uygulanir - boylece
   sadece harita genisler, geri kalan sayfa duzeni degismez. Dar ekranlarda
   (asagidaki media query) tasma iptal edilir ki tasma miktari .page'in kendi
   genisliginden BUYUK olup yatay scrollbar/örtüşme yaratmasin.
*/
#battle-map-card {
  max-width: 1400px;
  margin-left: -150px;
  margin-right: -150px;
}
@media (max-width: 1150px) {
  #battle-map-card { margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* KULLANICI ISTEGI (Meclis Faz 5D): "Meclis dosyası istersen tüm ekranda
   görünebilsin sağda solda boş yerimiz çok" - #battle-map-card ile AYNI
   "tasma" (breakout) teknigi: sadece ACIK dava dosyasi karti (.dossier-case)
   .page'in 1100px sinirini simetrik negatif kenar bosluklariyla asar, geri
   kalan Meclis sayfasi (sekmeler, dava listesi, formlar) ETKILENMEZ. Dar
   ekranlarda tasma iptal edilir. */
.dossier.dossier-case {
  max-width: 1400px;
  margin-left: -150px;
  margin-right: -150px;
}
@media (max-width: 1150px) {
  .dossier.dossier-case { margin-left: 0; margin-right: 0; max-width: 100%; }
}
/* KULLANICI BULGUSU (kritik hata): "dosyanın içinde metinler kayık, sağa
   sola taştığı için görünmüyor" - kok neden: yukarıdaki -150px/-150px "tasma"
   (breakout) numarası, dosyanın .page'in AÇIK arkaplanına oturduğu eski
   duzende sorunsuzdu (sağda/solda gerçekten boş yer vardı). Meclis "salon"
   temasi turunde #meclis-case-list artık .meclis-courtroom-scene'in İÇİNE
   alındı (bkz. yukarısı) - bu sarmalayıcının kendi border'ı + overflow:hidden'ı
   VAR. Kart hâlâ 1400px'e taşmaya çalışıyor ama artık kendi border'ının
   İÇİNDE bir üst kapsayıcıya (sahneye) çarpıp KIRPILIYOR - dosyanın içindeki
   her metir (başlık, açıklama, buton etiketleri) satırın sol/sağ ucundan
   görünmez oluyordu. Sahne artık kendi görünür çerçevesi olan bir "oda"
   olduğu için (eskisi gibi çıplak sayfa arkaplanı değil), kartın onun
   dışına taşması zaten görsel olarak ANLAMSIZ/BOZUK dururdu - bu yüzden
   tasma numarasını SAHNENİN İÇİNDEYKEN tamamen iptal ediyoruz, kart sahnenin
   kendi genişliğini normal şekilde doldursun.
*/
.meclis-courtroom-scene .dossier.dossier-case {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Canli Savas Haritasi (tek galaksi/yildiz agi haritasi) ---------- */
.battle-map-canvas {
  width: 100%;
  display: block;
  cursor: pointer;
  /* "none": pinch-zoom/pan artik kendi JS kodumuzla yonetiliyor - tarayicinin
     varsayilan dokunma davranisi (sayfa kaydirma/zoom) karismasin diye kapatildi. */
  touch-action: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(9,20,12,0.9) 0%, rgba(3,5,3,0.98) 75%);
}
.battle-map-hint {
  text-align: center;
}
.battle-map-legend {
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.battle-map-shape-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
}
.battle-map-shape-picker button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 2px 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1;
}
.battle-map-shape-picker button.active {
  border-color: var(--green);
  color: var(--green);
}
.battle-map-zoom-controls {
  display: flex;
  gap: 4px;
}
.battle-map-zoom-controls button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
}
/* RPG FAZ A: "haritada tikla-git" - moda girildiginde buton belirgin (yesil)
   olarak vurgulanir, kullanici "su an hedef secim modundayim" oldugunu
   ikondan/renkten anlasin diye. */
#battle-map-move-btn.active {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}
/* Canli olay seridi: tek satir, sagdan sola surekli akan mini haber şeridi.
   .battle-map-log konteynerinin kendisi artik bunun icin kullaniliyor. */
.battle-map-log {
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
}
.battle-map-ticker-track {
  display: inline-block;
  animation: battle-map-ticker-scroll linear infinite;
}
.battle-map-ticker-item {
  display: inline-block;
  padding: 0 22px;
  font-size: 13px;
  color: var(--text-dim);
}
@keyframes battle-map-ticker-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@media (max-width: 480px) {
  .battle-map-legend { font-size: 12px; gap: 6px !important; }
  .battle-map-hint { font-size: 12.5px; }
  /* Filo mini-kartlari dar ekranda daha sik/okunakli dursun - buton ve zamanlayici
     alt satira duserse bile hala rahatca okunabilir kalsin diye kucuk bir siklastirma. */
  .fleet-card { font-size: 12px; padding: 5px 8px; gap: 6px; }
  .fleet-card button { padding: 3px 7px; font-size: 11.5px; }
}

/* KULLANICI ISTEGI: "Mobilde mesela haritadaki terminal kaymış, mesaj altta
   kalıyor." - .battle-map-terminal-overlay eskiden SADECE battlemap-core.js
   icindeki inline style ile konumlandiriliyordu: sabit width:230px, hicbir
   mobil uyarlamasi yoktu. Dar ekranlarda (harita genisligi cogu telefonda
   ~300-340px'e iner) bu sabit 230px genislik + 8px sol bosluk haritanin buyuk
   bolumunu kaplayip yakinlastirma dugmeleriyle/kenarla cakisiyor, en alttaki
   (en yeni) mesaj satiri da tasan/kirpilan alanda kaliyordu. Simdi konumlama
   ve boyutlandirma buraya (CSS) tasindi: genislik container'a gore esnek
   (min() ile sinirli, asla tasmaz), ve <=480px'te yukseklik/yazi boyutu
   kuculup alt bosluk eklendi ki son satir kirpilmasin. */
.battle-map-terminal-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: min(230px, calc(100% - 16px));
  max-height: 120px;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}
.battle-map-terminal-overlay .bmt-feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 120px;
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .battle-map-terminal-overlay {
    left: 6px;
    bottom: 6px;
    width: min(190px, calc(100% - 12px));
    max-height: 84px;
    padding-bottom: 3px;
  }
  .battle-map-terminal-overlay .bmt-feed {
    min-height: 84px;
    font-size: 10px;
    line-height: 1.35;
  }
}

/* Filo saldirisi mini-kartlari (bkz. public/battlemap.js renderFleetPanel) */
.battle-map-fleets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.fleet-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--bg-elevated);
}
.fleet-card.pending {
  border-color: #e8c34d;
}
.fleet-card .fleet-timer {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #ff8a3d;
  margin-left: auto;
}
.fleet-card .fleet-status-pending {
  color: #e8c34d;
  font-weight: bold;
  margin-left: auto;
}
.fleet-card button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
}
.fleet-card button:hover {
  border-color: var(--green);
  color: var(--green);
}

/* KULLANICI ISTEGI: filoya sonradan katilma istegi - bkz. public/battlemap.js
   renderFleetPanel() joinRequestHtml/joinRequestsListHtml. */
.fleet-join-requests {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.fleet-join-request-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fleet-join-accept-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.fleet-join-reject-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ---------- Acil Durum Protokolu (KULLANICI ISTEGI: admin ac/kapa edilebilir,
   site geneli glitch/static/flicker efekti + sabit uyari banner'i) ----------
   bkz. public/shared/nav.js applyEmergencyProtocol(). Overlay TAMAMEN AYRI bir
   katman (position:fixed, pointer-events:none) - body'e transform/filter
   uygulanmaz, boylece diger position:fixed ogeler (terminal widget, nav vb.)
   bundan ETKILENMEZ. */
/* KULLANICI BULGUSU: "sadece yukarda yanıp sönen bişey var ve sürekli takılıp
   sanki FPS drop yemişçesine yavaş yanıp sönüyor, gerçek bir doku gibi değil,
   ayrıca sadece o var, siteye başka bişey olmuyor" - kok neden IKI KATMANLIYDI:
   (1) tarama cizgisi/parazit gorsel olarak neredeyse SEÇILEMEZ opaklikta ve
   koyu-tema-uzerinde-koyu renklerdeydi (rgba(0,0,0,..) siyah zeminde siyah -
   pratikte GORUNMUYORDU), (2) banner animasyonu steps(2) ile SABIT 1.3sn'lik
   YARI-OPAKLIK gecisi yapiyordu - bu "yaniyor/sonuyor" degil, tam bir "asenkron
   takilma" hissi veriyordu. Asagida: tarama cizgisi/parazit artik BEYAZ/parlak
   + 'overlay' karisim modinde (temanin renginden bagimsiz her zaman GORUNUR),
   banner ise surekli yari-opaklik yerine KISA, SEYREK "sinyal kesilmesi"
   patlamalari (jitter+renk kaymasi) + arada UZUN sabit/net donemler kullanir -
   gercek bir "glitch" gibi hisssettirir, sabit-hizli-blink gibi degil. Hem hiz
   (--ep-speed, saniye) hem yogunluk (--ep-intensity, 0-1) admin ayarindan
   gelen CSS custom property'lerdir (bkz. public/shared/nav.js
   applyEmergencyProtocol) - varsayilan degerler burada de tanimlanir ki JS
   hic calismazsa bile efekt SESSIZCE makul bir varsayilanla calissin. */
#emergency-protocol-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  overflow: hidden;
  --ep-speed: 1.2;
  --ep-intensity: 0.6;
}
#emergency-protocol-overlay .ep-scanlines {
  position: absolute;
  inset: -100px 0 0 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,calc(0.09 * var(--ep-intensity, 0.6))) 0px,
    rgba(255,255,255,calc(0.09 * var(--ep-intensity, 0.6))) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  animation: ep-scan-move calc(var(--ep-speed, 1.2) * 1s * 4) linear infinite;
}
@keyframes ep-scan-move {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}
#emergency-protocol-overlay .ep-noise {
  position: absolute;
  inset: -3px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0.6px, transparent 0.6px),
    radial-gradient(circle, rgba(255,90,70,0.7) 0.6px, transparent 0.6px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: calc(0.55 * var(--ep-intensity, 0.6));
  animation: ep-noise-jump calc(var(--ep-speed, 1.2) * 1s * 0.09) steps(1) infinite;
}
@keyframes ep-noise-jump {
  0% { background-position: 0 0, 1px 2px; }
  25% { background-position: 2px 1px, 0 3px; }
  50% { background-position: 1px 3px, 2px 0; }
  75% { background-position: 3px 0, 1px 1px; }
  100% { background-position: 0 2px, 3px 2px; }
}
#emergency-protocol-overlay .ep-glitch-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  top: -10px;
  background: rgba(178,58,46,0.85);
  mix-blend-mode: screen;
  opacity: 0;
  animation: ep-bar-jump calc(var(--ep-speed, 1.2) * 1s * 2.6) infinite;
}
@keyframes ep-bar-jump {
  0%, 92%, 100% { opacity: 0; top: -10px; }
  93% { opacity: calc(0.9 * var(--ep-intensity, 0.6)); top: 12%; }
  94% { opacity: 0; }
  95% { opacity: calc(0.7 * var(--ep-intensity, 0.6)); top: 58%; }
  96% { opacity: 0; }
  97% { opacity: calc(0.8 * var(--ep-intensity, 0.6)); top: 80%; }
  98% { opacity: 0; }
}
#emergency-protocol-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: repeating-linear-gradient(45deg, #b23a2e, #b23a2e 10px, #7a1f16 10px, #7a1f16 20px);
  color: #fff;
  text-align: center;
  padding: 6px 14px;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 14px;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  pointer-events: none;
  --ep-speed: 1.2;
  --ep-intensity: 0.6;
  animation: ep-banner-jitter calc(var(--ep-speed, 1.2) * 1s * 3) steps(1) infinite;
}
/* Uzun sabit/net donem + KISA (dongunun ~%12'si) hizli titreme/kayma patlamasi -
   "sinyal anlik kesiliyor" hissi verir, surekli yari-hiz blink DEGIL. */
@keyframes ep-banner-jitter {
  0%, 86%, 100% { transform: translate(0, 0); opacity: 1; text-shadow: 0 0 4px rgba(0,0,0,0.6); }
  87% { transform: translate(calc(-2px * var(--ep-intensity, 0.6)), 0); opacity: 0.85; text-shadow: 2px 0 rgba(120,220,255,0.6), -2px 0 rgba(255,80,60,0.6); }
  88% { transform: translate(calc(2px * var(--ep-intensity, 0.6)), 0); opacity: 1; }
  89% { transform: translate(0, calc(1px * var(--ep-intensity, 0.6))); opacity: 0.6; text-shadow: -2px 0 rgba(120,220,255,0.6), 2px 0 rgba(255,80,60,0.6); }
  90% { transform: translate(calc(-1px * var(--ep-intensity, 0.6)), 0); opacity: 1; text-shadow: 0 0 4px rgba(0,0,0,0.6); }
  91%, 96% { transform: translate(0, 0); opacity: 1; }
  97% { transform: translate(calc(1px * var(--ep-intensity, 0.6)), 0); opacity: 0.7; text-shadow: 2px 0 rgba(120,220,255,0.5), -2px 0 rgba(255,80,60,0.5); }
  98% { transform: translate(0, 0); opacity: 1; text-shadow: 0 0 4px rgba(0,0,0,0.6); }
}
@media (max-width: 480px) {
  #emergency-protocol-banner { font-size: 12px; padding: 5px 8px; }
}

/* ---------- Star rating ---------- */
.star-row { display:flex; gap:2px; }
.star-row .star { cursor:pointer; font-size:18px; color: var(--border-strong); }
.star-row .star.filled { color: var(--green); }

/* ---------- Boot / yukleme ekrani ---------- */
#boot-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--green);
  font-family: 'Courier New', Courier, monospace;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-shadow: 0 0 8px rgba(78,240,122,0.5);
  transition: opacity 0.4s ease;
}
#boot-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 1px, transparent 1px, transparent 3px);
}
#boot-overlay.hidden { opacity: 0; pointer-events: none; }
#boot-overlay .boot-brand {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 4px;
}
#boot-overlay .boot-sub {
  font-size: 12.5px;
  color: var(--green-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: -14px;
}
#boot-overlay .boot-bar {
  width: 260px;
  height: 14px;
  border: 1px solid var(--border-strong);
  position: relative;
}
#boot-overlay .boot-bar-fill {
  position: absolute;
  inset: 2px;
  width: 0%;
  background: var(--green);
  transition: width 1.1s linear;
}
#boot-overlay .boot-lines {
  font-size: 12.5px;
  color: var(--green-dim);
  min-height: 60px;
  text-align: left;
  width: 280px;
}

/* ---------- Kisisellestirilmis karsilama taramasi (boot ekrani uzantisi) ----------
   KULLANICI ISTEGI: "yüz taraması gibi bi ekran, ekranda ona ait bilgiler gelsin" -
   auth-gate'teki HUD kose parantez + taranan cizgi dilini (bkz. .hud-corner,
   gate-scan-move keyframe) yeniden kullanir, boot-overlay'e SADECE esik suresi
   asildiginda (bkz. public/shared/nav.js runWelcomeScanSequence) eklenir. */
/* KULLANICI ISTEGI: "tüm ekranı kaplayacak kadar büyük olsun, çok ufak oldu,
   adam tarancak tripli olmalı, 15 saniye sürebilir" - orijinal 96px'lik kucuk
   yuvarlak avatar, neredeyse tamamen siyah bir ekranin ortasinda kayboluyordu.
   Artik: (1) avatar dairesi cok buyutuldu, (2) TUM viewport'un kenarlarina
   buyuk HUD kose parantezleri eklendi (bkz. .ws-frame-corner, nav.js tarafindan
   overlay'in KENDISINE eklenir - kucuk daireye degil), (3) ekranin tamamini
   yukaridan asagi tarayan ayri bir "tam ekran" tarama cizgisi eklendi
   (.ws-scan-fullbeam) - boylece "butun ekran taraniyor" hissi veriliyor,
   sadece kucuk bir yuz fotosu degil. Sure uzatmasi icin bkz. nav.js STEP_MS/
   satir sayisi/on-gecikme degerleri. */
#boot-overlay .ws-scan-box {
  position: relative;
  width: 220px;
  height: 220px;
  border: 2px solid var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 84px;
  overflow: hidden;
  background: rgba(78,240,122,0.05);
  box-shadow: 0 0 46px rgba(78,240,122,0.3), 0 0 90px rgba(78,240,122,0.12);
}
/* KULLANICI BULGUSU (bu tur): "tarama profil fotoğraflar hep kayık, kayıyor
   oturmuyor... bizim ölçülerimiz duruma göre bunların tümünü hizalayabilir" -
   GERCEK KOK NEDEN: img'nin dogrudan ebeveyni olan .ws-scan-avatar (nav.js
   tarafindan olusturulan sarmalayici div) HICBIR genislik/yukseklik
   tanimlamiyordu (varsayilan, icerige gore buzulen bir flex ogesi). CSS'te
   yuzde (%) genislik/yukseklik degerleri, SADECE ebeveynin KENDI genisligi/
   yuksekligi KESIN olarak belirliyse islevseldir - .ws-scan-avatar'in boyutu
   belirsiz oldugu icin img'deki "width:100%; height:100%" GECERSIZ sayilip
   tarayici tarafindan yerine resmin DOGAL (orijinal) piksel boyutu
   kullaniliyordu. Sonuc: kare olmayan (or. genis/yatay) bir fotograf, 220px'lik
   yuvarlak cerceveyi TAM DOLDURAMIYOR, ortalanmis ama kucuk kaliyor, boylece
   dairenin kenarlarinda cercevenin ARKA PLANI (koyu boot-overlay) bir "hilal"
   seklinde gorunuyordu - foto her zaman "kaymis/oturmamis" gibi algilaniyordu.
   Duzeltme: .ws-scan-avatar artik KENDISI de tam olarak ebeveyninin (.ws-scan-box)
   butun alanini kapliyor (position:absolute; inset:0) - boylece icindeki img'nin
   yuzde degerleri ARTIK KESIN bir ebeveyn boyutuna gore hesaplaniyor ve
   object-fit:cover HER fotografi (oran ne olursa olsun) cercevenin tamamini
   kaplayacak sekilde ortalayip kirpiyor - kare olmayan/degisken boyutlu
   fotograflar da dahil TUM fotograflar artik cerceveye tam oturuyor. */
#boot-overlay .ws-scan-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#boot-overlay .ws-scan-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
#boot-overlay .ws-scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(78,240,122,0.9), transparent);
  animation: gate-scan-move 1.6s linear infinite;
}
@media (max-width: 600px) {
  #boot-overlay .ws-scan-box { width: 150px; height: 150px; font-size: 58px; }
}
/* Overlay'in (yani TUM viewport'un) dort kosesine yerlesen buyuk HUD parantezleri -
   "tarama tum ekrani kapliyor" hissi verir. .hud-corner'dan BAGIMSIZ (kendi
   boyut/konumuna sahip) yeni bir sinif - farkli boyut ihtiyaci karisikligi
   onlemek icin. */
#boot-overlay .ws-frame-corner {
  position: absolute;
  width: 46px;
  height: 46px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.85;
}
#boot-overlay .ws-frame-corner.tl { top: 28px; left: 28px; border-top: 2px solid var(--green); border-left: 2px solid var(--green); }
#boot-overlay .ws-frame-corner.tr { top: 28px; right: 28px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); }
#boot-overlay .ws-frame-corner.bl { bottom: 28px; left: 28px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); }
#boot-overlay .ws-frame-corner.br { bottom: 28px; right: 28px; border-bottom: 2px solid var(--green); border-right: 2px solid var(--green); }
@media (max-width: 600px) {
  #boot-overlay .ws-frame-corner { width: 26px; height: 26px; }
  #boot-overlay .ws-frame-corner.tl, #boot-overlay .ws-frame-corner.tr { top: 14px; }
  #boot-overlay .ws-frame-corner.bl, #boot-overlay .ws-frame-corner.br { bottom: 14px; }
  #boot-overlay .ws-frame-corner.tl, #boot-overlay .ws-frame-corner.bl { left: 14px; }
  #boot-overlay .ws-frame-corner.tr, #boot-overlay .ws-frame-corner.br { right: 14px; }
}
/* Tum ekrani yukaridan asagi yavasca tarayan ikinci, genis bir cizgi - kucuk
   dairesel yuz taramasindan ayri, "butun terminal seni taraniyor" hissi verir. */
#boot-overlay .ws-scan-fullbeam {
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78,240,122,0.55), transparent);
  animation: ws-scan-fullbeam-move 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ws-scan-fullbeam-move {
  0% { top: 4%; opacity: 0.9; }
  50% { top: 92%; opacity: 0.45; }
  100% { top: 4%; opacity: 0.9; }
}

/* ---------- Giris/uye ol tam ekran kilit ekrani ---------- */
/* KULLANICI BULGUSU: "siteyi ilk acan musteri sadece uye ol ekranini goruyor,
   mantikli ama arkaplan siyah olmasin, saydam olsun arkada siteyi de gorebilsin,
   nereye uye olduğunu bilebilmeli" - eskiden duz #000 (tamamen opak) idi, alttaki
   ana sayfa/harita GORUNMUYORDU. Artik yari saydam + hafif bulanikliklastirma
   (backdrop-filter destekleyen tarayicilarda) ile arkadaki site "cam arkasindan"
   goruluyor - ziyaretci nereye uye oldugunu (harita, savas alanlari vb.) sezebiliyor.
   backdrop-filter desteklenmeyen tarayicilarda (eski Safari/Firefox surumleri) yine
   de kabul edilebilir bir koyu-yari-saydam katman olarak calisir (sadece bulaniklik
   olmaz). */
#auth-gate {
  position: fixed;
  inset: 0;
  background: rgba(3,7,4,0.68);
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#auth-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
  z-index: 1;
}
#auth-gate .gate-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22vw;
  font-weight: 800;
  color: rgba(78,240,122,0.05);
  letter-spacing: 4px;
  user-select: none;
  white-space: nowrap;
}
#auth-gate .gate-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--green);
  background: rgba(3,5,3,0.9);
  padding: 26px;
  box-shadow: 0 0 40px rgba(78,240,122,0.1);
}
#auth-gate .gate-title {
  font-size: 14.5px;
  color: var(--green-dim);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 18px;
}
#auth-gate .gate-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
#auth-gate .gate-tabs .btn { flex: 1; }

/* KULLANICI ISTEGI (#394): "CIA John Wick Military Terminal" giris ekrani -
   HUD kose parantezleri, taranan cizgi, yanip sonen imlec, alt bilgi seridi.
   Sadece gorsel - form/submit islevine hicbir sekilde dokunmuyor. */
#auth-gate .gate-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 3;
}
#auth-gate .gate-corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--green); border-left: 2px solid var(--green); }
#auth-gate .gate-corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); }
#auth-gate .gate-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); }
#auth-gate .gate-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--green); border-right: 2px solid var(--green); }

#auth-gate .gate-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78,240,122,0.85), transparent);
  opacity: 0.55;
  z-index: 3;
  pointer-events: none;
  animation: gate-scan-move 3.4s linear infinite;
}
@keyframes gate-scan-move {
  0% { top: 0; opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.55; }
  100% { top: 100%; opacity: 0; }
}

#auth-gate .gate-cursor {
  display: inline-block;
  margin-left: 3px;
  color: var(--green);
  animation: gate-blink 1s step-end infinite;
}
@keyframes gate-blink { 50% { opacity: 0; } }

#auth-gate .gate-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong);
  font-size: 11.5px;
  color: var(--green-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* KULLANICI ISTEGI (#394): "Ana sayfa: Terminal gibi. Canlı. Askeri. Premium.
   Sinematik." - auth-gate'teki HUD dilini (kose parantez + canli durum seridi)
   ana sayfa hero kartina da tasiyan GENEL (auth-gate'e ozel OLMAYAN) siniflar.
   Herhangi bir position:relative + overflow:hidden konteynere eklenebilir. */
.hud-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 3;
}
.hud-corner.tl { top: 6px; left: 6px; border-top: 2px solid var(--green); border-left: 2px solid var(--green); }
.hud-corner.tr { top: 6px; right: 6px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); }
.hud-corner.bl { bottom: 6px; left: 6px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); }
.hud-corner.br { bottom: 6px; right: 6px; border-bottom: 2px solid var(--green); border-right: 2px solid var(--green); }

.hud-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--green-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hud-status .hud-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes hud-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* ---------- Harita Hızlı Erişim (map-centric navigation) ----------
   KULLANICI ISTEGI (site geneli sadelestirme, Helldivers Companion referansi:
   "aslinda her seye haritadan erisilebiliyor mesela"): "Canlı Savaş Haritası"
   baslik satirina (index.html, "Filo Kur" dugmesinin yanina) eklenen kucuk bir
   dugme + acilir panel - Gorevler/Magaza/Banka/Etkinlikler/Meclis/Anketler/
   Gunlukler/Profil'e haritadan/haritanin hemen ustunden tek tikla gidilebilsin
   diye. BILEREK haritanin KENDI canvas'inin UZERINE bindirilmedi (bkz.
   battlemap-core.js .battle-map-zoom-controls sag-ust, .battle-map-admin-tools
   sol-ust - o koseler zaten dolu, cakisma riski olurdu) - bunun yerine
   section-title satirinda, normal akista (position:relative SADECE panelin
   dogru yerden acilmasi icin). Ust nav cubugu KALDIRILMADI, bu sadece ek yol. */
.map-quick-access {
  position: relative;
}
.map-quick-access-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--green);
  font-family: 'Rajdhani', 'Courier New', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.map-quick-access-btn:hover {
  border-color: var(--green);
  box-shadow: 0 0 8px 1px rgba(78, 240, 122, 0.3);
}
.map-quick-access-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: rgba(3, 7, 3, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  z-index: 45;
}
.map-quick-access-panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-radius: 3px;
}
.map-quick-access-panel a:hover {
  background: var(--bg-card);
  color: var(--green-bright);
  text-decoration: none;
}
@media (max-width: 480px) {
  .map-quick-access-btn span { display: none; }
  .map-quick-access-panel { min-width: 170px; }
}

/* #638/#639 (KULLANICI ISTEGI: "Haritadaki her tıklamada" radial/action-wheel
   menü), DUZELTME #647 (KULLANICI BULGUSU: "hala o radyallik yok... adam
   emojisi... temadan şaştın") - ilk surum kare/yuvarlak koseli kutucuklari
   bir daire uzerine diziyordu (Helldivers Companion'daki GERCEK pasta dilimi
   gorunumu degildi) ve emoji ikon kullaniyordu - nav.js'in KENDI ince-cizgi
   SVG dili (bkz. svgIcon()/SVG_ICONS) varken bu bir tutarsizlikti. Artik TEK
   bir SVG icinde gercek donut/pasta dilimleri (.map-radial-wedge) ciziliyor,
   icindeki ikon (.map-radial-icon) nav.js ile AYNI stroke stilinde - emoji
   YOK (bkz. RADIAL_ICON_PATHS, battlemap-events.js). .map-radial-menu, boyutsuz
   (0x0) bir "çapa" - icindeki <svg>, kendi negatif margin'iyle bu çapa
   uzerine ortalanir (viewBox'in merkezi 0,0 tiklanan noktaya denk gelir). */
.map-radial-menu {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  z-index: 60;
  display: none;
}
.map-radial-svg {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}
.map-radial-wedge {
  fill: rgba(3, 7, 3, 0.93);
  stroke: var(--border-strong);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.12s ease;
}
.map-radial-wedge:hover {
  fill: var(--bg-card);
  stroke: var(--green);
}
.map-radial-icon { color: var(--green); }
.map-radial-wedge:hover + .map-radial-icon { color: var(--green-bright); }
.map-radial-label {
  font-family: 'Rajdhani', 'Courier New', monospace;
  /* KULLANICI BULGUSU (#650): "yazıyı büyült, okunmuyor" - eskiden 9.5px/700
     idi, SVG icindeki metin cok kucuk kaliyordu. 13px'e cikarildi (mobilde 11px). */
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  fill: var(--text-bright, var(--text));
}
.map-radial-hub {
  fill: rgba(3, 7, 3, 0.97);
  stroke: var(--border-strong);
  stroke-width: 1;
  cursor: pointer;
}
.map-radial-hub:hover { fill: var(--bg-card); stroke: var(--red); }
.map-radial-hub-x { stroke: var(--text-dim); stroke-width: 2.5; stroke-linecap: round; }
@media (max-width: 480px) {
  .map-radial-label { font-size: 11px; }
}

/* #643/#644/#645 (Helldivers Companion referansi - "gezegene tıklayınca açılan
   kart, karta tıklayınca gelen sayfa"): iki kademeli bölge detay akışı, ikisi
   de artık haritanın ALTINDA değil, haritanın ÜZERİNDE (canvas'ın position:relative
   sarmalayıcısı içinde, bkz. battlemap-core.js constructor) yüzen katmanlar. */
.battle-map-region-card {
  position: absolute;
  min-width: 220px;
  max-width: 260px;
  z-index: 55;
  background: rgba(3, 7, 3, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  font-family: 'Rajdhani', 'Courier New', monospace;
  /* Tiklanan noktanin TAM USTUNE degil, biraz yanina/altina - imlec/parmak
     kartin kendisiyle cakismasin. */
  transform: translate(10px, 10px);
}
.battle-map-region-card-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px; padding-left: 8px; font-size: 14px;
}
.battle-map-region-card-body {
  font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column;
  gap: 2px; margin-bottom: 8px;
}
.battle-map-region-card-actions { display: flex; gap: 6px; }
@media (max-width: 480px) {
  .battle-map-region-card { min-width: 190px; max-width: 220px; }
}

/* Tam sayfa detay (renderDetail() - battlemap-duel.js) - icerik/mantik AYNEN
   korundu, sadece "haritanin altinda sabit blok" yerine "haritanin BUYUK
   kismini kaplayan, kaydirilabilir bir katman" haline getirildi. */
.battle-map-detail {
  position: absolute;
  inset: 4%;
  z-index: 58;
  overflow-y: auto;
  background: rgba(4, 9, 5, 0.98);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
/* Baslik+Kapat satiri (renderDetail()'in ilk satiri, battlemap-duel.js) icerik
   kaydirilirken de gorunur kalsin - uzun sayfada (gorevler+uyeler+anitlar)
   her seferinde en yukari kaydirmaya gerek kalmaz. */
.battle-map-detail > div:first-child {
  position: sticky;
  top: -18px;
  margin: -18px -18px 8px;
  padding: 14px 18px 10px;
  background: rgba(4, 9, 5, 0.98);
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
@media (max-width: 700px) {
  .battle-map-detail { inset: 2%; }
}

/* ---------- Kayan duyuru şeridi (marquee) ---------- */
/* Eskiden iki kopya metin -50% kaydiriliyordu; bu, metin ekrana YARIM/ortadan
   baslamis gibi gorunmesine yol aciyordu (kotu goruntu). Artik TEK kopya, tamamen
   sagdan (ekran disindan) girip sola (ekran disina) cikacak sekilde akiyor. */
.marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 0;
  text-align: left;
}
.marquee-track {
  display: inline-block;
  /* FAZ 3 - KULLANICI ISTEGI: "yukarda kayan duyuru cok hizli, hizina bile
     mudahale edemiyoruz" - sure artik admin panelinden (siteSettings.announcementMarqueeSpeedSec)
     ayarlanip nav.js tarafindan --marquee-duration olarak inline set ediliyor;
     hic ayarlanmamissa (degisken yoksa) eski sabit 16s'ye geri doner. */
  animation: marquee-scroll var(--marquee-duration, 16s) linear infinite;
}
.marquee-item {
  display: inline-block;
  padding: 0 40px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--green);
  text-shadow: 0 0 6px rgba(78,240,122,0.35);
}
@keyframes marquee-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@media (max-width: 700px) {
  .marquee-item { font-size: 14.5px; padding: 0 24px; }
}

/* ---------- Kullanici nick menusu (Profil/Gorevlerim/Gelen Kutusu/Banka) ---------- */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 120;
  padding: 6px;
}
.user-menu-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.user-menu-dropdown a:hover {
  background: rgba(78,240,122,0.08);
  color: var(--green);
}
.inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  vertical-align: middle;
}

/* ---------- Site geneli sabit Terminal widget'i (sag-alt, acilir/kapanir) ---------- */
/* KULLANICI ISTEGI: "Terminal sadece bir sayfadan ibaret olmasa, ana sayfada sag
   altta acilip kapanabilen canli-destek tarzi sabit bir ekran olsa, oyuncu bunu
   her yerden gorebilse" - bu widget nav.js tarafindan HER sayfada (terminal.html
   haric - orada zaten tam surum acik) sag-alt kosede kucuk bir baloncuk olarak
   eklenir; tiklaninca son mesajlari + hizli yazma kutusunu acar. Tam ozellikli
   (@etiketleme, admin yayin alarmi, silme) surum hala /terminal.html'de.  */
#term-widget-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 400;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--green);
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 0 rgba(78,240,122,0);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
#term-widget-toggle:hover { transform: scale(1.06); box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 14px rgba(78,240,122,0.35); }
#term-widget-toggle .dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px 1px rgba(255,92,77,0.7);
  display: none;
}
#term-widget-toggle.has-new .dot { display: block; }

#term-widget-panel {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 400;
  width: min(340px, calc(100vw - 36px));
  height: min(420px, calc(100vh - 120px));
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
  display: none;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
}
#term-widget-panel.open { display: flex; }
.term-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 12.5px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.term-widget-head a { color: var(--text-dim); text-decoration: underline; font-size: 12px; text-transform: none; letter-spacing: 0; }
.term-widget-close {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 2px;
}
.term-widget-close:hover { color: var(--red); }
.term-widget-feed {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--green);
}
.term-widget-feed .line { white-space: pre-wrap; word-break: break-word; margin-bottom: 5px; }
.term-widget-feed .line .ts { color: var(--green-dim); font-size: 12px; }
/* KULLANICI ISTEGI (#445): terminal.html'deki .crt-line .msg ile AYNI parlaklik
   duzeltmesi - ana sayfadaki mini terminal widget'i da ayni derecede sonuk
   kalmasin diye tutarlilik icin burada da uygulandi. */
.term-widget-feed .line .msg { color: var(--green-bright); font-weight: 700; }
/* KULLANICI ISTEGI (bu tur): "sag alttaki sabit duran terminalide ayni sekile
   getirmeliyiz" - terminal.html'deki rutbe etiketi (sari) + kalin/tiklanabilir
   kullanici adi + yanitla butonu ayni sekilde burada da uygulandi, sadece
   widget'in kucuk paneline sigacak sekilde kompakt tutuldu. */
.term-widget-feed .line .rank { color: #e8c34d; font-weight: 700; font-size: 0.85em; }
.term-widget-feed .line .author { color: #dff5e6; font-weight: 800; text-decoration: none; }
.term-widget-feed .line .author:hover { text-decoration: underline; color: #fff; }
.term-widget-feed .line .line-actions { margin-top: 1px; }
.term-widget-reply {
  background: none; border: none; color: var(--green-dim); cursor: pointer;
  font-family: inherit; font-size: 11px; text-decoration: underline; padding: 0;
}
.term-widget-reply:hover { color: var(--green); }
.term-widget-input-row {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border-strong);
}
.term-widget-input-row input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
}
.term-widget-input-row button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--green);
  font-family: inherit;
  font-size: 12.5px;
  padding: 0 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.term-widget-input-row button:hover { background: rgba(78,240,122,0.1); }
@media (max-width: 480px) {
  #term-widget-panel { right: 8px; bottom: 72px; }
  #term-widget-toggle { right: 12px; bottom: 12px; }
}