/* ============================================================
   Tasarım belirteçleri (design tokens)
   Koyu, sakin bir komuta paneli görünümü hedeflenir: durum renkleri
   (aktif/uyarı/kritik) hiçbir zaman eylem/marka rengiyle (accent)
   karıştırılmaz — bir buton ile "aktif" rozeti asla aynı tona
   basmaz, ikisi farklı şeyler söyler.
   ============================================================ */
:root {
  --bg: #0b0f14;          /* sayfa düzlemi */
  --panel: #141b23;       /* kart/panel yüzeyi */
  --panel-2: #1a222c;     /* yükseltilmiş/iç içe yüzey (hover, kod bloğu) */
  --border: #223040;
  --border-strong: #35455a;
  --text: #e8edf4;        /* birincil metin */
  --dim: #8695a8;         /* ikincil metin */
  --muted: #59677a;       /* üçüncül metin, placeholder */
  --accent: #4c9ee8;      /* marka + eylem rengi — yalnız butun/link/odak için */
  --accent-2: #6db4f2;
  --accent-wash: rgba(76, 158, 232, .14);

  /* durum paleti: sabittir, eylem rengiyle asla karışmaz */
  --good: #2fbf6a;
  --good-wash: rgba(47, 191, 106, .14);
  --warn: #f0a839;
  --warn-wash: rgba(240, 168, 57, .13);
  --crit: #e5484d;
  --crit-wash: rgba(229, 72, 77, .14);

  --radius: .6rem;
  --radius-sm: .4rem;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

a, button, input, select, textarea, .durum, .isaret, .nokta {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Üst çubuk */
.ust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: .85rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.marka {
  font-weight: 700;
  letter-spacing: .07em;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.marka::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-wash), 0 0 10px 1px var(--good-wash);
  flex: none;
}

.ust nav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  flex: 1;
}

.ust nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
}

.ust nav a:hover { color: var(--text); background: var(--panel-2); }
.ust nav a.secili { color: var(--text); border-bottom-color: var(--accent); }

.mod {
  color: var(--dim);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .25rem .55rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

main { margin: 0 auto; padding: 2rem 1.5rem 3rem; }
main.genis { max-width: 72rem; }
main.dar { max-width: 40rem; }

/* Stat kartları */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kart {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.kart-etiket {
  color: var(--dim);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.kart-deger { font-size: 2.1rem; font-weight: 650; line-height: 1.05; letter-spacing: -.01em; }
.kart-deger-kucuk { font-size: 1.2rem; font-weight: 650; }

/* Paneller */
.panel-izgara {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}

/* Izgara öğesinin varsayılan min-width değeri auto'dur: içeriğinin
   min-content genişliğinin altına inmez. İçeride MapLibre tuvali varken
   panel dar ekranda viewport'un dışına taşar ve sayfa yatay kayar —
   tek sütuna düşmek bunu tek başına çözmez. */
.panel-izgara > * { min-width: 0; }

@media (max-width: 56rem) {
  .panel-izgara { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 1.35rem;
  margin-bottom: 1.25rem;
}

.panel:last-child { margin-bottom: 0; }

.panel h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -.005em;
}

.yukleniyor, .bos { color: var(--muted); font-size: .9rem; }
.hata-notu { color: var(--crit); font-size: .9rem; }

/* Harita */
#harita {
  height: 22rem;
  border-radius: var(--radius-sm);
  background: #060809;
  border: 1px solid var(--border);
}

.harita-not { color: var(--dim); font-size: .8rem; margin: .75rem 0 0; line-height: 1.5; }

/* Canlı harita sayfası */
.harita-canli #harita {
  height: calc(100vh - 15rem);
  min-height: 24rem;
}

#harita-durum {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

#harita-durum.canli { color: var(--good); }
#harita-durum.canli::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px 1px var(--good-wash);
  margin-right: .4rem;
}

.lejant {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: .82rem;
}

.lejant-oge { display: inline-flex; align-items: center; gap: .45rem; }

.lejant-nokta {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px var(--panel);
}

.lejant-cizgi {
  width: 18px;
  height: 0;
  border-top: 2px dashed var(--accent);
  display: inline-block;
}

