:root{
  --zemin:#0d1117; --panel:#151b24; --panel2:#1c2430; --cizgi:#26313f;
  --metin:#e8eef6; --soluk:#8b9bb0; --vurgu:#3b82f6;
  --yesil:#22c55e; --sari:#eab308; --kirmizi:#ef4444;
  /* Kurumsal renkler - logodan alindi */
  --kurum:#0e5fa4; --kurum2:#2cb5be;
}
*{box-sizing:border-box}

/* KATMAN SIRASI
   Leaflet kendi katmanlarini 200-1000 arasinda konumlandiriyor ve bunlar
   kok yiginda yer aldigi icin dusuk z-index'li pencerelerimizi ORTUYORDU:
   ayar penceresi aciliyor ama haritanin altinda kaliyordu. Butun ustust
   ogeler haritanin uzerinde kalsin diye tek yerde toplandi. */
:root{
  --kat-video:900;    /* harita ustundeki goruntu penceresi */
  --kat-cagri:1500;   /* cagri penceresi */
  --kat-pencere:2000; /* ayarlar, kanallar, gun listesi */
  --kat-onay:2200;    /* onay kutulari - pencerelerin de ustunde */
  --kat-foto:2400;    /* tam ekran fotograf */
  --kat-bildirim:2600;/* kisa bildirim seridi */
  --kat-acil:3000;    /* ACIL - her seyin ustunde */
}
/* hidden ozelligi her zaman kazanmali.
   .perde{display:grid} gibi kurallar yoksa onu eziyor ve
   kapali olmasi gereken perde tum sayfayi kapliyor. */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{
  background:var(--zemin); color:var(--metin);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------------- giris ---------------- */
.ortala{position:fixed;inset:0;display:grid;place-items:center;background:var(--zemin);z-index:50}
.kart{
  background:var(--panel);border:1px solid var(--cizgi);border-radius:14px;
  padding:32px;width:340px;display:flex;flex-direction:column;gap:14px;
}
.kart h1{margin:0;font-size:22px}
.kart .alt{margin:-10px 0 6px;color:var(--soluk);font-size:13px}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--soluk)}
input,select{
  background:var(--panel2);border:1px solid var(--cizgi);color:var(--metin);
  padding:10px;border-radius:8px;font-size:14px;width:100%;
}
input:focus,select:focus{outline:2px solid var(--vurgu);outline-offset:-1px}
button{
  background:var(--vurgu);color:#fff;border:0;padding:10px 14px;
  border-radius:8px;font-size:14px;cursor:pointer;font-weight:500;
}
button:hover{filter:brightness(1.12)}
button.ince{background:transparent;border:1px solid var(--cizgi);color:var(--soluk);padding:6px 12px}
.hata{color:var(--kirmizi);font-size:13px;min-height:18px}

/* ---------------- iskelet ---------------- */
header{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:var(--panel);
  border-bottom:1px solid var(--cizgi);
  /* Kurumsal renklerden ince bir vurgu seridi */
  box-shadow:inset 0 -2px 0 0 var(--kurum), 0 1px 12px rgba(0,0,0,.35);
  position:relative;z-index:5;
}
/* Kurumsal kimlik: logo koyu zeminde okunmasin diye acik bir yastik uzerinde */
.marka{display:flex;align-items:center;gap:12px}
.markaLogo{
  height:34px;width:auto;display:block;
  background:#fff;border-radius:7px;padding:3px 7px;
}
.markaAd{font-weight:600;letter-spacing:.2px;font-size:15px}

.girisLogo{
  width:100%;max-width:230px;align-self:center;
  background:#fff;border-radius:10px;padding:12px 16px;margin-bottom:4px;
}
.kart h1{font-size:18px;line-height:1.3;text-align:center}
.kart .alt{text-align:center}
.durum{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--soluk)}
.rozet{padding:3px 10px;border-radius:20px;font-size:12px}
.rozet.yesil{background:rgba(34,197,94,.15);color:var(--yesil)}
.rozet.gri{background:rgba(143,160,181,.15);color:var(--soluk)}
.rozet.kirmizi{background:rgba(239,68,68,.15);color:var(--kirmizi)}

main{display:grid;grid-template-columns:300px 1fr 340px;height:calc(100vh - 52px)}
aside{background:var(--panel);overflow-y:auto;display:flex;flex-direction:column}
.sol{border-right:1px solid var(--cizgi)}
.sag{border-left:1px solid var(--cizgi)}
.orta{position:relative}
#harita{position:absolute;inset:0}