.isaret {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--panel); /* yüzey halkası */
  cursor: pointer;
}

.isaret.aktif { background: var(--good); box-shadow: 0 0 0 2px var(--panel), 0 0 8px 1px var(--good-wash); }
.isaret.bitti { background: var(--dim); }

.isaret-ornek {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0 .3rem 0 .6rem;
}

.isaret-ornek.aktif { background: var(--good); }
.isaret-ornek.bitti { background: var(--dim); }

/* Tablolar (operasyonlar, üyeler) */
table.ops { width: 100%; border-collapse: collapse; font-size: .88rem; }

table.ops th {
  text-align: left;
  color: var(--dim);
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 .6rem .6rem;
  border-bottom: 1px solid var(--border);
}

table.ops td {
  padding: .65rem .6rem;
  border-bottom: 1px solid var(--border);
}

table.ops tbody tr:hover { background: var(--panel-2); }
table.ops tbody tr:last-child td { border-bottom: 0; }

/* Hücre içindeki link yalnız metni değil TÜM hücreyi kaplasın — mobilde
   parmakla dokunurken metnin birkaç piksel dışına düşmek çok kolay, o zaman
   hiçbir şey olmaz. Negatif margin, hücrenin kendi padding'ini iptal edip
   linke aynı padding'i geri veriyor: görünüm aynı kalır, dokunma alanı
   hücrenin tamamı olur. */
table.ops td a {
  display: block;
  margin: -.65rem -.6rem;
  padding: .65rem .6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
table.ops td a:hover { color: var(--accent-2); }

td.ts { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }

.durum {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
}

.durum::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.durum.d-aktif { background: var(--good-wash); color: var(--good); }
.durum.d-tamamlandi { background: rgba(134, 149, 168, .14); color: var(--dim); }
.durum.d-genel { background: var(--accent-wash); color: var(--accent-2); }

/* Sistem sağlığı */
.saglik-ic {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: .88rem;
}

.nokta {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.nokta.iyi { background: var(--good); box-shadow: 0 0 7px 1px var(--good-wash); }
.nokta.kritik { background: var(--crit); box-shadow: 0 0 7px 1px var(--crit-wash); }

.ayrac { color: var(--border-strong); }

/* Formlar */
label { display: block; color: var(--dim); font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }

/* font-size 16px'in (1rem) altına inmemeli: iOS Safari daha küçük bir alana
   odaklanınca sayfayı kendiliğinden yakınlaştırır ve geri çıkmaz. Giriş
   ekranında telefon numarası yazarken sayfa zıplıyordu. */
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: .65rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
}

input::placeholder, textarea::placeholder { color: var(--muted); }

/* koordinat kutusu ve telefon gibi sayısal alanlar mono kalır */
#q, #merkez, input[inputmode=tel] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.alan { margin-bottom: 1.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--accent);
  color: #061019;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}

.btn:hover { background: var(--accent-2); }
.btn:active { transform: translateY(1px); }

.btn.ikincil { background: transparent; color: var(--dim); border-color: var(--border-strong); box-shadow: none; }
.btn.ikincil:hover { color: var(--text); border-color: var(--dim); background: var(--panel-2); }

.btn.tehlike { background: var(--crit); color: #fff; }
.btn.tehlike:hover { background: #ef6266; }

.tehlike-form { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }

.btn.buyuk { width: 100%; font-size: 1.02rem; padding: .9rem 1.4rem; letter-spacing: .03em; }

/* Acil çağrı listesi */
.cagri-liste { list-style: none; margin: 0; padding: 0; }

.cagri-liste li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}

.cagri-liste li:last-child { border-bottom: 0; }

.cagri-ust { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cagri-ust strong { font-weight: 650; }
.cagri-ust .ts { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--dim); font-size: .82rem; }
.cagri-mesaj { margin: .4rem 0 0; line-height: 1.5; }
.cagri-liste .yardim { margin: .3rem 0 0; }

.panel-ust { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.1rem; }
.panel-ust h2 { margin: 0; flex: 1; }
.panel-ust select { width: auto; }

.basari { color: var(--good); font-size: .9rem; }
.profil-ad { font-size: 1.4rem; font-weight: 650; margin: 0 0 .5rem; letter-spacing: -.01em; }
tr.pasif td { opacity: .5; }

/* Üst çubuk: kullanıcı ve çıkış */
.kullanici {
  color: var(--dim);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: .3rem .6rem;
  border-radius: var(--radius-sm);
}
.kullanici:hover { color: var(--text); background: var(--panel-2); }
.kullanici.secili { color: var(--text); }
.cikis-form { margin: 0; }
.cikis {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--dim);
  border-radius: var(--radius-sm);
  padding: .35rem .75rem;
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.cikis:hover { color: var(--text); border-color: var(--dim); }

.onizleme {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.3rem;
  display: flex;
  gap: .8rem;
  align-items: center;
}

.onizleme.hata { color: var(--crit); font-size: .92rem; font-family: inherit; border-color: var(--crit-wash); background: var(--crit-wash); }

.onizleme.kayit-ok { font-size: .92rem; font-family: inherit; color: var(--good); border-color: var(--good-wash); background: var(--good-wash); }

.uyari {
  margin-top: .5rem;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--warn-wash);
  border: 1px solid rgba(240, 168, 57, .3);
  color: var(--warn);
  font-size: .88rem;
  line-height: 1.45;
}

.rozet {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bg);
  background: var(--accent-2);
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
  font-family: system-ui, sans-serif;
  flex: none;
}