.baslik{
  padding:13px 16px 9px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:1px;color:var(--soluk);font-weight:600;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--cizgi);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.baslik > .sayi{margin-right:auto}
.sayi{
  background:var(--panel2);padding:1px 8px;border-radius:10px;
  font-size:11px;font-weight:500;letter-spacing:0;
}
.liste{display:flex;flex-direction:column}
.liste.akis{max-height:38vh;overflow-y:auto}

.satir{
  padding:11px 16px;border-bottom:1px solid var(--cizgi);
  display:flex;flex-direction:column;gap:4px;cursor:pointer;
  border-left:3px solid transparent;
  transition:background .12s, border-left-color .12s;
}
.satir:hover{background:var(--panel2);border-left-color:var(--cizgi)}
.satir .ad{font-weight:600;font-size:13.5px;display:flex;align-items:center}
.satir .meta{font-size:11.5px;color:var(--soluk);display:flex;gap:9px;flex-wrap:wrap}
.satir .meta span{white-space:nowrap}
.nokta{
  width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;
  flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.nokta.cevrimici{background:var(--yesil)}
.nokta.cevrimdisi{background:var(--soluk)}

.olay-okutma{border-left:3px solid var(--vurgu)}
.olay-olay{border-left:3px solid var(--sari)}
.olay-acil{border-left:3px solid var(--kirmizi)}
.olay-gorev{border-left:3px solid var(--yesil)}

.form{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.noktalar{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto}
.noktalar label{flex-direction:row;align-items:center;gap:8px;color:var(--metin);font-size:13px}
.noktalar input{width:auto}

.bos{padding:18px 16px;color:var(--soluk);font-size:13px}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Durum / uyari gostergeleri */
.satir.uyarili{background:rgba(239,68,68,.07);border-left:3px solid var(--kirmizi)}
.uyariSerit{font-size:11px;color:#fca5a5;margin-top:2px}
.kirmiziYazi{color:var(--kirmizi)}
.sariYazi{color:var(--sari)}
button.minik{padding:2px 8px;font-size:13px;line-height:1.2}
.hkUyari{font-size:11px;color:#fca5a5;background:rgba(239,68,68,.12);padding:4px 7px;border-radius:5px}
.hkAdres{font-size:12px;color:var(--vurgu);line-height:1.35}

/* Kayan kutu: gun listesi / ayarlar */
.kayanKutu{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--panel);border:1px solid var(--cizgi);border-radius:14px;
  z-index:var(--kat-pencere);min-width:340px;max-width:min(560px,92vw);max-height:78vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.genisKutu{min-width:420px}
.kkBaslik{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--cizgi);font-weight:600;
}
.kkListe{overflow-y:auto}
.kkForm{padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.ayarSatir{flex-direction:column;gap:6px}
.ayarAd{color:var(--metin);font-size:13px}
.baslikTuslar{display:flex;gap:5px}
.yonetimTuslar{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px;
}
.yonetimTuslar button{text-align:left;font-size:12px;padding:9px 10px}
.ipucu{font-size:11px;color:var(--soluk);margin-top:-4px;line-height:1.4}

/* Kanal karti */
.kanalKart{padding:13px 18px;border-bottom:1px solid var(--cizgi);display:flex;flex-direction:column;gap:8px}
.knUst{display:flex;align-items:center;gap:9px}
.knNokta{width:11px;height:11px;border-radius:50%;flex:none}
.knAd{font-weight:600;font-size:14px}
.knSayi{font-size:11px;color:var(--soluk);background:var(--panel2);padding:1px 8px;border-radius:10px}
.knUst button{margin-left:auto}
.knAciklama{font-size:12px;color:var(--soluk);margin-top:-4px}
.knUyeler{display:flex;flex-wrap:wrap;gap:6px}
.knUye{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;
  background:var(--panel2);border:1px solid var(--cizgi);
  padding:3px 5px 3px 10px;border-radius:14px;
}
.knUye button{background:transparent;color:var(--soluk);padding:0 4px;font-size:11px;line-height:1}
.knUye button:hover{color:var(--kirmizi)}
.knBos{font-size:12px;color:var(--soluk)}
.knEkle select{width:100%}

/* ACİL serit - ekranin ustunde, kacirilmasi imkansiz olmali */
.acilSerit{
  position:fixed;top:0;left:0;right:0;z-index:var(--kat-acil);
  background:linear-gradient(90deg,#7f1d1d,#dc2626);
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 20px;
  box-shadow:0 6px 24px rgba(220,38,38,.45);
  animation:acilYanip 1.1s ease-in-out infinite;
}
@keyframes acilYanip{
  0%,100%{background:linear-gradient(90deg,#7f1d1d,#dc2626)}
  50%    {background:linear-gradient(90deg,#dc2626,#ef4444)}
}
@media (prefers-reduced-motion:reduce){ .acilSerit{animation:none} }
.asIcerik{display:flex;align-items:center;gap:14px}
.asSimge{font-size:26px}
.asBaslik{font-size:16px;font-weight:700;letter-spacing:.3px}
.asMeta{font-size:12px;opacity:.9}
.asTuslar{display:flex;gap:8px}
.asTuslar button{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px}
.asTuslar button:hover{background:rgba(0,0,0,.45)}

/* Cagri penceresi: cagri boyunca acik kalir, ses ve goruntu birlikte yonetilir */
.cagriPenceresi{
  position:fixed;right:22px;bottom:22px;
  background:var(--panel);border:2px solid var(--vurgu);border-radius:14px;
  padding:16px 18px;z-index:var(--kat-cagri);width:300px;
  box-shadow:0 16px 48px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;
}
.cpBaslik{display:flex;align-items:center;gap:12px}
.cpSimge{font-size:26px}
.cpAd{font-size:16px;font-weight:600}
.cpAlt{font-size:12px;color:var(--soluk)}
.cpTuslar{display:flex;gap:9px}
.cpTuslar button{flex:1}
.cpKontrol{display:flex;flex-direction:column;gap:10px}

/* Video izin kutusu - KVKK geregi acik onay. Cagri penceresinin de ustunde. */
.onayKutu{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--panel);border:2px solid var(--vurgu);border-radius:14px;
  padding:22px 26px;z-index:var(--kat-onay);min-width:320px;max-width:min(420px,92vw);
  box-shadow:0 16px 48px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;
}
.onayBaslik{font-size:16px;font-weight:600}
.onayMetin{color:var(--soluk);font-size:13px;line-height:1.5}
.onayTuslar{display:flex;gap:10px;margin-top:4px}
.onayTuslar button{flex:1}
#cpSeviye{height:100%;width:0;background:var(--yesil);transition:width .08s}

.ayirac{
  font-size:11px;color:var(--soluk);text-transform:uppercase;letter-spacing:.7px;
  border-top:1px solid var(--cizgi);padding-top:9px;margin-top:3px;
}
.ipucu{font-size:11px;color:var(--soluk);margin-top:-4px}

/* fotograf goruntuleyici */
.perde{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:var(--kat-foto)}
.perdeIc{background:var(--panel);border:1px solid var(--cizgi);border-radius:12px;padding:14px;max-width:88vw;max-height:88vh;display:flex;flex-direction:column;gap:10px}
.perdeBaslik{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:var(--soluk)}
#fotoGoruntu{max-width:80vw;max-height:72vh;border-radius:8px;background:var(--panel2)}
.fotoLink{color:var(--vurgu);cursor:pointer}
.fotoLink:hover{text-decoration:underline}

/* bildirim */
.bildirim{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--cizgi);color:var(--metin);
  padding:11px 18px;border-radius:10px;z-index:var(--kat-bildirim);font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.bildirim.hata{border-color:var(--kirmizi);color:#fecaca}

/* ---------------- telsiz (panel ici bas-konus) ---------------- */
.telsizKutu{
  padding:13px 16px;display:flex;flex-direction:column;gap:9px;
  border-bottom:1px solid var(--cizgi);
  background:linear-gradient(180deg,rgba(59,130,246,.05),transparent 120px);
}
.telsizUst{display:flex;gap:8px}
.telsizUst select{flex:1;min-width:0}
button.genis{width:100%}

.telsizTus{
  width:100%;padding:14px 0;border-radius:12px;
  background:var(--panel2);border:3px solid var(--cizgi);
  color:var(--soluk);cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:none;display:flex;flex-direction:column;gap:2px;align-items:center;
  transition:transform .08s, background .12s, border-color .12s, color .12s;
}
.ttUst{font-size:16px;font-weight:700;letter-spacing:1.3px}
.ttAlt{font-size:11px;font-weight:400;letter-spacing:.2px;opacity:.75}
.telsizTus.anons{border-color:#7c3aed}
.telsizTus.anons:hover:not(:disabled){border-color:#a855f7}
.telsizTus.anons.basili{background:#7c3aed;border-color:#c4b5fd;color:#fff}

/* Izlenen kanal karti */
.izlenenOda{
  border:1px solid var(--cizgi);border-radius:9px;padding:8px 10px;
  cursor:pointer;transition:border-color .12s, background .12s;
}
.izlenenOda:hover{background:var(--panel2)}
.izlenenOda.aktif{border-color:var(--vurgu);background:rgba(59,130,246,.09)}
.ioUst{display:flex;align-items:center;gap:8px;font-size:13px}
.ioAd{font-weight:600}
.ioSayi{
  margin-left:auto;font-size:11px;color:var(--soluk);
  background:var(--panel2);padding:1px 7px;border-radius:9px;
}
.ioCik{background:transparent;color:var(--soluk);padding:0 5px;font-size:12px;line-height:1}
.ioCik:hover{color:var(--kirmizi)}
.ioKisiler{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ioKisi{
  font-size:11px;background:var(--panel2);border:1px solid var(--cizgi);
  padding:2px 8px;border-radius:10px;color:var(--soluk);
}
.ioKisi.konusuyor{
  background:rgba(34,197,94,.18);border-color:var(--yesil);color:var(--yesil);
  font-weight:600;
}
.telsizTus:hover:not(:disabled){border-color:var(--vurgu);color:var(--metin)}
.telsizTus:disabled{opacity:.3;cursor:not-allowed}
.telsizTus.basili{
  background:var(--kirmizi);border-color:#fca5a5;color:#fff;transform:scale(.98);
  box-shadow:0 0 0 7px rgba(239,68,68,.2);
}
.telsizTus.basili .ttAlt{opacity:.95}

.seviyeCubuk{width:100%;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
#telsizSeviye,#pttSeviyeIc{height:100%;width:0;background:var(--yesil);transition:width .08s}

.telsizKonusan{font-size:13px;color:var(--soluk);min-height:19px;text-align:center}
.telsizKonusan.aktif{color:var(--yesil);font-weight:600}

.telsizKatilimci{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.telsizKisi{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--metin)}
.telsizKisi .ses{width:8px;height:8px;border-radius:50%;background:var(--soluk);flex:none}
.telsizKisi.konusuyor .ses{background:var(--yesil);box-shadow:0 0 7px var(--yesil)}
.telsizKisi .ben{color:var(--soluk);font-size:11px}

/* ---------------- video ---------------- */
.videoAlan{
  position:absolute;right:14px;top:14px;z-index:var(--kat-video);
  width:min(420px,46%);background:var(--panel);
  border:1px solid var(--cizgi);border-radius:12px;overflow:hidden;
  box-shadow:0 10px 32px rgba(0,0,0,.5);
}
.videoAlan.kucuk .videoIzgara{display:none}
.videoBaslik{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;font-size:12px;color:var(--soluk);
  border-bottom:1px solid var(--cizgi);
}
.videoIzgara{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px}
.videoIzgara:has(> :only-child){grid-template-columns:1fr}
.videoKutu{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.videoKutu video{width:100%;height:100%;object-fit:cover;display:block}
.videoKutu .etiket{
  position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);
  color:#fff;font-size:11px;padding:2px 7px;border-radius:5px;
}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel2);color:var(--metin)}
.leaflet-popup-content{margin:10px 12px}
.leaflet-container a.leaflet-popup-close-button{color:var(--soluk)}

/* Harita balonu - personel karti */
.haritaKart{min-width:180px;display:flex;flex-direction:column;gap:6px}
.hkAd{font-size:14px;font-weight:600;color:var(--metin)}
.hkMeta{font-size:11px;color:var(--soluk)}
.hkDurum{font-size:11px;font-weight:600}
.hkDurum.canli{color:var(--yesil)}
.hkDurum.kopuk{color:var(--soluk)}
.hkTuslar{display:flex;gap:6px;margin-top:2px}
.hkTuslar button{flex:1;font-size:11px;padding:6px 4px}
.hkIz{background:transparent;border:1px solid var(--cizgi);color:var(--soluk);font-size:11px;padding:5px}
.hkIz:hover{border-color:var(--vurgu);color:var(--metin)}