.yardim { color: var(--dim); font-size: .85rem; line-height: 1.5; }

.dash-eylem { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }

/* Operasyonlar */
.sekmeler { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }

.sekmeler a {
  color: var(--dim);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  padding: .35rem .65rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
}

.sekmeler a:hover { color: var(--text); }
.sekmeler a.secili { color: var(--text); border-bottom-color: var(--accent); }

.op-ozet { margin-bottom: 0; }

.op-baglantilar {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.op-kapat-form { margin: 0; }

/* QR tarama */
.tarama-kutu {
  background: #060809;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 26rem;
  margin: 0 auto;
}

.tarama-kutu video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarama-sonuc {
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-height: 1.4rem;
}

.tarama-sonuc.tamam { background: var(--good-wash); color: var(--good); }
.tarama-sonuc.hata { background: var(--crit-wash); color: var(--crit); }

/* Ayarlar: kimlik QR'ı */
.qr-kutu {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: inline-block;
  margin: .5rem 0;
}

.qr-kutu img { display: block; width: 12rem; height: 12rem; }

.qr-goster { text-align: center; }
.qr-goster .yardim { text-align: left; }

.qr-kutu-buyuk {
  display: block;
  width: min(22rem, 90%);
  margin: 1.25rem auto;
}

.qr-kutu-buyuk img { width: 100%; height: 100%; }

/* Görevlendirme sayfası */
.lejant-cizgi.sektor { border-top-color: #d9a23c; }

.gorev-duzen {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

.gorev-duzen > * { min-width: 0; } /* gerekçe: .panel-izgara > * */
@media (max-width: 60rem) {
  .gorev-duzen { grid-template-columns: 1fr; }
}

.gorev-yan { display: flex; flex-direction: column; gap: 1rem; }

#gorev-harita {
  height: 26rem;
  border-radius: var(--radius-sm);
  background: #060809;
  border: 1px solid var(--border);
}

.cizim-arac {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .75rem;
}
.cizim-arac #ciz-kontrol {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.cizim-arac #ciz-kontrol[hidden] { display: none; }
.cizim-arac input[type="text"] { width: 11rem; }

.ipucu { color: var(--muted); font-size: .85rem; margin-top: .5rem; }

.satir-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .6rem 0;
}
.satir-form input[type="text"], .satir-form select { flex: 1 1 10rem; min-width: 0; }
.satir-ici { display: inline; }

.ekip { border-top: 1px solid var(--border); padding: .6rem 0; }
.ekip:first-of-type { border-top: 0; }
.ekip-ust { display: flex; align-items: baseline; gap: .5rem; }
.ekip-uyeler { list-style: none; padding: 0; margin: .4rem 0 0; }
.ekip-uyeler li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25rem 0;
  color: var(--dim);
}
.cikar {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: .35rem .6rem; /* parmak hedefi: 25 Temmuz demo dersi */
}
.cikar:hover { color: var(--crit); }

.gorev-form { display: grid; gap: .5rem; margin-bottom: .75rem; }

.btn.kucuk { padding: .25rem .6rem; font-size: .8rem; }

/* Sektör tablosundaki indirme hücresi: dokunma-hedefi kuralı (td a blok)
   tek bağlantı varsayar; burada iki bağlantı yan yana durur. */
table.ops td.indir a {
  display: inline-block;
  margin: -.65rem 0;
  padding: .65rem .5rem;
  color: var(--accent);
}

.alt-baslik {
  font-size: .95rem;
  color: var(--dim);
  margin: 1rem 0 .4rem;
}

/* Kapsama: hiç görev atanmamış sektör dikkat ister, atanmış ama henüz
   rapor gelmemiş sektör yalnız bilgidir. */
table.kapsama tr.kapsam-yok td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.kapsama tr.kapsam-bos td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); }

/* Çağrı yanıtı ve check-out */
.cagri-yanit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0 .25rem;
}
.cagri-yanit form { display: flex; gap: .5rem; }
.btn.secili-yanit { background: var(--good); color: #04150b; }
.yanit-sayi { color: var(--dim); font-size: .85rem; }

table.ops tr.ayrildi td { opacity: .55; }

/* ============================================================
   Telefon (ekran, <=34rem)
   Üyenin sahada kullandığı yüzey buradan görünür: giriş, çağrı yanıtı,
   QR check-in, rapor girişi. Komuta sayfaları (görevlendirme, debrief)
   laptopta açılır; telefonda okunur kalmaları yeter.
   Yalnız "screen": kâğıt genişliği bu eşiğin üstünde olsa da debrief
   çıktısının tablo düzeni hiçbir koşulda buradan etkilenmesin.
   ============================================================ */
@media screen and (max-width: 34rem) {
  main { padding: 1.25rem 1rem 2.5rem; }

  /* Marka ile kullanıcı ilk satırda kalır, gezinme kendi satırında tek
     şerit olarak yatay kayar. Sarmalanan menü 390 piksellik ekranda üç
     satıra yayılıp dikey alanın üçte birini yiyordu. */
  .ust { padding: .7rem 1rem; gap: .5rem .75rem; }
  .marka { flex: 1; }
  .mod { display: none; } /* mod rozeti masaüstünde kalır */
  .ust nav {
    flex: 0 0 100%;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ust nav::-webkit-scrollbar { display: none; }
  .ust nav a { white-space: nowrap; padding: .45rem .7rem; }

  /* Tablo sıkıştırılmaz, parmakla yatay kaydırılır: yedi sütunluk üye
     listesi bu genişliğe okunur biçimde sığmaz, sığdırmaya çalışmak
     hücreleri tek heceye indirir. Serbest metin sütunu istisnadır. */
  table.ops { display: block; overflow-x: auto; white-space: nowrap; }
  table.ops td.not { white-space: normal; min-width: 11rem; }

  .kartlar { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
  .kart { padding: .9rem 1rem; }
  .kart-deger { font-size: 1.75rem; }

  #harita { height: 17rem; }
  .harita-canli #harita { height: calc(100vh - 16rem); min-height: 17rem; }
  #gorev-harita { height: 19rem; }

  .onizleme { font-size: 1.1rem; padding: .85rem .9rem; flex-wrap: wrap; }
}

/* Debrief yazdırma: dernek arşivi için kâğıda dökülebilir olmalı.
   Gezinme ve eylemler kâğıtta işe yaramaz; tablolar sayfa arasında
   bölünmesin. */
@media print {
  .ust, .cizim-arac, .ipucu a, .btn, form { display: none !important; }
  body { background: #fff; color: #000; }
  .panel {
    background: #fff;
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
  table.ops { break-inside: auto; }
  table.ops tr { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .durum { border: 1px solid #999; color: #000 !important; background: none !important; }
}