:root{
    /* KOYU tema (varsayilan) */
    --panel:#0b0e11; --cizgi:#1e2630;
    --interceptor:#35d0ff; --caymaz:#ffb02e;
    --metin:#cfd8e3; --soluk:#5c6b7a; --iyi:#3ddc84; --kotu:#ff5d5d;
    /* v2.4.53 Faz 7: KOPRU grubu rengi (SANAL mor, kopru teal) */
    --kopru:#2da0aa;
    --uyari:#ffc94d; --panel-gen:300px;
    --bar-arka1:rgba(11,14,17,.95); --bar-arka2:rgba(11,14,17,.75);
    --panel-arka:rgba(11,14,17,.94);
    --giris-arka:#060809; --dugme-arka:#141a21; --dugme-hover:#1c2530;
    --rozet-arka:rgba(0,0,0,.4); --beyaz:#fff;
    --dunya:#0b0e11;

    /* v2.4.35: --vurgu bu dosyada 20+ yerde kullaniliyordu ama HIC
       tanimli degildi. Yedekli kullanimlar (var(--vurgu, #6bd8b9))
       yedege dusuyor, ama color-mix() icindeki YEDEKSIZ kullanimlar
       (kaydirma cubugu renkleri, .dk-hucre-btn ve .dk-fokus-btn hover)
       gecersiz deger uretip TUM bildirimi sessizce dusuruyordu.
       Cozum: --vurgu'yu temanin gercek vurgu rengine bagla. Boylece
       tum kullanim noktalari tek satirla dogru renge kavusur ve iki
       temada da tutarli calisir. */
    --vurgu: var(--interceptor);

    /* v2.4.41: --girdi ve --girdi-arka de HIC tanimli degildi ama
       CSS'te 8 yerde kullaniliyordu. Uc kullanim YEDEKSIZ:
         .sf-icerik input[type=text], .sf-bilgi, .sf-btn
       (Serbest Form ve KORIDOR rota popup'larindaki metin girisi,
        bilgi kutusu ve dugmeler) -- yedeksiz var() gecersiz deger
       uretir ve o bildirim sessizce DUSER: girdi/dugme arka plani
       seffaf kalir, koyu temada metin okunmaz hale gelir.
       Kalan kullanimlar AI tespit ekraninda; oradaki yedek deger
       tema degiskenlerine bagli olmadigi icin acik temada da koyu
       gri kaliyordu. Ikisini de temanin gercek giris rengine
       bagliyoruz; boylece tek satirla tum kullanim noktalari duzelir.
       (--vurgu icin v2.4.35'te ayni sinif hata bulunmustu.) */
    --girdi: var(--giris-arka);
    --girdi-arka: var(--dugme-arka);
    /* FAZ18-TEMA-TAKMA-AD: MERKEZ SOZLESMESI TAKMA ADLARI.
       App ve Merkez farkli degisken adlari kullanir (App: --interceptor
       --panel --metin --cizgi; Merkez: --siyan --zemin --baslik-renk
       --kenar). Merkez'den App'e kopyalanan CSS bu adlari yedeksiz
       kullandigi icin bildirimler SESSIZCE dusuyordu. En agir sonuc:
       panel_ustbar.css icindeki ust bar etkin dugme bicimlendirmesi
       (kenarlik + arka plan + metin rengi) hic uygulanmiyordu.
       Cozum --vurgu (v2.4.35) ve --girdi (v2.4.41) ile ayni desen:
       eksik adlar temanin gercek renklerine baglanir. */
    --siyan: var(--interceptor);
    --kenar: var(--cizgi);
    --zemin1: var(--panel);
    --zemin2: var(--dugme-arka);
    --kart-arka: var(--panel-arka);
    --baslik-renk: var(--metin);
    --basari: var(--iyi);
    --perde: rgba(0, 0, 0, .58);
    --golge2: 0 10px 30px rgba(0, 0, 0, .45);

    /* =========================================================
       v2.4.24 TEK KAYNAK PENCERE GEOMETRISI
       Header yuksekligi ve pencere basligi olculeri BURADAN
       yonetilir. JS tarafi (popup_tasima.js, bolum_resize.js)
       bu degiskenleri okur; ayri sabit sayi TUTMAZ.
       ========================================================= */
    --ust-bar-y: 32px;            /* header yuksekligi (eski: 42px) */
    --pencere-pay: 6px;           /* header alti guvenlik payi */
    --pencere-baslik-y: 30px;     /* pencere baslik cubugu yuksekligi */
    --pencere-baslik-pad-y: 6px;
    --pencere-baslik-pad-x: 9px;
    --pencere-baslik-fs: 12px;
    --pencere-baslik-fw: 600;
    --pencere-baslik-ls: .06em;
    --pencere-baslik-arka: rgba(0,0,0,.22);
    --pencere-radius: 8px;
  }
  :root[data-tema="acik"]{
    --panel:#f2f4f7; --cizgi:#d0d7e0;
    --interceptor:#0077b6; --caymaz:#b06d00;
    --metin:#2a3542; --soluk:#71808f; --iyi:#1a9e5c; --kotu:#d63333;
    /* FAZ18-TEMA-TAKMA-AD: acik temada yalniz TEMA BAGIMLI iki deger yeniden tanimlanir.
       Kalan takma adlar tema degiskenlerine bagli oldugu icin
       kendiliginden dogru rengi alir. */
    --perde: rgba(15, 22, 32, .38);
    --golge2: 0 10px 30px rgba(20, 32, 48, .18);
    --kopru:#0f7d87;   /* v2.4.53 Faz 7: acik temada kopru rengi */
    --uyari:#b58900;
    --bar-arka1:rgba(245,247,250,.96); --bar-arka2:rgba(245,247,250,.82);
    --panel-arka:rgba(245,247,250,.95);
    --giris-arka:#ffffff; --dugme-arka:#e4e9ef; --dugme-hover:#d6dde6;
    --rozet-arka:rgba(255,255,255,.55); --beyaz:#111820;
    --dunya:#dfe6ee;
    --vurgu: var(--interceptor);   /* v2.4.35: acik tema vurgu rengi */
    --girdi: var(--giris-arka);        /* v2.4.41 */
    --girdi-arka: var(--dugme-arka);   /* v2.4.41 */
  }
  html,body{margin:0;padding:0;height:100%;overflow:hidden;
    font-family:"Segoe UI",system-ui,sans-serif;background:#000;}

  /* =============================================================
     FLEX YERLESIM ISKELETI
     body (column):  ustBar / anaAlan (row) / altBar
     anaAlan (row):  solPanel / haritaAlan (flex:1) / sagPanel
     ============================================================= */
  body{display:flex;flex-direction:column;}
  #anaAlan{flex:1 1 auto;display:flex;flex-direction:row;
    min-height:0;position:relative;}
  #haritaAlan{flex:1 1 auto;position:relative;min-width:0;}
  #cesiumContainer{position:absolute;inset:0;}

  /* Ust durum cubugu */
  #ustBar{flex:0 0 var(--ust-bar-y);height:var(--ust-bar-y);z-index:2500;position:relative;
    display:flex;align-items:center;justify-content:space-between;padding:0 16px;
    background:linear-gradient(180deg, var(--bar-arka1) 0%, var(--bar-arka2) 100%);
    border-bottom:1px solid var(--cizgi);color:var(--metin);
    font-size:13px;letter-spacing:.04em;box-sizing:border-box;}
  /* v2.3.3: acik temada ustBar eski parlak gradyanini korur; koyu temada
     tema degiskenlerinden gelen koyu zemin kullanilir (baslik okunurlugu) */
  :root[data-tema="acik"] #ustBar{
    background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.25), transparent 60%),
      linear-gradient(180deg, #dce3ec 0%, #e4eaf1 45%, #eff3f7 100%);}
  #ustBarSol {display:flex;align-items:center;gap:8px;flex:1;}
  #ustBarOrta {display:flex;align-items:center;justify-content:center;gap:10px;flex:1;}
  #ustBarSag {display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1;}
  #ustBar .baslik{font-weight:bold;color:var(--beyaz);letter-spacing:.12em;}
  /* v2.4.24: header 32px'e indi; logo ve ic ogeler bara sigacak sekilde
     kuculdu (tasma ve dikey kirpilma onlenir) */
  #logo{height:24px;width:auto;display:block;}
  #ustBar{font-size:12px;}
  #ustBar button, #ustBar .ust-btn{padding:3px 8px;font-size:11px;}
  .nokta{width:8px;height:8px;border-radius:50%;background:var(--soluk);}
  .nokta.aktif{background:var(--iyi);box-shadow:0 0 6px var(--iyi);}
  .nokta.kayip{background:var(--kotu);}
  /* Alt durum cubugu (footer) */
  #altBar{flex:0 0 26px;height:26px;z-index:10;
    display:flex;align-items:center;gap:18px;padding:0 12px;
    box-sizing:border-box;background:var(--bar-arka1);
    border-top:1px solid var(--cizgi);
    color:var(--soluk);font-family:Consolas,monospace;font-size:11px;}
  #altBar .f-iyi{color:var(--iyi);}
  #altBar .f-kotu{color:var(--kotu);}
  #altBar .f-uyari{color:var(--uyari);}
  #altBar .atif{margin-left:auto;opacity:.7;}

  /* Angaje Ol Dugmesi (sag panelde) */
  #btnAngaje {
    background: #b91c1c;
    color: #fff;
    border: 1px solid #dc2626;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: background 0.2s, box-shadow 0.2s;
  }
  #btnAngaje:hover:not(:disabled) {
    background: #dc2626;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
  }
  #btnAngaje:disabled {
    background: #3a1111;
    border-color: #5c2020;
    color: #7a4444;
    cursor: not-allowed;
    opacity: 0.7;
  }
  #btnAngaje.aktif {
    background: #b45309;
    border-color: #d97706;
    animation: angaje-pulse 1.2s infinite;
  }
  #btnAngaje.aktif:hover {
    background: #d97706;
  }
  @keyframes angaje-pulse {
    0%,100% { box-shadow: 0 0 4px rgba(217,119,6,0.4); }
    50% { box-shadow: 0 0 12px rgba(217,119,6,0.8); }
  }

  /* =============================================================
     PANEL TOOLBAR + SABIT BASLIK + YUZEN PANELLER
     ============================================================= */
  .panel-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
    border-bottom: 1px solid var(--cizgi);
    background: rgba(0,0,0,.22);
    flex: 0 0 auto;
  }
  :root[data-tema="acik"] .panel-toolbar {
    background: rgba(0,0,0,.06);
  }
  .tb-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--soluk);
    user-select: none;
    flex: 0 0 auto;
  }
  .tb-ayrac {
    width: 1px;
    align-self: stretch;
    margin: 3px 4px;
    background: var(--cizgi);
    flex: 0 0 auto;
  }
  /* Esnek bosluk: baslik solda kalir, dugmeler saga yaslanir */
  .tb-bosluk { flex: 1 1 auto; min-width: 8px; }
  .tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 auto;
    font-size: 13px;
    border-radius: 4px;
  }
  .tb-btn i { width: auto; text-align: center; opacity: .85; margin: 0; }
  .tb-btn.acik {
    background: var(--dugme-hover);
    border-color: var(--vurgu, #6bd8b9);
  }
  .tb-btn.acik i { opacity: 1; }
  /* Bolum baslik bari icindeki baslik metni (ikon + yazi, solda) */
  .tb-baslik {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    /* FAZ18/IS4: kullanici kurali - "header basliklari koyu
       olmayacak". 700 -> 500. */
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--metin);
    user-select: none;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tb-baslik i.fa-solid {
    width: 16px;
    text-align: center;
    opacity: .85;
    flex: 0 0 auto;
  }
  /* Sabit (accordion olmayan) panel basligi */
  h2.sabit-baslik {
    margin: 0 !important;
    padding: 10px 20px 10px 5px;
    padding-left: 5px;
    background: rgba(0,0,0,.22);
    border-bottom: 1px solid var(--cizgi);
    user-select: none;
    flex: 0 0 auto;
  }
  :root[data-tema="acik"] h2.sabit-baslik {
    background: rgba(0,0,0,.06);
  }
  h2.sabit-baslik i.fa-solid {
    width: 16px;
    text-align: center;
    margin-right: 6px;
    opacity: .85;
  }
  .sabit-icerik {
    flex: 1 1 auto;
    min-height: 0; /* flex tasmasini engelle: scroll bu alanda kalir */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
  }
  /* Kartlar flex icinde EZILMESIN; tasma scroll'a donussun */
  .sabit-icerik > * { flex: 0 0 auto; }
  /* ---- Sik ince scrollbar (liste alanlari + popup icerikleri) ---- */
  .sabit-icerik::-webkit-scrollbar,
  .yuzen-icerik::-webkit-scrollbar {
    width: 8px;
  }
  .sabit-icerik::-webkit-scrollbar-track,
  .yuzen-icerik::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
  }
  .sabit-icerik::-webkit-scrollbar-thumb,
  .yuzen-icerik::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--soluk) 45%, transparent);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 32px;
    transition: background .2s;
  }
  .sabit-icerik::-webkit-scrollbar-thumb:hover,
  .yuzen-icerik::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--soluk) 75%, transparent);
    background-clip: padding-box;
  }
  .sabit-icerik::-webkit-scrollbar-corner,
  .yuzen-icerik::-webkit-scrollbar-corner { background: transparent; }
  /* Firefox */
  .sabit-icerik, .yuzen-icerik {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--soluk) 45%, transparent) transparent;
  }
  /* Yuzen paneller — ARAYUZ AYARLARI popup'i ile ayni kalip:
     toolbar dugmesinin hizasinda sabit konumda acilir, SURUKLENMEZ.
     Konum JS tarafindan dugmenin ekran konumuna gore ayarlanir. */
  .yuzen-panel {
    position: fixed;
    width: 340px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel-arka);
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 1250;
    padding: 0;
    color: var(--metin);
    font-size: 13px;
  }
  .yuzen-panel.yuzen-gizli { display: none; }
  /* v2.4.25: geometri (padding/font/yukseklik) ORTAK BASLIK KURALINA
     tasindi (asagida, ~satir 1565). Olculen kusur: bu kural
     12px 14px padding ile basligi 51px yapiyordu, digerleri 30px idi.
     NOT: `cursor: grab` de ORTAK KURALDAN SONRA tanimlanir (ortak kural
     `cursor: move` verir ve CSS'te sonra gelen kazanir). */
  .yuzen-panel.surukleniyor { opacity: .92; }
  .yuzen-baslik i.fa-solid { margin-right: 6px; opacity: .85; }
  .yuzen-kapat {
    background: none !important;
    border: none !important;
    color: var(--metin);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
  }
  .yuzen-kapat:hover { color: var(--kotu); }
  .yuzen-kapat i { margin-right: 0 !important; }
  .yuzen-icerik {
    padding: 14px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  /* =============================================================
     ALT-ORTA PANEL: haritanin altinda, %50 KONSOL + %50 GRAFIK
     ============================================================= */
  #altOrtaPanel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 8;
    background: rgba(10, 14, 18, 0.92);
    border-top: 1px solid #000;
    display: flex;
    flex-direction: column;
  }
  #altOrtaBaslik {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    color: #9fb0bf;               /* tema bagimsiz: zemin her temada koyu */
    font-size: 11px;
    letter-spacing: .08em;
    background: rgba(11, 14, 17, 0.95);  /* tema bagimsiz koyu baslik zemini */
  }
  /* Panel zemini her temada koyudur; hover renkleri tema degiskenlerinden
     bagimsiz sabit acik tonlar olmalidir (acik temada --beyaz koyu oldugundan
     yazi zeminle ayni renge dusup kayboluyordu) */
  #altOrtaBaslik:hover { color: #ffffff; background: rgba(255,255,255,0.12); }
  #altOrtaBaslik i { opacity: .85; }
  #altOrtaOk { transition: transform .25s ease; }
  #altOrtaPanel.kapali #altOrtaOk { transform: rotate(180deg); }
  #altOrtaGovde {
    height: 170px;              /* sabit yukseklik */
    display: flex;
    flex-direction: row;
  }
  #altOrtaPanel.kapali #altOrtaGovde { display: none; }
  #konsolYari {
    flex: 0 0 50%;
    max-width: 50%;
    background: #000;
    border-right: 1px solid #000;
    box-sizing: border-box;
  }
  #grafikYari {
    flex: 0 0 50%;
    max-width: 50%;
    background: #0c1116;
    box-sizing: border-box;
    padding: 4px;
  }
  #hedefGrafik {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* KONSOL (siyah arkaplan, backend geri bildirimleri) */
  #konsolKutu {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    background: #000;
    color: #c8d3dc;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.5;
    padding: 6px 8px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  #konsolKutu::-webkit-scrollbar { width: 6px; }
  #konsolKutu::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
  .k-satir { display: block; }
  .k-zaman { color: #5a6673; }
  .k-kaynak { color: #9ad1ff; }
  .k-bilgi  { color: #c8d3dc; }
  .k-uyari  { color: #ffd166; }
  .k-hata   { color: #ff6b6b; }
  .k-basari { color: #6bd8b9; }
  /* ARAYUZ AYARLARI ici alt bolumler */
  .alt-bolum {
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
  }
  .alt-bolum:last-child { margin-bottom: 0; }
  .alt-baslik {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--soluk);
    border-bottom: 1px solid var(--cizgi);
    padding-bottom: 6px;
  }
  .alt-baslik i.fa-solid {
    width: 14px;
    text-align: center;
    margin-right: 5px;
    opacity: 0.8;
  }

  /* Radar saglik telemetri satirlari */
  .rs-satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 11px;
    border-bottom: 1px dashed var(--cizgi);
  }
  .rs-satir:last-child { border-bottom: none; }
  .rs-etiket { color: var(--soluk); }
  .rs-deger { font-family: Consolas, monospace; color: var(--metin); }

  /* Kayit dugmesi ve listesi */
  #kayitNokta { color: var(--soluk); }
  #btnKayit.kayitta #kayitNokta {
    color: #e05555; animation: kayitYanip 1s infinite;
  }
  #btnKayit.kayitta { border-color: #e05555; }
  @keyframes kayitYanip { 0%,100% {opacity:1;} 50% {opacity:.25;} }
  .kayit-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin-bottom: 4px;
    background: rgba(0,0,0,.15); border: 1px solid var(--cizgi);
    border-radius: 4px;
  }
  .kayit-ad {
    font-size: 11px; font-family: Consolas, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kayit-meta { font-size: 10px; color: var(--soluk); margin-top: 2px; }
  .kayit-dugmeler { display: flex; gap: 4px; flex: 0 0 auto; }
  .kayit-dugmeler button {
    width: 26px; height: 26px; padding: 0; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Replay rozeti: harita ustu sabit gosterge */
  #replayRozet {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 20; background: rgba(217,119,6,.92); color: #fff;
    padding: 5px 14px; border-radius: 4px; font-size: 11px;
    font-weight: 700; letter-spacing: .08em;
    box-shadow: 0 2px 12px rgba(0,0,0,.4); pointer-events: none;
    font-family: Consolas, monospace;
  }

  /* Rota duzenleme rozeti: harita ustu sabit gosterge (replayRozet benzeri) */
  #rotaRozet {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 20; background: rgba(37,99,235,.92); color: #fff;
    padding: 5px 14px; border-radius: 4px; font-size: 11px;
    font-weight: 700; letter-spacing: .08em;
    box-shadow: 0 2px 12px rgba(0,0,0,.4); pointer-events: none;
    font-family: Consolas, monospace;
  }
  /* Rota duzenleme modunda harita cercevesi */
  #haritaAlan.rota-duzenleme {
    box-shadow: inset 0 0 0 3px rgba(59,130,246,.85);
  }
  #haritaAlan.rota-duzenleme #cesiumContainer { cursor: crosshair; }
  /* Bos panel gostergesi: buyuk gri ikon + aciklama */
  .bos-panel {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 28px 10px;
    color: var(--soluk); opacity: .55; user-select: none;
  }
  .bos-panel i { font-size: 64px; }
  .bos-panel span {
    font-size: 11px; letter-spacing: .12em; font-weight: 600;
    text-align: center;
  }
  .bos-panel.gizli { display: none; }

  /* Panel ac/kapat dugmesi */
  #btnKullanicilar, #btnLokasyonlar{
    width:30px;height:30px;padding:0;font-size:15px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;}

  /* Sol Tespit Edilen Hedefler Paneli (flex ogesi) */
  #solPanel {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    z-index: 9;
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden; /* kaydirma panelin genelinde degil, .sabit-icerik icinde */
    background: var(--panel-arka);
    border-right: 1px solid var(--cizgi);
    color: var(--metin);
    font-size: 13px;
    transition: flex-basis .25s ease, width .25s ease, padding .25s ease;
  }
  body.sol-panel-gizli #solPanel {
    flex-basis: 0; width: 0; padding: 0; border-right: none; overflow: hidden;
  }
  body.sag-panel-gizli #sagPanel {
    flex-basis: 0 !important; width: 0 !important; min-width: 0 !important;
    padding: 0; border-left: none; overflow: hidden;
  }
  #solPanel > * { flex: 0 0 auto; }
  #solPanel > .sabit-icerik { flex: 1 1 auto; min-height: 0; }
  /* Sol panel iki bolge: TESPIT (3) + TAKIP (2) */
  #solPanel > #hedefListeIcerik { flex: 3 1 0; min-height: 0; }
  #solPanel > #takipListeIcerik { flex: 2 1 0; min-height: 0; }
  #takipBaslik { border-top: 1px solid var(--cizgi); }
  /* Hedef karti basligindaki mini toolbar (fokus / takip et / takipten cik) */
  .rh-tb { display: flex; gap: 4px; margin-left: auto; align-items: center; flex: 0 0 auto; }
  .rh-tb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 20px; padding: 0;
    background: var(--dugme-arka); border: 1px solid var(--cizgi);
    border-radius: 3px; color: var(--soluk); font-size: 10px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .rh-tb-btn:hover { color: var(--beyaz); background: var(--dugme-hover); }
  .rh-tb-btn.takip { color: #7dc4f5; }
  .rh-tb-btn.takip:hover { background: #1a3a5c; border-color: #2a6a8c; }
  .rh-tb-btn.birak { color: #f5a0a0; }
  .rh-tb-btn.birak:hover { background: #5c1a1a; border-color: #8c2a2a; }
  .rh-tb-btn.gizli { display: none; }
  /* Takipteki hedef kartinda renk noktasi vurgusu */
  .dron-kart.takipte .rh-kare { box-shadow: 0 0 6px 1px rgba(125,196,245,.7); }
  /* ===== PROGRAM HAKKINDA POPUP'I (logo buraya tasindi, 20260726n) ===== */
  #yzHakkinda { width: 300px; }
  .hk-icerik { text-align: center; padding: 18px 20px 14px; }
  #hkLogoKutu {
    position: relative;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer; user-select: none;
    overflow: hidden;
    transition: background .25s;
  }
  /* Hover'da soldan saga kayan isik suzmesi efekti */
  #hkLogoKutu::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: -75%; width: 50%;
    background: linear-gradient(105deg, transparent,
      color-mix(in srgb, var(--metin) 18%, transparent), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
  }
  #hkLogoKutu:hover::after {
    animation: logoIsiltisi .9s ease forwards;
  }
  @keyframes logoIsiltisi {
    from { left: -75%; }
    to   { left: 125%; }
  }
  #hkLogoKutu img {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.25));
    transition: transform .25s ease;
  }
  #hkLogoKutu:hover img { transform: scale(1.04); }
  /* v2.12.4: KOYU TEMA PARLAMA SUZGECI KALDIRILDI.
     Onceki surumde koyu zeminde firma logolari (turkbey/veilox/
     novixair) renkli ve koyu oldugu icin beyaz bir parlama
     uygulaniyordu.  Marka gecisiyle firma logolari kaldirildi; yerine
     gelen GOKTUNGU logosunun koyu tema surumu ZATEN acik yazili
     uretildi.  Ayni suzgec bu logoda yaziyi dagitip okunurlugu
     dusuruyordu -- bu yuzden yalnizca yumusak bir govde golgesi
     birakildi. */
  :root:not([data-tema="acik"]) #hkLogoKutu img {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
  }
  .hk-program {
    margin-top: 12px; font-size: 18px; font-weight: 700;
    letter-spacing: 3px; color: var(--metin);
  }
  .hk-surum { margin-top: 3px; font-size: 12px; color: var(--soluk); }
  .hk-ayrac { height: 1px; margin: 12px 8px; background: var(--cizgi); }
  .hk-baslik {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--interceptor);
    margin-bottom: 7px;
  }
  .hk-ekip { font-size: 12.5px; color: var(--metin); line-height: 1.85; }
  .hk-telif { margin-top: 12px; font-size: 10.5px; color: var(--soluk); }
  /* ===== RADAR KAPALI MODU (Program Ayarlari > C20 RADAR kapali) ===== */
  /* Sol panel + tutamaci tamamen gizle */
  body.radar-kapali #solPanel { display: none; }
  body.radar-kapali #solTutamac { display: none; }
  /* (v2.4.0c) Popup'a ayrilmis tespit/takip bolumleri #solPanel disinda
     (body altinda) oldugu icin ayrica gizlenmeli */
  body.radar-kapali #bolumPopup_tespit { display: none !important; }
  body.radar-kapali #bolumPopup_takip { display: none !important; }
  /* (v2.4.0c) Alt-orta panel artik RADAR + AI TESPIT sekmeli: radar
     kapaliyken yalnizca RADAR sekmesi ve grafigi gizlenir, AI TESPIT kalir */
  body.radar-kapali #sekmeRadar { display: none; }
  body.radar-kapali #hedefGrafik { display: none !important; }
  /* (20260726n) Logo sol panelden kaldirildi; yuzen logo stilleri de
     kaldirildi. Logo artik Yardim > Program Hakkinda popup'unda. */

  /* ===== PROGRAM AYARLARI POPUP'I ===== */
  /* v2.4.52: SABIT genislik (`width:250px`) MIN genislige cevrildi.
     Sabit genislik, boyutlandirma tutamacinin yazdigi inline `width`
     ile ayni ozellikte carpisiyordu; inline stil kazandigi icin
     genisletme calisiyor ama panel yeniden acildiginda CSS'e geri
     donuyor ve icerik (uzun ayar etiketleri, iki dilli metinler)
     sikisik kaliyordu. `min-width` hem varsayilan genisligi korur
     hem de kullanicinin kaydettigi boyutun altina dusmeyi engeller. */
  /* v2.4.53: asgari genislik 250 -> 340. Merkez Sunucu bolumunde adres,
     hesap ve sifre girisleri var; 250 px'te etiket ile giris ust uste
     biniyordu. Sabit `width` DEGIL `min-width` kullanilir; boylece
     kullanicinin tutamactan verdigi boyut gecerli kalir. */
  .prog-ayar-popup { min-width: 340px; }
  /* Boyutlandirilan panelde govde artan yuksekligi kullansin; icerik
     panelden uzunsa dikey kaydirilsin (aksi halde `overflow:hidden`
     olan .dk-mini-popup icinde alt satirlar erisilemez kalir). */
  .prog-ayar-popup .prog-ayar-govde {
    max-height: calc(100% - 34px); overflow-y: auto;
  }
  .prog-ayar-govde { display: flex; flex-direction: column; gap: 8px; }
  .prog-ayar-satir {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 4px 2px;
  }
  .prog-ayar-etiket {
    font-size: 12px; font-weight: 600; color: var(--metin);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .prog-ayar-etiket i { color: var(--interceptor); }
  .prog-ayar-aciklama {
    font-size: 10px; color: var(--soluk); opacity: .8;
    padding: 0 2px 2px;
  }
  /* Kaydirmali anahtar (toggle switch) */
  .prog-anahtar {
    position: relative; display: inline-block;
    width: 40px; height: 20px; flex: 0 0 auto;
  }
  .prog-anahtar input { opacity: 0; width: 0; height: 0; }
  .prog-anahtar-top {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--cizgi); border-radius: 20px;
    transition: background .2s;
  }
  .prog-anahtar-top::before {
    content: ""; position: absolute;
    width: 14px; height: 14px; left: 3px; top: 3px;
    background: var(--soluk); border-radius: 50%;
    transition: transform .2s, background .2s;
  }
  .prog-anahtar input:checked + .prog-anahtar-top {
    background: var(--interceptor);
  }
  .prog-anahtar input:checked + .prog-anahtar-top::before {
    transform: translateX(20px); background: #fff;
  }
  /* Yonetici olmayanlarda kilitli anahtar */
  .prog-anahtar-kilitli .prog-anahtar-top {
    cursor: not-allowed; opacity: .45;
  }
  .prog-ayar-kilit-uyari {
    color: var(--uyari); opacity: 1;
    display: flex; align-items: center; gap: 6px;
    padding-top: 6px; margin-top: 4px;
    border-top: 1px solid var(--cizgi);
  }

  #solPanel h2 {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--beyaz);
    border-bottom: 1px solid var(--cizgi);
    padding-bottom: 10px;
  }
  .dron-kart {
    border-radius: 4px;
    margin: 0 0 6px 0;
    background: var(--giris-arka);
    border: 1px solid var(--cizgi);
    overflow: hidden;
  }
  .dron-kart.kayip { opacity: 0.75; }
  .dron-kart.kayip .rh-baslik { font-style: italic; color: var(--soluk); }
  .dron-kart-baslik {
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    /* Baslik zemini temaya bagli sabittir; tip/durum rengi yalnizca
       basliktaki kare gostergede (.rh-kare) gosterilir */
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background: var(--dugme-arka);
    color: var(--metin);
    border-bottom: 1px solid var(--cizgi);
  }
  .dron-kart-baslik.kapali {
    border-bottom: none;
  }
  /* Dron-dron takip: takip eden + takip edilen kart basliklarinda
     kalin MOR ust cizgi (takip grubunu gorsel olarak baglar) */
  .dron-kart-baslik.takip-mor {
    border-top: 4px solid #a855f7;
    box-shadow: inset 0 2px 6px rgba(168, 85, 247, 0.35);
  }
  .dron-kart-baslik:hover {
    background: var(--dugme-hover);
  }
  .dron-kart-baslik::after { display: none; }
  /* ==========================================================
     v2.4.36: BASLIK DURUM CERCEVESI
     Kartlar katli geldigi icin "UCUSA HAZIR" rozeti (govde
     icinde) kapali kartta gorunmuyordu. Basligin cercevesi
     kapaliyken de gorunur; bu yuzden hazirlik durumu buraya
     da tasindi. Renkler rozetteki .dk-hazir-rozet.* kurallari
     ile AYNI degerlerdir.
     Kenarlik yerine box-shadow inset kullaniliyor: .dron-kart
     overflow:hidden + border-radius tasiyor, basliga gercek
     border eklemek kartin ic olculerini kaydirip satirlari
     oynatiyordu. inset golge yer kaplamaz. */
  .dron-kart-baslik[class*="dkd-"] {
    /* Gecis: durum degisimi ani degil, gozle izlenebilir olsun */
    transition: box-shadow 0.2s, background 0.15s;
  }
  .dron-kart-baslik.dkd-hazir {
    box-shadow: inset 0 0 0 2px rgba(76, 175, 80, 0.75);
    background: rgba(76, 175, 80, 0.10);
  }
  /* Hazir + uyari: ZEMIN YESIL kalir (arac kalkabilir), yalniz
     cerceve ambere doner. v2.4.35'te rozette kurulan sozlesmenin
     aynisi: zemin "ucabilir mi?", cerceve "dikkat var mi?" */
  .dron-kart-baslik.dkd-hazir.dkd-hazir-uyarili {
    box-shadow: inset 0 0 0 2px rgba(240, 178, 60, 0.80);
    background: rgba(76, 175, 80, 0.10);
  }
  .dron-kart-baslik.dkd-hazir-degil {
    box-shadow: inset 0 0 0 2px rgba(224, 85, 85, 0.80);
    background: rgba(224, 85, 85, 0.10);
  }
  .dron-kart-baslik.dkd-ucusta {
    box-shadow: inset 0 0 0 2px rgba(90, 170, 255, 0.75);
    background: rgba(90, 170, 255, 0.10);
  }
  /* Kopuk / bilinmiyor: renk iddiasinda BULUNMAZ. Gri cerceve
     "veri yok" demektir; yesil/kirmizi gostermek yanlis guven
     ya da yanlis alarm uretir. */
  .dron-kart-baslik.dkd-kopuk,
  .dron-kart-baslik.dkd-bilinmiyor {
    box-shadow: inset 0 0 0 2px rgba(140, 150, 160, 0.35);
  }
  /* Takip grubunun MOR ust cizgisi durum cercevesiyle catismaz:
     mor gercek border-top, durum ise inset golge. Yine de mor
     cizginin ustte kalmasi icin sirasi burada teyit ediliyor. */
  .dron-kart-baslik.takip-mor[class*="dkd-"] {
    border-top: 4px solid #a855f7;
  }
  .dk-nokta {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--soluk); flex-shrink: 0; margin-right: 8px;
  }
  /* Manuel kontrol (joystick) anahtari:
     aksiyon barinda dk-tel-hucre gorunumundedir; ozel kurallar
     .dk-telemetri .dk-joy-btn secicilerindedir. */
  .dk-joy-btn .dk-joy-durum { font-weight: 700; letter-spacing: .4px; }
  @keyframes dkJoyNabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .45); }
    50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
  }
  /* Etiketleme satiri (Faz 2 — yalniz replay modunda gorunur) */
  .rh-etiket-satir {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--cizgi);
  }
  .rh-etiket-satir.gizli { display: none; }
  .rh-etiket-baslik {
    font-size: 9px; font-weight: 700; letter-spacing: .5px;
    color: var(--soluk); margin-right: 2px;
  }
  .rh-etiket-dgm {
    font-size: 9px; font-weight: 600; padding: 2px 6px;
    background: transparent; color: var(--metin);
    border: 1px solid var(--cizgi); border-radius: 3px; cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .rh-etiket-dgm:hover { border-color: var(--iyi); }
  .rh-etiket-dgm.secili {
    background: var(--iyi); border-color: var(--iyi); color: #fff;
  }
  :root[data-tema="acik"] .rh-etiket-dgm.secili { color: #fff; }
  /* Radar hedef karti: baslik basindaki kare durum gostergesi (tip rengi) */
  .rh-kare {
    width: 10px; height: 10px; border-radius: 2px;
    background: var(--soluk); flex: 0 0 auto; margin-right: 8px;
  }
  .rh-baslik {
    flex: 1; text-align: left; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dk-ad {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
  }
  .dk-ok {
    font-size: 10px; opacity: 0.6; transition: transform 0.2s;
    margin-left: 6px;
  }
  /* v2.4.34: baslik ozeti (irtifa + ucus kipi).
     v2.4.32'de dronlar.js bu uc sinifi uretiyordu ama CSS'i hic
     yazilmamisti; iki <span> arada bosluk olmadan yan yana gelince
     tarayici "30 mGUIDED" seklinde bitistiriyordu. Kural ailesi
     burada tanimlanir: flex + gap ile ayrilir, font bir kademe
     kucultulur (.dk-ad 12px -> ozet 10px). */
  .dk-baslik-ozet {
    display: inline-flex; align-items: baseline; gap: 6px;
    flex: 0 0 auto; margin-left: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden;
  }
  /* Bos deger (irtifa/kip henuz gelmedi) ile arasinda hayalet bosluk
     olusmasin: bos span'lar yer kaplamaz. */
  .dk-baslik-ozet:empty { margin-left: 0; }
  .dk-ozet-irt {
    color: var(--metin); font-variant-numeric: tabular-nums;
  }
  .dk-ozet-irt:empty { display: none; }
  .dk-ozet-kip {
    color: var(--soluk); font-size: 9px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
  }
  .dk-ozet-kip:empty { display: none; }
  .dron-kart-baslik.kapali .dk-ok { transform: rotate(-90deg); }

  .dk-irtifa {
    width: 56px; padding: 3px 4px; border: 1px solid var(--cizgi);
    border-radius: 3px; background: var(--giris-arka); color: var(--metin);
    font-size: 11px; text-align: center;
  }
  .dk-irtifa-brm { font-size: 10px; color: var(--soluk); }
  /* Telemetri: en fazla 2 satir; fazlasi yatay kaydirma ile gorulur */
  .dk-telemetri {
    margin-bottom: 4px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(50% - 3px);
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vurgu) 55%, transparent) transparent;
    cursor: grab;
  }
  /* SIK INCE SCROLLBAR: gorunmez ray uzerinde yuvarlak degrade tutamac;
     normalde neredeyse silik, kartin uzerine gelince belirginlesir */
  .dk-telemetri::-webkit-scrollbar { height: 5px; }
  .dk-telemetri::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 14px;
  }
  .dk-telemetri::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--vurgu) 35%, transparent),
      color-mix(in srgb, var(--vurgu) 60%, transparent));
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background .25s;
  }
  .dk-telemetri:hover::-webkit-scrollbar-thumb,
  .dk-telemetri.surukleniyor::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--vurgu) 70%, transparent),
      var(--vurgu));
    background-clip: padding-box;
  }
  /* Surukleyerek kaydirma (drag-to-scroll) durumu */
  .dk-telemetri.surukleniyor { cursor: grabbing; scroll-behavior: auto; }
  .dk-telemetri.surukleniyor .dk-tel-hucre { pointer-events: none; }
  .dk-telemetri .dk-tel-hucre { scroll-snap-align: start; }
  /* Aksiyon hucreleri (tip + Takeoff/Land + joystick + UDP) telemetri
     izgarasinin DEVAMINDA yer alir. Dinamik hucreler .dk-tel-dinamik
     kapsayicisina yazilir; display:contents ile grid akisini bozmaz ve
     innerHTML yenilenmesi kalici aksiyon hucrelerini silmez. */
  .dk-tel-dinamik { display: contents; }
  /* Hucre gorunumlu dugme: dk-tel-hucre temel stilini alir */
  .dk-hucre-btn {
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
  }
  .dk-hucre-btn:hover:not(:disabled) { border-color: var(--vurgu); }
  .dk-hucre-btn:active:not(:disabled) { transform: scale(.97); }
  .dk-hucre-btn:disabled { opacity: .4; cursor: not-allowed; }
  .dk-hucre-btn i { font-size: 20px; line-height: 1; color: var(--soluk); }
  .dk-tip-ikon { cursor: help; }
  .dk-tip-ad {
    font-size: 10px; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  .dk-tkland.takeoff i { color: var(--iyi); }
  .dk-tkland.takeoff .dk-tel-deger { color: var(--iyi); }
  .dk-tkland.takeoff:hover:not(:disabled) { background: color-mix(in srgb, var(--iyi) 12%, transparent); border-color: var(--iyi); }
  .dk-tkland.land i { color: var(--uyari); }
  .dk-tkland.land .dk-tel-deger { color: var(--uyari); }
  .dk-tkland.land:hover:not(:disabled) { background: color-mix(in srgb, var(--uyari) 12%, transparent); border-color: var(--uyari); }
  .dk-udp-btn i { color: var(--iyi); }
  .dk-udp-btn .dk-tel-deger { color: var(--iyi); }
  .dk-udp-btn:hover:not(:disabled) { border-color: var(--iyi); background: color-mix(in srgb, var(--iyi) 10%, transparent); }
  /* Joystick hucresi: acikken yesil nabiz */
  .dk-telemetri .dk-joy-btn { margin-right: 0; }
  .dk-telemetri .dk-joy-btn .dk-joy-durum { font-size: 11px; }
  .dk-telemetri .dk-joy-btn.acik {
    background: color-mix(in srgb, var(--iyi) 18%, transparent);
    border-color: var(--iyi);
    animation: dkJoyNabiz 2s ease-in-out infinite;
  }
  .dk-telemetri .dk-joy-btn.acik i,
  .dk-telemetri .dk-joy-btn.acik .dk-joy-durum { color: var(--iyi); }
  /* Drona odaklan dugmesi: icerik sag ust kosesi (renk karesinin simetrigi) */
  .dk-fokus-btn {
    position: absolute; right: 10px; top: 10px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--cizgi);
    border-radius: 4px; cursor: pointer;
    color: var(--soluk); font-size: 12px;
    z-index: 4;
    transition: color .15s, border-color .15s;
  }
  .dk-fokus-btn:hover { color: var(--vurgu); border-color: var(--vurgu); }
  .dk-tel-hucre {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 8px 4px;
    background: rgba(0,0,0,.18); border: 1px solid var(--cizgi);
    border-radius: 5px; text-align: center; min-width: 0;
  }
  :root[data-tema="acik"] .dk-tel-hucre { background: rgba(0,0,0,.05); }
  .dk-tel-hucre i {
    font-size: 20px; line-height: 1;
  }
  .dk-tel-deger {
    font-family: Consolas, monospace; font-size: 12px; font-weight: 700;
    color: var(--metin); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
  }
  .dk-tel-etiket {
    font-size: 9px; letter-spacing: .1em; color: var(--soluk);
    text-transform: uppercase;
  }
  /* Detayli telemetri popup'i (menu > Telemetri) */
  .dk-telemetri-popup { width: 250px; }
  .dk-telpop-govde { max-height: 60vh; overflow-y: auto; }
  .dk-telpop-satir {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; padding: 3px 0;
    border-bottom: 1px dashed var(--cizgi);
  }
  .dk-telpop-satir:last-child { border-bottom: none; }
  .dk-telpop-etiket { color: var(--soluk); font-size: 10px; flex: 0 0 auto; }
  .dk-telpop-deger {
    font-family: Consolas, monospace; font-size: 11px; color: var(--metin);
    text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
  .dk-telpop-yok {
    text-align: center; color: var(--kotu); padding: 12px 0;
    font-family: Consolas, monospace; font-size: 11px;
  }
  /* KOMPAKT GORUNUM (ayrik kartta basliga cift tik):
     yalniz ucus gostergeleri gorunur, telemetri satirlari gizlenir */
  .dron-kart.ayrik.kompakt .dk-telemetri { display: none; }
  .dron-kart-icerik {
    padding: 10px;
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    transition: max-height 0.3s ease;
    overflow: hidden;
    position: relative;   /* renk karesi (absolute) referansi */
  }
  .dron-kart-icerik.gizli {
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
  }
  .dron-kart-icerik div {
    margin-bottom: 4px;
  }
  .dron-kart-icerik span.etiket {
    color: var(--soluk);
    display: inline-block;
    width: 60px;
  }

  /* Hedef filtre bolumu (sol panel) */
  .filtre-satir { margin-bottom: 12px; }
  .filtre-satir .f-baslik {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
  }
  .filtre-satir .f-baslik label {
    margin: 0; color: var(--soluk); font-size: 10px;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .filtre-satir .f-deger {
    font-family: Consolas, monospace; font-size: 11px; color: var(--metin);
  }
  /* Cift uclu slider: iki input ust uste bindirilir */
  .cift-slider {
    position: relative; height: 22px;
  }
  .cift-slider input[type=range] {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none; height: 22px;
  }
  .cift-slider input[type=range]::-webkit-slider-runnable-track {
    height: 4px; background: transparent;
  }
  .cift-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 14px; height: 14px; border-radius: 50%;
    background: #3a6ea5; border: 2px solid var(--beyaz);
    margin-top: -5px; cursor: pointer;
  }
  .cift-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
    background: #3a6ea5; border: 2px solid var(--beyaz); cursor: pointer;
  }
  .cift-slider .ray {
    position: absolute; left: 0; right: 0; top: 9px; height: 4px;
    background: var(--cizgi); border-radius: 2px;
  }
  .cift-slider .ray-dolgu {
    position: absolute; top: 9px; height: 4px;
    background: #3a6ea5; border-radius: 2px;
  }
  .filtre-satir.devre-disi .ray-dolgu { background: var(--soluk); opacity: .4; }
  .filtre-satir.devre-disi .f-deger { color: var(--soluk); }
  /* Tip filtre onay kutulari */
  .tip-filtre {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  }
  .tip-filtre label {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 11px; color: var(--metin); cursor: pointer;
    text-transform: none; letter-spacing: 0;
  }
  .tip-filtre input[type=checkbox] { accent-color: #3a6ea5; cursor: pointer; }

  /* Panel resize tutamac */
  .panel-tutamac {
    flex: 0 0 6px; width: 6px; cursor: col-resize;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-arka); position: relative; z-index: 11;
    transition: background 0.15s;
  }
  .panel-tutamac:hover, .panel-tutamac.aktif {
    background: rgba(58, 110, 165, 0.35);
  }
  .tutamac-cizgi {
    width: 2px; height: 32px; border-radius: 1px;
    background: var(--soluk); opacity: 0.5; transition: opacity 0.15s, height 0.15s;
  }
  .panel-tutamac:hover .tutamac-cizgi, .panel-tutamac.aktif .tutamac-cizgi {
    opacity: 1; height: 48px; background: #3a6ea5;
  }

  /* Bolum resize tutamac (panel ici, yatay) */
  .bolum-tutamac {
    flex: 0 0 7px; height: 7px; cursor: row-resize;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-arka); position: relative; z-index: 11;
    border-top: 1px solid var(--cizgi);
    transition: background 0.15s; touch-action: none;
  }
  .bolum-tutamac:hover, .bolum-tutamac.aktif {
    background: rgba(58, 110, 165, 0.35);
  }
  .bolum-tutamac-cizgi {
    height: 2px; width: 32px; border-radius: 1px;
    background: var(--soluk); opacity: 0.5;
    transition: opacity 0.15s, width 0.15s;
  }
  .bolum-tutamac:hover .bolum-tutamac-cizgi,
  .bolum-tutamac.aktif .bolum-tutamac-cizgi {
    opacity: 1; width: 48px; background: #3a6ea5;
  }

  /* Sag ayar paneli (flex ogesi) */
  #sagPanel{flex:0 0 var(--panel-gen);width:var(--panel-gen);
    display:flex;flex-direction:column;
    z-index:9;box-sizing:border-box;padding:0px;
    overflow:hidden; /* kaydirma panelin genelinde degil, .sabit-icerik icinde */
    background:var(--panel-arka);border-left:1px solid var(--cizgi);
    color:var(--metin);font-size:13px;
    transition:flex-basis .25s ease,width .25s ease,padding .25s ease;}
  body.panel-gizli #sagPanel{
    flex-basis:0;width:0;padding:0;border-left:none;overflow:hidden;}
  #sagPanel > * { flex: 0 0 auto; }
  #sagPanel > .sabit-icerik { flex: 1 1 auto; min-height: 0; }
  /* Sag panel uc bolge: DRONLAR (3) + KAMERALAR (2) + ROTALAR (2) */
  /* v2.4.33: #dronlarIcerik kaldirildi (ayri DRONLAR bolumu yok) */
  #sagPanel > #kameralarIcerik { flex: 2 1 0; min-height: 0; }
  #sagPanel > #rotalarIcerik { flex: 2 1 0; min-height: 0; }
  #rotalarToolbar { border-top: 1px solid var(--cizgi); }
  #kameralarToolbar { border-top: 1px solid var(--cizgi); }

  /* ---- KAMERALAR ---- */
  .kam-satir {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 7px 8px; border: 1px solid var(--cizgi);
    border-radius: 4px; margin-bottom: 6px; background: var(--giris-arka);
    transition: background .15s;
  }
  .kam-satir:hover { background: var(--dugme-hover); }
  .kam-satir-sol {
    display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto;
  }
  .kam-ikon { color: var(--soluk); font-size: 12px; flex: 0 0 auto; }
  .kam-ikon-aktif { color: #22c55e; }
  .kam-ad {
    font-size: 12px; color: var(--metin); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .kam-prot-rozet {
    flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: .06em;
    padding: 2px 5px; border-radius: 3px; color: #fff;
  }
  .kam-prot-rtsp  { background: #7c3aed; }
  .kam-prot-rtp   { background: #0d9488; }
  .kam-prot-mjpeg { background: #d97706; }
  .kam-prot-hls   { background: #2563eb; }
  .kam-prot-http  { background: #64748b; }
  .kam-araclar { display: flex; gap: 4px; flex: 0 0 auto; }
  .kam-btn {
    width: 24px; height: 22px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--dugme-arka);
    border: 1px solid var(--cizgi); border-radius: 3px; cursor: pointer;
    color: var(--soluk); font-size: 10px; padding: 0; transition: all .15s;
  }
  .kam-btn:hover { color: var(--beyaz); border-color: #3a6ea5; }
  .kam-btn-play:hover { color: #22c55e; border-color: #22c55e; }
  .kam-btn-stop { color: #ef4444; }
  .kam-btn-stop:hover { color: #ef4444; border-color: #ef4444; }
  .kam-btn-sil:hover { color: #ef4444; border-color: #ef4444; }
  .kam-blok { margin-bottom: 6px; }
  .kam-blok .kam-satir { margin-bottom: 0; border-radius: 4px 4px 0 0; }
  .kam-video-kutu {
    position: relative; background: #000; border: 1px solid var(--cizgi);
    border-top: none; border-radius: 0 0 4px 4px; overflow: hidden;
    aspect-ratio: 16 / 9;
  }
  .kam-video {
    width: 100%; height: 100%; object-fit: contain; display: block;
    background: #000;
  }
  /* v2.4.181: M50 PTZ suruklemesi — basili+hareket ettir kipini belirtir */
  .kam-video-m50 { cursor: grab; touch-action: none; }
  .kam-video-m50:active, .kam-video-m50.m50-ptz-aktif { cursor: grabbing; }
  /* v2.4.219: baglanti yok — BUYUK, dile gore metin (data-kam-hata; mjpeg_yeniden.js) */
  .kam-hata::after {
    content: "\26a0 YAYIN ALINAMIYOR"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #ef4444; font-size: 16px; font-weight: 700; letter-spacing: .1em;
    background: rgba(0,0,0,.7); text-align: center; padding: 8px;
  }
  .kam-hata[data-kam-hata]::after { content: "\26a0 " attr(data-kam-hata); }
  .dron-kamera-onizleme.kam-hata::after { font-size: 10px; letter-spacing: .04em; padding: 2px; }
  .kam-satir-tikla { cursor: pointer; }
  .kam-satir-tikla:hover { background: rgba(255,255,255,.04); }
  .kam-konsol-sekmeler { display: flex; gap: 2px; padding: 4px 8px 0; }
  .kam-konsol-sekmeler.gizli { display: none; }
  .kam-konsol-sekme { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--cizgi);
    border-bottom: none; border-radius: 4px 4px 0 0; background: transparent; color: var(--soluk); font-size: 11px; cursor: pointer; }
  .kam-konsol-sekme.aktif { background: rgba(255,255,255,.06); color: var(--metin); }
  .kam-konsol-sekme-sayac:not(:empty) { font-size: 9px; padding: 0 5px; border-radius: 8px; background: #1d4ed8; color: #fff; }
  .kam-bos-onizleme {
    width: 100%; height: 100%; display: flex; align-items: center;
    justify-content: center; color: var(--soluk); font-size: 20px;
  }
  /* Onizleme (izgara) gorunumu */
  .kam-izgara { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .kam-kart {
    border: 1px solid var(--cizgi); border-radius: 4px;
    background: var(--giris-arka); overflow: hidden;
  }
  .kam-kart-baslik {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; padding: 6px 8px;
  }
  .kam-kart .kam-video-kutu { border: none; border-radius: 0; }
  .kam-kart .kam-araclar { padding: 6px 8px; justify-content: flex-end; }
  /* Ayrik tasinabilir pencere */
  .kam-pencere {
    position: fixed; z-index: 2400; width: 480px; max-width: 92vw;
    background: var(--panel-arka, #10151c); border: 1px solid #3a6ea5;
    border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.55);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .kam-pencere-baslik {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 7px 10px; cursor: move; user-select: none;
    background: var(--dugme-arka); border-bottom: 1px solid var(--cizgi);
    font-size: 12px; color: var(--beyaz); letter-spacing: .05em;
  }
  .kam-pencere-baslik i { color: #3b82f6; margin-right: 4px; }
  /* v2.4.222: baslikta tam ekran + kapat; tam ekran pencere; konsol govdesi siniri */
  .kam-pencere-baslik-dgm { display: inline-flex; gap: 4px; }
  .kam-pencere-baslik-dgm .kam-btn i { margin: 0; color: var(--soluk); }
  /* v2.4.224 (kullanici istegi): tam ekran = pencerenin %80'i, ortali */
  .kam-pencere.kam-pencere-tam { position: fixed; left: 10vw; top: 10vh; width: 80vw; height: 80vh; max-width: none; max-height: none;
    resize: none; z-index: 4000; }
  .kam-satir.kam-satir-acik .kam-ikon { color: #3b82f6; }
  /* v2.4.223 (kullanici istegi): acik konsol govdesi EN AZ 300px; pencere de o kadar uzar */
  .kam-pencere .kam-konsol .dk-konsol-govde { height: 300px; min-height: 300px; max-height: 60vh; overflow-y: auto; flex: 0 0 auto; }
  .kam-pencere .kam-konsol .dk-konsol-govde.gizli { display: none; }
  .kam-pencere .kam-konsol { flex: 0 0 auto; }
  .kam-pencere-video {
    border: none; border-radius: 0; resize: both; min-width: 320px;
    min-height: 180px; max-width: 90vw; max-height: 80vh;
  }
  .kam-pencere-alt {
    display: flex; justify-content: flex-end; padding: 6px 10px;
    border-top: 1px solid var(--cizgi);
    /* v2.4.173: durum çubuğu (width:100%) düğmelerin ALTINA sarmalı */
    flex-wrap: wrap; row-gap: 6px;
  }
  /* GRCOFF: dron simgesi yanında yalnız aktif yerel kamera önizlemesi. */
  .dron-kamera-onizleme {
    position: absolute; left: 0; top: 0; z-index: 18; width: 92px; height: 62px;
    padding: 0; overflow: hidden; border: 1px solid #59b8eb; border-radius: 4px;
    background: #07131d; box-shadow: 0 3px 12px rgba(0,0,0,.62); cursor: pointer;
  }
  .dron-kamera-onizleme:hover { border-color: #a8e2ff; box-shadow: 0 0 0 2px rgba(89,184,235,.28); }
  .dron-kamera-onizleme img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* v2.4.192: haritada M50 ikonunun yanindaki SABIT canli kamera cercevesi */
  .eo-kamera-onizleme { width: 132px; height: 86px; border-color: #ffb454; }
  .eo-kamera-onizleme:hover { border-color: #ffd28a; box-shadow: 0 0 0 2px rgba(255,180,84,.28); }
  .eo-kamera-onizleme span { background: rgba(48,26,4,.82); color: #ffe6c2; }
  /* v2.4.220 (kullanici istegi): harita sag kenarinda cevrimici cihaz listesi */
  .hc-liste { position: absolute; right: 12px; top: 64px; z-index: 40; display: flex; flex-direction: column; gap: 4px;
    align-items: flex-end; pointer-events: none; max-height: calc(100% - 120px); overflow: hidden; }
  .hc-liste.bos { display: none; }
  .hc-baslik { font: 700 9px/1.4 Consolas, monospace; letter-spacing: .12em; color: rgba(255,255,255,.75);
    background: rgba(10,14,20,.45); padding: 3px 8px; border-radius: 3px; }
  .hc-oge { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; cursor: pointer;
    background: rgba(10,14,20,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: rgba(255,255,255,.9);
    font: 600 11px Consolas, monospace; letter-spacing: .04em; white-space: nowrap; max-width: 260px; opacity: .75; transition: opacity .15s, background .15s; }
  .hc-oge span { overflow: hidden; text-overflow: ellipsis; }
  .hc-oge:hover { opacity: 1; background: rgba(10,14,20,.9); border-color: #f0a830; }
  .hc-oge.hc-dron i { color: #5cc8ff; } .hc-oge.hc-m50 i { color: #f0a830; } .hc-oge.hc-kamera i { color: #a78bfa; }
  /* v2.4.205: harita EO ikonu uzerinde mini canli onizleme */
  .eo-onizleme { position: fixed; z-index: 9000; width: 220px; background: rgba(10,14,20,.94);
    border: 1px solid #f0a830; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.6); pointer-events: none; overflow: hidden; }
  .eo-onizleme-ad { font: bold 10px/1.4 Consolas, monospace; color: #f0a830; padding: 4px 8px; letter-spacing: .06em; }
  .eo-onizleme img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; }
  .eo-onizleme-yok { padding: 12px 8px; font-size: 11px; color: var(--soluk); text-align: center; }
  /* v2.4.205: PTZ hiz kaydiricisi */
  .m50-hiz-satir { display: flex; align-items: center; gap: 8px; }
  .m50-hiz-satir input[type=range] { flex: 1 1 auto; width: auto; padding: 0; accent-color: #3b82f6; }
  .m50-hiz-deger { font-family: Consolas, monospace; min-width: 2.2em; text-align: right; color: var(--metin); }
  /* v2.4.206 (kullanici istegi): KAMERA yuzen penceresi — pencerenin
     butunu yeniden boyutlanir, goruntu kalan alani doldurur; en altta
     durum cubugu; mavi konum dugmesine yanal bosluk. */
  .kam-pencere { resize: both; min-width: 340px; min-height: 260px; max-height: 92vh; height: 400px; }
  .kam-pencere-video { resize: none; flex: 1 1 auto; min-height: 0; min-width: 0; max-width: none; max-height: none; aspect-ratio: auto; }
  .kam-pencere-alt { flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 0 auto; }
  .kam-pencere-alt .kam-takip-arac { margin-right: auto; }
  .kam-pencere-araclar .kam-hedef-secici { margin: 0 6px; }
  .kam-hedef-btn { padding: 3px 8px; }
  .kam-pencere-durum { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 4px 10px 5px;
    border-top: 1px solid var(--cizgi); background: rgba(0,0,0,.25); }
  .kam-temel-bilgi { font: 11px/1.4 Consolas, monospace; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kam-pencere-durum .kam-takip-durumcubuk { padding: 2px 0 !important; background: transparent !important; }
  /* v2.4.206 (kullanici istegi: "M50 ayri bir sistem"): M50 CANLI GORUNTU
     PENCERESI — kamera modulunden bagimsiz; baslik / goruntu / arac
     cubugu (kanal + hedef) / durum cubugu. Pencerenin butunu resize. */
  .m50-pc { position: fixed; z-index: 2450; width: 560px; height: 440px; min-width: 360px; min-height: 280px;
    max-width: 96vw; max-height: 92vh; resize: both; display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel-arka, #10151c); border: 1px solid #f0a830; border-radius: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.6); }
  .m50-pc-baslik { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: move; user-select: none;
    background: var(--dugme-arka); border-bottom: 1px solid var(--cizgi); font-size: 12px; color: var(--beyaz); letter-spacing: .05em; }
  .m50-pc-baslik i.m50-pc-ikon { color: #f0a830; }
  .m50-pc-baslik .m50-pc-ad { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m50-pc-rozet { font: 700 9px/1 Consolas, monospace; letter-spacing: .08em; padding: 3px 6px; border-radius: 3px;
    border: 1px solid var(--cizgi); color: var(--soluk); }
  .m50-pc-rozet.bagli { color: #22c55e; border-color: #22c55e; }
  .m50-pc-rozet.takip { color: #ffc94d; border-color: #ffc94d; }
  .m50-pc-kapat { width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 3px; color: var(--soluk); cursor: pointer; padding: 0; }
  .m50-pc-kapat:hover { color: #fff; border-color: #ef4444; }
  /* v2.4.211 (kullanici istegi): pencere ikiye bolundu — sol 300px kontrol paneli, sag goruntu */
  .m50-pc { width: 940px; height: 520px; min-width: 620px; min-height: 360px; }
  .m50-pc-govde { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }
  .m50-pc-ayrac { flex: 0 0 10px; cursor: col-resize; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); touch-action: none; user-select: none; }
  .m50-pc-ayrac i { font-size: 11px; color: var(--soluk); pointer-events: none; }
  .m50-pc-ayrac:hover { background: #f0a830; } .m50-pc-ayrac:hover i { color: #14181e; }
  .m50-pc-rozet.surum { color: var(--soluk); letter-spacing: .04em; }
  .m50-pc-sol { flex: 0 0 300px; width: 300px; min-width: 220px; min-height: 0; overflow-y: auto; overflow-x: hidden;
    background: rgba(0,0,0,.22); padding: 6px 8px 10px; display: flex; flex-direction: column; gap: 6px; font: 11px/1.5 Consolas, monospace; color: var(--soluk); }
  .m50-pc-bolum { border: 1px solid var(--cizgi); border-radius: 5px; background: rgba(255,255,255,.02); }
  .m50-pc-bolum > summary { list-style: none; cursor: pointer; user-select: none; padding: 6px 8px; font: 700 10px/1.4 Consolas, monospace; letter-spacing: .1em; color: #f0a830; display: flex; align-items: center; gap: 6px; }
  .m50-pc-bolum > summary::-webkit-details-marker { display: none; }
  .m50-pc-bolum > summary::before { content: "\25B8"; display: inline-block; transition: transform .15s; color: var(--soluk); }
  .m50-pc-bolum[open] > summary::before { transform: rotate(90deg); }
  .m50-pc-bolum-ic { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
  .m50-pc-satir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .m50-pc-satir > button.m50-pc-sb { flex: 1 1 auto; justify-content: center; height: 28px !important; }
  .m50-pc-satir > select.m50-pc-sb { flex: 1 1 auto; height: 26px; }
  .m50-pc-sol button.m50-pc-sb { height: 28px; min-height: 0; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 4px; color: var(--metin); cursor: pointer;
    font: 700 11px Consolas, monospace; letter-spacing: .04em; white-space: nowrap; line-height: 1; }
  .m50-pc-sol button.m50-pc-sb:hover { border-color: #f0a830; color: #fff; }
  .m50-pc-sol button.m50-pc-sb:disabled { opacity: .45; cursor: default; }
  .m50-pc-sol button.m50-pc-sb-kanal.aktif { background: #f0a830; border-color: #f0a830; color: #14181e; }
  .m50-pc-sol button.m50-pc-sb-tanima.acik, .m50-pc-sol button.m50-pc-sb-pip.acik { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
  .m50-pc-sol button.m50-pc-sb-takip { border-color: #ffc94d; color: #ffe2a3; }
  .m50-pc-sol button.m50-pc-sb-takip.takipte { background: #b45309; border-color: #f59e0b; color: #fff; }
  .m50-pc-sol button.m50-pc-sb-kayit i { color: #ef4444; }
  .m50-pc-sol button.m50-pc-sb-kayit.kayitta { background: #7f1d1d; border-color: #ef4444; color: #fff; }
  .m50-pc-sol select.m50-pc-sb { width: auto; padding: 0 6px; font: 700 11px Consolas, monospace; color: var(--metin);
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 4px; cursor: pointer; }
  .m50-pc-sol .m50-pc-hassas { display: flex; align-items: center; gap: 8px; }
  .m50-pc-sol .m50-pc-hassas input[type=range] { flex: 1 1 auto; width: auto; padding: 0; margin: 0; accent-color: #3b82f6; }
  /* v2.4.225: M50 Tanima/Takip bolumlerinde AI + takip ayarlari ve Uygula */
  .m50-pc-sol .m50-pc-hassas > span { flex: 0 0 auto; font-size: 11px; color: var(--soluk); min-width: 8em; }
  .m50-pc-sol .m50-pc-hassas select.m50-pc-sb { flex: 1 1 auto; min-width: 0; }
  .m50-pc-sol .m50-pc-uygula { margin-top: 6px; }
  .m50-pc-sol .m50-pc-uygula .kai-uygula-dgm { width: 100%; justify-content: center; }
  /* v2.4.227: RADAR YONETIM PENCERESI (radar_pencere.js) — M50 iskeleti, tek sutun */
  .m50-pc.ra-pc { width: 480px; height: 640px; min-width: 380px; min-height: 320px; border-color: #35d0ff; }
  .m50-pc.ra-pc .m50-pc-baslik i.m50-pc-ikon { color: #35d0ff; }
  .m50-pc.ra-pc .m50-pc-sol { flex: 1 1 auto; width: auto; min-width: 0; }
  .m50-pc.ra-pc .m50-pc-uygula { display: flex; gap: 6px; }
  .m50-pc.ra-pc .m50-pc-uygula .kai-uygula-dgm { width: auto; flex: 1 1 auto; }
  .m50-pc.ra-pc .m50-pc-uygula .m50-pc-sb { flex: 0 0 auto; }
  .ra-pc-adres { flex: 1 1 auto; font: 700 11px Consolas, monospace; color: var(--metin); }
  .ra-pc-durum { font-size: 11px; margin-top: 4px; }
  .ra-pc-durum.d-bagli { color: #22c55e; } .ra-pc-durum.d-hata { color: #e05555; } .ra-pc-durum.d-baglaniyor { color: #ffc94d; }
  .ra-pc-hata { color: #e05555 !important; }
  .ra-pc-satir-bilgi { font-size: 11px; color: var(--metin); margin: 2px 0 4px; word-break: break-word; }
  .m50-pc.ra-pc button.m50-pc-sb.bagli { border-color: #e05555; color: #e05555; }
  .m50-pc.ra-pc button.m50-pc-sb.aktif { border-color: #22c55e; color: #22c55e; }
  .m50-pc.ra-pc input.ra-pc-in { flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 6px; font: 700 11px Consolas, monospace; color: var(--metin);
    background: var(--girinti, #1b232d); border: 1px solid var(--cizgi); border-radius: 4px; }
  .ra-pc-ilerleme { height: 6px; background: var(--girinti, #2a3542); border-radius: 3px; overflow: hidden; margin: 4px 0; }
  .ra-pc-ilerleme > div { height: 100%; width: 0; background: #6bd8b9; transition: width .3s; }
  .ra-pc-json { width: 100%; min-height: 130px; box-sizing: border-box; font: 10px/1.4 Consolas, monospace; color: var(--metin);
    background: rgba(0,0,0,.35); border: 1px solid var(--cizgi); border-radius: 4px; resize: vertical; padding: 4px 6px; margin-top: 4px; }
  .ra-pc-tablo { width: 100%; border-collapse: collapse; font: 10px/1.4 Consolas, monospace; margin-top: 4px; }
  .ra-pc-tablo th, .ra-pc-tablo td { padding: 2px 4px; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap; }
  .ra-pc-tablo th { color: var(--soluk); font-weight: 700; }
  .ra-pc-tablo th:first-child, .ra-pc-tablo td:first-child, .ra-pc-tablo th:nth-child(2), .ra-pc-tablo td:nth-child(2) { text-align: left; }
  .ra-pc-tablo tbody tr { cursor: pointer; } .ra-pc-tablo tbody tr:hover td { background: rgba(255,255,255,.04); }
  .ra-pc-tablo tr.secili td { color: #ffc94d; } .ra-pc-tablo tr.kayip td { opacity: .55; }
  .ra-pc-tablo button.ra-pc-sec { padding: 1px 6px !important; min-height: 0 !important; font-size: 10px !important; }
  .ra-pc-saglik .rs-satir { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 2px 0; border-bottom: 1px dashed var(--cizgi); }
  .ra-pc-saglik .rs-deger { color: var(--metin); }
  .m50-pc-sol .m50-pc-ipucu { margin: 0; color: #ffe2a3; }
  .m50-pc-sol .m50-pc-ayar-not { margin: 0; font-size: 10px; color: var(--soluk); line-height: 1.4; word-break: break-all; }
  .m50-pc-sol .m50-pc-ayar-satir { display: flex; align-items: center; gap: 8px; padding: 1px 0; cursor: pointer; color: var(--metin); }
  .m50-pc-sol .m50-pc-ayar-satir input[type=checkbox] { margin: 0; }
  .m50-pc-sol .m50-pc-ayar-satir input[type=range] { flex: 1 1 auto; padding: 0; margin: 0; accent-color: #f0a830; }
  .m50-pc-sol .m50-pc-ayar-satir select { margin-left: auto; }
  .m50-pc-sol .m50-pc-ayar-satir input[type=text].m50-pc-sb { margin-left: auto; width: 55%; height: 24px; padding: 0 6px; font: 11px Consolas, monospace; }
  .m50-pc-osdc-baslik { margin-top: 6px; font: 700 9px/1.6 Consolas, monospace; letter-spacing: .12em; color: #f0a830; border-bottom: 1px solid var(--cizgi); }
  .m50-pc-video { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; background: #000; overflow: hidden; }
  .m50-pc-video img.kam-video { width: 100%; height: 100%; object-fit: contain; display: block; }
  .m50-pc-alt { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-top: 1px solid var(--cizgi); }
  .m50-pc-grup { display: flex; align-items: center; gap: 4px; }
  .m50-pc-btn { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 4px; color: var(--soluk);
    font: 700 11px Segoe UI, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; transition: all .15s; }
  .m50-pc-btn:hover { color: #fff; border-color: #f0a830; }
  .m50-pc-btn:disabled { opacity: .45; cursor: default; }
  .m50-pc-kanal.aktif { background: #f0a830; border-color: #f0a830; color: #14181e; }
  .m50-pc-hedef { border-color: #ffc94d; color: #ffe2a3; }
  .m50-pc-durdur { background: #b45309; border-color: #f59e0b; color: #fff; }
  /* v2.4.207: ETKILESIMLI durum cubugu — kanal dugmesi, cozunurluk secimi, takip dugmesi */
  .m50-pc-durum { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 5px 10px 6px;
    border-top: 1px solid var(--cizgi); background: rgba(0,0,0,.28); font: 11px/1.5 Consolas, monospace; color: var(--soluk); }
  .m50-pc-durum b { color: var(--metin); font-weight: 600; }
  .m50-pc-alan { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .m50-pc-alan em { font-style: normal; color: var(--soluk); }
  .m50-pc-olcu { color: var(--soluk); font-size: 10px; }
  .m50-pc-ipucu { color: #ffe2a3; flex-basis: 100%; }
  .m50-pc-durum button.m50-pc-sb { height: 22px; min-height: 0; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 4px; color: var(--metin); cursor: pointer;
    font: 700 11px Consolas, monospace; letter-spacing: .04em; white-space: nowrap; line-height: 1; }
  .m50-pc-durum button.m50-pc-sb:hover { border-color: #f0a830; color: #fff; }
  .m50-pc-durum button.m50-pc-sb:disabled { opacity: .45; cursor: default; }
  .m50-pc-durum button.m50-pc-sb-kanal { border-color: #f0a830; color: #ffd28a; }
  .m50-pc-durum button.m50-pc-sb-takip { border-color: #ffc94d; color: #ffe2a3; }
  .m50-pc-durum button.m50-pc-sb-takip.takipte { background: #b45309; border-color: #f59e0b; color: #fff; }
  .m50-pc-durum button.m50-pc-sb-tanima.acik { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
  /* v2.4.210: kayit / kucuk goruntu / hassasiyet / ekran ayarlari */
  .m50-pc-durum button.m50-pc-sb-kayit i { color: #ef4444; }
  .m50-pc-durum button.m50-pc-sb-kayit.kayitta { background: #7f1d1d; border-color: #ef4444; color: #fff; }
  .m50-pc-durum button.m50-pc-sb-kayit.kayitta i { animation: m50-rec 1s steps(2) infinite; }
  @keyframes m50-rec { to { opacity: .25; } }
  .m50-pc-durum button.m50-pc-sb-pip.acik { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
  .m50-pc-durum button.m50-pc-sb-ayar { margin-left: auto; }
  .m50-pc-hassas { display: inline-flex; align-items: center; gap: 6px; }
  .m50-pc-hassas input[type=range] { width: 90px; padding: 0; margin: 0; accent-color: #3b82f6; }
  .m50-pc-hassas b { min-width: 2em; text-align: right; }
  .m50-pc-pip { position: absolute; z-index: 6; width: 30%; min-width: 140px; max-width: 70%; aspect-ratio: 16 / 9;
    border: 1px solid #f0a830; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 4px 16px rgba(0,0,0,.6);
    resize: horizontal; display: flex; flex-direction: column; }
  .m50-pc-pip-bas { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px; cursor: move;
    background: rgba(10,14,20,.85); font: 700 9px/1.4 Consolas, monospace; letter-spacing: .08em; color: #f0a830; user-select: none; }
  .m50-pc-pip-kapat { width: 18px; height: 16px; padding: 0; border: 0; background: transparent; color: var(--soluk); cursor: pointer; font-size: 10px; }
  .m50-pc-pip-kapat:hover { color: #fff; }
  .m50-pc-pip img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; display: block; background: #000; }
  .m50-pc-pip.bos img { display: none; }
  .m50-pc-osd { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px;
    font-family: Consolas, monospace; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; background: rgba(0,0,0,.28); border-radius: 4px; }
  .m50-pc-osd.kose-sol_ust { left: 8px; top: 8px; } .m50-pc-osd.kose-sag_ust { right: 8px; top: 8px; align-items: flex-end; }
  .m50-pc-osd.kose-sol_alt { left: 8px; bottom: 8px; } .m50-pc-osd.kose-sag_alt { right: 8px; bottom: 8px; align-items: flex-end; }
  .m50-pc-ayar { position: absolute; z-index: 20; width: 240px; padding: 8px 10px 10px; background: var(--panel-arka, #10151c);
    border: 1px solid #f0a830; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.6); font: 11px/1.5 Consolas, monospace; color: var(--metin); }
  .m50-pc-ayar-bas { font-weight: 700; letter-spacing: .08em; color: #f0a830; margin-bottom: 6px; }
  .m50-pc-ayar-satir { display: flex; align-items: center; gap: 8px; padding: 2px 0; cursor: pointer; }
  .m50-pc-ayar-satir input[type=checkbox] { margin: 0; }
  .m50-pc-ayar-satir input[type=range] { flex: 1 1 auto; padding: 0; margin: 0; accent-color: #f0a830; }
  .m50-pc-ayar-satir select { margin-left: auto; }
  .m50-pc-ayar-not { margin: 8px 0 0; font-size: 10px; color: var(--soluk); line-height: 1.4; }
  .m50-pc-durum select.m50-pc-sb { width: auto; height: 22px; padding: 0 6px; font: 700 11px Consolas, monospace; color: var(--metin);
    background: var(--dugme-arka); border: 1px solid var(--cizgi); border-radius: 4px; cursor: pointer; }
  .m50-pc-durum .m50-pc-uyari { color: #fca5a5; }
  .m50-hedef-ortu { position: absolute; inset: 0; z-index: 5; cursor: crosshair; background: rgba(0,0,0,.08); }
  .m50-hedef-secim { position: absolute; display: none; border: 2px dashed #ffc94d; background: rgba(255,201,77,.12); pointer-events: none; }
  .m50-hedef-kutu { position: absolute; z-index: 4; border: 2px solid #ffc94d; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }
  .m50-pc-video.kam-hata::after { content: "\26a0 YAYIN ALINAMIYOR"; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: #ef4444; font-size: 18px; font-weight: 700; letter-spacing: .1em; background: rgba(0,0,0,.7); }
  .m50-pc-video.kam-hata[data-kam-hata]::after { content: "\26a0 " attr(data-kam-hata); }
  /* v2.4.202: dron duzenleme penceresinde renk secici */
  .dk-renk-sec { width: 64px; height: 30px; padding: 2px; cursor: pointer; }
  /* v2.4.192: Program Ayarlari acilir-kapanir bolumleri */
  .prog-ayar-popup .prog-bolum { margin: 6px 0; }
  .prog-bolum-ic { padding: 4px 2px 2px; }
  .prog-bolum-ic > hr:first-child { display: none; }
  .dron-kamera-onizleme span {
    position: absolute; left: 3px; bottom: 3px; padding: 1px 4px; border-radius: 2px;
    color: #eaf8ff; background: rgba(4,24,38,.78); font: 700 9px/1.2 Consolas,monospace;
    letter-spacing: .08em; pointer-events: none;
  }
  .kam-ai-kontrol { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; }
  .kam-ai-baslik { color:var(--soluk,#95a9b8); font:600 10px/1.2 monospace; letter-spacing:.08em; }
  .kam-ai-siniflar { display:flex; gap:6px; flex-wrap:wrap; }
  .kam-ai-siniflar label { display:inline-flex; align-items:center; gap:3px; font-size:11px; cursor:pointer; }
  .kam-ai-duy-etiket { color:var(--soluk,#95a9b8); font-size:11px; white-space:nowrap; }
  .kam-ai-duyarlilik { width:92px; accent-color:#3b82f6; }
  .kam-ai-izleme { margin-left:auto; min-width:86px; font-size:10px; }
  .kam-ai-aktif { border-color:#d99d32 !important; color:#ffe2a3 !important; }
  /* Kamera modal */
  #kamModalKutu {
    width: 380px; max-width: 92vw; background: var(--panel-arka, #10151c);
    border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
  }
  #kamModalKutu label { display: block; margin: 10px 0 5px; color: var(--soluk);
    font-size: 11px; letter-spacing: .08em; }
  #kamModalKutu label:first-child { margin-top: 0; }
  #kamHata { color: #ef4444; font-size: 11px; min-height: 14px; margin-top: 8px; }
  #sagPanel h2{margin:0 0 14px;font-size:12px;font-weight:600;
    letter-spacing:.14em;color:var(--beyaz);border-bottom:1px solid var(--cizgi);
    padding-bottom:10px;}
  .alan{margin-bottom:14px;}
  .alan label{display:block;margin-bottom:5px;color:var(--soluk);
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
  .satir{display:flex;gap:8px;}
  /* v2.4.196: parola alani da ayni gorunumde (kullanici bildirimi: EO
     formunda parola beyaz/dar goruunuyordu). */
  select,input[type=text],input[type=number],input[type=password]{width:100%;box-sizing:border-box;padding:8px 10px;
    background:var(--giris-arka);border:1px solid var(--cizgi);border-radius:3px;
    color:var(--metin);font-family:Consolas,monospace;font-size:13px;}
  select:focus,input:focus{outline:none;border-color:#3a6ea5;}
  button{padding:8px 14px;border:1px solid var(--cizgi);border-radius:3px;
    background:var(--dugme-arka);color:var(--metin);cursor:pointer;font-size:13px;
    letter-spacing:.04em;}
  button:hover{background:var(--dugme-hover);border-color:var(--soluk);}
  button:disabled{opacity:.45;cursor:default;}
  /* GENEL KURAL: metinli dugmelerde ikon ile metin arasi 6px bosluk.
     Yalniz-ikonlu dugmelerde (span yok) bosluk uygulanmaz. */
  button:has(> i + span) > i { margin-right: 6px; }
  #btnBaglan{width:100%;padding:10px;font-weight:600;letter-spacing:.08em;}
  #btnBaglan.bagli{background:#2a1214;border-color:#5c2b2e;color:#ffb3b3;}
  #btnBaglan.bagli:hover{background:#3a181b;}
  :root[data-tema="acik"] #btnBaglan.bagli{
    background:#fde8e8;border-color:#e5a4a4;color:#a02020;}
  #btnYenile{flex:0 0 auto;}

  /* Tema secici */
  .tema-grup{display:flex;gap:0;border:1px solid var(--cizgi);
    border-radius:3px;overflow:hidden;}
  .tema-grup button{flex:1;border:none;border-radius:0;padding:9px;}
  .tema-grup button.secili{background:#3a6ea5;color:#fff;}

  #seriDurumKutu{margin-top:4px;padding:10px 12px;border-radius:3px;
    border:1px solid var(--cizgi);background:var(--giris-arka);
    font-family:Consolas,monospace;font-size:12px;line-height:1.6;}
  #seriDurumKutu .d-kapali{color:var(--soluk);}
  #seriDurumKutu .d-baglaniyor{color:var(--uyari);}
  #seriDurumKutu .d-bagli{color:var(--iyi);}
  #seriDurumKutu .d-hata{color:var(--kotu);}
  #seriHata{color:var(--kotu);margin-top:6px;word-break:break-word;
    white-space:pre-wrap;display:none;}

  .ipucu{color:var(--soluk);font-size:11px;line-height:1.5;margin-top:16px;
    border-top:1px solid var(--cizgi);padding-top:12px;}

  .cesium-viewer-bottom{display:none;}

  /* ===== DRON KARTI: UCUS GOSTERGELERI (KARUSEL) ===== */
  .dk-gos-dis { margin-bottom: 8px; }
  .dk-gosterge-kutu {
    display: flex; flex-wrap: nowrap; gap: 6px;
    justify-content: center; align-items: center;
    padding: 4px 0;
  }
  .dk-gos-sahne {
    width: 160px; height: 160px; flex: 0 0 auto;
    display: flex; justify-content: center; align-items: center;
  }
  .dk-gosterge { display: inline-block; line-height: 0; }
  .dk-gos-ok {
    width: 26px; height: 56px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--giris-arka); border: 1px solid var(--cizgi);
    color: var(--soluk); border-radius: 4px; cursor: pointer;
    font-size: 13px; line-height: 1;
  }
  .dk-gos-ok:hover { background: var(--dugme-hover); color: var(--metin); }
  .dk-gos-alt {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; margin-top: 2px;
  }
  .dk-gos-ad {
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    color: var(--soluk); text-transform: uppercase;
    font-family: Consolas, monospace;
  }
  .dk-gos-noktalar { display: inline-flex; gap: 5px; align-items: center; }
  .dk-gos-nokta {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cizgi); cursor: pointer;
    transition: background .15s;
  }
  .dk-gos-nokta:hover { background: var(--soluk); }
  .dk-gos-nokta.aktif { background: var(--vurgu, #7dc4f5); }

  /* ===== DRON KARTI: IKONLU KOMUT TOOLBAR'I ===== */
  .dk-toolbar {
    display: flex; flex-wrap: nowrap; gap: 4px;
    align-items: center; justify-content: center;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--cizgi);
    position: relative;
  }
  .dk-tb-btn {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; border: 1px solid; cursor: pointer;
    font-size: 13px; line-height: 1;
  }
  .dk-tb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  /* Tum komut dugmeleri TEK TIP renk (tb-btn ile ayni gorunum) */
  .dk-tb-btn {
    background: var(--dugme-arka);
    border-color: var(--cizgi);
    color: var(--metin);
  }
  .dk-tb-btn i { opacity: .85; }
  .dk-tb-btn:hover:not(:disabled) {
    background: var(--dugme-hover);
    border-color: var(--vurgu, #6bd8b9);
  }
  .dk-tb-btn:hover:not(:disabled) i { opacity: 1; }

  /* ===== DRON RENK KARESI (kart iceriginde sol ust: 10px/10px) ===== */
  .dk-renk-kare {
    position: absolute; left: 10px; top: 10px;
    width: 12px; height: 12px;
    border-radius: 3px; background: #888;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    z-index: 4; cursor: help;
  }

  /* ===== TIKLANABILIR TELEMETRI HUCRELERI + AD ===== */
  .dk-tel-hucre {
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
  }
  .dk-tel-hucre:hover {
    background: var(--cizgi);
    border-color: var(--vurgu, #6bd8b9);
  }
  .dk-tel-hucre:active { transform: scale(.97); }
  .dk-ad.tiklanabilir { cursor: pointer; border-radius: 3px; padding: 0 3px; }
  .dk-ad.tiklanabilir:hover { background: var(--cizgi); text-decoration: underline; }

  /* ===== MOD SECIM POPUP'I ===== */
  .dk-mod-popup { width: 232px; }
  .dk-mod-izgara {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  }
  .dk-mod-btn {
    padding: 8px 2px; font-size: 9.5px; font-weight: 700;
    letter-spacing: .03em;
    background: transparent; border: 1px solid var(--cizgi);
    border-radius: 4px; color: var(--metin); cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .dk-mod-btn:hover { background: var(--cizgi); border-color: var(--vurgu, #6bd8b9); }
  .dk-mod-btn.aktif {
    background: var(--vurgu, #3b5c8f); border-color: var(--vurgu, #3b5c8f);
    color: #fff; cursor: default;
  }

  /* ===== DRON HISTORY POPUP ===== */
  .gecmis-popup {
    position: fixed; z-index: 2600;
    width: 760px; height: 480px;
    min-width: 560px; min-height: 360px;
    display: flex; flex-direction: column;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,.6);
    font-size: 11px; color: var(--metin);
    padding: 10px; overflow: hidden;
  }
  .gc-govde {
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 8px;
  }
  .gc-sol {
    flex: 0 0 220px; min-width: 180px;
    display: flex; flex-direction: column;
    border: 1px solid var(--cizgi); border-radius: 6px;
    overflow: hidden;
  }
  .gc-liste { flex: 1 1 auto; overflow-y: auto; padding: 4px; }
  /* v2.1.8: TUMUNU SIL dugmesi (yalniz yonetici gorur) */
  .gc-tumunu-sil {
    flex: 0 0 auto; margin: 6px; padding: 6px 8px;
    background: transparent; color: var(--kotu);
    border: 1px solid var(--kotu); border-radius: 4px;
    font-size: 11px; letter-spacing: .06em; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; transition: background .15s, color .15s;
  }
  .gc-tumunu-sil:hover { background: var(--kotu); color: #fff; }
  /* ============ v2.1.8: SURUM GECMISI POPUP ============ */
  .sg-tiklanabilir { cursor: pointer; border-bottom: 1px dashed var(--soluk); }
  .sg-tiklanabilir:hover { color: var(--vurgu, #6ea8ff); border-bottom-color: var(--vurgu, #6ea8ff); }
  .sg-popup {
    position: fixed; z-index: 1300; width: 420px; max-width: 94vw;
    background: var(--panel); border: 1px solid var(--cizgi);
    border-radius: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .sg-baslik {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; background: var(--bar, var(--cizgi));
    font-size: 12px; letter-spacing: .08em; font-weight: 600;
    cursor: move; user-select: none; touch-action: none;
  }
  .sg-baslik i { margin-right: 6px; }
  .sg-kapat {
    background: transparent; border: none; color: var(--soluk);
    cursor: pointer; font-size: 14px; padding: 2px 4px;
  }
  .sg-kapat:hover { color: var(--kotu); }
  .sg-govde { max-height: 420px; overflow-y: auto; padding: 6px; }
  /* ================================================================
     v2.4.34 — SURUM BLOGU BASLIGI KALICI GORUNUR
     ----------------------------------------------------------------
     OLCULEN KUSUR: `.sg-ust` duragan halde HICBIR arka plan/cerceve
     tasimiyordu; arka plan yalnizca `:hover` kuralindan geliyordu.
     Bu yuzden acilir kapanir blok basligi fare uzerine gelmedikce
     tiklanabilir bir baslik gibi gorunmuyor, metin yigini izlenimi
     veriyordu (kullanici bildirdi).

     `.sg-satir`in `border-bottom`u da basligi ayirmiyordu: acik
     blokta o cizgi DETAY LISTESININ altina dusuyor.

     Cozum: baslik duragan halde arka plan + sol vurgu seridi alir;
     acik blok belirgin sekilde ayrisir; detay listesi sol cerceveyle
     basliga baglanir (agac hissi, acik blok tek parca gorunur).
     ================================================================ */
  .sg-satir {
    margin-bottom: 5px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    overflow: hidden;
  }
  .sg-satir:last-child { margin-bottom: 0; }
  .sg-ust {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; cursor: pointer; user-select: none;
    /* Duragan halde de gorunur: baslik oldugu bir bakista anlasilir */
    background: rgba(255, 255, 255, 0.045);
    border-left: 3px solid var(--cizgi);
    transition: background .16s, border-left-color .16s;
  }
  .sg-ust:hover {
    background: rgba(255, 255, 255, 0.085);
    border-left-color: var(--soluk);
  }
  /* Acik blok: hangi surumun acik oldugu bir bakista secilir */
  .sg-satir.acik > .sg-ust {
    background: rgba(110, 168, 255, 0.13);
    border-left-color: var(--vurgu, #6ea8ff);
  }
  .sg-satir.acik { border-color: var(--vurgu, #6ea8ff); }
  .sg-ok {
    font-size: 10px; color: var(--soluk); transition: transform .18s;
    flex: 0 0 auto;
  }
  .sg-satir.acik .sg-ok {
    transform: rotate(90deg); color: var(--vurgu, #6ea8ff);
  }
  /* v2.4.192 (kullanici bildirimi): karanlik modda kapali satir basliklari
     gorunmuyordu — renk ust kapsayicidan miras aliniyordu. Tema
     degiskenine sabitlenir. */
  .sg-ust, .sg-no, .sg-ok { color: var(--metin); }
  .sg-no { font-weight: 700; font-size: 13px; }
  .sg-satir.acik .sg-no { color: var(--vurgu, #6ea8ff); }
  .sg-guncel {
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    color: var(--iyi, #35c46a); border: 1px solid var(--iyi, #35c46a);
    border-radius: 3px; padding: 1px 5px;
    flex: 0 0 auto;
  }
  .sg-tarih {
    margin-left: auto; font-size: 11px; color: var(--soluk);
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
  }
  .sg-detay {
    display: none; margin: 0;
    /* Sol cerceve basliga baglar; onceki 30px girinti yerine
       gorsel bir bag kurar. */
    padding: 8px 12px 10px 20px;
    border-top: 1px solid var(--cizgi);
    font-size: 12px; line-height: 1.55; color: var(--metin);
  }
  .sg-detay li { margin-bottom: 4px; }
  .sg-detay li:last-child { margin-bottom: 0; }
  .sg-satir.acik .sg-detay { display: block; }

  /* =============================================================
     FAZ18-IS17-SURUM-ALAN: SURUM OZETI (sg-ozet)
     Kayitlarin `b` alani (tek cumlelik ozet) v2.4.86'dan beri
     uretiliyordu ama hicbir yerde gosterilmiyordu. Kapali durumda
     gorunerek listeyi taranabilir kilar.
     ============================================================= */
  .sg-ozet {
    padding: 6px 10px 8px 26px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--soluk);
    border-top: 1px solid var(--cizgi);
  }
  /* Satir acilinca ozet gizlenir: ayrintili maddeler ozeti zaten
     kapsar, ikisi birlikte gereksiz yineleme olur. */
  .sg-satir.acik > .sg-ozet { display: none; }

  /* Acik temada beyaz tabanli yariseffaf katmanlar gorunmez kalir */
  :root[data-tema="acik"] .sg-ust {
    background: rgba(0, 0, 0, 0.04);
  }
  :root[data-tema="acik"] .sg-ust:hover {
    background: rgba(0, 0, 0, 0.075);
  }
  :root[data-tema="acik"] .sg-satir.acik > .sg-ust {
    background: rgba(37, 99, 235, 0.10);
  }
  .gc-dron {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 8px; border-radius: 4px; cursor: pointer;
    user-select: none;
  }
  .gc-dron:hover { background: var(--cizgi); }
  .gc-dron.secili { background: var(--vurgu, #3b5c8f); color: #fff; }
  .gc-renk {
    flex: 0 0 auto; width: 11px; height: 11px;
    border-radius: 2px; box-shadow: 0 0 4px rgba(0,0,0,.4);
  }
  .gc-dron-ad {
    flex: 1 1 auto; min-width: 0; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gc-dron-sayi {
    flex: 0 0 auto; min-width: 18px; text-align: center;
    background: var(--cizgi); border-radius: 9px;
    padding: 1px 6px; font-size: 10px; font-family: Consolas, monospace;
  }
  .gc-ucus {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 0 2px 14px; padding: 5px 7px;
    border-left: 2px solid var(--cizgi);
    border-radius: 0 4px 4px 0; cursor: pointer;
  }
  .gc-ucus:hover { background: var(--cizgi); }
  .gc-ucus.secili { background: var(--vurgu, #3b5c8f); color: #fff; }
  .gc-ucus-bilgi { flex: 1 1 auto; min-width: 0; }
  .gc-ucus-tarih { font-family: Consolas, monospace; font-size: 10.5px; }
  .gc-ucus-alt { font-size: 9.5px; color: var(--soluk); }
  .gc-ucus.secili .gc-ucus-alt { color: #dde; }
  .gc-ucus-sil {
    flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 3px;
    color: var(--soluk); cursor: pointer; font-size: 10px;
    opacity: 0; transition: opacity .15s;
  }
  .gc-ucus:hover .gc-ucus-sil { opacity: 1; }
  .gc-ucus-sil:hover { color: var(--kotu); background: rgba(0,0,0,.25); }
  .gc-bos { padding: 10px; color: var(--soluk); text-align: center; }
  /* v2.4.21: secili dronun kalici kimlik karti */
  .gc-kimlik {
    margin: 3px 0 6px 14px; padding: 6px 8px;
    border-left: 2px solid var(--vurgu, #3b5c8f);
    border-radius: 0 4px 4px 0;
    background: rgba(59, 92, 143, .10);
    font-size: 10px; line-height: 1.5;
  }
  .gc-kimlik-satir {
    display: flex; align-items: baseline; gap: 6px;
    justify-content: space-between;
  }
  .gc-kimlik-satir > span {
    flex: 0 0 auto; color: var(--soluk); text-transform: uppercase;
    letter-spacing: .3px; font-size: 9px;
  }
  .gc-kimlik-satir > b {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-family: Consolas, monospace; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gc-kimlik-satir i {
    font-style: normal; color: var(--soluk); font-weight: 400;
  }
  .gc-sag {
    flex: 1 1 auto; min-width: 0; position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden;
  }
  #gcHarita { flex: 1 1 auto; min-height: 0; }
  #gcHarita .cesium-viewer-bottom { display: none; }
  /* v2.4.64: ucusun belge esleme kodunun QR'i (harita sag ust kose).
     Cesium tuvalinin uzerinde durur; z-index harita katmanindan
     yuksek, oynatici seridinden dusuk olmalidir. */
  .gc-qr {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    background: #fff; padding: 4px 4px 2px;
    border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
    line-height: 0; cursor: help;
  }
  .gc-qr svg { display: block; width: 72px; height: 72px; }
  .gc-qr-kod {
    font-family: Consolas, monospace; font-size: 9px; font-weight: 700;
    color: #000; text-align: center; line-height: 1.4;
    letter-spacing: .3px;
  }
  /* v2.4.64: TAM EKRAN. Pencere tum gorunume yayilir; satir ici
     left/top/width/height degerlerini gecmek icin !important gerekir
     (surukleme ve resize bunlari satir ici yazar). */
  .gecmis-popup.gc-tam {
    left: 0 !important; top: 0 !important;
    width: 100vw !important; height: 100vh !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0; z-index: 2700;
  }
  /* Tam ekranda sag-alt resize tutamagi anlamsizdir */
  .gecmis-popup.gc-tam .gc-resize { display: none; }
  .gc-tam-ekran { margin-right: 2px; }
  .gc-oynatici {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; background: var(--panel-arka);
    border-top: 1px solid var(--cizgi);
  }
  .gc-oynatici button {
    flex: 0 0 auto; width: 28px; height: 24px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .gc-oynatici select { flex: 0 0 auto; font-size: 10px; }
  .gc-oynatici input[type=range] { flex: 1 1 auto; min-width: 0; }
  #gcZaman {
    flex: 0 0 auto; font-family: Consolas, monospace; font-size: 10px;
    color: var(--soluk); white-space: nowrap;
  }
  .gc-bilgi {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    color: var(--soluk); pointer-events: none; z-index: 5;
  }
  /* Ucus secilince: oynaticinin altinda yatay istatistik seridi */
  .gc-bilgi.gc-bilgi-istatistik {
    position: static; flex: 0 0 auto;
    background: var(--panel-arka);
    border-top: 1px solid var(--cizgi);
    padding: 6px 8px;
    display: flex; flex-wrap: wrap;
    align-items: stretch; justify-content: space-evenly;
    gap: 4px; pointer-events: auto;
  }
  .gc-bilgi-hucre {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; min-width: 72px; padding: 3px 6px;
  }
  .gc-bilgi-hucre i { font-size: 14px; color: var(--vurgu, #6bd8b9); }
  .gc-bilgi-deger {
    font-family: Consolas, monospace; font-size: 12px;
    font-weight: bold; color: var(--metin); white-space: nowrap;
  }
  .gc-bilgi-etiket {
    font-size: 9px; color: var(--soluk); text-transform: uppercase;
    letter-spacing: .4px; white-space: nowrap;
  }
  .gc-resize {
    position: absolute; right: 2px; bottom: 2px;
    width: 16px; height: 16px; cursor: nwse-resize;
    display: flex; align-items: center; justify-content: center;
    color: var(--soluk); font-size: 9px; touch-action: none;
    z-index: 10;
  }
  .gc-resize:hover { color: var(--metin); }

  /* ===== DRON KARTI: MINI POPUP (slider'li) ===== */
  /* v2.4.32: Kapsayici dolgusu KALDIRILDI. Eskiden `padding:10px` vardi
     ve baslik kapsayicinin icinde 10px kenar bosluguyla yuzuyordu; bu
     yuzden Islemler penceresi basligi Kameralar gibi standart pencerelere
     benzemiyordu (standart baslik pencere kenarina yapisir ve tam
     genislikte bir bant olusturur). Dolgu artik govde sarmalayicilarina
     verilir; asagidaki `.dk-mini-popup > *` kurali baslik disindaki tum
     dogrudan cocuklara yatay bosluk uygular, boylece 13 cagiran dosyanin
     hicbirinde govde yapisi degistirilmek zorunda kalmaz. */
  .dk-mini-popup {
    position: absolute; z-index: 1250;
    width: 200px; padding: 0 0 10px;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
    font-size: 11px; color: var(--metin);
    overflow: hidden;
  }
  .dk-mini-popup > *:not(.dk-mp-baslik) {
    margin-left: 10px; margin-right: 10px;
  }
  /* Kendi yatay dolgusunu yoneten govdeler bu bosluga ihtiyac duymaz.
     Liste GERCEK CSS kurallari okunarak cikarildi; yalnizca yatay padding
     tanimlayan siniflar muaftir. `.dk-telpop-govde`, `.dk-mod-izgara`,
     `.prog-ayar-govde` yatay dolgu tanimlamaz -> muaf DEGIL. */
  .dk-mini-popup > .dk-islem-izgara,
  .dk-mini-popup > .ac-icerik,
  .dk-mini-popup > .ac-sekme-bar,
  .dk-mini-popup > .ac-ozet,
  .dk-mini-popup > .ac-alt-bar,
  .dk-mini-popup > .kalib-govde {
    margin-left: 0; margin-right: 0;
  }
  /* Baslik: yalnizca mini popup'a ozgu ek nitelikler. Geometri (yukseklik,
     dolgu, arka plan, yazi tipi, kenarlik) satir ~1596'daki ORTAK PENCERE
     BASLIGI kuralindan gelir; o kural bu bloktan SONRA geldigi icin ayni
     ozellikleri burada tekrar tanimlamak anlamsizdir ve kafa karistirir.
     Onceki halde burada `padding-bottom`, `border-bottom`, `font-size`,
     `margin-bottom:8px` ve `color:var(--soluk)` vardi; hepsi ortak kural
     tarafindan zaten eziliyordu, `margin-bottom` ise ezilMIYOR ve basligin
     altinda standart pencerelerde bulunmayan 8px'lik bir bosluk
     birakiyordu. Kalan iki nitelik gercekten ozgudur: buyuk harf donusumu
     ve sifir kenar boslugu. */
  .dk-mp-baslik {
    text-transform: uppercase;
    margin: 0;
  }
  .dk-mp-baslik-yazi {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dk-mp-kapat {
    flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 3px;
    color: var(--soluk); cursor: pointer; font-size: 12px;
  }
  .dk-mp-kapat:hover { background: var(--cizgi); color: var(--kotu); }
  .dk-mp-satir {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 6px 0 2px;
  }
  .dk-mp-etiket { color: var(--soluk); font-size: 10px; }
  .dk-mp-deger { font-family: Consolas, monospace; font-size: 11px; }
  /* v2.4.38: degeri BILINMEYEN alan. Uydurma varsayilan gostermek
     yerine bos birakilir; kullanici slider'i oynatmadan UYGULA'ya
     basarsa bu alan drona GONDERILMEZ. Gorsel olarak da soluk
     durur ki mevcut ayar sanilmasin. */
  .dk-mp-deger-yok {
    color: var(--soluk); opacity: .55; letter-spacing: .08em;
  }
  .dk-mp-satir.dk-mp-bos .dk-mp-etiket { opacity: .6; }
  .dk-mini-popup input[type=range] { width: 100%; margin: 2px 0 4px; }
  .dk-mp-gonder {
    width: 100%; margin-top: 8px; padding: 6px;
    background: #1a5c2e; border: 1px solid #2a8c44; color: #b8f5cc;
    border-radius: 4px; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    font-family: Consolas, monospace;
  }
  .dk-mp-gonder:hover { background: #2a8c44; }

  /* v2.4.134 / Is 108: Dronu Duzenle penceresi standart pencere
     geometrisi kullanir. Baslik ve alt islemler sabittir; yalniz govde
     kayar. Boylece yeniden boyutlandirmada Iptal/Kaydet daima altta kalir. */
  .dk-dron-duzenle-popup {
    width: min(620px, calc(100vw - 24px));
    height: min(520px, calc(100vh - 24px));
    min-width: min(400px, calc(100vw - 16px));
    min-height: min(300px, calc(100vh - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .dk-mini-popup > .dk-dron-duzenle-govde,
  .dk-mini-popup > .dk-dron-duzenle-alt {
    margin-left: 0;
    margin-right: 0;
  }
  .dk-dron-duzenle-govde {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
  }
  .dk-dron-duzenle-uid {
    margin: 0 0 14px;
    gap: 16px;
  }
  .dk-dron-duzenle-uid .dk-mp-deger {
    max-width: calc(100% - 54px);
    overflow-wrap: anywhere;
    text-align: right;
    opacity: .8;
  }
  .dk-dron-duzenle-alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
  }
  .dk-dron-duzenle-alan .dk-mp-input {
    margin: 0;
  }
  .dk-dron-duzenle-kaynak {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cizgi);
  }
  .dk-dron-duzenle-bolum-baslik {
    margin: 0 0 12px;
    color: var(--soluk);
    font-size: 10px;
    letter-spacing: .06em;
  }
  .dk-dron-duzenle-durum {
    padding: 2px 0 4px;
    color: var(--soluk);
    font-size: 11px;
    line-height: 1.45;
  }
  .dk-dron-duzenle-alt {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--cizgi);
    background: var(--panel-arka);
  }
  .dk-dron-duzenle-alt button {
    min-width: 108px;
    min-height: 34px;
    margin: 0;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font: 600 11px/1.2 inherit;
    letter-spacing: .04em;
  }
  .dk-dron-duzenle-iptal {
    border: 1px solid var(--cizgi);
    background: var(--dugme-arka);
    color: var(--metin);
  }
  .dk-dron-duzenle-iptal:hover { border-color: var(--soluk); }
  .dk-dron-duzenle-kaydet {
    width: auto;
    border-color: var(--iyi);
    background: var(--iyi);
    color: var(--panel-arka);
  }
  .dk-dron-duzenle-alt button:disabled {
    cursor: wait;
    opacity: .6;
  }

  /* Ayrilmis (tasinabilir popup) dron karti */
  .dron-kart.ayrik {
    position: fixed; z-index: 1250;
    width: 340px; max-height: 80vh; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    border: 1px solid var(--cizgi); border-radius: 6px;
    background: var(--panel-arka);
  }
  .dron-kart.ayrik .dron-kart-baslik { cursor: grab; touch-action: none; }
  /* v2.4.224: panelde kapat/kucult gizli; kart basligi tiklanabilir; yuzen pencerede kucult = yalniz baslik */
  /* dugme_birlik.css genel dugme kurali :not(#btnBaglan) ile id-duzeyi ozgulluk + !important tasir;
     gizleme onu gecmek icin iki :not(#..) ile ozgulluk yukseltir. */
  .dron-kart:not(.ayrik) .dk-ayir-btn:not(#_g1):not(#_g2), .dron-kart:not(.ayrik) .dk-kucult-btn:not(#_g1):not(#_g2) { display: none !important; }
  .dron-kart:not(.ayrik) .dron-kart-baslik { cursor: pointer; }
  .dk-kucult-btn { background: none; border: none; color: var(--soluk); cursor: pointer; padding: 2px 5px; font-size: 11px; }
  .dk-kucult-btn:hover { color: var(--beyaz); }
  .dron-kart.ayrik.dk-yalniz-baslik { overflow: hidden; }
  .dron-kart.ayrik.dk-yalniz-baslik > :not(.dron-kart-baslik) { display: none !important; }
  .dron-kart.dk-golge { opacity: .85; }
  .dron-kart.dk-golge .dron-kart-baslik { cursor: pointer; }
  .dron-kart.dk-golge .dron-kart-baslik::before { content: "\f2d2"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; color: #3b82f6; margin-right: 4px; }
  .dron-kart.ayrik.dk-vurgu { box-shadow: 0 0 0 3px rgba(59,130,246,.7), 0 8px 32px rgba(0,0,0,.55); }
  .dron-kart.ayrik .dron-kart-baslik:active { cursor: grabbing; }
  /* v2.4.35: ok ikonu her iki modda da AC/KAPA dugmesidir.
     Ayrik modda baslik "grab" imleci tasidigi icin ok da surukleme
     gibi gorunuyordu; burada isaretci imlecine cevrilir ve dokunma
     hedefi buyutulur (10px ikon parmakla zor tutuluyordu). */
  .dk-ok {
    cursor: pointer; padding: 4px; margin-left: 2px;
    border-radius: 3px;
  }
  .dron-kart.ayrik .dk-ok { cursor: pointer; }
  /* --dugme-hover temada tanimli (koyu + acik); --hover-arka YOK. */
  .dk-ok:hover { opacity: 1; background: var(--dugme-hover); }
  /* v2.4.35: miknatis aninda yapisma geri bildirimi.
     Renk --interceptor: temada gercekten tanimli olan vurgu rengi
     (koyu #35d0ff, acik temada kendi degeri). Once var(--vurgu)
     yazilmisti; o degisken hic tanimli olmadigi icin yedek maviye
     dusuyordu ve iki temada da paletle uyumsuz kaliyordu.
     Yapisma sirasinda kart aniden "ziplar"; gecis animasyonu
     olsa kart parmagin gerisinde kalir, bu yuzden transition YOK. */
  .dron-kart.ayrik.dk-yapisiyor {
    outline: 2px solid var(--interceptor);
    outline-offset: -1px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55),
                0 0 0 4px color-mix(in srgb, var(--interceptor) 22%, transparent);
  }
  .dk-ayir-btn {
    background: none; border: none; cursor: pointer;
    color: var(--soluk); font-size: 11px; padding: 2px 5px;
    margin-left: 4px; line-height: 1;
  }
  .dk-ayir-btn:hover { color: var(--metin); }

  /* ARAYUZ AYARLARI POPUP */
  #arayuzPopup {
    position: fixed; top: 50px; right: 60px;
    width: 340px; max-height: 80vh; overflow-y: auto;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 2600; padding: 0;
    color: var(--metin); font-size: 13px;
  }
  #arayuzPopup.popup-gizli { display: none; }
  /* =============================================================
     v2.4.24 TEK TASARIM PENCERE BASLIGI
     TUM popup basliklari (13 pencere / 7 farkli eski kural) artik
     bu tek kuraldan gelir. Olculer :root degiskenlerinden okunur.
     Uretici-ozel siniflar (.angi-baslik, .suru-baslik, .sf-baslik,
     .kam-oniz-baslik, .bolum-popup-baslik) YALNIZCA renk vurgusu
     tanimlar; geometri tanimlamaz.
     ============================================================= */
  .popup-baslik,
  .bolum-popup-baslik,
  .angi-baslik,
  .suru-baslik,
  .sf-baslik,
  .kam-oniz-baslik,
  .yuzen-baslik,
  .kam-pencere-baslik,
  .vd-baslik,
  .sg-baslik,
  .dk-pp-baslik,
  .dk-mp-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    /* Yukseklik ALT ve UST sinirla sabitlenir.
       Yalnizca min-height verilmesi yeterli DEGIL: pencere bir flex
       satir kapsayicisi haline geldiginde (dok gozenegine konuldugunda
       veya flex-direction:row alan bir yerlesimde) baslik satirin tum
       yuksekligine gerilir ve surukleme alani pencerenin tamamini
       kaplar. Olculen ornek: arayuzPopup basligi 380px, lokasyonPopup
       basligi 300px. align-self:flex-start ile de gerilme engellenir. */
    min-height: var(--pencere-baslik-y);
    height: var(--pencere-baslik-y);
    max-height: var(--pencere-baslik-y);
    align-self: stretch;
    width: auto;
    padding: var(--pencere-baslik-pad-y) var(--pencere-baslik-pad-x);
    border-bottom: 1px solid var(--cizgi);
    background: var(--pencere-baslik-arka);
    font-size: var(--pencere-baslik-fs);
    font-weight: var(--pencere-baslik-fw);
    letter-spacing: var(--pencere-baslik-ls);
    color: var(--metin);
    /* Surukleme tutamagi: sekme birlestirme/ayirma altyapisinin on kosulu.
       Eski halde .kam-oniz-baslik ve #vdModalKutu .popup-baslik bunu
       tasimiyordu; o pencereler basligindan surukleneMIYORdu. */
    cursor: move;
    user-select: none;
    touch-action: none;
    flex: 0 0 auto;
  }
  :root[data-tema="acik"] .popup-baslik,
  :root[data-tema="acik"] .bolum-popup-baslik,
  :root[data-tema="acik"] .angi-baslik,
  :root[data-tema="acik"] .suru-baslik,
  :root[data-tema="acik"] .sf-baslik,
  :root[data-tema="acik"] .kam-oniz-baslik,
  :root[data-tema="acik"] .yuzen-baslik,
  :root[data-tema="acik"] .kam-pencere-baslik,
  :root[data-tema="acik"] .vd-baslik,
  :root[data-tema="acik"] .sg-baslik,
  :root[data-tema="acik"] .dk-pp-baslik,
  :root[data-tema="acik"] .dk-mp-baslik {
    background: rgba(0,0,0,.06);
  }
  /* Yuzen panele ozgu imlec: ortak kuraldaki `move`u gecersiz kilar.
     Bu blok ORTAK KURALDAN SONRA gelmek ZORUNDA. */
  .yuzen-baslik { cursor: grab; }
  .yuzen-panel.surukleniyor .yuzen-baslik { cursor: grabbing; }
  /* Baslik metni: ikon + yazi solda, tasarsa ... ile kisalir */
  .popup-baslik > span:first-child,
  .bolum-popup-baslik > span:first-child,
  .angi-baslik > span:first-child,
  .suru-baslik > span:first-child,
  .sf-baslik > span:first-child,
  .dk-mp-baslik > span:first-child,
  .dk-pp-baslik > span:first-child {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .popup-baslik i.fa-solid,
  .bolum-popup-baslik i.fa-solid,
  .angi-baslik i.fa-solid,
  .suru-baslik i.fa-solid,
  .sf-baslik i.fa-solid,
  .kam-oniz-baslik i.fa-solid,
  .dk-mp-baslik i.fa-solid,
  .dk-pp-baslik i.fa-solid {
    width: 15px; text-align: center; opacity: .85; flex: 0 0 auto;
  }
  /* Baslik dugmeleri (kapat, kucult, ayir...) tek olcu */
  .popup-baslik button,
  .bolum-popup-baslik button,
  .angi-baslik button,
  .suru-baslik button,
  .sf-baslik button,
  .kam-oniz-baslik button {
    background: none; border: none; color: var(--metin); cursor: pointer;
    font-size: 13px; padding: 2px 5px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .popup-baslik button:hover,
  .bolum-popup-baslik button:hover,
  .angi-baslik button:hover,
  .suru-baslik button:hover,
  .sf-baslik button:hover,
  .kam-oniz-baslik button:hover { color: var(--kotu); }
  .popup-icerik { padding: 14px; }

  /* CTRL+SOL TIK HARITA MENUSU */
  #haritaMenu {
    position: fixed;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 5px; box-shadow: 0 4px 16px rgba(0,0,0,.6);
    z-index: 1001; min-width: 200px; padding: 0;
    color: var(--metin); font-size: 12px;
  }
  #haritaMenu.popup-gizli { display: none; }
  .harita-menu-baslik {
    padding: 8px 12px; border-bottom: 1px solid var(--cizgi);
    font-size: 11px; color: var(--soluk); font-family: Consolas, monospace;
  }
  .harita-menu-item {
    padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  }
  .harita-menu-item:hover { background: var(--dugme-hover); }
  .harita-menu-item .hm-nokta {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }

  /* v2.4.42: SHIFT + SOL TIK -> HOME AYARLA kipi.
     Iki kip ayni menu DOM'unu paylasir; kip etiketi ve amber vurgu, HOME
     ayarlamanin (RTL/failsafe donus noktasini kalici degistirir) "buraya
     git" ile karistirilmasini onler. */
  .harita-menu-baslik .hm-kip {
    display: inline-block; margin-right: 6px;
    font-weight: 700; letter-spacing: .3px;
    color: var(--metin);
  }
  #haritaMenu.hm-home-kip {
    border-color: var(--uyari);
    box-shadow: 0 4px 16px rgba(0,0,0,.6),
                0 0 0 1px var(--uyari) inset;
  }
  #haritaMenu.hm-home-kip .harita-menu-baslik .hm-kip {
    color: var(--uyari);
  }
  /* Satirdaki HOME durumu: atanmissa uzerine yazilacagi, atanmamissa
     eksiklik oldugu ipucu ile bildirilir. `margin-left:auto` isareti
     satirin sagina yaslar. */
  .harita-menu-item .hm-home-im {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; color: var(--iyi);
  }
  .harita-menu-item .hm-home-im.yok { color: var(--uyari); }

  /* Ust bar arayuz ayar butonu */
  #btnArayuzAyar {
    background: none; border: 1px solid var(--cizgi); border-radius: 3px;
    color: var(--metin); cursor: pointer;
    width: 30px; height: 30px; padding: 0; font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #btnArayuzAyar:hover { background: var(--dugme-hover); border-color: var(--soluk); }

  /* ================= KULLANICI GIRISI (LOGIN MODAL) ================= */
  #girisPerde {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(4,6,8,.82); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
  }
  #girisPerde.popup-gizli { display: none; }
  #girisKutu {
    width: 340px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.7);
    padding: 28px 26px 22px; color: var(--metin); font-size: 13px;
    text-align: center;
  }
  #girisKutu .giris-logo { height: 54px; margin-bottom: 8px; }
  #girisKutu h1 {
    margin: 0 0 2px; font-size: 17px; letter-spacing: .18em;
    color: var(--beyaz); font-weight: 700;
  }
  #girisKutu .giris-alt {
    font-size: 10px; color: var(--soluk); letter-spacing: .08em;
    margin-bottom: 18px;
  }
  #girisKutu label {
    display: block; text-align: left; font-size: 10px;
    color: var(--soluk); letter-spacing: .08em; margin: 10px 0 4px;
  }
  #girisKutu input[type="text"], #girisKutu input[type="password"] {
    width: 100%; box-sizing: border-box; padding: 9px 10px;
    background: var(--dugme-arka); color: var(--metin);
    border: 1px solid var(--cizgi); border-radius: 4px;
    font-size: 13px; outline: none;
  }
  #girisKutu input:focus { border-color: var(--interceptor); }
  .giris-hatirla {
    display: flex; align-items: center; gap: 7px;
    margin: 12px 0 4px; font-size: 11px; color: var(--soluk);
    cursor: pointer; user-select: none; text-align: left;
  }
  .giris-hatirla input { accent-color: var(--interceptor); cursor: pointer; }
  #btnGiris {
    width: 100%; margin-top: 12px; padding: 10px;
    background: #1a3a5c; color: #b8ddf5;
    border: 1px solid #2a6a8c; border-radius: 4px;
    font-size: 13px; font-weight: 600; letter-spacing: .12em;
    cursor: pointer; transition: background .15s;
  }
  #btnGiris:hover { background: #2a6a8c; }
  #btnGiris:disabled { opacity: .5; cursor: wait; }
  #girisHata {
    min-height: 16px; margin-top: 10px; font-size: 11px; color: var(--kotu);
  }

  /* ================= UST BAR PROFIL ROZETI + MENU ================= */
  #profilKutu {
    position: relative; display: none; /* giris sonrasi flex yapilir */
    align-items: center; gap: 8px; cursor: pointer; user-select: none;
    padding: 3px 10px 3px 4px; border: 1px solid var(--cizgi);
    border-radius: 16px; background: var(--rozet-arka);
  }
  #profilKutu:hover { border-color: var(--soluk); }
  #profilFoto {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    display: block; border: 1px solid var(--cizgi);
  }
  #profilAd { font-size: 12px; color: var(--beyaz); white-space: nowrap; }
  #profilMenu {
    position: fixed; top: 46px; left: 16px; z-index: 2000;
    min-width: 210px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    color: var(--metin); font-size: 12px; padding: 0;
  }
  #profilMenu.popup-gizli { display: none; }
  .profil-menu-ust {
    padding: 12px 14px; border-bottom: 1px solid var(--cizgi);
    display: flex; gap: 10px; align-items: center;
  }
  .profil-menu-ust img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--cizgi);
  }
  .profil-menu-ust .pm-ad { font-weight: 600; color: var(--beyaz); font-size: 12px; }
  .profil-menu-ust .pm-unvan { font-size: 10px; color: var(--soluk); margin-top: 2px; }
  .profil-menu-item {
    padding: 10px 14px; cursor: pointer; display: flex;
    align-items: center; gap: 9px;
  }
  .profil-menu-item:hover { background: var(--dugme-hover); }
  .profil-menu-item.cikis { color: var(--kotu); }

  /* ================= KULLANICI YONETIM POPUP (YONETICI) ============ */
  #btnKullanicilar {
    background: none; border: 1px solid var(--cizgi); border-radius: 3px;
    color: var(--metin); cursor: pointer;
    width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1;
    display: none; /* yonetici girisinde inline-flex yapilir */
    align-items: center; justify-content: center;
  }
  #btnKullanicilar:hover { background: var(--dugme-hover); border-color: var(--soluk); }
  #kullaniciPopup {
    position: fixed; top: 50px; left: 60px;
    width: 430px; max-height: 82vh; overflow-y: auto;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 1250; color: var(--metin); font-size: 12px;
  }
  #kullaniciPopup.popup-gizli { display: none; }

  /* KAYITLI LOKASYONLAR PANELI */
  #lokasyonPopup {
    position: fixed; top: 50px; right: 60px;
    width: 360px; max-height: 78vh; overflow-y: auto;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 2600; color: var(--metin); font-size: 12px;
  }
  #lokasyonPopup.popup-gizli { display: none; }
  #lokasyonBos { padding: 18px 14px; color: var(--soluk); font-size: 11px; text-align: center; }
  .lok-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-bottom: 1px solid var(--cizgi);
    cursor: pointer;
  }
  .lok-satir:hover { background: rgba(255,255,255,.05); }
  body.acik-tema .lok-satir:hover { background: rgba(0,0,0,.05); }
  .lok-satir i.fa-location-dot { color: var(--uyari); font-size: 13px; flex: 0 0 auto; }
  .lok-bilgi { flex: 1; min-width: 0; }
  .lok-bilgi .lb-ad { font-weight: 600; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lok-bilgi .lb-koord { color: var(--soluk); font-size: 10px; font-family: Consolas, monospace; }
  .lok-bilgi .lb-adres { color: var(--soluk); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lok-islem { display: flex; gap: 5px; flex: 0 0 auto; }
  .lok-islem button {
    width: 26px; height: 26px; padding: 0; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .lok-ad-duzenle {
    flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px;
  }

  /* ALT+SOL TIK: KONUM KAYDET MODALI */
  #lokKaydetPerde {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  #lokKaydetPerde.popup-gizli { display: none; }
  /* --- ONAY DIYALOGU (ozel confirm) --- */
  #onayPerde {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
  }
  #onayPerde.popup-gizli { display: none; }
  #onayKutu {
    width: 360px; max-width: calc(100vw - 40px);
    background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,.65); color: var(--metin);
    overflow: hidden;
    animation: onayGir .16s ease-out;
  }
  @keyframes onayGir {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  .onay-baslik {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    border-bottom: 1px solid var(--cizgi);
    background: rgba(0,0,0,.22);
  }
  :root[data-tema="acik"] .onay-baslik { background: rgba(0,0,0,.06); }
  .onay-baslik i { color: var(--uyari); font-size: 15px; }
  #onayMesaj {
    padding: 18px 16px;
    font-size: 13px; line-height: 1.55;
  }
  .onay-dugme-satir {
    display: flex; gap: 10px; padding: 0 16px 16px;
  }
  .onay-dugme-satir button {
    flex: 1; padding: 9px; font-weight: 700; letter-spacing: .08em;
    border-radius: 4px; cursor: pointer; font-size: 12px;
  }
  #btnOnayHayir {
    background: var(--dugme-arka); border: 1px solid var(--cizgi);
    color: var(--metin);
  }
  #btnOnayHayir:hover { background: var(--dugme-hover); }
  #btnOnayEvet {
    background: #7a2222; border: 1px solid #a03030; color: #ffe0e0;
  }
  #btnOnayEvet:hover { background: #a03030; }
  /* --- KAYDIRMALI ONAY (QGC tarzi slide-to-confirm) --- */
  .onay-kaydir-ray {
    position: relative; height: 46px;
    margin: 0 16px 12px;
    background: var(--dugme-arka);
    border: 1px solid var(--cizgi); border-radius: 23px;
    overflow: hidden; user-select: none;
    touch-action: none;
  }
  .onay-kaydir-dolgu {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: color-mix(in srgb, var(--iyi) 30%, transparent);
    pointer-events: none;
  }
  .onay-kaydir-metin {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    color: var(--soluk); pointer-events: none;
    padding-left: 28px; box-sizing: border-box;
  }
  .onay-kaydir-tutamac {
    position: absolute; left: 4px; top: 4px; bottom: 4px;
    width: 54px; border-radius: 19px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2ea866, #1a8a4f);
    color: #fff; font-size: 15px;
    cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  }
  .onay-kaydir-tutamac.tutuluyor { cursor: grabbing; box-shadow: 0 2px 14px rgba(46,168,102,.6); }
  .onay-kaydir-tutamac i { animation: onayOkTitre 1.4s infinite; }
  @keyframes onayOkTitre {
    0%,100% { transform: translateX(0); opacity: .9; }
    50%     { transform: translateX(4px); opacity: 1; }
  }
  .onay-kaydir-ray.onaylandi { border-color: var(--iyi); }
  .onay-kaydir-ray.onaylandi .onay-kaydir-metin { color: var(--iyi); }
  .onay-kaydir-ray.onaylandi .onay-kaydir-tutamac i { animation: none; }
  #lokKaydetKutu {
    width: 340px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
  }
  .lok-kaydet-icerik { padding: 14px; }
  .lok-kaydet-icerik label {
    display: block; font-size: 10px; color: var(--soluk);
    letter-spacing: .06em; margin: 0 0 4px;
  }
  .lok-kaydet-icerik input {
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
  }
  .lok-koord-satir { display: flex; gap: 10px; }
  .lok-koord-satir > div { flex: 1; min-width: 0; }
  #lokHata { color: var(--kotu); font-size: 11px; min-height: 14px; margin-bottom: 6px; }
  .lok-dugme-satir { display: flex; gap: 10px; }
  .lok-dugme-satir button { flex: 1; padding: 9px; font-weight: 600; letter-spacing: .06em; }
  #btnLokKaydet { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnLokKaydet:hover { background: #38713e; }

  /* --- ROTA GOREVI (Rotaya Gonder) --- */
  #gorevRotaPerde {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  #gorevRotaPerde.popup-gizli { display: none; }
  #gorevRotaKutu {
    width: 380px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
  }
  #gorevRotaListe { max-height: 300px; overflow-y: auto; }
  #gorevRotaYok {
    text-align: center; font-size: 11px; color: var(--soluk);
    letter-spacing: .08em; padding: 14px 0;
  }
  .gorev-rota-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border: 1px solid var(--cizgi);
    border-radius: 4px; margin-bottom: 6px; cursor: pointer;
    background: rgba(255,255,255,.02);
  }
  .gorev-rota-satir:hover { background: var(--dugme-hover); }
  .gorev-rota-satir > i { color: #3b82f6; flex: 0 0 auto; font-size: 13px; }
  .gorev-rota-satir .grs-ad {
    flex: 1; min-width: 0; font-weight: 600; font-size: 12px;
    color: var(--beyaz); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .gorev-rota-satir .grs-bilgi {
    font-family: Consolas, monospace; font-size: 11px;
    color: var(--soluk); flex: 0 0 auto;
  }
  /* Izleme popup'i: harita ustunde serbest kutu */
  #gorevIzlemePopup {
    position: fixed; z-index: 1450; right: 320px; top: 120px;
    width: 300px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
  }
  #gorevIzlemePopup.popup-gizli { display: none; }
  .gorev-izleme-icerik { padding: 12px 14px 14px; }
  .gorev-durum-satir { text-align: center; margin-bottom: 10px; }
  .gorev-rozet {
    display: inline-block; padding: 3px 12px; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    border: 1px solid var(--cizgi); color: var(--metin);
  }
  .gorev-rozet.bekliyor { background: rgba(255,255,255,.06); }
  .gorev-rozet.yukleniyor { background: #4a3d12; border-color: #8a7325; color: #ffe28a; }
  .gorev-rozet.gorevde { background: #14401f; border-color: #2e7d3e; color: #9be6ac; }
  .gorev-rozet.duraklat { background: #4a3d12; border-color: #8a7325; color: #ffe28a; }
  .gorev-rozet.hata { background: #4a1d1d; border-color: #7a3030; color: #ffc9c9; }
  .gorev-rozet.iptal { background: #4a1d1d; border-color: #a33; color: #ffb3b3; }
  /* v2.4.20: gorev drona yuklendi (henuz baslatilmadi) */
  .gorev-rozet.yuklendi { background: #123a4a; border-color: #257a8a; color: #8ae4ff; }
  /* v2.4.35: gorev son noktaya varinca. "gorevde"den ayirt edilebilmesi
     icin daha parlak yesil + belirgin kenarlik kullanilir; ayni yesil
     tonu kullanilsa pilot goreve devam ediyor sanabilir. */
  .gorev-rozet.tamamlandi {
    background: #12512a; border-color: #3fbf5f; color: #b9ffcb;
    box-shadow: 0 0 0 1px rgba(63,191,95,.35) inset;
  }

  /* =============================================================
     v2.4.35: GOREV DURDURULUNCA NE OLACAK? (yukleme ekrani ayari)
     Ilaclama gibi uzun operasyonlarda bir gorevde birkac kez batarya
     degisimi olur; secim gorev YUKLENIRKEN yapilir ve gorev boyunca
     kilitlenir.
     ============================================================= */
  .gorev-durdurma-ayar {
    margin: 0 0 12px; padding: 8px 10px 9px;
    border: 1px solid var(--cizgi); border-radius: 4px;
    background: rgba(255,255,255,.03);
  }
  .gda-baslik {
    display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--soluk);
  }
  .gda-baslik i { color: #ffc65c; font-size: 11px; }
  .gda-secenek {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 6px; border-radius: 3px; cursor: pointer;
    transition: background .12s;
  }
  .gda-secenek:hover { background: rgba(255,255,255,.05); }
  .gda-secenek input { margin-top: 2px; accent-color: #35c8f0; cursor: pointer; }
  .gda-secenek span { display: block; }
  .gda-secenek b {
    display: block; font-size: 10px; font-weight: 700;
    letter-spacing: .05em; color: var(--beyaz);
  }
  .gda-secenek em {
    display: block; margin-top: 2px; font-style: normal;
    font-size: 9px; color: var(--soluk); line-height: 1.35;
  }
  /* Gorev yuklendikten sonra secim degistirilemez: arayuz ile sunucudaki
     kayit ayrilirsa pilot RTL sanir, sunucu BRAKE uygular. */
  .gorev-durdurma-ayar.kilitli { opacity: .55; }
  .gorev-durdurma-ayar.kilitli .gda-secenek { cursor: default; }
  .gorev-durdurma-ayar.kilitli .gda-secenek:hover { background: none; }
  .gda-kilit {
    margin-top: 5px; padding-top: 6px;
    border-top: 1px dashed var(--cizgi);
    font-size: 9px; color: #ffc65c; letter-spacing: .04em;
  }
  .gda-kilit.popup-gizli { display: none; }

  /* v2.4.35: YARIM KALMIS GOREVI SURDUR (batarya degisimi sonrasi) */
  .gorev-surdur-satir {
    margin: 0 0 10px; padding: 9px 10px 10px;
    border: 1px solid #8a7325; border-radius: 4px;
    background: rgba(255,198,92,.07);
  }
  .gorev-surdur-satir.popup-gizli { display: none; }
  .gss-bilgi {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 10px; color: #ffe28a; line-height: 1.4;
  }
  .gss-bilgi i { color: #ffc65c; font-size: 12px; flex: 0 0 auto; }
  .gorev-btn-surdur {
    width: 100%; padding: 7px 10px; cursor: pointer;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: #08210f; background: #3fbf5f;
    border: 1px solid #2e7d3e; border-radius: 3px;
    transition: filter .12s;
  }
  .gorev-btn-surdur:hover { filter: brightness(1.12); }
  .gorev-bilgi-tablo { margin-bottom: 12px; border: 1px solid var(--cizgi); border-radius: 4px; }
  .gorev-bilgi-tablo > div {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-bottom: 1px solid var(--cizgi);
  }
  .gorev-bilgi-tablo > div:last-child { border-bottom: none; }
  .gorev-bilgi-tablo span {
    font-size: 10px; color: var(--soluk); letter-spacing: .06em;
  }
  .gorev-bilgi-tablo b {
    font-family: Consolas, monospace; font-size: 12px; color: var(--beyaz);
  }
  /* v2.4.20: GOREV YUKLEME ILERLEME CUBUGU */
  .gorev-yukleme-satir {
    margin: 0 0 12px; padding: 9px 10px 10px;
    border: 1px solid var(--cizgi); border-radius: 4px;
    background: rgba(255,255,255,.03);
  }
  .gorev-yukleme-satir.popup-gizli { display: none; }
  .gys-ust {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .gys-ust span {
    font-size: 10px; color: var(--soluk); letter-spacing: .08em;
    font-weight: 700;
  }
  .gys-ust b {
    font-family: Consolas, monospace; font-size: 12px; color: #8ae4ff;
  }
  .gorev-cubuk-dis {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--cizgi);
  }
  .gorev-cubuk-ic {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #1f6f8a, #35c8f0);
    transition: width .18s linear;
  }
  .gorev-cubuk-ic.tamam {
    background: linear-gradient(90deg, #2e7d3e, #56d977);
  }
  .gys-alt {
    margin-top: 5px; font-family: Consolas, monospace;
    font-size: 10px; color: var(--soluk);
  }
  .gorev-dugmeler { display: flex; gap: 6px; }
  .gorev-dugmeler + .gorev-dugmeler { margin-top: 6px; }
  .gorev-dugmeler button {
    flex: 1; padding: 8px 4px; font-weight: 600; font-size: 10px;
    letter-spacing: .05em;
  }
  .gorev-dugmeler button:disabled { opacity: .4; cursor: not-allowed; }
  /* v2.4.20: ROTAYI YUKLE / ROTAYI BASLAT ikili satiri */
  .gorev-dugmeler-yukle button {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 6px; font-size: 10px; font-weight: 800;
    letter-spacing: .08em;
  }
  .gorev-dugmeler-yukle button i { font-size: 11px; }
  #btnGorevYukle { background: #123a4a; border-color: #257a8a; color: #c5f2ff; }
  #btnGorevYukle:hover:not(:disabled) {
    background: #17495c; border-color: #35a0b8; color: #fff;
  }
  #btnGorevBaslat { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnGorevBaslat:hover:not(:disabled) { background: #38713e; }
  #btnGorevDurdur { background: #4a3d12; border-color: #8a7325; color: #ffe28a; }
  #btnGorevDurdur:hover:not(:disabled) { background: #5c4c18; }
  #btnGorevDevam { background: #1d3a5c; border-color: #2f5a8a; color: #bcd9ff; }
  #btnGorevDevam:hover:not(:disabled) { background: #254a75; }
  /* v2.4.18: GOREV IPTAL - tam genislik, belirgin kirmizi */
  .gorev-dugmeler-iptal { margin-top: 8px; }
  .gorev-btn-iptal {
    width: 100%; padding: 10px 6px !important;
    font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: .1em !important;
    background: #6b1414; border: 1px solid #b02a2a; color: #ffdada;
    border-radius: 4px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .gorev-btn-iptal:hover:not(:disabled) {
    background: #8a1a1a; border-color: #d43a3a; color: #fff;
    box-shadow: 0 0 10px rgba(220,40,40,.35);
  }
  .gorev-btn-iptal:disabled { opacity: .4; cursor: not-allowed; }
  .gorev-btn-iptal i { font-size: 12px; }

  /* --- BAGLANTI YONETICISI --- */
  #bagToolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 8px; margin-bottom: 10px;
    border: 1px solid var(--cizgi); border-radius: 4px;
    background: rgba(255,255,255,.03);
  }
  #bagToolbarLabel {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    color: var(--soluk);
  }
  #bagToolbarBtnlar { display: flex; gap: 6px; }
  .bag-tb-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 9px; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; border-radius: 3px;
  }
  .bag-tb-btn i { font-size: 11px; }
  #bagYok {
    text-align: center; color: var(--soluk); font-size: 10px;
    letter-spacing: .08em; padding: 14px 0 6px;
  }
  /* =============================================================
     v2.4.33 BAGLANTI GRUBU (AGAC YERLESIMI)
     v2.4.32'de baglanti yoneticisi ile dron paneli birlestirildi:
     her baglanti bir GRUP, dron kartlari o grubun govdesinde.
     DOM yazildi ancak bu bolum eklenmedi; sonuc olarak katlama
     oku donmedi, grup govdesi girintisiz kaldi ve "dron yok"
     notu duz metin olarak gorundu.
     ============================================================= */
  .bag-grup {
    margin-bottom: 6px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255,255,255,.015);
  }
  /* Grup basligi tiklanabilir: imlec bunu belli etmeli */
  .bag-grup > .bag-satir {
    cursor: pointer;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--cizgi);
    background: rgba(255,255,255,.03);
  }
  .bag-grup > .bag-satir:hover { background: rgba(255,255,255,.055); }
  /* Katlanmis grupta govde gizli, alt cizgi gereksiz */
  .bag-grup.katlanmis > .bag-satir { border-bottom: none; }

  /* Katlama oku: katlaninca 90 derece doner */
  .bag-kat-ok {
    flex: 0 0 auto;
    width: 11px;
    font-size: 10px;
    color: var(--soluk);
    text-align: center;
    transition: transform .16s ease-out;
  }
  .bag-grup.katlanmis .bag-kat-ok { transform: rotate(-90deg); }

  /* Grup govdesi: dron kartlarinin yasadigi kap.
     Sol girinti agac hiyerarsisini gorsel olarak kurar. */
  .bag-grup-govde {
    padding: 6px 6px 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Bos durum: ESKI DRONLAR PANELI gorunumu.
     Ortada buyuk soluk ucak ikonu, altinda kucuk yazi. */
  .bag-grup-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 10px 20px;
    user-select: none;
  }
  .bag-grup-bos-ikon {
    font-size: 34px;
    color: var(--soluk);
    opacity: .38;
    transform: rotate(-20deg);
  }
  .bag-grup-bos-yazi {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--soluk);
    text-align: center;
  }

  /* Grup basligindaki dron sayaci */
  .bag-dron-sayac {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: var(--soluk);
  }
  .bag-dron-sayac:empty { display: none; }
  .bag-dron-sayac.dolu {
    background: rgba(53,208,255,.16);
    color: var(--interceptor);
  }

  /* Baglantisi bilinmeyen grup: eslem gecikirse dron burada
     bekler, boylece panelden DUSMEZ. */
  .bag-satir-bilinmeyen {
    background: rgba(255,201,77,.06) !important;
  }
  .bag-satir-bilinmeyen .bag-ad { color: var(--uyari); }

  /* Panel basligindaki aktif baglanti rozeti */
  .bag-baslik-rozet {
    margin-left: auto;
    margin-right: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(255,255,255,.07);
    color: var(--soluk);
    white-space: nowrap;
  }
  .bag-baslik-rozet.rz-iyi   { background: rgba(61,220,132,.16); color: var(--iyi); }
  .bag-baslik-rozet.rz-uyari { background: rgba(255,201,77,.16); color: var(--uyari); }
  .bag-baslik-rozet.rz-kotu  { background: rgba(255,82,82,.16);  color: var(--kotu); }

  .bag-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--cizgi);
    border-radius: 4px; margin-bottom: 6px;
    background: rgba(255,255,255,.02);
  }
  .bag-bilgi { flex: 1; min-width: 0; }
  .bag-ust { display: flex; align-items: center; gap: 6px; }
  .bag-ad {
    font-weight: 600; font-size: 12px; color: var(--beyaz);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bag-tur {
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    padding: 1px 5px; border-radius: 3px; flex: 0 0 auto;
  }
  .bag-tur.bag-tur-seri { background: rgba(59,130,246,.18); color: #7fb3ff; }
  .bag-tur.bag-tur-tcp { background: rgba(168,85,247,.18); color: #cfa5ff; }
  .bag-tur.bag-tur-udp { background: rgba(34,197,94,.18); color: #7fe0a0; }
  /* v2.4.40: SANAL ve DJI rozet renkleri eksikti -> rozet renksiz cikiyordu.
     SANAL amber: gercek arac degil, SITL surecidir; bir bakista ayrilmali. */
  .bag-tur.bag-tur-sanal { background: rgba(245,158,11,.20); color: #f5c168; }
  .bag-tur.bag-tur-dji { background: rgba(236,72,153,.18); color: #f2a0cd; }
  /* IS50-ROZET-DARALTMA: Bu rozet kurallari once `.bag-tur-X` seklindeydi.
     Ayni sinif adlari index.html icinde FORM KABI olarak da
     kullaniliyor (<div class="bag-tur-alan bag-tur-tcp">),
     bu yuzden rozet renkleri 332x195px'lik form alanlarina
     siziyor ve kullanicinin bildirdigi mor/pembe blok
     olusuyordu. Secici `.bag-tur.bag-tur-X` seklinde
     daraltildi: yalniz rozet sinifini DA tasiyan ogeye
     uygulanir. Rozet gorunumu degismez. */

  .bag-alt {
    font-family: Consolas, monospace; font-size: 10px;
    color: var(--soluk); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bag-durum {
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    padding: 2px 6px; border-radius: 3px; flex: 0 0 auto;
  }
  .bag-durum.bd-kapali     { background: rgba(255,255,255,.08); color: var(--soluk); }
  .bag-durum.bd-baglaniyor { background: rgba(255,201,77,.15);  color: var(--uyari); }
  .bag-durum.bd-bagli      { background: rgba(61,220,132,.15);  color: var(--iyi); }
  .bag-durum.bd-hata       { background: rgba(255,82,82,.15);   color: var(--kotu); }
  .bag-btn {
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; border-radius: 3px; flex: 0 0 auto;
    font-size: 11px; padding: 0;
  }
  .bag-btn.bag-play { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  .bag-btn.bag-play:hover { background: #38713e; }
  .bag-btn.bag-stop { background: #4a1d1d; border-color: #7a3030; color: #ffc9c9; }
  .bag-btn.bag-stop:hover { background: #5c2525; }
  .bag-btn.bag-sil:disabled { opacity: .35; cursor: not-allowed; }
  .bag-btn.bag-duzenle { background: #263a52; border-color: #38557a; color: #cfe3ff; }
  .bag-btn.bag-duzenle:hover { background: #2f4763; }
  #bagEklePerde {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  #bagEklePerde.popup-gizli { display: none; }
  #bagEkleKutu {
    width: 360px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
  }
  #bagEkleHata { color: var(--kotu); font-size: 11px; min-height: 14px; margin-bottom: 6px; display: none; }
  #btnBagKaydet { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnBagKaydet:hover { background: #38713e; }

  /* --- ROTA PLANLAMA --- */
  #rotaModalPerde, #rotaDetayPerde, #kamModalPerde, #spiralModalPerde {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  #rotaModalPerde.popup-gizli, #rotaDetayPerde.popup-gizli,
  #kamModalPerde.popup-gizli, #spiralModalPerde.popup-gizli { display: none; }
  /* --- ROTA PARAMETRE DUZENLEME MODALI (v2.4.23) --- */
  #rotaParamPerde {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  #rotaParamPerde.popup-gizli { display: none; }
  #rotaParamKutu {
    width: 460px; max-width: 96vw; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
    display: flex; flex-direction: column; max-height: 88vh;
  }
  .rp-rota-ad {
    font-weight: 400; font-size: 11px; color: var(--soluk);
    margin-left: 4px;
  }
  .rp-icerik {
    padding: 12px 14px; overflow-y: auto; display: flex;
    flex-direction: column; gap: 10px; min-height: 0;
  }
  .rp-bolum {
    border: 1px solid var(--cizgi); border-radius: 5px;
    padding: 9px 10px 10px; background: rgba(255,255,255,.02);
  }
  .rp-bolum-tablo { display: flex; flex-direction: column; min-height: 0; }
  .rp-bolum-baslik {
    display: flex; align-items: center; gap: 6px; font-size: 10px;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--soluk); margin-bottom: 9px;
  }
  .rp-bolum-baslik i { color: #3b82f6; font-size: 11px; }
  .rp-bolum-not {
    margin-left: auto; font-family: Consolas, monospace;
    letter-spacing: 0; text-transform: none;
  }
  .rp-satir {
    display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
  }
  .rp-satir > label {
    flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--metin);
    margin: 0; display: flex; align-items: center; gap: 7px;
  }
  .rp-onay { cursor: pointer; }
  .rp-onay input[type=checkbox] {
    width: 14px; height: 14px; accent-color: #3b82f6; cursor: pointer;
    flex: 0 0 auto; margin: 0;
  }
  .rp-giris { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
  .rp-giris input[type=number] {
    width: 74px; padding: 5px 6px; font-family: Consolas, monospace;
    font-size: 12px; text-align: right;
    background: var(--giris-arka, rgba(0,0,0,.25));
    border: 1px solid var(--cizgi); border-radius: 3px;
    color: var(--beyaz);
  }
  .rp-giris input[type=number]:disabled { opacity: .4; }
  .rp-giris select {
    padding: 5px 6px; font-size: 11px; border-radius: 3px;
    background: var(--giris-arka, rgba(0,0,0,.25));
    border: 1px solid var(--cizgi); color: var(--metin);
  }
  .rp-giris select:disabled { opacity: .4; }
  .rp-birim {
    font-family: Consolas, monospace; font-size: 11px;
    color: var(--soluk); width: 26px;
  }
  .rp-bilgi {
    font-family: Consolas, monospace; font-size: 10.5px; line-height: 1.5;
    color: var(--soluk); background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.25); border-radius: 4px;
    padding: 5px 7px; margin-top: 4px;
  }
  /* Nokta tablosu */
  .rp-tablo-basi, .rp-tr {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) 68px 68px 62px;
    align-items: center; gap: 5px;
  }
  .rp-tablo-basi {
    font-size: 9px; letter-spacing: .06em; color: var(--soluk);
    text-transform: uppercase; padding: 0 6px 5px;
    border-bottom: 1px solid var(--cizgi);
  }
  .rp-tablo-basi .rp-th-val, .rp-tablo-basi .rp-th-no { text-align: center; }
  #rpNoktaTablo {
    overflow-y: auto; max-height: 240px; min-height: 0;
  }
  .rp-tr {
    padding: 4px 6px; border-bottom: 1px solid var(--cizgi);
  }
  .rp-tr:last-child { border-bottom: none; }
  .rp-tr:hover { background: rgba(255,255,255,.04); }
  .rp-td-no {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; color: #fff; background: #d97706;
  }
  .rp-td-no.start { background: #16a34a; }
  .rp-td-no.finish { background: #dc2626; }
  .rp-td-koord {
    font-family: Consolas, monospace; font-size: 10.5px;
    color: var(--metin); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .rp-td-val input[type=number] {
    width: 100%; padding: 3px 4px; font-family: Consolas, monospace;
    font-size: 11px; text-align: right;
    background: var(--giris-arka, rgba(0,0,0,.25));
    border: 1px solid var(--cizgi); border-radius: 3px;
    color: var(--beyaz);
  }
  .rp-td-val input[type=number]:focus {
    border-color: #3b82f6; outline: none;
  }
  #rpHata { color: var(--kotu); font-size: 11px; min-height: 14px; }
  .rp-dugmeler { display: flex; gap: 8px; }
  .rp-btn {
    flex: 1; padding: 9px; font-weight: 600; font-size: 11px;
    letter-spacing: .05em;
  }
  .rp-btn-kaydet {
    background: #2e5e33; border-color: #3e7e45; color: #d8ffe0;
  }
  .rp-btn-kaydet:hover { background: #38713e; }
  .rp-btn-ikincil {
    width: 100%; flex: none; margin-top: 4px;
    background: #1e3a5f; border-color: #2d5a8f; color: #cfe4ff;
  }
  .rp-btn-ikincil:hover { background: #26497a; }
  #btnRotaParam {
    background: #1e3a5f; border-color: #2d5a8f; color: #cfe4ff;
  }
  #btnRotaParam:hover { background: #26497a; }
  #spiralModalKutu {
    width: 380px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
    max-height: 92vh; overflow-y: auto;
  }
  .spiral-bilgi {
    font-family: Consolas, monospace; font-size: 11px; line-height: 1.5;
    color: var(--soluk); background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.25); border-radius: 4px;
    padding: 6px 8px; margin-bottom: 8px; white-space: pre-line;
  }
  #spiralHata { color: var(--kotu); font-size: 11px; min-height: 14px; margin-bottom: 6px; }
  #btnSpiralEkle { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnSpiralEkle:hover { background: #38713e; }
  #rotaModalKutu, #rotaDetayKutu {
    width: 360px; background: var(--panel-arka);
    border: 1px solid var(--cizgi); border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--metin);
  }
  .rota-slider-satir { margin-bottom: 12px; }
  .rota-slider-satir > label {
    display: flex !important; justify-content: space-between;
    align-items: center; font-size: 10px; color: var(--soluk);
    letter-spacing: .06em; margin: 0 0 4px; text-transform: uppercase;
  }
  .rota-slider-deger {
    font-family: Consolas, monospace; font-size: 12px;
    color: var(--beyaz); font-weight: 700;
  }
  .rota-slider-satir input[type=range] { width: 100%; accent-color: #3b82f6; }
  #rotaHata { color: var(--kotu); font-size: 11px; min-height: 14px; margin-bottom: 6px; }
  #btnRotaKaydet { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnRotaKaydet:hover { background: #38713e; }
  /* Nokta ekleme popup'i: harita ustunde serbest kutu (perdesiz) */
  #rotaNoktaPopup {
    position: fixed; z-index: 1600; width: 280px;
    background: var(--panel-arka); border: 1px solid var(--cizgi);
    border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.6);
    color: var(--metin);
  }
  #rotaNoktaPopup.popup-gizli { display: none; }
  #rotaNoktaKoord {
    font-family: Consolas, monospace; font-size: 11px;
    color: var(--soluk); margin-bottom: 10px;
  }
  .rota-nokta-dugmeler { display: flex; flex-direction: column; gap: 6px; }
  .rota-nokta-dugmeler button { padding: 8px; font-weight: 600; font-size: 11px; letter-spacing: .05em; }
  #btnNoktaEkle { background: #2e5e33; border-color: #3e7e45; color: #d8ffe0; }
  #btnNoktaEkle:hover { background: #38713e; }
  #btnRotaSonlandir, #btnRotaSil { background: #4a1d1d; border-color: #7a3030; color: #ffc9c9; }
  #btnRotaSonlandir:hover, #btnRotaSil:hover { background: #5c2525; }
  /* Rota listesi satirlari */
  .rota-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--cizgi);
    border-radius: 4px; margin-bottom: 6px; cursor: pointer;
    background: rgba(255,255,255,.02);
  }
  .rota-satir:hover { background: var(--dugme-hover); }
  .rota-satir .rota-ikon { color: #3b82f6; flex: 0 0 auto; font-size: 13px; }
  .rota-satir .rota-ad {
    flex: 1; min-width: 0; font-weight: 600; font-size: 12px;
    color: var(--beyaz); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .rota-satir .rota-mesafe {
    font-family: Consolas, monospace; font-size: 11px;
    color: var(--soluk); flex: 0 0 auto;
  }
  .rota-satir .rota-goz {
    background: none; border: none; padding: 4px 6px; cursor: pointer;
    color: var(--metin); font-size: 13px; flex: 0 0 auto; border-radius: 3px;
  }
  .rota-satir .rota-goz:hover { background: rgba(255,255,255,.08); }
  .rota-satir .rota-goz.kapali { color: var(--soluk); opacity: .5; }
  /* Rota detay: nokta listesi */
  #rotaDetayOzet {
    font-family: Consolas, monospace; font-size: 11px;
    color: var(--soluk); margin-bottom: 8px;
  }
  #rotaNoktaListesi {
    max-height: 220px; overflow-y: auto; margin-bottom: 10px;
    border: 1px solid var(--cizgi); border-radius: 4px;
  }
  .rota-nokta-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid var(--cizgi);
    font-family: Consolas, monospace; font-size: 11px;
  }
  .rota-nokta-satir:last-child { border-bottom: none; }
  .rota-nokta-satir .rn-no {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; background: #d97706;
  }
  .rota-nokta-satir .rn-no.start { background: #16a34a; }
  .rota-nokta-satir .rn-no.finish { background: #dc2626; }
  .rota-nokta-satir .rn-koord { flex: 1; min-width: 0; color: var(--metin); }
  .rota-nokta-satir .rn-param { flex: 0 0 auto; color: var(--soluk); }
  /* Alt bar fare koordinati */
  #fareKoordinat { font-family: Consolas, monospace; color: var(--soluk); font-size: 11px; }
  .kul-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-bottom: 1px solid var(--cizgi);
  }
  .kul-satir:last-child { border-bottom: none; }
  .kul-satir img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--cizgi); flex-shrink: 0;
  }
  .kul-bilgi { flex: 1; min-width: 0; }
  .kul-bilgi .kb-ad { font-weight: 600; color: var(--beyaz); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kul-bilgi .kb-eposta { font-size: 10px; color: var(--soluk);
    font-family: Consolas, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kul-bilgi .kb-unvan { font-size: 10px; color: var(--soluk); }
  .kul-rol {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--cizgi); flex-shrink: 0; letter-spacing: .05em;
  }
  .kul-rol.yonetici { color: #ffc94d; border-color: #8c7a2a; background: rgba(140,122,42,.15); }
  .kul-rol.kullanici { color: var(--interceptor); border-color: var(--cizgi); }
  .kul-islem { display: flex; gap: 5px; flex-shrink: 0; }
  .kul-islem button {
    background: var(--dugme-arka); border: 1px solid var(--cizgi);
    color: var(--metin); border-radius: 3px; cursor: pointer;
    font-size: 10px; padding: 4px 7px;
  }
  .kul-islem button:hover { background: var(--dugme-hover); }
  .kul-satir.pasif { opacity: .45; }

/* --- HEDEF SINIFLANDIRMA ayar bolumu (yzRadar paneli) --- */
.sinif-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.sinif-satir input[type="checkbox"] {
  accent-color: var(--interceptor);
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
}
.sinif-aciklama {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--soluk);
  letter-spacing: .06em;
  margin-top: 1px;
}
#sinifHassasiyet {
  accent-color: var(--interceptor);
  cursor: pointer;
}

/* =============================================================
   ANGAJMAN POPUP
   ============================================================= */
.ang-perde {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.ang-kutu {
  background: var(--panel-bg, #141a21);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
.ang-baslik {
  padding: 14px 16px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.ang-baslik i { margin-right: 6px; color: var(--kotu); }
.ang-hedef-bilgi {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--soluk);
  border-bottom: 1px solid var(--cizgi);
}
.ang-hedef-bilgi strong { color: var(--metin); }
.ang-hedef-bilgi i { margin-right: 4px; }

/* Parametreler */
.ang-param {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cizgi);
}
.ang-param-baslik {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--soluk);
  margin-bottom: 8px;
}
.ang-param-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
}
.ang-param-satir span { color: var(--soluk); }
.ang-param-satir input {
  width: 70px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: right;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  color: var(--metin);
}

/* v2.4.173: TAKIP kipinde ilgisiz alanlari gizler (yakalama/takip mesafesi) */
.ang-param-satir.ang-gizli { display: none !important; }

/* v2.4.18: Hucum hizi artik sorulmaz - sabit "TAM HIZ" bilgi satiri */
.ang-param-satir.ang-tamhiz {
  gap: 8px;
  padding: 5px 8px;
  margin-top: 2px;
  border: 1px solid rgba(255,64,64,.35);
  border-radius: 4px;
  background: rgba(255,64,64,.10);
}
.ang-param-satir.ang-tamhiz > span:first-child { color: var(--metin); }
.ang-param-satir.ang-tamhiz b {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #ff5252;
  text-shadow: 0 0 6px rgba(255,64,64,.45);
  white-space: nowrap;
}
.ang-param-satir.ang-tamhiz .ang-kmh {
  min-width: 58px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: var(--soluk);
}

/* Dron listesi */
.ang-liste {
  padding: 10px 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 200px;
}
.ang-liste-baslik {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--soluk);
  margin-bottom: 8px;
}
.ang-liste-bos {
  font-size: 11px;
  color: var(--soluk);
  text-align: center;
  padding: 12px 0;
}
.ang-dron-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  font-size: 12px;
}
.ang-dron-satir:hover { background: rgba(255,255,255,.06); }
.ang-dron-satir.secili {
  background: rgba(53,208,255,.12);
  border: 1px solid rgba(53,208,255,.35);
}
.ang-dron-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ang-dron-ad { flex: 1; color: var(--metin); font-weight: 600; }
.ang-dron-detay { font-size: 10px; color: var(--soluk); }

/* Alt düğmeler */
.ang-alt {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cizgi);
}
.ang-btn {
  flex: 1;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--cizgi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, opacity .15s;
}
.ang-btn.angaje {
  background: #6b1c1c;
  border-color: #a83232;
  color: #ffbaba;
}
.ang-btn.angaje:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.ang-btn.angaje:not(:disabled):hover {
  background: #8b2222;
}
/* v2.4.173: TAKIP kipi (carpismaz, mesafe korur) mavi renkte ayirt edilir */
.ang-btn.angaje.takip {
  background: #1e3a6b;
  border-color: #3268a8;
  color: #bad4ff;
}
.ang-btn.angaje.takip:not(:disabled):hover {
  background: #22508b;
}
.ang-btn.iptal {
  background: rgba(255,255,255,.06);
  color: var(--soluk);
}
.ang-btn.iptal:hover {
  background: rgba(255,255,255,.12);
  color: var(--metin);
}

/* Acik tema */
:root[data-tema="acik"] .ang-kutu {
  background: #f4f6f8;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
:root[data-tema="acik"] .ang-dron-satir.secili {
  background: rgba(0,119,182,.1);
  border-color: rgba(0,119,182,.3);
}
:root[data-tema="acik"] .ang-btn.angaje {
  background: #fde8e8;
  border-color: #e53e3e;
  color: #9b1c1c;
}

/* Dron isim duzenleme popup input */
.dk-mp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  margin: 4px 0 8px;
  border: 1px solid var(--kenar, var(--cizgi));
  border-radius: 4px;
  background: var(--panel);
  color: var(--metin);
  font-size: 13px;
  outline: none;
}
.dk-mp-input:focus {
  border-color: var(--iyi);
}
/* Telemetri UID degeri (monospace) */
.dk-uid-deger {
  font-family: Consolas, monospace;
  font-size: 11px;
  opacity: 0.75;
  margin-left: 6px;
}

/* ===== PARAMETRE POPUP ===== */
.dk-param-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 640px; max-width: 92vw; max-height: 70vh;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  z-index: 3000;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}
.dk-pp-baslik {
  padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--metin);
  cursor: move; user-select: none; touch-action: none;
  border-bottom: 1px solid var(--cizgi);
  background: var(--dugme-arka);
}
.dk-pp-arama {
  display: flex; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cizgi);
}
.dk-pp-input {
  flex: 1;
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  color: var(--metin);
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}
.dk-pp-input:focus { border-color: var(--interceptor); }
.dk-pp-btn-bul {
  background: var(--interceptor);
  border: none; border-radius: 4px;
  color: #fff; padding: 6px 12px;
  font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
.dk-pp-btn-bul:hover { opacity: 0.85; }
.dk-pp-btn-bul:disabled { opacity: 0.45; cursor: default; }
/* v2.4.17: TUMUNU AL — birincil vurgulu dugme (drondan taze okuma) */
.dk-pp-btn-tumal {
  background: var(--iyi);
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.dk-pp-btn-tumal:hover { filter: brightness(1.1); opacity: 1; }
.dk-pp-sonuc {
  flex: 1; overflow-y: auto;
  padding: 8px 10px;
  min-height: 100px; max-height: 50vh;
}
.dk-pp-tablo { display: flex; flex-direction: column; gap: 2px; }
.dk-pp-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.dk-pp-satir:hover { background: var(--dugme-hover); }
.dk-pp-ad {
  flex: 0 0 150px; min-width: 0;
  font-size: 11px; color: var(--soluk); font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-pp-aciklama {
  flex: 1 1 auto; min-width: 0;
  font-size: 10px; color: var(--soluk); opacity: 0.85;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35;
}
.dk-pp-val {
  flex: 0 0 auto;
  font-size: 12px; color: var(--interceptor); font-weight: 600;
}
.dk-pp-kapat {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none;
  color: var(--soluk); font-size: 16px; cursor: pointer;
}
.dk-pp-kapat:hover { color: var(--metin); }
/* Duzenleme overlay */
/* FAZ18-IS4-PARAM-KUTU: ortu artik govdede duran gercek bir acilir
   kutu perdesidir. Onceden `position:absolute; inset:0` ile parametre
   penceresinin ICINDE duruyor ve listeyi tamamen kapatiyordu.
   Parametre penceresi z-index:3000 tasidigi icin perde 3100 alir. */
.dk-pp-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 3100;
}
/* FAZ18-IS4-PARAM-KUTU: 340px genislikte aciklama, aralik bilgisi ve
   secenek listesi sikisiyordu; 520px'e cikarildi. Kutu tasinabilir
   oldugu icin position:fixed bildirilir (surukleme left/top yazar). */
.dk-pp-duzenle-kutu {
  width: 520px; max-width: 94vw; max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 0 14px 14px 14px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32);
}
/* Baslik cubugu: ad solda, kapatma sagda; surukleme tutamagi */
.dk-pp-duzenle-baslik {
  display: flex; align-items: center; gap: 10px;
  margin: 0 -14px 4px -14px;
  cursor: move;
  user-select: none;
}
.dk-pp-duzenle-baslik-ad {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-pp-duzenle-kapat {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--soluk);
  cursor: pointer;
  line-height: 1;
}
.dk-pp-duzenle-kapat:hover {
  background: var(--dugme-hover);
  color: var(--metin);
}
/* Duzenleme popup'inda buyuk fontlu parametre aciklamasi (secili dilde) */
.dk-pp-duzenle-aciklama {
  font-size: 14px; line-height: 1.45;
  color: var(--metin);
  background: rgba(107, 216, 185, .08);
  border-left: 3px solid var(--vurgu, #6bd8b9);
  border-radius: 0 4px 4px 0;
  padding: 8px 10px;
  margin: 8px 0 2px 0;
  max-height: 30vh; overflow-y: auto;
}
.dk-pp-mevcut {
  font-size: 12px; color: var(--soluk);
  margin: 8px 0;
}
.dk-pp-mevcut strong { color: var(--interceptor); }
.dk-pp-btn-bar {
  display: flex; gap: 8px; margin-top: 12px;
  justify-content: flex-end;
}
.dk-pp-btn-kaydet {
  background: var(--iyi); border: none; border-radius: 4px;
  color: #fff; padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.dk-pp-btn-kaydet:hover { opacity: 0.85; }
.dk-pp-btn-iptal {
  background: var(--dugme-arka); border: none; border-radius: 4px;
  color: var(--metin); padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.dk-pp-btn-iptal:hover { background: var(--dugme-hover); }
/* v2.4.15: parametre okuma ilerleme cubugu */
.dk-pp-progress {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--cizgi);
}
.dk-pp-progress-bar {
  flex: 1; height: 8px;
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 4px; overflow: hidden;
}
.dk-pp-progress-dolgu {
  height: 100%; width: 0%;
  background: var(--interceptor);
  transition: width 0.25s ease;
}
.dk-pp-progress-metin {
  flex: 0 0 auto;
  font-size: 11px; color: var(--soluk); font-family: monospace;
  white-space: nowrap;
}
/* v2.4.15: tree grid grup satirlari */
.dk-pp-grup {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--dugme-arka);
  cursor: pointer;
  user-select: none;
  font-size: 12px; font-weight: 600;
  color: var(--metin);
  margin-top: 2px;
}
.dk-pp-grup:hover { background: var(--dugme-hover); }
.dk-pp-grup.acik { border-left: 3px solid var(--interceptor); }
.dk-pp-grup i { font-size: 10px; color: var(--soluk); width: 12px; }
.dk-pp-grup-ad { font-family: monospace; letter-spacing: 0.5px; }
.dk-pp-grup-adet {
  margin-left: auto;
  font-size: 10px; font-weight: 400;
  color: var(--soluk);
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 1px 8px;
}
.dk-pp-satir-agac { margin-left: 14px; }
/* v2.4.15: min/maks/artis/birim bilgisi ve aralik uyarisi */
.dk-pp-aralik {
  font-size: 11px; color: var(--soluk);
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 6px 0 2px 0;
}
.dk-pp-aralik strong { color: var(--interceptor); }
.dk-pp-aralik i { margin-right: 4px; opacity: 0.7; }
.dk-pp-aralik-enum { opacity: 0.7; font-style: italic; }
.dk-pp-aralik-uyari {
  font-size: 11px; color: var(--kotu, #e05555);
  margin: 4px 0 0 0;
}
.dk-pp-aralik-uyari i { margin-right: 4px; }
.dk-pp-input-uyari { border-color: var(--kotu, #e05555) !important; }
/* v2.4.16: parametre okuma hatasi kutusu */
.dk-pp-hata {
  color: var(--kotu, #e05555); font-size: 12px;
  padding: 10px 12px; line-height: 1.6;
  background: rgba(224, 85, 85, 0.08);
  border: 1px solid rgba(224, 85, 85, 0.35);
  border-radius: 6px; margin: 8px 0;
}
.dk-pp-hata i { margin-right: 6px; }

/* ============================================================
   v2.4.19: PARAMETRE DEGER SECENEKLERI (combo box / bitmask)
   ============================================================ */
/* Agac satirinda degerin yanindaki okunabilir anlam */
.dk-pp-val { display: flex; flex-direction: column; align-items: flex-end;
             max-width: 190px; }
.dk-pp-val-anlam {
  font-size: 9.5px; font-weight: 400;
  color: var(--soluk); opacity: 0.9;
  letter-spacing: 0.2px;
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Duzenleme kutusunda mevcut degerin anlami */
.dk-pp-mevcut-anlam { color: var(--metin); opacity: 0.85; }
/* Secim listesi (values) */
.dk-pp-secim {
  width: 100%;
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  color: var(--metin);
  padding: 7px 8px;
  font-size: 12px;
  margin-top: 8px;
  outline: none;
  cursor: pointer;
}
.dk-pp-secim:focus { border-color: var(--interceptor); }
.dk-pp-secim:disabled { opacity: 0.45; cursor: default; }
.dk-pp-secim option { background: var(--panel); color: var(--metin); }
/* Bitmask onay kutulari */
.dk-pp-bitmask {
  margin-top: 8px;
  max-height: 34vh; overflow-y: auto;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: var(--giris-arka);
  padding: 4px;
}
.dk-pp-bit {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--metin);
}
.dk-pp-bit:hover { background: var(--dugme-hover); }
.dk-pp-bit input[type="checkbox"] {
  accent-color: var(--interceptor);
  width: 14px; height: 14px; cursor: pointer;
}
.dk-pp-bit input[type="checkbox"]:disabled { opacity: 0.4; }
.dk-pp-bit-ad { flex: 1 1 auto; min-width: 0;
                overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.dk-pp-bit-no {
  flex: 0 0 auto;
  font-family: monospace; font-size: 9.5px;
  color: var(--soluk); opacity: 0.8;
}
.dk-pp-bitmask-ozet {
  border-top: 1px solid var(--cizgi);
  margin-top: 4px; padding: 5px 6px 2px 6px;
  font-size: 11px; font-family: monospace;
  color: var(--interceptor);
  text-align: right;
}
/* Ham deger girisi anahtari */
.dk-pp-elle-anahtar {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px;
  font-size: 11px; color: var(--soluk);
  cursor: pointer; user-select: none;
}
.dk-pp-elle-anahtar input[type="checkbox"] {
  accent-color: var(--interceptor);
  width: 13px; height: 13px; cursor: pointer;
}

/* ============================================================
   v2.4.19: KART USTU "UCUSA HAZIR" ROZETI
   ============================================================ */
/* v2.4.23: durum rozeti + ISLEMLER dugmesi yan yana (%50 / %50) */
.dk-ust-satir {
  /* v2.4.23: iki dugme tam %50/%50. minmax(0,1fr) olmadan uzun durum
     metni ilk sutunu buyutup ISLEMLER dugmesini eziyordu. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: calc(100% - 4px); margin: 2px 2px 8px 2px;
}
.dk-ust-satir > .dk-hazir-rozet {
  width: 100%; margin: 0; min-width: 0; overflow: hidden;
}
.dk-ust-satir > .dk-hazir-rozet > span {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.dk-islem-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 7px 8px;
  border: 1px solid rgba(90, 170, 255, 0.45);
  border-radius: 5px;
  background: rgba(90, 170, 255, 0.12);
  color: #9fcaff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}
.dk-islem-btn:hover {
  background: rgba(90, 170, 255, 0.24);
  border-color: rgba(90, 170, 255, 0.7);
  color: #ffffff;
}
.dk-islem-ikon { font-size: 13px; flex: 0 0 auto; }
.dk-islem-metin {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* ISLEMLER POPUP'I: 3 sutunlu buyuk dugme izgarasi */
.dk-islem-popup { width: 372px; max-width: 94vw; }
/* v2.4.32: Kapsayici artik yatay dolgu vermiyor (bkz. .dk-mini-popup),
   izgara kendi kenar boslugunu tasir. */
.dk-islem-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px; padding: 11px 11px 2px;
}
.dk-islem-hucre {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px;
  min-height: 74px; padding: 9px 5px;
  border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.dk-islem-hucre:hover {
  background: var(--dugme-hover);
  border-color: rgba(90, 170, 255, 0.55);
}
.dk-islem-hucre:active { transform: scale(0.97); }
.dk-islem-hucre-ikon {
  font-size: 19px; color: var(--interceptor); flex: 0 0 auto;
}
.dk-islem-hucre-metin {
  font-size: 10px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.2px; word-break: break-word;
}
.dk-islem-hucre.tehlikeli { border-color: rgba(224, 85, 85, 0.45); }
.dk-islem-hucre.tehlikeli .dk-islem-hucre-ikon { color: #f09b9b; }
.dk-islem-hucre.tehlikeli:hover {
  background: rgba(224, 85, 85, 0.16);
  border-color: rgba(224, 85, 85, 0.75);
}
.dk-hazir-rozet {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 4px);
  margin: 2px 2px 8px 2px;
  padding: 7px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  background: var(--giris-arka);
  color: var(--metin);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.dk-hazir-rozet:hover { filter: brightness(1.12); }
.dk-hazir-ikon { font-size: 14px; flex: 0 0 auto; }
.dk-hazir-metin { flex: 1 1 auto; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.dk-hazir-sayac {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 600; font-family: monospace;
  opacity: 0.95;
}
.dk-hazir-ok { flex: 0 0 auto; font-size: 10px; opacity: 0.55; }
/* Durum renkleri */
.dk-hazir-rozet.hazir {
  border-color: rgba(76, 175, 80, 0.55);
  background: rgba(76, 175, 80, 0.12);
  color: #8fe39a;
}
.dk-hazir-rozet.hazir-uyari {
  border-color: rgba(240, 178, 60, 0.55);
  background: rgba(240, 178, 60, 0.12);
  color: #f3cd7c;
}
/* v2.4.35: UCUSA HAZIR + uyari. Zemin ve yazi YESIL kalir (arac
   kalkabilir); uyari yalnizca kenarlikta ve kucuk amber ucgende
   belirir. Onceki surumde tek bir uyari maddesi bile rozeti bastan
   asagi turuncuya cevirdigi icin kalkisa hazir dron "sorunlu"
   izlenimi veriyordu. Zemin rengi "ucabilir mi?" sorusunu,
   ucgen "dikkat edilecek birsey var mi?" sorusunu yanitlar. */
.dk-hazir-rozet.hazir.hazir-uyarili {
  border-color: rgba(240, 178, 60, 0.62);
}
.dk-hazir-uyari-im {
  flex: 0 0 auto;
  font-size: 11px;
  color: #f3cd7c;
  opacity: 0.95;
}
.dk-hazir-rozet.hazir-degil {
  border-color: rgba(224, 85, 85, 0.6);
  background: rgba(224, 85, 85, 0.14);
  color: #f09b9b;
  animation: dkHazirNabiz 2.4s ease-in-out infinite;
}
@keyframes dkHazirNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 85, 85, 0); }
  50% { box-shadow: 0 0 0 3px rgba(224, 85, 85, 0.16); }
}
.dk-hazir-rozet.ucusta {
  border-color: rgba(90, 170, 255, 0.55);
  background: rgba(90, 170, 255, 0.12);
  color: #9fcaff;
}
.dk-hazir-rozet.kopuk,
.dk-hazir-rozet.bilinmiyor {
  border-color: var(--cizgi);
  background: var(--dugme-arka);
  color: var(--soluk);
}

/* ============================================================
   v2.4.19: ARM CHECK PANELI
   ============================================================ */
.ac-popup { width: 420px; max-width: 94vw; }
.ac-ozet {
  display: flex; align-items: center; gap: 11px;
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  background: var(--giris-arka);
}
.ac-ozet > i { font-size: 22px; flex: 0 0 auto; }
.ac-ozet-yazi { display: flex; flex-direction: column; gap: 2px;
                min-width: 0; }
.ac-ozet-yazi strong { font-size: 13px; letter-spacing: 0.6px; }
.ac-ozet-yazi span { font-size: 11px; color: var(--soluk);
                     line-height: 1.4; }
.ac-ozet.hazir { border-color: rgba(76, 175, 80, 0.5);
                 background: rgba(76, 175, 80, 0.1); color: #8fe39a; }
.ac-ozet.hazir-uyari { border-color: rgba(240, 178, 60, 0.5);
                       background: rgba(240, 178, 60, 0.1);
                       color: #f3cd7c; }
/* v2.4.35: hazir + uyari -> zemin yesil kalir, kenarlik amber olur
   (kart rozetiyle ayni davranis) */
.ac-ozet.hazir.hazir-uyarili { border-color: rgba(240, 178, 60, 0.6); }
.ac-ozet.hazir-degil { border-color: rgba(224, 85, 85, 0.55);
                       background: rgba(224, 85, 85, 0.11);
                       color: #f09b9b; }
.ac-ozet.ucusta { border-color: rgba(90, 170, 255, 0.5);
                  background: rgba(90, 170, 255, 0.1); color: #9fcaff; }
.ac-ozet.bilinmiyor { color: var(--soluk); }
/* Sekmeler */
.ac-sekme-bar {
  display: flex; gap: 4px;
  padding: 0 10px;
  border-bottom: 1px solid var(--cizgi);
}
.ac-sekme {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--soluk);
  padding: 8px 4px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ac-sekme:hover { color: var(--metin); }
.ac-sekme.aktif {
  color: var(--interceptor);
  border-bottom-color: var(--interceptor);
}
.ac-sekme i { font-size: 11px; }
.ac-sekme-sayac {
  font-size: 9.5px; font-family: monospace;
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 0 5px;
}
.ac-sekme-sayac:empty { display: none; }
.ac-sekme-sayac.kritik {
  background: rgba(224, 85, 85, 0.18);
  border-color: rgba(224, 85, 85, 0.5);
  color: #f09b9b;
}
/* Icerik */
.ac-icerik {
  padding: 8px 10px;
  max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.ac-yukleniyor, .ac-bos {
  padding: 18px 12px;
  font-size: 12px; color: var(--soluk);
  text-align: center; line-height: 1.6;
}
.ac-yukleniyor i, .ac-bos i { margin-right: 6px; }
.ac-grup-bas {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; padding: 5px 7px;
  background: var(--dugme-arka);
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--metin);
}
.ac-grup-bas i { font-size: 10px; color: var(--soluk); }
/* Denetim satiri */
.ac-satir {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border-left: 3px solid var(--cizgi);
  border-radius: 0 4px 4px 0;
  background: var(--giris-arka);
}
.ac-satir-ikon { font-size: 12px; flex: 0 0 auto; }
.ac-satir-orta { flex: 1 1 auto; min-width: 0;
                 display: flex; flex-direction: column; gap: 1px; }
.ac-satir-ad { font-size: 11.5px; color: var(--metin); }
.ac-satir-mesaj { font-size: 10px; color: var(--soluk);
                  line-height: 1.4; }
.ac-satir-deger {
  flex: 0 0 auto; max-width: 130px;
  font-size: 11px; font-family: monospace; font-weight: 600;
  color: var(--interceptor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-satir.tamam { border-left-color: #4caf50; }
.ac-satir.tamam .ac-satir-ikon { color: #4caf50; }
.ac-satir.uyari { border-left-color: #f0b23c; }
.ac-satir.uyari .ac-satir-ikon { color: #f0b23c; }
.ac-satir.hata { border-left-color: #e05555;
                 background: rgba(224, 85, 85, 0.08); }
.ac-satir.hata .ac-satir-ikon { color: #e05555; }
.ac-satir.bilinmiyor .ac-satir-ikon { color: var(--soluk); opacity: 0.7; }
/* Mesaj satiri */
.ac-mesaj {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 8px;
  border-left: 3px solid var(--cizgi);
  border-radius: 0 4px 4px 0;
  background: var(--giris-arka);
}
.ac-mesaj-ikon { font-size: 12px; flex: 0 0 auto; margin-top: 1px; }
.ac-mesaj-orta { flex: 1 1 auto; min-width: 0;
                 display: flex; flex-direction: column; gap: 2px; }
.ac-mesaj-metin { font-size: 11.5px; color: var(--metin);
                  line-height: 1.45; word-break: break-word; }
.ac-mesaj-tekrar {
  font-size: 9.5px; font-family: monospace;
  background: var(--dugme-arka);
  border-radius: 6px; padding: 0 5px;
  color: var(--soluk);
}
.ac-mesaj-alt { font-size: 9.5px; color: var(--soluk);
                letter-spacing: 0.4px; }
.ac-mesaj.acil { border-left-color: #ff3b3b;
                 background: rgba(255, 59, 59, 0.1); }
.ac-mesaj.acil .ac-mesaj-ikon { color: #ff3b3b; }
.ac-mesaj.hata { border-left-color: #e05555; }
.ac-mesaj.hata .ac-mesaj-ikon { color: #e05555; }
.ac-mesaj.uyari { border-left-color: #f0b23c; }
.ac-mesaj.uyari .ac-mesaj-ikon { color: #f0b23c; }
.ac-mesaj.dikkat { border-left-color: #d8c95a; }
.ac-mesaj.dikkat .ac-mesaj-ikon { color: #d8c95a; }
.ac-mesaj.bilgi .ac-mesaj-ikon { color: var(--soluk); }
/* Parametre satiri */
.ac-param {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--giris-arka);
  cursor: pointer;
}
.ac-param:hover { background: var(--dugme-hover); }
.ac-param-sol { flex: 1 1 auto; min-width: 0;
                display: flex; flex-direction: column; gap: 1px; }
.ac-param-ad { font-size: 11px; font-family: monospace;
               color: var(--metin); }
.ac-param-aciklama { font-size: 9.5px; color: var(--soluk);
                     overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.ac-param-sag { flex: 0 0 auto; max-width: 155px;
                display: flex; flex-direction: column;
                align-items: flex-end; gap: 1px; }
.ac-param-deger { font-size: 12px; font-family: monospace;
                  font-weight: 600; color: var(--interceptor); }
.ac-param-anlam { font-size: 9.5px; color: var(--soluk);
                  max-width: 155px;
                  overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
/* Alt bar */
.ac-alt-bar {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 8px 10px;
  border-top: 1px solid var(--cizgi);
}
.ac-alt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--interceptor); border: none; border-radius: 4px;
  color: #fff; padding: 6px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer;
}
.ac-alt-btn:hover { filter: brightness(1.1); }
.ac-alt-btn-ikincil {
  background: var(--dugme-arka); color: var(--metin);
}
.ac-alt-btn-ikincil:hover { background: var(--dugme-hover); filter: none; }

/* ===== ACILIR MENU (DROPDOWN) — hedef ve dron kartlari ===== */
.dk-menu-btn {
  position: relative;
  background: none; border: none;
  color: var(--soluk); font-size: 14px;
  cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.dk-menu-btn:hover { color: var(--metin); background: var(--dugme-hover); }
.dk-menu-dropdown {
  position: fixed;
  /* top/left JS tarafindan hesaplanir — burada sabit deger yok */
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 2500;
  padding: 4px 0;
  display: none;
}
.dk-menu-dropdown.acik { display: block; }
.dk-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--metin);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.dk-menu-item:hover { background: var(--dugme-hover); }
.dk-menu-item i { width: 16px; text-align: center; color: var(--soluk); font-size: 12px; }
.dk-menu-item.tehlikeli { color: var(--kotu); }
.dk-menu-item.tehlikeli i { color: var(--kotu); }
.dk-menu-ayrac {
  height: 1px; background: var(--cizgi);
  margin: 4px 8px;
}

/* =================================================================
   UDP MAVLINK YAYIN ROZETI (dron kart basligi)
   ================================================================= */
.dk-udp-rozet {
  font-family: Consolas, monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--iyi) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--iyi) 35%, transparent);
  color: var(--iyi);
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: help;
}

/* =================================================================
   FAILSAFE POPUP
   ================================================================= */
.fs-popup { width: 390px; max-width: 94vw; }
.fs-tip-satir {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 11px; font-weight: 600; color: var(--metin);
}
.fs-tip-satir i { color: var(--interceptor); font-size: 13px; }
.fs-tip-not { margin-left: auto; font-weight: 400; font-size: 9px; color: var(--soluk); }
.fs-icerik { max-height: 430px; overflow-y: auto; padding: 4px 8px 6px; }
.fs-icerik::-webkit-scrollbar { width: 8px; }
.fs-icerik::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--soluk) 45%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.fs-yukleniyor {
  padding: 22px 10px; text-align: center;
  color: var(--soluk); font-size: 11px;
}
.fs-grup { margin-top: 8px; }
.fs-grup:first-child { margin-top: 2px; }
.fs-grup-baslik {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  color: var(--interceptor);
  padding: 4px 2px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 3px;
}
.fs-grup-baslik i { font-size: 10px; }
.fs-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 4px;
  border-radius: 4px;
  transition: background .15s, opacity .2s;
}
.fs-satir:hover { background: color-mix(in srgb, var(--metin) 5%, transparent); }
.fs-etiket { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fs-etiket span { font-size: 11px; color: var(--metin); }
.fs-etiket code {
  font-family: Consolas, monospace; font-size: 8.5px;
  color: var(--soluk); background: none; padding: 0;
}
.fs-kontrol { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.fs-select {
  max-width: 165px; font-size: 10.5px; padding: 3px 5px;
  background: var(--giris-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 4px;
}
.fs-sayi {
  width: 78px; font-size: 11px; padding: 3px 6px; text-align: right;
  font-family: Consolas, monospace;
  background: var(--giris-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 4px;
}
.fs-birim { font-size: 9px; color: var(--soluk); width: 26px; }
.fs-satir.fs-bekliyor { opacity: .5; }
.fs-satir.fs-tamam .fs-select,
.fs-satir.fs-tamam .fs-sayi { border-color: var(--iyi); box-shadow: 0 0 0 1px var(--iyi); }
.fs-satir.fs-hata .fs-select,
.fs-satir.fs-hata .fs-sayi { border-color: var(--kotu); box-shadow: 0 0 0 1px var(--kotu); }
.fs-alt-not {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--cizgi);
  font-size: 9.5px; color: var(--soluk);
}
.fs-alt-not i { color: var(--interceptor); }

/* =================================================================
   KALIBRASYON POPUP
   ================================================================= */
.kalib-popup { width: 400px; max-width: 94vw; }
.kalib-govde {
  max-height: 460px; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.kalib-govde::-webkit-scrollbar { width: 8px; }
.kalib-govde::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--soluk) 45%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.kalib-kart {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  background: color-mix(in srgb, var(--metin) 3%, transparent);
}
.kalib-kart.kalib-uyari {
  border-color: color-mix(in srgb, var(--kotu) 50%, transparent);
  background: color-mix(in srgb, var(--kotu) 6%, transparent);
}
.kalib-ikon {
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--interceptor) 12%, transparent);
  color: var(--interceptor); font-size: 15px;
}
.kalib-uyari .kalib-ikon {
  background: color-mix(in srgb, var(--kotu) 15%, transparent);
  color: var(--kotu);
}
.kalib-metin { min-width: 0; }
.kalib-ad { font-size: 11.5px; font-weight: 700; color: var(--metin); }
.kalib-acik { font-size: 9.5px; color: var(--soluk); line-height: 1.45; margin-top: 1px; }
.kalib-btnler { display: flex; flex-direction: column; gap: 4px; }
.kalib-btn {
  font-size: 9.5px; padding: 4px 9px; border-radius: 4px;
  border: 1px solid var(--cizgi);
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.kalib-btn:hover {
  border-color: var(--interceptor);
  background: color-mix(in srgb, var(--interceptor) 12%, transparent);
}
.kalib-btn.iyi:hover {
  border-color: var(--iyi);
  background: color-mix(in srgb, var(--iyi) 12%, transparent);
}
.kalib-btn.kotu { border-color: color-mix(in srgb, var(--kotu) 45%, transparent); }
.kalib-btn.kotu:hover {
  border-color: var(--kotu);
  background: color-mix(in srgb, var(--kotu) 12%, transparent);
}
.kalib-bar-kutu {
  grid-column: 1 / -1;
  position: relative;
  height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--giris-arka);
  border: 1px solid var(--cizgi);
}
.kalib-bar { height: 100%; width: 0%; background: var(--interceptor); transition: width .3s; }
.kalib-bar-yazi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--metin); text-shadow: 0 0 3px rgba(0,0,0,.5);
}

/* ================================================================
   HARITA AYARLARI POPUP + HARITA ARAMA KUTUSU
   ================================================================ */
#haritaPopup {
  position: fixed; top: 50px; right: 60px;
  width: 340px; max-height: 82vh; overflow-y: auto;
  background: var(--panel-arka); border: 1px solid var(--cizgi);
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 2600; padding: 0;
  color: var(--metin); font-size: 13px;
}
#haritaPopup.popup-gizli { display: none; }

/* Genel combobox stili */
.gcs-select {
  width: 100%; padding: 8px 10px;
  background: var(--dugme-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 4px;
  font-size: 12px; cursor: pointer;
  font-family: inherit; outline: none; box-sizing: border-box;
}
.gcs-select:hover { border-color: var(--interceptor); }
.gcs-select option { background: var(--panel); color: var(--metin); }

/* Anahtar (checkbox) listesi */
.hrt-anahtar-liste { display: flex; flex-direction: column; gap: 7px; }
.hrt-anahtar {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; font-size: 12px; user-select: none;
}
.hrt-anahtar input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--interceptor);
  cursor: pointer; flex-shrink: 0; margin: 0;
}

/* Slider satiri */
.hrt-slider-satir { display: flex; align-items: center; gap: 10px; }
.hrt-slider-satir input[type="range"] { flex: 1; accent-color: var(--interceptor); }
.hrt-slider-deger {
  flex: 0 0 auto; min-width: 44px; text-align: right;
  font-family: Consolas, monospace; font-size: 11px; color: var(--soluk);
}

/* v2.1.7c: Harita arac grubu - sag ustte DIKEY dugme sutunu
   (arama + cetvel; tam ekranda yuzer ust barla cakismaz) */
#haritaAracGrubu {
  /* v2.2.0: harita araclari SOL ust koseye tasindi */
  position: absolute; top: 10px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 15;
}
#haritaAracGrubu > button {
  width: 33px; height: 33px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--panel-arka) 90%, transparent);
  border: 1px solid var(--cizgi); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  color: var(--soluk); font-size: 13px; cursor: pointer;
  backdrop-filter: blur(4px); padding: 0;
}
#haritaAracGrubu > button:hover { color: var(--metin); border-color: var(--soluk); }
/* v2.4.120 (IS62): TURKBEY KISAYOL DUGMESI.
   Kardes dugmeler Font Awesome ikonu tasir ve rengini
   `color` degiskeninden alir. Bu dugme bir GORSEL tasidigi icin
   renk degiskeni islemez; onun yerine solukluk kullanilir ve
   ustune gelindiginde tam parlakliga cikar. Boylece kardesleriyle
   ayni sonme/canlanma davranisini gosterir.
   Logo kendi mavi zeminini tasidigi icin dugme cercevesiyle
   catismamasi adina 3px ic bosluk birakilir. */
/* v2.4.120 (IS62): Dugme kutusunun olcusu `dugme_birlik.css`
   yalniz-ikon sozlesmesinden gelir (--dgm-kare) ve orada
   `padding: 0 !important` dayatilir. Bu yuzden ic bosluk
   yastikla DEGIL, gorseli kutudan kucuk tutarak verilir.
   Sabit piksel yazilmaz: olcu neye ayarlanirsa gorsel oraninda
   kucuk kalir. */
#haritaAracGrubu > button.arac-logo img {
  width: 82%; height: 82%; object-fit: contain;
  border-radius: 3px; display: block;
  opacity: .82; transition: opacity .15s ease;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
#haritaAracGrubu > button.arac-logo:hover img { opacity: 1; }
#btnHaritaArama.aktif {
  color: #fff; background: #2563eb; border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(37,99,235,.55);
}
/* v2.4.34: KONUM ALINIYOR gostergesi.
   Geolocation izin istemi saniyeler surebilir; dugme tepkisiz
   gorunmemeli. Cift tiklama korumasi JS tarafinda (konumIsteniyor). */
#haritaAracGrubu > button.arac-bekliyor {
  color: #fbbf24; border-color: #f59e0b;
  animation: aracBekle 1s ease-in-out infinite;
  cursor: progress;
}
@keyframes aracBekle {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 12px rgba(245,158,11,.7); }
}

/* Tam ekranda grup, yuzer ust barin altina insin */
body.tam-ekran-modu #haritaAracGrubu { top: 12px; }

/* v2.1.7c: Arama popup'i (tasinabilir) */
#haritaAramaPopup {
  /* v2.2.0: arac grubu solda; popup da solda acilir */
  position: fixed; top: 70px; left: 60px;
  width: 340px; z-index: 3000;
  background: var(--panel-arka); border: 1px solid var(--cizgi);
  border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  overflow: visible;
}
#haritaAramaPopup.popup-gizli { display: none; }
#haritaAramaPopup .popup-baslik { cursor: move; }

/* Arama kutusu artik popup icinde (overlay degil) */
#haritaAramaKutu {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  width: auto; margin: 8px; padding: 7px 11px; box-sizing: border-box;
  background: color-mix(in srgb, var(--dugme-arka, #202833) 60%, transparent);
  border: 1px solid var(--cizgi); border-radius: 6px;
}
#haritaAramaKutu > i { color: var(--soluk); font-size: 12px; flex-shrink: 0; }
#btnCetvel:hover { color: var(--metin); border-color: var(--soluk); }
#btnCetvel.aktif {
  color: #fff; background: #2563eb; border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(37,99,235,.55);
}
/* Cetvel modunda harita imleci */
#haritaAlan.cetvel-modu #cesiumContainer { cursor: crosshair; }
/* v2.1.1: Statusbar zoom gostergesi */
#zoomDurum { font-family: Consolas, monospace; color: var(--soluk); font-size: 11px; }
#haritaAramaGiris {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--metin); font-size: 12px; font-family: inherit;
  padding: 0; margin: 0;
}
#haritaAramaGiris::placeholder { color: var(--soluk); }
#btnAramaTemizle {
  flex: 0 0 auto; background: none !important; border: none !important;
  cursor: pointer; color: var(--soluk); font-size: 12px; padding: 2px 4px;
}
#btnAramaTemizle:hover { color: var(--kotu); }

/* Arama sonuc listesi */
#haritaAramaSonuclar {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: var(--panel-arka); border: 1px solid var(--cizgi);
  border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
#haritaAramaSonuclar.popup-gizli { display: none; }
.hrt-arama-sonuc {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; cursor: pointer;
  font-size: 11px; line-height: 1.45;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.hrt-arama-sonuc:last-child { border-bottom: none; }
.hrt-arama-sonuc:hover { background: var(--dugme-hover); }
.hrt-arama-sonuc i { color: var(--interceptor); font-size: 11px; margin-top: 2px; flex-shrink: 0; }
.hrt-arama-sonuc span { flex: 1; min-width: 0; word-break: break-word; }
.hrt-arama-bos {
  padding: 12px; text-align: center;
  color: var(--soluk); font-size: 11px;
}

/* ================================================================
   EVRENSEL SIK INCE SCROLLBAR
   Tum popup, panel, liste ve modal kaydirilabilir alanlari icin
   (.sabit-icerik / .yuzen-icerik desenini genellestirir)
   ================================================================ */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--soluk) 45%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--soluk) 75%, transparent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--soluk) 45%, transparent) transparent;
}
/* Konsol: koyu zeminde de ayni sik desen (eski 6px gri kurali ezilir) */
#konsolKutu::-webkit-scrollbar { width: 8px; }
#konsolKutu::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
#konsolKutu::-webkit-scrollbar-thumb {
  background: rgba(122, 138, 153, .45);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}
#konsolKutu::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 138, 153, .75);
  background-clip: padding-box;
}


/* =====================================================================
   MENU CUBUGU (ust bar klasik menu) - 20260726g
   ===================================================================== */
#menubar {
  display: flex; align-items: stretch; align-self: stretch;
  user-select: none;
}
.mb-item { position: relative; display: flex; align-items: stretch; }
.mb-etiket {
  display: flex; align-items: center; padding: 0 12px;
  font-size: 12px; color: var(--metin); cursor: pointer;
  white-space: nowrap;
}
.mb-etiket:hover { background: var(--dugme-arka); color: var(--beyaz); }
.mb-item.acik .mb-etiket { background: var(--dugme-arka); color: var(--beyaz); }
.mb-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 2600;
  min-width: 220px; padding: 4px 0;
  background: var(--panel-arka); border: 1px solid var(--cizgi);
  border-radius: 0 0 6px 6px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.mb-item.acik .mb-dropdown { display: block; }
.mb-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12px; color: var(--metin);
  cursor: pointer; white-space: nowrap;
}
.mb-oge:hover { background: var(--dugme-arka); color: var(--beyaz); }
.mb-oge i { width: 15px; text-align: center; font-size: 12px; color: var(--soluk); }
.mb-oge:hover i { color: var(--interceptor); }
.mb-ayrac { height: 1px; margin: 4px 8px; background: var(--cizgi); }
/* v2.4.0: haritada kamera onizleme popup'i */
.kam-oniz-popup {
  position: fixed;
  width: 280px;
  z-index: 1600;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  overflow: hidden;
  color: var(--metin);
}
/* v2.4.24: geometri TEK TASARIM kuralindan gelir (stil.css:1572).
   Burada yalnizca bu pencereye ozel farklar kalir. */
.kam-oniz-baslik {
  /* geometri yok */
}
.kam-oniz-baslik i.fa-video { margin-right: 5px; opacity: .8; }
.kam-oniz-baslik button {
  background: none !important; border: none !important;
  color: var(--metin); cursor: pointer; font-size: 14px; padding: 2px 4px;
}
.kam-oniz-baslik button:hover { color: var(--kotu); }
.kam-oniz-video {
  height: 168px; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.kam-oniz-medya {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.kam-oniz-video.kam-hata::after {
  content: "\26a0 Yay\131n al\131nam\131yor";
  color: #ff6b6b; font-size: 11px; position: absolute;
}
/* v2.4.0: dropdown ici kucuk bolum basligi (AI > Kutuphane) */
.mb-alt-baslik {
  padding: 4px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--soluk);
  text-transform: uppercase;
  user-select: none;
  cursor: default;
}
/* Panel ac/kapat ogeleri: tik ikonu acikken gorunur, kapaliyken soluk bosluk */
.mb-panel-toggle .mb-tik { color: var(--interceptor); }
.mb-panel-toggle.pasif .mb-tik { visibility: hidden; }
/* v2.3.1: kapali durumda metin gri DEGIL; yalnizca tik gizlenir */
.mb-panel-toggle.pasif span { color: inherit; }

/* ALT navigasyonu: hizlandirici harfler normalde cizgisiz; ALT modunda altcizili */
u.mb-hizli { text-decoration: none; }
#menubar.alt-aktif u.mb-hizli { text-decoration: underline; text-underline-offset: 2px; }
#menubar.alt-aktif .mb-etiket { outline: 1px dashed color-mix(in srgb, var(--interceptor) 45%, transparent); outline-offset: -1px; }
/* Ok tuslariyla gezinirken odakli oge (hover ile ayni gorunum) */
.mb-oge.odak { background: var(--dugme-arka); color: var(--beyaz); }
.mb-oge.odak i { color: var(--interceptor); }

/* LOG YONETIMI POPUP'I: durum satiri + progress bar + indir dugmesi */
/* v2.4.23: popup dar ve tam yuksek; ust bosluk kaldirildi, liste
   alani esnek buyur (eskiden .dk-pp-sonuc min-height:100px + eski
   .dk-log-* kurallari nedeniyle ustte bos alan olusuyordu). */
.dk-log-popup { width: 560px; height: 480px; max-height: 86vh; }
.dk-log-popup .dk-pp-sonuc {
  flex: 1 1 auto; min-height: 0; max-height: none;
  padding: 0 10px 8px; overflow-y: auto;
}
.dk-log-popup .dk-pp-tablo { gap: 0; }
.dk-log-durum { padding: 8px 12px 6px; flex: 0 0 auto; }
.dk-log-durum-satir {
  display: flex; align-items: center; gap: 10px;
}
.dk-log-durum-metin {
  font-size: 11px; color: var(--soluk);
  flex: 1 1 auto; min-width: 0; opacity: 1;
}
.dk-log-durdur-btn {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; cursor: pointer;
  background: color-mix(in srgb, var(--kotu, #dc2626) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--kotu, #dc2626) 55%, transparent);
  color: #ffbdb5;
}
.dk-log-durdur-btn:hover {
  background: color-mix(in srgb, var(--kotu, #dc2626) 38%, transparent);
  color: #fff;
}
/* Siralanabilir tablo basligi */
.dk-log-tablo-basi {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 92px 84px;
  align-items: center; gap: 8px;
  padding: 4px 18px 5px 18px; flex: 0 0 auto;
  border-bottom: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--metin) 4%, transparent);
}
.dk-log-th {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 2px 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--soluk); cursor: pointer; text-transform: uppercase;
}
.dk-log-th:hover { color: var(--metin); }
.dk-log-th.aktif { color: var(--interceptor); }
.dk-log-th .dk-log-ok { font-size: 9px; opacity: .55; }
.dk-log-th.aktif .dk-log-ok { opacity: 1; }
/* v2.4.34: ilk sutun (LOG adi) sola yaslidir. Kural yoktu; ust
   .dk-log-th varsayilanina dusuyordu. Acik yazmak, izgara sutun
   siralamasinin CSS'te de okunabilir olmasini saglar. */
.dk-log-th-ad { justify-content: flex-start; }
.dk-log-th-tarih, .dk-log-th-boyut { justify-content: flex-end; }
.dk-log-th-islem {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--soluk); text-transform: uppercase; text-align: center;
}
.dk-log-bar {
  margin-top: 6px; height: 6px; border-radius: 3px;
  background: var(--dugme-arka); overflow: hidden; position: relative;
}
.dk-log-bar-dolu {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--interceptor), color-mix(in srgb, var(--interceptor) 55%, #fff));
  transition: width .3s ease;
}
.dk-log-bar-dolu.belirsiz {
  width: 35%;
  animation: dkLogKayan 1.2s linear infinite;
}
@keyframes dkLogKayan {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
/* v2.4.23: satirlar basliktaki grid ile ayni kolon yapisini kullanir */
.dk-log-satir {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 92px 84px;
  align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 4px; cursor: default;
  border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 55%, transparent);
  background: none;
}
.dk-log-satir:last-child { border-bottom: none; }
.dk-log-satir:hover { background: var(--dugme-hover); }
.dk-log-satir.indiriliyor { background: color-mix(in srgb, var(--interceptor) 14%, transparent); }
.dk-log-satir .dk-log-ad {
  font-family: Consolas, monospace; font-size: 11.5px;
  font-weight: 600; color: var(--metin); white-space: nowrap;
}
.dk-log-satir .dk-log-tarih {
  font-family: Consolas, monospace; font-size: 11px;
  color: var(--soluk); text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 1;
  flex: none;
}
.dk-log-satir .dk-log-boyut {
  font-family: Consolas, monospace; font-size: 11.5px;
  color: var(--interceptor); font-weight: 600; text-align: right;
  white-space: nowrap;
}
.dk-log-indir-btn {
  justify-self: stretch; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; height: 24px; padding: 0 6px; border-radius: 4px;
  background: var(--dugme-arka); border: 1px solid var(--cizgi);
  color: var(--interceptor); font-size: 10.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden;
}
.dk-log-indir-btn i { font-size: 10px; }
.dk-log-indir-btn:hover:not(:disabled) {
  background: var(--dugme-hover); color: var(--beyaz);
}
.dk-log-indir-btn:disabled { opacity: .35; cursor: not-allowed; }
.dk-log-indir-btn.durdur {
  color: #ffbdb5;
  background: color-mix(in srgb, var(--kotu, #dc2626) 22%, transparent);
  border-color: color-mix(in srgb, var(--kotu, #dc2626) 55%, transparent);
}
.dk-log-indir-btn.durdur:hover {
  background: color-mix(in srgb, var(--kotu, #dc2626) 38%, transparent);
  color: #fff;
}

/* Menuye tasinan eski ust bar dugmeleri gizli tutulur (islevleri delege edilir) */
.gizli-tasindi { display: none !important; }
/* v2.4.5: kamera modali dinamik alan gizleme — protokole gore
   kamCihazSatir, kamDjiSatir ve URL satiri gosterilir/gizlenir.
   (Genel .gizli tanimi dron karti akordeonunu bozacagi icin
   kapsam kamera modaliyla sinirlidir.) */
#kamModalKutu .gizli { display: none !important; }

/* Profil kutusu artik en sagda, yalniz avatar */
#profilKutu img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* Profil menusu sag hizali acilir */
#profilMenu { left: auto !important; right: 10px; }

/* ===================================================================== */
/* EK BLOK v2.0.0 - Hakkinda popup, Log popup, ALT nav, panel tik        */
/* ===================================================================== */
#yzHakkinda { width: 320px; }
.hk-icerik { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 16px; text-align: center; }
#hkLogoKutu { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; }
#hkLogoKutu:hover { background: transparent; opacity: .85; }
#hkLogoKutu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hk-program { font-size: 20px; font-weight: 700; letter-spacing: 3px; color: var(--vurgu, #4da3ff); }
.hk-surum { font-size: 12px; opacity: .8; }
.hk-ayrac { width: 80%; height: 1px; background: rgba(255,255,255,.12); margin: 8px 0; }
.hk-baslik { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; }
.hk-ekip { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; line-height: 1.9; }
.hk-firma { font-size: 10px; opacity: .55; margin-top: 10px; letter-spacing: .5px; }
.mb-oge .mb-tik { display: inline-block; width: 14px; text-align: center; margin-right: 4px; color: var(--vurgu, #4da3ff); }
.mb-oge.pasif .mb-tik { visibility: hidden; }
.mb-oge.pasif { opacity: 1; }
[data-hizli] .hz-harf { text-decoration: underline; text-underline-offset: 2px; }
.mb-oge.klavye-odak, .mb-item.klavye-odak > .mb-etiket { outline: 1px solid var(--vurgu, #4da3ff); outline-offset: -1px; background: rgba(77,163,255,.12); }
/* v2.4.23: asagidaki eski v2.0.0 log stilleri kaldirildi — yeni
   grid tabanli .dk-log-satir / .dk-log-durum kurallarini eziyor ve
   popup icinde bos alan olusturuyordu. Yalniz kullanilmayan
   yardimci siniflar korundu. */
.dk-log-bos { text-align: center; opacity: .6; font-size: 12px; padding: 12px 0; }

/* v2.0.1: hakkinda logosu arka plansiz */
#hkLogoKutu, #hkLogoKutu img { background: transparent !important; box-shadow: none !important; border: none !important; }

/* ============ v2.1.0: km/h ikincil hiz gosterimleri ============ */
.dk-kmh{
  display:block; font-size:9px; line-height:1.15;
  color:var(--soluk); font-weight:400; letter-spacing:.2px;
}
.ang-kmh{
  font-size:10px; color:var(--soluk); margin-left:6px; white-space:nowrap;
}

/* ============ v2.1.0: Offline harita cache yonetimi ============ */
.hrt-cache-satir { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hrt-cache-bilgi { font-size:11px; color:var(--soluk); }
.hrt-cache-bilgi b { color:var(--metin); font-weight:600; }
.hrt-cache-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; font-size:11px; border-radius:6px; cursor:pointer;
  background: color-mix(in srgb, var(--metin) 8%, transparent);
  border:1px solid var(--cizgi, #2a3a4d); color:var(--metin);
  transition: background .15s;
}
.hrt-cache-btn:hover { background: color-mix(in srgb, var(--metin) 16%, transparent); }
.hrt-cache-btn.tehlike { color:#ff7a6b; border-color: color-mix(in srgb, #ff7a6b 40%, transparent); }
.hrt-cache-btn.tehlike:hover { background: color-mix(in srgb, #ff7a6b 14%, transparent); }
.hrt-cache-btn:disabled { opacity:.45; cursor:not-allowed; }
.hrt-cache-prog {
  position:relative; height:8px; border-radius:4px; overflow:hidden;
  background: color-mix(in srgb, var(--metin) 10%, transparent);
  margin-top:6px; display:none;
}
.hrt-cache-prog.aktif { display:block; }
.hrt-cache-prog-ic {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--vurgu, #38bdf8), color-mix(in srgb, var(--vurgu, #38bdf8) 60%, #22c55e));
  transition: width .25s;
}
.hrt-cache-prog-yazi { font-size:10px; color:var(--soluk); margin-top:4px; display:none; }
.hrt-cache-prog-yazi.aktif { display:block; }
.hrt-cache-zoom { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; color:var(--soluk); }
.hrt-cache-zoom select { width:64px; }

/* ============================================================
   ANGAJMAN IZLEME POPUP
   ============================================================ */
.angi-popup {
  position: fixed;
  top: 80px; right: 20px;
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 9000;
  font-size: 12px;
  color: var(--metin);
}
/* v2.4.24: geometri TEK TASARIM kuralindan gelir (stil.css:1572). */
.angi-baslik {
  /* geometri yok */
}
.angi-baslik i.fa-satellite-dish { color: var(--kotu); }
.angi-kapat {
  margin-left: auto;
  background: none !important; border: none !important;
  color: var(--metin); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.angi-kapat:hover { color: var(--kotu); }
.angi-icerik { padding: 8px 10px; overflow-y: auto; }
.angi-bos {
  text-align: center; padding: 24px 12px;
  color: var(--soluk); font-size: 12px;
}
.angi-bos i { margin-right: 6px; }
.angi-kart {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}
:root[data-tema="acik"] .angi-kart { background: rgba(0,0,0,.05); }
.angi-kart:last-child { margin-bottom: 0; }
.angi-kart-baslik {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; font-weight: 600; font-size: 12px;
}
.angi-dron { color: var(--iyi); }
.angi-ok { color: var(--kotu); font-size: 14px; font-weight: 700; }
.angi-hedef { color: var(--uyari); }
.angi-progress {
  height: 4px; background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
:root[data-tema="acik"] .angi-progress { background: rgba(0,0,0,.1); }
.angi-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--kotu), var(--uyari));
  border-radius: 2px; transition: width .4s ease;
}
.angi-detay { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.angi-satir {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0; min-width: 0;
  border-bottom: 1px dashed var(--cizgi);
}
.angi-etiket { color: var(--soluk); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.angi-deger { font-family: Consolas, monospace; font-size: 11px; font-weight: 600; white-space: nowrap; }
.angi-vurgu { color: var(--uyari); font-size: 12px; }
.angi-kart-alt { margin-top: 8px; text-align: right; }
.angi-iptal-btn {
  background: rgba(255,93,93,.12); border: 1px solid rgba(255,93,93,.45);
  color: var(--kotu); padding: 4px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 700; cursor: pointer;
  letter-spacing: .06em;
  transition: background .2s;
}
.angi-iptal-btn:hover { background: rgba(255,93,93,.28); }
.angi-iptal-btn i { margin-right: 4px; }

/* =====================================================================
   BOLUM POPUP (v2.1.7): panel bolumlerinin ayrilabilir popup hali
   ===================================================================== */
.bolum-popup {
  position: fixed;
  left: 120px;
  top: 90px;
  width: 320px;
  height: 420px;
  min-width: 240px;
  min-height: 180px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  z-index: 2450;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--metin);
}
/* v2.4.24: geometri TEK TASARIM kuralindan gelir (stil.css:1572). */
.bolum-popup-baslik {
  /* geometri yok */
}
.bolum-popup-ad {
  font-size: var(--pencere-baslik-fs);
  font-weight: var(--pencere-baslik-fw);
  letter-spacing: var(--pencere-baslik-ls);
  color: var(--metin);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bolum-popup-ad i.fa-solid { width: 16px; text-align: center; opacity: .85; }
.bolum-popup-btn {
  background: none;
  border: none;
  color: var(--soluk);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.bolum-popup-btn:hover { color: var(--beyaz); background: rgba(128,128,128,.18); }
.bolum-popup-govde {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.bolum-popup-govde .panel-toolbar,
.bolum-popup-govde .sabit-baslik { flex: 0 0 auto; }
.bolum-popup-govde .sabit-icerik {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Popup icindeki toolbar'da "popup olarak ac" dugmesi gereksiz */
.bolum-popup-icinde .bolum-ayir-btn { display: none !important; }
/* Cift baslik onlemi: baslik zaten popup cubugunda; icerideki tekrar gizlenir */
.bolum-popup-icinde .tb-baslik { display: none !important; }
/* Islevsel dugmesi olmayan h2 basliklar (or. takipBaslik) popup icinde tamamen gizli */
h2.sabit-baslik.bolum-popup-icinde.bp-bos-baslik { display: none !important; }
/* Toolbar'da kalan islevsel dugmeler sag tarafta hizali kalsin */
.bolum-popup-govde .panel-toolbar.bolum-popup-icinde {
  justify-content: flex-end;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* =====================================================================
   POPUP RESIZE (v2.1.7): sag-alt kose boyutlandirma tutamaci
   ===================================================================== */
.popup-boyut-tutamac {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 5;
  opacity: .55;
}
.popup-boyut-tutamac::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--soluk);
  border-bottom: 2px solid var(--soluk);
  border-radius: 0 0 3px 0;
}
.popup-boyut-tutamac:hover { opacity: 1; }

/* ================================================================
   v2.1.7 - PILOT HAKKINDA / UYARI MERKEZI / ROL YONETIMI
   ================================================================ */

/* ---- Pilot Hakkinda popup ---- */
.ph-popup {
  position: fixed;
  width: 760px; height: 520px;
  min-width: 640px; min-height: 400px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  z-index: 2600;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--metin);
  font-size: 13px;
}
.ph-baslik .ph-baslik-ad { opacity: .65; font-weight: 400; font-size: 12px; }
.ph-govde { flex: 1; display: flex; min-height: 0; }
.ph-sol {
  flex: 0 0 190px;
  border-right: 1px solid var(--cizgi);
  padding: 8px 0;
  overflow-y: auto;
  background: rgba(0,0,0,.15);
}
:root[data-tema="acik"] .ph-sol { background: rgba(0,0,0,.05); }
.ph-modul {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--soluk);
  border-left: 3px solid transparent;
  user-select: none;
}
.ph-modul:hover { background: rgba(128,128,128,.12); color: var(--beyaz); }
.ph-modul.secili {
  background: rgba(53,208,255,.08);
  border-left-color: var(--interceptor);
  color: var(--beyaz);
}
.ph-modul i.fa-solid { width: 18px; text-align: center; }
.ph-sag { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 16px; }
.ph-liste-bos { opacity: .55; text-align: center; padding: 30px 10px; font-size: 13px; }
.ph-not { opacity: .6; font-size: 11px; margin: 4px 0 8px; }

/* Bilgiler formu */
.ph-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.ph-avatar-satir { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ph-avatar-satir img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--cizgi);
  background: #222;
}
.ph-form-ad { font-size: 15px; font-weight: 600; color: var(--beyaz); }
.ph-form-eposta { font-size: 12px; opacity: .6; }
.ph-form label { font-size: 11px; opacity: .7; margin-top: 8px; text-transform: uppercase; letter-spacing: .4px; }
.ph-form input, .ph-form select {
  background: var(--dugme-arka);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  border-radius: 4px; padding: 7px 9px; font-size: 13px;
}
.ph-form select:disabled { opacity: .5; cursor: not-allowed; }
.ph-form-alt { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ph-form-alt .onay-btn, .ry-alt .onay-btn {
  background: var(--interceptor); color: #06232a;
  border: none; border-radius: 4px; padding: 8px 16px;
  font-weight: 600; cursor: pointer; font-size: 13px;
}
.ph-form-alt .onay-btn:hover, .ry-alt .onay-btn:hover { filter: brightness(1.12); }
#phFormMesaj.basari, #ryMesaj.basari { color: var(--iyi); font-size: 12px; }
#phFormMesaj.hata, #ryMesaj.hata { color: var(--kotu); font-size: 12px; }

/* Program gecmisi / uyari listesi */
.ph-log-liste { display: flex; flex-direction: column; gap: 4px; }
.ph-log {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  background: rgba(128,128,128,.06);
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  font-size: 12px;
}
.ph-log-kat {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(53,208,255,.12); color: var(--interceptor);
}
.ph-log-kat.radar { background: rgba(255,176,46,.14); color: var(--caymaz); }
.ph-log-kat.angajman { background: rgba(255,93,93,.14); color: var(--kotu); }
.ph-log-kat.pilotaj, .ph-log-kat.gorev { background: rgba(61,220,132,.12); color: var(--iyi); }
.ph-log-govde { flex: 1; min-width: 0; }
.ph-log-islem { font-weight: 600; color: var(--beyaz); }
.ph-log-detay { opacity: .6; font-size: 11px; word-break: break-all; }
.ph-log-zaman { flex: 0 0 auto; opacity: .5; font-size: 11px; white-space: nowrap; }
.ph-uyari .ph-uyari-ikon { color: var(--uyari); }
.ph-uyari.okunmamis { border-left: 3px solid var(--uyari); }

/* Ucus listesi */
.ph-ucus-liste { display: flex; flex-direction: column; gap: 4px; }
.ph-ucus {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(128,128,128,.06);
  border: 1px solid var(--cizgi);
  border-radius: 5px; cursor: pointer;
  user-select: none;
}
.ph-ucus:hover { background: rgba(53,208,255,.07); border-color: var(--interceptor); }
.ph-ucus .gc-renk {
  flex: 0 0 auto; width: 10px; height: 10px;
  border-radius: 2px; display: inline-block;
}
.ph-ucus-govde { flex: 1; min-width: 0; }
.ph-ucus-ad { font-size: 13px; font-weight: 600; color: var(--beyaz); }
.ph-ucus-alt { font-size: 11px; opacity: .6; }
.ph-ucus-oynat { opacity: .5; cursor: pointer; padding: 4px; }
.ph-ucus-oynat:hover { opacity: 1; color: var(--interceptor); }

/* Ucus onizleme popup */
.ph-onizleme {
  position: fixed;
  width: 640px; height: 460px;
  min-width: 480px; min-height: 340px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  z-index: 2700;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--metin);
}
.ph-onizleme-govde { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#phOnHarita { flex: 1; min-height: 0; }
#phOnHarita .cesium-viewer-bottom { display: none; }

/* ---- Uyari merkezi ---- */
.uyari-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px; box-sizing: border-box;
  background: #e02d2d; color: #fff;
  border-radius: 8px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
#btnUyarilar .uyari-rozet {
  position: absolute; top: 1px; right: 1px;
}
#pmUyariRozet { margin-left: auto; }
@keyframes uyariSalla {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-6deg); }
}
#btnUyarilar.uyari-salla i.fa-bell { animation: uyariSalla .8s ease; display: inline-block; }
.um-popup {
  position: fixed;
  width: 380px; height: 420px;
  min-width: 320px; min-height: 240px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  z-index: 2800;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--metin);
  font-size: 13px;
}
.um-liste { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.um-uyari {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px;
  background: rgba(128,128,128,.06);
  border: 1px solid var(--cizgi);
  border-radius: 5px; font-size: 12px;
}
.um-uyari i { color: var(--uyari); margin-top: 2px; }
.um-uyari.okunmamis { border-left: 3px solid var(--uyari); background: rgba(255,176,46,.05); }
.um-govde { flex: 1; min-width: 0; }
.um-mesaj { line-height: 1.4; }
.um-zaman { opacity: .5; font-size: 11px; margin-top: 3px; }

/* ---- Rol yonetimi ---- */
.ry-popup {
  position: fixed;
  width: 620px; height: 480px;
  min-width: 520px; min-height: 380px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  z-index: 2650;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--metin);
  font-size: 13px;
}
.ry-govde { flex: 1; display: flex; min-height: 0; }
.ry-sol {
  flex: 0 0 160px;
  border-right: 1px solid var(--cizgi);
  padding: 8px 0; overflow-y: auto;
  background: rgba(0,0,0,.15);
}
:root[data-tema="acik"] .ry-sol { background: rgba(0,0,0,.05); }
.ry-rol {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; color: var(--soluk);
  border-left: 3px solid transparent;
  user-select: none;
}
.ry-rol:hover { background: rgba(128,128,128,.12); color: var(--beyaz); }
.ry-rol.secili {
  background: rgba(53,208,255,.08);
  border-left-color: var(--interceptor);
  color: var(--beyaz);
}
.ry-sag { flex: 1; min-width: 0; overflow-y: auto; padding: 12px 14px; }
.ry-grup {
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px;
  background: rgba(128,128,128,.04);
}
.ry-grup-baslik {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--interceptor);
  margin-bottom: 8px;
}
.ry-izin {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 2px; font-size: 13px; cursor: pointer;
  user-select: none;
}
.ry-izin input[type="checkbox"] { accent-color: var(--interceptor); }
.ry-izin input:disabled + span { opacity: .5; }
.ry-alt { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

/* Profil menusu rozet hizasi */
#pmUyarilar { position: relative; }

/* v2.1.7b: Rol ekleme/silme */
.ry-rol { position: relative; }
.ry-rol-sil {
  background: none; border: none; color: var(--soluk);
  cursor: pointer; font-size: 11px; padding: 2px 5px;
  margin-left: auto; border-radius: 4px; flex: 0 0 auto;
  opacity: 0; transition: opacity .15s;
}
.ry-rol:hover .ry-rol-sil { opacity: 1; }
.ry-rol-sil:hover { color: #e05555; background: rgba(224,85,85,.12); }
.ry-rol-ekle {
  display: flex; gap: 4px; align-items: center;
  margin-top: 8px; padding: 4px;
}
.ry-rol-ekle input {
  flex: 1 1 auto; min-width: 0;
  background: var(--girdi-arka, rgba(128,128,128,.12));
  border: 1px solid var(--cizgi); border-radius: 4px;
  color: var(--metin); font-size: 11px; padding: 5px 7px;
}
.ry-rol-ekle button {
  background: var(--vurgu, #2f6fb2); border: none; color: #fff;
  border-radius: 4px; cursor: pointer; font-size: 11px;
  padding: 5px 9px; flex: 0 0 auto;
}
.ry-rol-ekle button:hover { filter: brightness(1.15); }

/* =====================================================================
   v2.1.7b: TAM EKRAN MODU
   - Sol/sag paneller tamamen gizli (acik bolumler popup'a donusur,
     bolum_popup.js bolumTamEkranModu yonetir)
   - Ust bar ve alt bar: %80 genislik, kenarlardan 20px iceride,
     5px kose yaricapiyla harita uzerinde yuzer gorunum
   ===================================================================== */
body.tam-ekran-modu #solPanel,
body.tam-ekran-modu #sagPanel,
body.tam-ekran-modu #solTutamac,
body.tam-ekran-modu #sagTutamac { display: none !important; }

body.tam-ekran-modu #ustBar {
  position: absolute; top: 20px; left: 10%;
  width: 80%; flex: none;
  border-radius: 5px;
  border: 1px solid var(--cizgi);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
body.tam-ekran-modu #altBar {
  position: absolute; bottom: 20px; left: 10%;
  width: 80%; flex: none;
  border-radius: 5px;
  border: 1px solid var(--cizgi);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
/* Barlar akistan cikinca harita tum ekrani kaplasin */
body.tam-ekran-modu #anaAlan { position: absolute; inset: 0; }
/* Alt orta panel (konsol/grafik) tam ekranda yuzer alt bara BITISIK
   (statusbar 26px yukseklik + 20px alt bosluk = 46px) */
body.tam-ekran-modu #altOrtaPanel {
  bottom: 46px; left: 10%; right: auto; width: 80%;
  border-radius: 5px 5px 0 0; overflow: hidden;
}

/* =====================================================================
   v2.1.7c: UYARI TOAST BILDIRIMLERI (ekranin sag kenari)
   ===================================================================== */
#umToastKap {
  position: fixed; top: 60px; right: 0;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 4000; pointer-events: none;
  padding-right: 10px;
}
.um-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 9px;
  width: 320px; max-width: 84vw;
  padding: 10px 12px; box-sizing: border-box;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--uyari, #e8b93f);
  border-radius: 6px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  color: var(--metin); cursor: pointer;
  animation: umToastGiris .3s ease;
}
.um-toast > i { color: var(--uyari, #e8b93f); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.um-toast-icerik { flex: 1; min-width: 0; }
.um-toast-baslik {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--uyari, #e8b93f); margin-bottom: 3px;
}
.um-toast-mesaj { font-size: 12px; line-height: 1.45; word-break: break-word; }
.um-toast-kapat {
  background: none; border: none; color: var(--soluk);
  cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0;
}
.um-toast-kapat:hover { color: var(--kotu); }
@keyframes umToastGiris {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.um-toast-cikis { transform: translateX(110%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease; }

/* ---------------------------------------------------------------------
   v2.4.33: BILDIRIM SEVIYE RENKLERI
   Onceki surumde her bildirim ayni sari tonda ciktigi icin hata ile
   bilgi ayirt edilemiyordu. Artik `uyari_merkezi.js` toast'a bir
   `tip-*` sinifi veriyor; sol kenar cizgisi, ikon ve baslik ayni
   tonu paylasir. Renkler tema degiskenlerinden gelir, boylece acik
   temada da okunur kalir.
   --------------------------------------------------------------------- */
.um-toast.tip-hata        { border-left-color: var(--kotu); border-left-width: 4px; }
.um-toast.tip-hata > i,
.um-toast.tip-hata .um-toast-baslik   { color: var(--kotu); }

.um-toast.tip-uyari       { border-left-color: var(--uyari); }
.um-toast.tip-uyari > i,
.um-toast.tip-uyari .um-toast-baslik  { color: var(--uyari); }

.um-toast.tip-basari      { border-left-color: var(--iyi); }
.um-toast.tip-basari > i,
.um-toast.tip-basari .um-toast-baslik { color: var(--iyi); }

.um-toast.tip-bilgi       { border-left-color: var(--interceptor); }
.um-toast.tip-bilgi > i,
.um-toast.tip-bilgi .um-toast-baslik  { color: var(--interceptor); }

/* Fare uzerindeyken otomatik kapanma sayaci duruyor (JS); kullaniciya
   bunu belli eden hafif bir cerceve vurgusu */
.um-toast:hover { border-color: var(--soluk); }

/* ==== v2.1.8: DJI baglanti diyalogu ==== */
.bag-dji-aciklama{
  font-size:11px; color:var(--metin-soluk,#889);
  line-height:1.5; margin-top:6px; padding:8px 10px;
  background:rgba(120,140,180,.08); border-radius:4px;
}

/* v2.3.0: harita onbellek kaynak dagilim tablosu */
.hrt-cache-detay{margin-top:6px;overflow-x:auto;}
.hrt-cache-tablo{width:100%;border-collapse:collapse;font-size:10px;
  font-family:Consolas,monospace;}
.hrt-cache-tablo th,.hrt-cache-tablo td{padding:3px 6px;text-align:left;
  border-bottom:1px solid var(--girinti,#2a3542);white-space:nowrap;}
.hrt-cache-tablo th{color:var(--soluk);font-weight:600;
  text-transform:uppercase;font-size:9px;letter-spacing:.4px;}

/* ================= v2.3.1: POPUP ACAN MENU OGELERI CHECK ================ */
.mb-popup-toggle .mb-tik { color: var(--interceptor, var(--vurgu, #4da3ff)); }
.mb-popup-toggle.pasif .mb-tik { visibility: hidden; }

/* ===== v2.3.2: Sifremi unuttum + Yeni kullanici formu ===== */
.giris-unuttum {
  margin-top: 10px; text-align: center; font-size: 12px;
  color: var(--vurgu, #4da3ff); cursor: pointer;
  text-decoration: underline dotted; user-select: none;
}
.giris-unuttum:hover { filter: brightness(1.2); }
.giris-unuttum-bilgi {
  margin-top: 8px; padding: 8px 10px; font-size: 11.5px;
  line-height: 1.5; color: var(--metin2, #9db2c8);
  background: rgba(77, 163, 255, 0.08);
  border: 1px solid rgba(77, 163, 255, 0.25); border-radius: 6px;
}
/* v2.3.3: YENI KULLANICI ayri popup (tema uyumlu, profil menusunden) */
#yeniKulPopup {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  width: 340px; background: var(--panel-arka);
  border: 1px solid var(--cizgi); border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 1300;
  color: var(--metin); font-size: 12px;
}
#yeniKulPopup.popup-gizli { display: none; }
.yeni-kul-form {
  margin: 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.yeni-kul-form label {
  font-size: 10.5px; color: var(--soluk); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .4px;
}
.yeni-kul-form input, .yeni-kul-form select {
  padding: 6px 8px; font-size: 12px; border-radius: 5px;
  border: 1px solid var(--cizgi);
  background: var(--giris-arka); color: var(--metin);
  font-family: inherit;
}
.yeni-kul-form input:focus, .yeni-kul-form select:focus {
  outline: none; border-color: var(--soluk);
}
.yeni-kul-form .yk-alt {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.yeni-kul-form .yk-alt .onay-btn {
  padding: 6px 14px; font-size: 12px; cursor: pointer;
  background: #2e7d32; color: #fff; border: none; border-radius: 5px;
}
#ykMesaj { font-size: 11.5px; }
#ykMesaj.basari { color: var(--iyi); }
#ykMesaj.hata { color: var(--kotu); }

/* ===== v2.3.3: AVATAR (profil fotografi) ===== */
/* Resmi olmayan / yuklenemeyen kullanicilar icin yuvarlak ikon */
.avatar-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--dugme-arka);
  border: 1px solid var(--cizgi); color: var(--soluk);
  flex-shrink: 0;
}
#profilKutu .avatar-ikon { width: 26px; height: 26px; font-size: 13px; }
.profil-menu-ust .avatar-ikon { width: 36px; height: 36px; font-size: 17px; }
.kul-satir .avatar-ikon { width: 32px; height: 32px; font-size: 15px; }
.ph-avatar-satir .avatar-ikon { width: 56px; height: 56px; font-size: 26px; }
/* Fotograf yukle dugmesi (Pilot Hakkinda) */
.ph-foto-btnler { display: flex; gap: 6px; margin-left: auto; }
.ph-foto-btnler button {
  padding: 5px 10px; font-size: 11px; cursor: pointer;
  background: var(--dugme-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 5px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.ph-foto-btnler button:hover {
  background: var(--dugme-hover); border-color: var(--soluk);
}

/* ============================================================
   v2.4.0: AI KATMANI (Sunucular, Kutuphane, Tespitler)
   ============================================================ */
.ai-popup-icerik {
  padding: 10px 12px; overflow-y: auto;
  /* IS51-SERIT-PAYI: alt durum cubugu ~28px yer kaplar; pay
     eklenmezse AI panel icerigi seridin altina tasar. */
  max-height: calc(80vh - 72px);
  display: flex; flex-direction: column; gap: 8px;
}
.ai-arac-cubugu {
  display: flex; align-items: center; gap: 8px;
}
.ai-arac-cubugu button { white-space: nowrap; }
.ai-ara {
  flex: 1; min-width: 80px;
  background: var(--girdi-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 5px;
  padding: 6px 9px; font-size: 12px; outline: none;
}
.ai-ara:focus { border-color: var(--vurgu); }
.ai-bolum-baslik {
  margin-top: 6px; padding: 5px 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--soluk); border-bottom: 1px solid var(--cizgi);
}
.ai-filtre-cubugu {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ai-filtre-cubugu select, .ai-filtre-cubugu input[type=date] {
  background: var(--girdi-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 5px;
  padding: 6px 8px; font-size: 12px; outline: none;
}

/* --- liste satirlari --- */
.ai-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--cizgi);
  border-radius: 6px; background: var(--panel-arka2, transparent);
}
.ai-satir + .ai-satir { margin-top: 6px; }
.ai-satir:hover { border-color: var(--soluk); }
.ai-satir-bilgi { flex: 1; min-width: 0; }
.ai-satir-bilgi .ad {
  font-size: 13px; font-weight: 600; color: var(--metin);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-satir-bilgi .alt {
  font-size: 11px; color: var(--soluk); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-satir-btnlar { display: flex; gap: 5px; flex-shrink: 0; }
.ai-satir-btnlar button {
  background: transparent; border: 1px solid var(--cizgi);
  color: var(--soluk); border-radius: 5px; cursor: pointer;
  padding: 5px 8px; font-size: 11px;
}
.ai-satir-btnlar button:hover {
  color: var(--metin); border-color: var(--soluk);
  background: var(--dugme-hover);
}
.ai-satir-btnlar button.tehlike:hover {
  color: #fff; background: var(--kotu); border-color: var(--kotu);
}

/* --- AI sunucu durumu --- */
.ai-led {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: #777;
}
.ai-led.cevrimici { background: var(--iyi, #2e9e4f);
  box-shadow: 0 0 6px var(--iyi, #2e9e4f); }
.ai-led.cevrimdisi { background: var(--kotu, #c0392b); }
.ai-tip-rozet {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid;
}
.ai-tip-rozet.nvidia { color: #76b900; border-color: #76b900; }
.ai-tip-rozet.cpu { color: #4a90d9; border-color: #4a90d9; }
.ai-yuk-cubuk {
  width: 70px; height: 6px; border-radius: 3px; flex-shrink: 0;
  background: var(--girdi-arka); border: 1px solid var(--cizgi);
  overflow: hidden;
}
.ai-yuk-cubuk > div {
  height: 100%; background: var(--vurgu); transition: width .3s;
}

/* --- arama seviyesi rozetleri --- */
.sv-rozet {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid;
}
.sv-rozet.sv-guvenli { color: var(--iyi, #2e9e4f);
  border-color: var(--iyi, #2e9e4f); }
.sv-rozet.sv-guvensiz { color: #e67e22; border-color: #e67e22; }
.sv-rozet.sv-aranilan { color: var(--kotu, #c0392b);
  border-color: var(--kotu, #c0392b);
  animation: svYanip 1.2s ease-in-out infinite; }
@keyframes svYanip { 50% { opacity: .45; } }

/* --- kisi yuz mini galerisi --- */
.ai-yuz-mini {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px;
}
.ai-yuz-mini .yuz-kut {
  position: relative; width: 42px; height: 42px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid var(--cizgi);
}
.ai-yuz-mini img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ai-yuz-mini .yuz-sil {
  position: absolute; top: 0; right: 0;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  width: 15px; height: 15px; font-size: 9px; line-height: 1;
  cursor: pointer; border-radius: 0 0 0 5px; padding: 0;
}
.ai-yuz-mini .yuz-sil:hover { background: var(--kotu); }

/* --- modal perde (yuz kaydi, tespit detayi) --- */
.modal-perde {
  position: fixed; inset: 0; z-index: 1600;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-kutu {
  width: 420px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55); color: var(--metin);
  animation: onayGir .16s ease-out;
}
.modal-baslik {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  border-bottom: 1px solid var(--cizgi);
  background: rgba(0,0,0,.22);
}
.modal-butonlar {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--cizgi);
}
.ai-yuz-kutu .ai-yuz-secenek {
  display: flex; gap: 8px; padding: 14px 14px 6px;
}
.ai-yuz-kutu .ai-yuz-secenek button { flex: 1; }
#aiYuzKameraAlan { padding: 8px 14px; }
#aiYuzVideo {
  width: 100%; border-radius: 6px; background: #000;
  margin-bottom: 8px;
}
#aiYuzGaleri {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px;
}
#aiYuzGaleri img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--cizgi);
}
#aiYuzDurum {
  padding: 4px 14px 8px; font-size: 11px; color: var(--soluk);
  min-height: 18px;
}
#aiYuzDurum.hata { color: var(--kotu); }
#aiYuzDurum.iyi { color: var(--iyi, #2e9e4f); }

/* --- tespit satiri (gecmis + kayitsiz) --- */
.ai-tespit-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border: 1px solid var(--cizgi);
  border-radius: 6px; cursor: pointer;
}
.ai-tespit-satir + .ai-tespit-satir { margin-top: 5px; }
.ai-tespit-satir:hover { border-color: var(--vurgu); }
.ai-tespit-foto {
  width: 52px; height: 52px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--cizgi); flex-shrink: 0;
  background: var(--girdi-arka);
}
.ai-tespit-foto.yok {
  display: flex; align-items: center; justify-content: center;
  color: var(--soluk); font-size: 18px;
}
.ai-detay-kutu { width: 560px; }
#aiDetayIcerik { padding: 12px 14px; }
#aiDetayIcerik img {
  width: 100%; max-height: 300px; object-fit: contain;
  border-radius: 6px; background: #000;
}
#aiDetayIcerik video {
  width: 100%; max-height: 300px; border-radius: 6px;
  background: #000; margin-top: 8px;
}
#aiDetayIcerik .detay-meta {
  margin-top: 8px; font-size: 12px; color: var(--soluk);
  line-height: 1.7;
}
.ai-kayitsiz-islem {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px;
}
.ai-kayitsiz-islem button {
  font-size: 10px; padding: 3px 7px;
  background: transparent; border: 1px solid var(--cizgi);
  color: var(--soluk); border-radius: 4px; cursor: pointer;
}
.ai-kayitsiz-islem button:hover {
  color: var(--metin); border-color: var(--vurgu);
}

/* --- popup govde cercevesi (kullaniciPopup kalibi) --- */
#aiSunucuPopup, #aiKisiPopup, #aiAracPopup,
#aiKayitsizPopup, #aiGecmisPopup {
  position: fixed;
  top: 60px;
  left: 80px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 1250;
  color: var(--metin);
  font-size: 12px;
  max-width: calc(100vw - 30px);
}
#aiSunucuPopup, #aiKisiPopup, #aiAracPopup { width: 480px; }
#aiKayitsizPopup, #aiGecmisPopup { width: 560px; }
#aiSunucuPopup.popup-gizli, #aiKisiPopup.popup-gizli,
#aiAracPopup.popup-gizli, #aiKayitsizPopup.popup-gizli,
#aiGecmisPopup.popup-gizli { display: none; }
/* icerik alani kaydirilabilir */
#aiSunucuPopup .ai-popup-icerik, #aiKisiPopup .ai-popup-icerik,
#aiAracPopup .ai-popup-icerik, #aiKayitsizPopup .ai-popup-icerik,
#aiGecmisPopup .ai-popup-icerik {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ==================================================================
   v2.4.0: ALT PANEL SEKMELERI (RADAR / AI TESPIT) + TESPIT AKISI
   Alt panel her temada koyu kalir (konsol gibi).
   ================================================================== */
#grafikYari { display: flex; flex-direction: column; padding: 0; }
#grafikSekmeler {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
  background: #0a0f14;
  border-bottom: 1px solid rgba(154,163,171,.25);
}
.grafik-sekme {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9aa3ab;
  font-family: Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 10px 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.grafik-sekme:hover { color: #d7dde2; }
.grafik-sekme.aktif { color: #6bd8b9; border-bottom-color: #6bd8b9; }
#aiSekmeSayac {
  background: #d9534f;
  color: #fff;
  border-radius: 8px;
  font-size: 9px;
  padding: 0 5px;
  line-height: 13px;
  min-width: 13px;
  text-align: center;
}
#grafikIcerik {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  padding: 4px;
  box-sizing: border-box;
}
#grafikIcerik #hedefGrafik { width: 100%; height: 100%; }
#aiTespitAkis {
  position: absolute;
  inset: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 2px;
  background: #0d1218;
}
#aiTespitAkis::-webkit-scrollbar { height: 6px; }
#aiTespitAkis::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.ai-akis-kart {
  flex: 0 0 auto;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #131a22;
  border: 1px solid rgba(154,163,171,.25);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
.ai-akis-kart:hover { border-color: #6bd8b9; }
.ai-akis-kart.aranilan { border-color: #d9534f; box-shadow: 0 0 6px rgba(217,83,79,.5); }
.ai-akis-kart.guvensiz { border-color: #e2a53b; }
.ai-akis-kart img,
.ai-akis-kart .gorsel-yok {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  background: #0a0f14;
  flex: 0 0 auto;
}
.ai-akis-kart .gorsel-yok {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #46525c;
  font-size: 24px;
}
.ai-akis-kart .isim {
  font-family: Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  color: #d7dde2;
  margin-top: 3px;
  max-width: 72px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-akis-kart .isim.bilinmiyor { color: #8a949d; font-style: italic; }
.ai-akis-kart .kam {
  font-family: Consolas, monospace;
  font-size: 8px;
  color: #6d7880;
}

/* =====================================================================
   v2.4.1 — LOKASYON KAMERALARI POPUP'I + KAMERA SAYISI ROZETLERI
   ===================================================================== */
.lok-kam-popup {
  position: fixed;
  width: 300px;
  max-height: 340px;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  z-index: 2600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lok-kam-govde {
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lok-kam-satir {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  background: var(--dugme-arka);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lok-kam-satir:hover { border-color: var(--interceptor); }
.lok-kam-satir > i { color: var(--interceptor); font-size: 13px; flex: 0 0 auto; }
.lok-kam-bilgi { flex: 1; min-width: 0; }
.lok-kam-ad {
  font-size: 12px;
  font-weight: 600;
  color: var(--metin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lok-kam-alt {
  font-family: Consolas, monospace;
  font-size: 9px;
  color: var(--soluk);
  margin-top: 1px;
}
.lok-kam-izle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  background: transparent;
  color: var(--metin);
  cursor: pointer;
  font-size: 10px;
}
.lok-kam-izle:hover { border-color: var(--interceptor); color: var(--interceptor); }
.lok-kam-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 10px;
  color: var(--soluk);
  font-size: 11px;
}
.lok-kam-bos i { font-size: 22px; opacity: .5; }

/* Lokasyon listesi satirindaki kamera butonu + sayi rozeti */
.lok-kam-btn { position: relative; }
.lok-kam-rozet {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #e03131;
  color: #fff;
  font-family: Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

/* ================================================================
   v2.4.2 — DRON KARTI KAMERA BOLUMU
   ================================================================ */
.dk-kam-bolum {
  border-top: 1px solid var(--cizgi);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dk-kam-sec-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--dugme-arka);
  color: var(--metin);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background .15s, border-color .15s;
}
.dk-kam-sec-btn:hover { background: var(--dugme-hover); }
.dk-kam-sec-btn.bagli {
  border-color: var(--interceptor);
  color: var(--interceptor);
}
.dk-kam-sec-btn span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kamera secim popup'i */
.dk-kamsec-popup {
  position: fixed;
  width: 260px;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  z-index: 10050;
  overflow: hidden;
  color: var(--metin);
}
.dk-kamsec-baslik {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  font-size: 12px; font-weight: 600;
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi);
  background: var(--dugme-arka);
}
.dk-kamsec-baslik i { margin-right: 5px; color: var(--interceptor); }
.dk-kamsec-baslik button {
  background: none; border: none; color: var(--soluk);
  cursor: pointer; font-size: 13px; padding: 2px 4px;
}
.dk-kamsec-baslik button:hover { color: var(--metin); }
.dk-kamsec-liste { max-height: 240px; overflow-y: auto; }
.dk-kamsec-satir {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi);
}
.dk-kamsec-satir:last-child { border-bottom: none; }
.dk-kamsec-satir:hover { background: var(--dugme-hover); }
.dk-kamsec-satir i { color: var(--soluk); font-size: 11px; }
.dk-kamsec-ad {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-kamsec-prot {
  font-size: 9px; font-weight: 700;
  color: var(--soluk);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  padding: 1px 4px;
}
.dk-kamsec-bos {
  padding: 14px 12px;
  font-size: 11px;
  color: var(--soluk);
  text-align: center;
}

/* Gomulu kamera izleme alani */
.dk-kam-izleme {
  position: relative;
  width: 100%;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  min-height: 40px;
  box-sizing: border-box;
}
.dk-kam-izleme.gizli { display: none; }
.dk-kam-izleme:hover { border-color: var(--interceptor); }
.dk-kam-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  z-index: 2;
}
.dk-kam-bar i { margin-right: 4px; }
.dk-kam-bar button {
  background: none; border: none; color: #ffb3b3;
  cursor: pointer; font-size: 11px; padding: 2px 4px;
}
.dk-kam-bar button:hover { color: #ff6b6b; }
.dk-kam-video {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  background: #000;
}
.dk-kam-izleme.kam-hata::after {
  content: "\26A0 Yay\u0131n al\u0131nam\u0131yor";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ffb347; font-size: 11px;
  background: rgba(0,0,0,.6);
}

/* Tespit hedef seridi (yatay kaydirma, v2.4.2)
   v2.4.34: serit artik bir baslik + kaydirilabilir akis kabindan
   olusuyor (dron_kamera.js:306-312). Yatay kaydirma kurali AKIS
   kabina ait; seridin kendisi dikey yigin. Onceki surumde baslik ve
   akis siniflarinin CSS'i yazilmamisti: baslik dev ikonla akista
   yer kapiyordu ve kaydirma calismiyordu. */
.dk-tespit-serit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px;
}
.dk-tespit-serit.gizli { display: none; }
.dk-tespit-baslik {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  color: var(--soluk); text-transform: uppercase;
  padding: 0 2px;
}
.dk-tespit-baslik i { font-size: 9px; color: var(--interceptor); }
.dk-tespit-akis {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dk-tespit-akis::-webkit-scrollbar { height: 6px; }
.dk-tespit-akis::-webkit-scrollbar-thumb {
  background: var(--cizgi); border-radius: 3px;
}
.dk-tespit-kart {
  flex: 0 0 auto;
  width: 64px;
  cursor: pointer;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  overflow: hidden;
  background: var(--dugme-arka);
  text-align: center;
  transition: border-color .15s, transform .1s;
  user-select: none;
}
.dk-tespit-kart:hover {
  border-color: var(--interceptor);
  transform: translateY(-1px);
}
.dk-tespit-kart img {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}
.dk-tespit-kart .dk-tespit-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px;
  color: var(--soluk); font-size: 20px;
  background: var(--panel);
}
.dk-tespit-kart .dk-tespit-ad {
  display: block;
  font-size: 9px;
  color: var(--metin);
  padding: 2px 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-tespit-kart .dk-tespit-tur {
  display: block;
  font-size: 8px; font-weight: 700; letter-spacing: .3px;
  color: var(--soluk); text-transform: uppercase;
  padding: 0 3px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-tespit-kart.takipte {
  border-color: var(--iyi);
  box-shadow: 0 0 6px rgba(80,220,120,.35);
}
/* "Araniyor" seviyesi: kirmizi cerceve + nabiz (dron_kamera.js:438) */
.dk-tespit-kart.araniyor {
  border-color: var(--kotu);
  box-shadow: 0 0 6px rgba(231, 76, 60, .45);
}

/* Kamera modali AI gorev anahtarlari (v2.4.2) */
.kam-ai-gorevler {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
}
.kam-ai-gorevler .kam-ai-baslik {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--soluk);
  margin-bottom: 2px;
}
.kam-ai-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--metin);
  cursor: pointer;
  user-select: none;
}
.kam-ai-satir input { accent-color: var(--interceptor); cursor: pointer; }

/* v2.4.5: AI gorevleri — iki sutunlu kompakt grid */
.kam-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.kam-ai-grid .kam-ai-satir {
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.kam-ai-grid .kam-ai-satir span { flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }

/* v2.4.5: iPhone tarzi toggle anahtari */
.tgl {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
}
.tgl input { opacity: 0; width: 0; height: 0; }
.tgl .tgl-iz {
  position: absolute;
  inset: 0;
  background: var(--cizgi);
  border-radius: 20px;
  transition: background .18s;
  cursor: pointer;
}
.tgl .tgl-iz::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.tgl input:checked + .tgl-iz { background: #34c759; }
.tgl input:checked + .tgl-iz::before { transform: translateX(14px); }

/* ==================================================================
   v2.4.2: Ucus gecmisi — timeline AI tespit isaretleri + tespit seridi
   ================================================================== */
.gc-bar-sar {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.gc-bar-sar input[type="range"] { width: 100%; }
.gc-tl-isaretler {
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 8px;
  pointer-events: none;
}
.gc-tl-isaret {
  position: absolute;
  top: 0;
  width: 3px;
  height: 8px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--caymaz);
  cursor: pointer;
  pointer-events: auto;
}
.gc-tl-isaret.araniyor { background: #e5534b; }
.gc-tl-isaret:hover { transform: scaleX(2); }

.gc-tespit-serit {
  border-top: 1px solid var(--cizgi);
  padding: 4px 8px 6px;
  background: var(--panel-arka);
  flex: 0 0 auto;
}
.gc-tespit-baslik {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--soluk);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.gc-tespit-baslik i { color: var(--caymaz); }
.gc-tespit-sayi {
  background: var(--dugme-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 9px;
}
.gc-tespit-akis {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gc-tespit-akis::-webkit-scrollbar { height: 6px; }
.gc-tespit-akis::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--soluk) 45%, transparent);
  border-radius: 6px;
}
.gc-tespit-kart {
  flex: 0 0 auto;
  width: 74px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  background: var(--dugme-arka);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.15s;
}
.gc-tespit-kart:hover { border-color: var(--caymaz); }
.gc-tespit-kart.araniyor { border-color: #e5534b; }
.gc-tespit-kart img {
  width: 100%;
  height: 44px;
  object-fit: cover;
  display: block;
}
.gc-tespit-ikon {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--soluk);
}
.gc-tespit-ad {
  font-size: 9px;
  font-weight: 700;
  color: var(--metin);
  padding: 2px 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-tespit-alt {
  font-size: 8px;
  color: var(--soluk);
  padding: 0 3px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =================================================================
   v2.4.3: SÜRÜ UÇUŞ (suru.js)
   ================================================================= */
.suru-popup {
  position: fixed;
  top: 90px; left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 9100;
  font-size: 12px;
  color: var(--metin);
}
.suru-izleme { width: 520px; }
.suru-slave-ekle-popup { z-index: 9200; width: 300px; top: 140px; }
/* v2.4.24: geometri TEK TASARIM kuralindan gelir (stil.css:1572). */
.suru-baslik {
  /* geometri yok */
}
.suru-baslik i.fa-layer-group,
.suru-baslik i.fa-cubes { color: var(--iyi); }
.suru-kapat {
  margin-left: auto;
  background: none !important; border: none !important;
  color: var(--metin); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.suru-kapat:hover { color: var(--kotu); }
.suru-icerik { padding: 10px 12px; }
.suru-lbl {
  display: block; margin: 8px 0 4px;
  font-weight: 600; color: var(--soluk);
  font-size: 11px; letter-spacing: .05em;
}
.suru-select {
  width: 100%; padding: 6px 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--cizgi);
  border-radius: 4px; color: var(--metin);
  font-size: 12px;
  box-sizing: border-box;
}
:root[data-tema="acik"] .suru-select { background: rgba(0,0,0,.05); }
.suru-slave-liste { margin: 4px 0; min-height: 30px; }
.suru-slave-satir {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 4px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
}
:root[data-tema="acik"] .suru-slave-satir { background: rgba(0,0,0,.05); }
.suru-slave-ad { font-weight: 600; flex: 1; }
.suru-slave-xyz { color: var(--soluk); font-size: 11px; font-family: Consolas, monospace; }
.suru-slave-sil {
  background: none !important; border: none !important;
  color: var(--kotu); cursor: pointer; padding: 2px 6px;
}
.suru-btn {
  display: block; width: 100%;
  margin-top: 8px; padding: 8px;
  border: 1px solid var(--cizgi);
  border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  background: var(--dugme-arka); color: var(--metin);
}
.suru-btn:hover { background: var(--dugme-hover); }
.suru-btn-baslat { background: rgba(61,220,132,.15); border-color: rgba(61,220,132,.4); }
.suru-btn-baslat:hover { background: rgba(61,220,132,.28); }
.suru-btn-dagit { background: rgba(255,93,93,.14); border-color: rgba(255,93,93,.4); }
.suru-btn-dagit:hover { background: rgba(255,93,93,.26); }
.suru-xyz-grup { display: flex; gap: 6px; margin-top: 8px; }
.suru-xyz-grup label {
  flex: 1; font-size: 10px; color: var(--soluk);
  display: flex; flex-direction: column; gap: 3px;
}
.suru-xyz-grup input {
  width: 100%; padding: 5px 6px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--cizgi);
  border-radius: 4px; color: var(--metin);
  font-size: 12px;
  box-sizing: border-box;
}
:root[data-tema="acik"] .suru-xyz-grup input { background: rgba(0,0,0,.05); }
.suru-izleme-govde { padding: 10px 12px; }
.suru-canvas {
  width: 100%; height: auto;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  cursor: grab;
  display: block;
}
.suru-canvas:active { cursor: grabbing; }
.suru-mesafe-tablo { margin-top: 8px; }
.suru-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 11px;
}
.suru-tbl th {
  text-align: left; padding: 5px 6px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--soluk); font-weight: 600;
  font-size: 10px; letter-spacing: .05em;
}
.suru-tbl td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(128,128,128,.12);
  font-family: Consolas, monospace;
}
.suru-tbl td small { color: var(--soluk); }
.suru-cikar-btn {
  background: none !important; border: none !important;
  color: var(--kotu); cursor: pointer; padding: 2px 5px;
  font-size: 12px;
}
.suru-cikar-btn:hover { opacity: .7; }
.suru-izleme-kontrol { margin-top: 4px; }

/* ================= v2.4.4 SERBEST FORM ================= */
.sf-popup{
  position:fixed; top:90px; left:calc(50% - 170px); width:340px;
  background:var(--panel); border:1px solid var(--cizgi);
  border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.45);
  z-index:9500; user-select:none;
}
/* v2.4.24: geometri TEK TASARIM kuralindan gelir (stil.css:1572). */
.sf-baslik{
  /* geometri yok */
}
.sf-baslik .sf-kapat{
  margin-left:auto; background:none; border:none; color:var(--soluk);
  cursor:pointer; font-size:14px; padding:2px 6px;
}
.sf-baslik .sf-kapat:hover{ color:var(--kotu); }
.sf-icerik{ padding:12px; display:flex; flex-direction:column; gap:9px; }
.sf-lbl{ font-size:10px; font-weight:700; letter-spacing:.6px; color:var(--soluk); }
.sf-icerik input[type=text]{
  width:100%; box-sizing:border-box; background:var(--girdi);
  border:1px solid var(--cizgi); color:var(--metin);
  border-radius:6px; padding:7px 9px; font-size:12px;
}
.sf-slider-satir label{
  display:flex; justify-content:space-between; font-size:11px;
  color:var(--soluk); margin-bottom:3px;
}
.sf-deger{ font-family:Consolas,monospace; color:var(--metin); }
.sf-slider-satir input[type=range]{ width:100%; }
.sf-bilgi{
  font-family:Consolas,monospace; font-size:10.5px; color:var(--soluk);
  white-space:pre-line; background:var(--girdi);
  border:1px solid var(--cizgi); border-radius:6px; padding:7px 9px;
  min-height:30px;
}
.sf-hata{ color:var(--kotu); font-size:11px; min-height:5px; }
.sf-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:9px; border-radius:7px; border:1px solid var(--cizgi);
  background:var(--girdi); color:var(--metin); font-size:12px;
  font-weight:700; cursor:pointer; letter-spacing:.4px;
}
.sf-btn:hover{ filter:brightness(1.15); }
.sf-btn-olustur{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.sf-btn-bitir{ background:#15803d; border-color:#15803d; color:#fff; }
.sf-cizim-butonlar{ display:flex; flex-direction:column; gap:7px; }
/* v2.4.40: Koridor gorevi, Serbest Form ile ayni popup govdesini paylasir.
   .kor-popup / .kor-baslik yalnizca kimlik kancasidir (geometri TEK TASARIM
   kuralindan gelir); .sf-btn-geri ise SF'de de sinifsizdi -> ikincil eylem
   oldugu belli olsun diye burada tanimlanir. */
.kor-popup{ /* geometri yok - sf-popup'tan gelir */ }
.kor-baslik{ /* geometri yok - TEK TASARIM kuralindan gelir */ }
.sf-btn-geri{ font-weight:600; color:var(--soluk); }
.sf-btn-geri:hover{ color:var(--metin); }

/* ==================================================================
   v2.4.5: Lokasyon kameralari popup — gomulu oynatma
   ================================================================== */
.lok-kam-oge { display: flex; flex-direction: column; gap: 0; }
.lok-kam-video-kutu {
  margin: 2px 0 6px 0;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lok-kam-medya {
  width: 100%;
  max-height: 170px;
  object-fit: contain;
  display: block;
}
.lok-kam-video-kutu.kam-hata::after {
  content: "\26A0 Yayin alinamiyor";
  color: #e03131;
  font: 11px Consolas, monospace;
  padding: 8px;
}
.lok-kam-ayri { margin-left: 4px; }

/* v2.4.6: ayri penceredeki kameranin panel karti — kompakt satir */
.kam-kart-ayrik {
  opacity: 0.85;
}
.kam-kart-ayrik .kam-kart-baslik .kam-ad::after {
  content: " \f35d"; /* up-right-from-square */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  margin-left: 6px;
  opacity: 0.6;
}

/* v2.4.8: kamera karti AI izleme rozeti */
.kam-ai-rozet {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--basari, #16a34a);
  line-height: 1.5;
  flex: 0 0 auto;
}

/* ================================================================
   v2.4.33 — MJPEG "BAGLANIYOR" DURUMU
   ----------------------------------------------------------------
   Uzak MJPEG kaynaklarinda ilk kare 4-14 sn sonra gelebiliyor
   (olculen degerler, bkz. BULGU_MJPEG.md). Onceki surumde bu sure
   boyunca kullanici bos siyah kutuya bakiyor, ardindan tek bir
   basarisiz istek yuzunden kalici "YAYIN ALINAMIYOR" goruyordu.

   Artik mjpeg_yeniden.js ilk kare gelene kadar `.kam-baglaniyor`
   sinifini uyguluyor; tum yeniden denemeler tukendiginde
   `.kam-hata`ya geciyor.
   ================================================================ */
.kam-video-kutu.kam-baglaniyor::after,
.kam-oniz-video.kam-baglaniyor::after,
.dk-kam-izleme.kam-baglaniyor::after,
.lok-kam-video-kutu.kam-baglaniyor::after,
.vd-govde.kam-baglaniyor::after {
  content: "BAGLANIYOR";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: rgba(0, 0, 0, 0.55);
  animation: kamBaglaniyorNabiz 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes kamBaglaniyorNabiz {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Baglaniyor durumunda hata yazisi gorunmesin (ikisi ust uste binmesin).
   NOT: mjpeg_yeniden.js iki sinifi ayni anda uygulamaz, ancak eski
   kayitlardan gelen artik siniflar icin guvenlik agi. */
.kam-baglaniyor.kam-hata::after {
  content: "BAGLANIYOR";
  color: #38bdf8;
}

/* ================================================================
   v2.4.34 — HATA KUTUSUNDA GERCEK GEREKCE
   ----------------------------------------------------------------
   OLCULEN KUSUR: kullanici kamerasini uzun sure "YAYIN ALINAMIYOR"
   olarak gordu; gercek neden ffmpeg'in kurulu olmamasiydi ve sunucu
   bunu `_Yayin.hata` alaninda BILIYORDU, ama istemciye hic
   iletilmiyordu. Artik vekil 503 + `X-Goktungu-Hata` donduruyor,
   mjpeg_yeniden.js gerekceyi `data-kam-hata` niteligine yaziyor ve
   burada genel metnin YERINE o metin gosteriliyor.

   Nitelik yoksa onceki genel metin gecerli kalir (geriye uyum).
   ================================================================ */
.kam-video-kutu.kam-hata[data-kam-hata]::after,
.kam-oniz-video.kam-hata[data-kam-hata]::after,
.dk-kam-izleme.kam-hata[data-kam-hata]::after,
.lok-kam-video-kutu.kam-hata[data-kam-hata]::after,
.vd-govde.kam-hata[data-kam-hata]::after {
  content: "\26a0\00a0" attr(data-kam-hata);
  /* Uzun gerekceler (ffmpeg kurulum komutu) tasmadan sarilsin */
  padding: 10px 12px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  letter-spacing: 0.04em;
  /* v2.4.219 (kullanici istegi): BUYUK, okunur baglanti-yok metni */
  font-size: 16px;
  font-weight: 700;
}

/* inset:0 konumlandirmasi icin kapsayicilar konumlandirilmis olmali.
   Olculen kusur: `.kam-oniz-video` ve `.lok-kam-video-kutu` kurallarinda
   `position` tanimli degildi (statik), bu yuzden ::after katmani en yakin
   konumlandirilmis ataya (popup govdesi) gore yayilip yanlis yerde
   goruniyordu. Mevcut `.kam-hata` yazilari da ayni kusurdan etkileniyordu;
   ikisi de burada duzeltiliyor. */
.kam-oniz-video,
.lok-kam-video-kutu {
  position: relative;
}

/* ================================================================
   v2.4.33 — AYRIK PENCEREDEKI KAMERA BILGI SATIRI
   ----------------------------------------------------------------
   Kamera ayri pencereye alindiginda Kameralar panelinden tamamen
   kalkiyor (kullanici istegi). Panel bos gorunmesin diye kac
   kameranin ayri pencerede oldugunu bildiren tek satir gosterilir.
   ================================================================ */
.kam-ayrik-not {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  padding: 6px 8px;
  border: 1px dashed var(--cizgi);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--soluk);
  font-size: 10px;
  letter-spacing: 0.06em;
  user-select: none;
}

.kam-ayrik-not i {
  opacity: 0.75;
}

:root[data-tema="acik"] .kam-ayrik-not {
  background: rgba(0, 0, 0, 0.04);
}

/* ============================================================
   v2.4.33: DURUM CUBUGU — HARITA ONBELLEK GOSTERGESI
   ------------------------------------------------------------
   `#altBar` display:flex + gap:18px kullanir; gosterge komsu
   ogelerle ayni tipografiyi paylasir (Consolas/11px) ki durum
   cubugu tek bir teknik satir olarak okunsun.
   ============================================================ */
#hrtCacheDurum{
  font-family:Consolas,monospace;
  color:var(--soluk);
  font-size:11px;
  white-space:nowrap;
  /* Deger degistikce genislik oynar ve komsu ogeler saga sola
     kayar; en az genislik vererek bu titremeyi onluyoruz. */
  min-width:150px;
  transition:color .35s ease;
}
/* Ilk tam olcum arka planda surerken soluk ve hafif titresimli */
#hrtCacheDurum.hrt-cache-olculuyor{
  opacity:.6;
  animation:hrtCacheNabiz 1.4s ease-in-out infinite;
}
/* Yeni karo indiginde kisa vurgu: kullanici gostergenin canli
   guncellendigini fark eder. Animasyon bir kez calisir. */
#hrtCacheDurum.hrt-cache-taze{
  animation:hrtCacheTaze .9s ease-out 1;
}
@keyframes hrtCacheTaze{
  /* --interceptor: temada tanimli acik mavi vurgu rengi.
     (Onceki taslakta kullanilan --vurgu bu CSS'te TANIMLI DEGIL;
     tanimsiz degisken animasyonu sessizce etkisiz birakiyordu.) */
  0%{color:var(--interceptor);}
  100%{color:var(--soluk);}
}
@keyframes hrtCacheNabiz{
  0%,100%{opacity:.4;}
  50%{opacity:.8;}
}
/* Hareket azaltma tercihi: animasyonlari kapat (erisilebilirlik) */
@media (prefers-reduced-motion: reduce){
  #hrtCacheDurum.hrt-cache-taze,
  #hrtCacheDurum.hrt-cache-olculuyor{animation:none;}
}

/* ==================================================================
   v2.4.41: GOREV UCUS ILERLEMESI
   Yukleme cubugu (.gorev-yukleme-satir) "kac oge drona gonderildi"
   anlamini tasir. Bu satir AYRI bir anlam tasir: "gorevin ne kadari
   UCULDU". Ikisi ayni DOM'u paylasmaz cunku asamalari ayriktir ve
   ust uste gelmezler; ayrica gorev ortasinda panel yeniden acildiginda
   yukleme cubugunun %100 kalmasi "gorev bitti" yanilgisi yaratirdi.
   ================================================================== */
.gorev-ucus-satir .gys-ust b { color: #c9a6ff; }
.gorev-ucus-satir .gorev-cubuk-ic {
  /* Yukleme cubugu mavi; ucus cubugu mor -> bir bakista ayirt edilir */
  background: linear-gradient(90deg, #5b3a9e, #a678ff);
}
.gorev-ucus-satir .gorev-cubuk-ic.tamam {
  background: linear-gradient(90deg, #2e7d3e, #56d977);
}

/* ==================================================================
   v2.4.41: KALKIS ONCESI KONTROL LISTESI (.kk-*)
   ================================================================== */
.kk-popup { width: 440px; max-width: 95vw; }

/* --- Otomatik dogrulama bandi (makine olcumu, salt okunur) --- */
.kk-oto {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 10px 0; padding: 9px 11px;
  border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--giris-arka);
}
.kk-oto > i { font-size: 19px; flex: 0 0 auto; }
.kk-oto-yazi { display: flex; flex-direction: column; gap: 2px;
               min-width: 0; }
.kk-oto-yazi strong { font-size: 12px; letter-spacing: .5px; }
.kk-oto-yazi span { font-size: 10.5px; color: var(--soluk);
                    line-height: 1.4; }
.kk-oto.hazir { border-color: rgba(76,175,80,.5);
                background: rgba(76,175,80,.1); color: #8fe39a; }
.kk-oto.hazir-uyari { border-color: rgba(240,178,60,.5);
                      background: rgba(240,178,60,.1); color: #f3cd7c; }
.kk-oto.hazir-degil { border-color: rgba(224,85,85,.55);
                      background: rgba(224,85,85,.11); color: #f09b9b; }
.kk-oto.bilinmiyor { color: var(--soluk); }

/* Hedef irtifa serdi */
.kk-irtifa {
  margin: 8px 10px 0; padding: 7px 11px;
  display: flex; align-items: baseline; justify-content: space-between;
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: rgba(255,255,255,.03);
}
.kk-irtifa span { font-size: 10px; color: var(--soluk);
                  letter-spacing: .08em; font-weight: 700; }
.kk-irtifa b { font-family: Consolas, monospace; font-size: 14px;
               color: #8ae4ff; }

/* --- Madde listesi --- */
.kk-icerik {
  padding: 8px 10px 0;
  max-height: 44vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.kk-grup-bas {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; padding: 5px 7px;
  background: var(--dugme-arka); border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--metin);
}
.kk-grup-bas:first-child { margin-top: 0; }
.kk-grup-bas i { font-size: 10px; color: var(--soluk); }
.kk-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-left: 3px solid var(--cizgi);
  border-radius: 0 4px 4px 0;
  background: var(--giris-arka);
}
.kk-satir-orta { flex: 1 1 auto; min-width: 0;
                 display: flex; flex-direction: column; gap: 2px; }
.kk-satir-soru { font-size: 11.5px; color: var(--metin);
                 line-height: 1.35; }
.kk-satir-not { font-size: 9.5px; color: var(--soluk);
                line-height: 1.35; }
.kk-satir.evet { border-left-color: #34c759;
                 background: rgba(52,199,89,.07); }
.kk-satir.hayir { border-left-color: #ff3b30;
                  background: rgba(255,59,48,.08); }
/* Zorunlu olmayan (bilgi amacli) madde: daha soluk sol cizgi */
.kk-satir.istege-bagli { border-left-style: dashed; }

/* --- IKILI SLIDER (sol=HAYIR kirmizi, sag=EVET yesil) ---
   Mevcut `.tgl` IKI durumlu (kapali/acik) ve kamera AI ekraninda
   kullaniliyor; degistirilmez. Bu kontrol UC durumlu:
   notr (cevapsiz) / hayir / evet. Bu yuzden <input type=checkbox>
   DEGIL <button role="switch"> kullanilir; aria-checked="mixed"
   notr durum icin dogru degeri verir. Olculer ve gecis suresi
   `.tgl` ile ayni tutuldu ki arayuzde gorsel tutarlilik bozulmasin. */
.kk-cevap { display: flex; align-items: center; gap: 8px;
            flex: 0 0 auto; }
.kk-tgl {
  position: relative; display: inline-block;
  width: 34px; height: 20px; flex: 0 0 34px;
  padding: 0; border: none; border-radius: 20px;
  background: var(--cizgi);
  cursor: pointer;
  transition: background .18s;
}
.kk-tgl::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; top: 2px; left: 0;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .18s;
  /* Notr: top ORTADA -> "henuz cevaplanmadi" gorsel olarak belli olur */
  transform: translateX(9px);
}
.kk-tgl { opacity: .6; }
.kk-tgl.hayir { background: #ff3b30; opacity: 1; }
.kk-tgl.hayir::before { transform: translateX(2px); }
.kk-tgl.evet { background: #34c759; opacity: 1; }
.kk-tgl.evet::before { transform: translateX(16px); }
.kk-tgl:focus-visible { outline: 2px solid var(--interceptor);
                        outline-offset: 2px; }
.kk-cevap-yazi {
  width: 38px; text-align: left;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--soluk);
}
.kk-cevap-yazi.evet { color: #6fe08a; }
.kk-cevap-yazi.hayir { color: #ff8a82; }

/* --- Alt bar --- */
.kk-alt-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; margin-top: 8px;
  border-top: 1px solid var(--cizgi);
}
.kk-sayac {
  flex: 1 1 auto; font-size: 10px; color: var(--soluk);
  font-family: Consolas, monospace;
}
.kk-sayac.tamam { color: #6fe08a; }
.kk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 4px; border: none;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer;
  background: #1a5c2e; border: 1px solid #2a8c44; color: #b8f5cc;
}
.kk-btn:hover:not(:disabled) { filter: brightness(1.18); }
.kk-btn:disabled {
  background: var(--dugme-arka); border-color: var(--cizgi);
  color: var(--soluk); cursor: not-allowed; opacity: .75;
}
.kk-btn-iptal {
  background: var(--dugme-arka); border: 1px solid var(--cizgi);
  color: var(--metin); font-weight: 600;
}
.kk-btn-iptal:hover { background: var(--dugme-hover); filter: none; }

/* ==================================================================
   v2.4.41: KART ALTI INCE PARAMETRE YUKLEME SERIDI
   Kart govdesinin EN SONUNA eklenir. Kalici degil: okuma bitince
   %100'de kisa sure kalip solar, sonra display:none olur. Gerekce:
   surekli gorunen 3px'lik bir serit her kartta yer kaplar ve okuma
   bittikten sonra bilgi tasimaz.
   ================================================================== */
.dk-param-serit {
  position: relative;
  height: 3px; margin: 6px 0 0;
  background: rgba(255,255,255,.07);
  border-radius: 2px; overflow: hidden;
  transition: opacity .5s linear;
}
.dk-param-serit-ic {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #1f6f8a, #35c8f0);
  transition: width .2s linear;
}
.dk-param-serit.bitti .dk-param-serit-ic {
  background: linear-gradient(90deg, #2e7d3e, #56d977);
}
.dk-param-serit.solyor { opacity: 0; }
/* Onbellekten aninda yuklendiginde animasyon gostermek yanlis olur;
   bu sinif seridi hic gostermeden bitmis kabul eder. */
.dk-param-serit.gizli { display: none; }
/* ==================================================================
   v2.4.41: SIRKET BILGILERI — ZORUNLU SIHIRBAZ + YONETICI PANELI
   (.sk-*)
   Perde tum arayuzu kapatir: sirket kimligi tanimsizken ucus kaydi
   acmak antetli raporun denetim izini gecersiz kilar, bu yuzden kilit
   "gorsel uyari" degil GERCEK bir engeldir. z-index giris ekraninin
   uzerinde ama uyari toast'larinin ALTINDA tutulur ki kaydetme hatasi
   bildirimi perdenin arkasinda kaybolmasin.
   ================================================================== */
.sk-perde {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 14, .82);
  backdrop-filter: blur(3px);
  overflow: auto;
}
.sk-kutu {
  width: min(680px, 100%);
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  padding: 20px 22px;
  box-sizing: border-box;
}
.sk-form-sar { display: flex; flex-direction: column; gap: 14px; }
.sk-bas { display: flex; gap: 13px; align-items: flex-start; }
.sk-bas > i {
  font-size: 22px; color: var(--vurgu); margin-top: 2px; flex: 0 0 auto;
}
.sk-bas > div { display: flex; flex-direction: column; gap: 3px; }
.sk-bas strong { font-size: 15px; letter-spacing: .4px; color: var(--metin); }
.sk-bas span { font-size: 12px; color: var(--soluk); line-height: 1.5; }
.sk-uyari {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; padding: 11px 13px;
  background: rgba(230, 170, 40, .1);
  border: 1px solid rgba(230, 170, 40, .35);
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--metin);
}
.sk-uyari > i { color: var(--uyari); margin-top: 2px; }

/* ---- Logo secimi ---- */
.sk-logo-satir {
  display: flex; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--cizgi);
  border-radius: 9px; background: rgba(255, 255, 255, .025);
}
:root[data-tema="acik"] .sk-logo-satir { background: rgba(0, 0, 0, .03); }
.sk-logo-on {
  width: 76px; height: 76px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--cizgi); border-radius: 8px;
  background: rgba(0, 0, 0, .22); overflow: hidden;
}
:root[data-tema="acik"] .sk-logo-on { background: rgba(255, 255, 255, .6); }
.sk-logo-on img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-logo-on > i { font-size: 24px; color: var(--soluk); }
.sk-logo-sag { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-not { font-size: 11.5px; color: var(--soluk); line-height: 1.45; }
.sk-not.hata { color: var(--kotu); }

/* ---- Alanlar ---- */
.sk-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 13px; }
.sk-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sk-alan.genis { grid-column: 1 / -1; }
.sk-etiket {
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--soluk); text-transform: uppercase;
}
.sk-yildiz { color: var(--kotu); }
.sk-giris {
  background: var(--giris-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  width: 100%; box-sizing: border-box; resize: vertical;
}
.sk-giris:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 22%, transparent);
}
.sk-hata {
  padding: 9px 12px; border-radius: 7px;
  background: color-mix(in srgb, var(--kotu) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kotu) 42%, transparent);
  color: var(--kotu); font-size: 12.5px; line-height: 1.5;
}

/* ---- Alt bar ---- */
.sk-alt {
  display: flex; gap: 9px; justify-content: flex-end;
  padding-top: 13px; border-top: 1px solid var(--cizgi);
}
.sk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border: 0; border-radius: 7px;
  background: linear-gradient(180deg, #1f7f9e, #15607a);
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px; cursor: pointer; font-family: inherit;
}
.sk-btn:hover:not(:disabled) { filter: brightness(1.12); }
.sk-btn:disabled { opacity: .45; cursor: not-allowed; }
.sk-btn-ikincil {
  background: var(--dugme-arka); border: 1px solid var(--cizgi);
  color: var(--metin); font-weight: 600;
}
.sk-btn-ikincil:hover:not(:disabled) {
  background: var(--dugme-hover); filter: none;
}
.sk-btn-kucuk { padding: 7px 13px; font-size: 12px; }

@media (max-width: 620px) {
  .sk-izgara { grid-template-columns: 1fr; }
  .sk-kutu { padding: 16px; }
}

/* =================================================================
   v2.4.41 — ANTETLI UCUS RAPORU DUGMESI (History paneli alt seridi)
   Rapor ciktisinin kendi stili js/ucus_rapor.js icinde uretilir ve
   yazdirma cercevesine gomulur; burada yalniz arayuz dugmesi var.
   ================================================================= */
.gc-rapor-satir {
  display: flex;
  /* v2.4.42: GRAFIKLER dugmesi EN SOLDA, RAPOR dugmesi sagda.
     Kullanici istegi: "Rapor olarak indir dugmesinin solunda en solda
     bir dugme olsun". flex-end iken iki dugme yan yana sagda
     toplaniyordu; space-between ikisini iki uca yayar. */
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--cizgi);
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
}
:root[data-tema="acik"] .gc-rapor-satir { background: rgba(0,0,0,.05); }
.gc-rapor-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(180deg, #1f7f9e, #15607a);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: filter .15s;
}
.gc-rapor-btn:hover { filter: brightness(1.14); }
.gc-rapor-btn:active { filter: brightness(.92); }
.gc-rapor-btn i { font-size: 12px; }

/* =================================================================
   v2.4.42 — UCUS KODU / GRAFIKLER / KAYITLI DRONLAR
   -----------------------------------------------------------------
   Bu blok dort ayri arayuz parcasini kapsar:
     1. .gc-ucus-kod    : History ucus satirinda kisa belge kodu
     2. .gc-grafik-btn  : History alt seridinde GRAFIKLER dugmesi
     3. .kd-*           : Kayitli Dronlar paneli
     4. .ug-*           : Ucus Grafikleri penceresi
   Yazdirma ciktilarinin stili ilgili JS dosyalari icinde uretilir ve
   yazdirma cercevesine gomulur (ucus_rapor.js / ucus_grafik.js);
   burada YALNIZCA ekran arayuzu vardir.
   ================================================================= */

/* ---- 1. Ucus satirindaki kisa belge kodu ---- */
/* Kod, tarihin SAGINDA kucuk bir cip olarak durur. Monospace secildi:
   0/O ve 1/I ayrimini gozle yapmak icin sabit genislik sart (alfabede
   O ve I yok, ama pilot ciktidan okurken karsilastirma yapiyor). */
.gc-ucus-kod {
  display: inline-block;
  margin-left: 7px;
  padding: 0 5px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vurgu, #6bd8b9);
  background: rgba(107,216,185,.12);
  border: 1px solid rgba(107,216,185,.35);
  border-radius: 3px;
  vertical-align: 1px;
  white-space: nowrap;
}
:root[data-tema="acik"] .gc-ucus-kod {
  color: #10705a;
  background: rgba(16,112,90,.1);
  border-color: rgba(16,112,90,.3);
}

/* ---- 2. GRAFIKLER dugmesi ---- */
/* Rapor dugmesiyle ayni geometri, FARKLI renk: ikisi ayni seritte yan
   yana durdugu icin renk ayrimi olmadan hangisinin ne yaptigi ancak
   metin okunarak anlasilir. */
.gc-grafik-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(180deg, #4a6f2f, #35521f);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: filter .15s;
}
.gc-grafik-btn:hover { filter: brightness(1.14); }
.gc-grafik-btn:active { filter: brightness(.92); }
.gc-grafik-btn i { font-size: 12px; }

/* ---- 3. KAYITLI DRONLAR paneli ---- */
/* Basligi dkMiniPopupBaslikKur() uretir; o yardimci `.dk-mp-baslik`
   sinifini kullanir ve ORTAK PENCERE BASLIGI kurallarindan gelen
   geometriyi alir. Burada yalnizca kapsayici ve govde tanimlanir. */
.kd-popup {
  position: fixed;
  left: 50%; top: 12vh;
  transform: translateX(-50%);
  z-index: 1260;
  width: min(940px, 94vw);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  color: var(--metin);
  overflow: hidden;
}
.kd-popup .dk-mp-baslik { cursor: grab; touch-action: none; }
/* Yenile dugmesi: kapatma dugmesiyle ayni olcu ve hizada. Kirmizi
   DEGIL — widget yenile ikonlari (veri bayatladi uyarisi) kirmizidir;
   buradaki her acilista otomatik calisan siradan bir tazelemedir. */
.kd-yenile {
  flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0;
  margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 3px;
  color: var(--soluk); cursor: pointer; font-size: 11px;
}
.kd-yenile:hover { background: var(--cizgi); color: var(--metin); }
.kd-govde {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.kd-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--cizgi);
  flex: 0 0 auto;
}
.kd-ara {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11px;
  color: var(--metin);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
}
:root[data-tema="acik"] .kd-ara { background: rgba(0,0,0,.04); }
.kd-ara:focus { outline: none; border-color: var(--vurgu, #6bd8b9); }
.kd-sayi {
  flex: 0 0 auto;
  font-family: Consolas, monospace;
  font-size: 10px;
  color: var(--soluk);
}
.kd-liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.kd-bos {
  padding: 22px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--soluk);
}
.kd-bos.kd-hata { color: var(--kotu, #d9534f); }
.kd-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
/* Baslik satiri kaydirma sirasinda ustte kalir: 30+ dron listesinde
   kolon adlari gorunmezse UID ile sysid kolonu karistirilabilir. */
.kd-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 8px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--soluk);
  background: var(--panel-arka);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.kd-tablo td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
}
:root[data-tema="acik"] .kd-tablo td {
  border-bottom-color: rgba(0,0,0,.07);
}
.kd-satir { cursor: pointer; }
.kd-satir:hover { background: rgba(255,255,255,.06); }
:root[data-tema="acik"] .kd-satir:hover { background: rgba(0,0,0,.05); }
/* Dron rengi: haritadaki ikon rengiyle AYNI kaynaktan (dr.renk) gelir;
   listede dronu gozle eslestirmeyi saglar. */
.kd-renk {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.4);
}
.kd-ad { font-weight: 600; }
.kd-uid,
.kd-son {
  font-family: Consolas, monospace;
  font-size: 10px;
  color: var(--soluk);
  white-space: nowrap;
}
.kd-pilot { font-size: 10.5px; }
.kd-sag { text-align: right; }
.kd-tablo th.kd-sag { text-align: right; }

/* ---- 4. UCUS GRAFIKLERI penceresi ---- */
.ug-popup {
  position: fixed;
  left: 50%; top: 10vh;
  transform: translateX(-50%);
  z-index: 1260;
  width: min(1060px, 96vw);
  display: flex;
  flex-direction: column;
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  color: var(--metin);
  overflow: hidden;
}
.ug-popup .dk-mp-baslik { cursor: grab; touch-action: none; }
/* v2.4.64: basliktaki .ug-yazdir ikonu kaldirildi; yerine alt seritte
   yazili dugme (.ug-yazdir-btn) kullaniliyor. Kullanici istegi:
   "en uste print seklinde koymussun, alta normal dugme olarak koy". */
.ug-yazdir-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--vurgu); border: 1px solid var(--vurgu);
  border-radius: 4px;
  color: #fff; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.ug-yazdir-btn:hover { filter: brightness(1.12); }
.ug-yazdir-btn:active { filter: brightness(0.92); }
.ug-yazdir-btn i { font-size: 11px; }
.ug-govde {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ug-ust {
  padding: 7px 9px 3px;
  border-bottom: 1px solid var(--cizgi);
  flex: 0 0 auto;
}
.ug-seriler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Seri secim dugmesi: kapali=cerceveli/soluk, acik=renk dolgulu.
   Renk kutusu her iki durumda gorunur ki kullanici hangi rengin hangi
   parametre oldugunu grafige bakmadan bilsin. */
.ug-seri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--soluk);
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  cursor: pointer;
  transition: color .13s, background .13s, border-color .13s;
}
.ug-seri:hover { color: var(--metin); border-color: var(--soluk); }
.ug-seri.acik {
  color: var(--metin);
  background: rgba(255,255,255,.08);
  border-color: var(--soluk);
}
:root[data-tema="acik"] .ug-seri.acik { background: rgba(0,0,0,.06); }
/* Bu ucusta verisi olmayan seri: tiklanamaz. Gizlemek YERINE pasif
   gosterilir; boylece kullanici "batarya serisi yok" ile "batarya
   verisi kaydedilmemis" arasindaki farki gorur. */
.ug-seri.yok {
  opacity: .34;
  cursor: not-allowed;
  text-decoration: line-through;
}
.ug-seri-renk {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ug-tuval-kutu {
  padding: 8px 9px;
  flex: 1 1 auto;
  min-height: 0;
}
.ug-tuval {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: #0d1218;
}
:root[data-tema="acik"] .ug-tuval { background: #0d1218; }
.ug-alt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-top: 1px solid var(--cizgi);
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
  font-size: 10.5px;
}
:root[data-tema="acik"] .ug-alt { background: rgba(0,0,0,.05); }
.ug-kod-etiket {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--soluk);
}
.ug-kod {
  font-family: Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--vurgu, #6bd8b9);
}
:root[data-tema="acik"] .ug-kod { color: #10705a; }
.ug-bosluk { flex: 1 1 auto; }
.ug-ozet {
  font-family: Consolas, monospace;
  font-size: 10px;
  color: var(--soluk);
}

/* ==================================================================
   v2.4.43 — KAYITLI DRONLAR: YENIDEN BOYUTLANDIRMA TUTAMACI
   ==================================================================
   Kullanici istegi: "Kayitli Dronlar paneli resize edilebilir olsun".

   Gorunum ve olcu Ucus Gecmisi'ndeki `.gc-resize` ile ayni; ancak o
   kural bir baska kapsayici blogun icinde tanimlandigi icin buradan
   secilemez ve BURADA yeniden yazilir (kopyalamak, calismayan bir
   secici yazmaktan yeglenir).

   `touch-action:none` ZORUNLU: aksi halde dokunmatik ekranda tarayici
   suruklemeyi kaydirma olarak yorumlar, `pointermove` hic gelmez ve
   tutamac sessizce calismaz. */
.kd-resize {
  position: absolute; right: 2px; bottom: 2px;
  width: 16px; height: 16px; cursor: nwse-resize;
  display: flex; align-items: center; justify-content: center;
  color: var(--soluk); font-size: 9px; touch-action: none;
  z-index: 10;
}
.kd-resize:hover { color: var(--metin); }

/* =================================================================
   v2.4.43 - ANGAJMAN ONGORU (KESISME) ARAYUZU
   Ayar penceresindeki iki anahtar ve izleme penceresindeki cozum
   blogu. Anahtar gorunumu mevcut .prog-anahtar desenini izler ki
   arayuzde tek bir anahtar dili olsun.
   ================================================================= */

/* --- Ayar penceresi: ikinci parametre basligi --- */
.ang-param-baslik2 {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cizgi);
}

/* --- Anahtar satiri --- */
.ang-param-satir.ang-anahtar-satir {
  gap: 10px;
  margin-bottom: 8px;
}
.ang-param-satir.ang-anahtar-satir > span {
  flex: 1 1 auto;
  color: var(--metin);
  line-height: 1.35;
}

/* Girintili alt secenek: ongoruye bagimli oldugu gorsel olarak belli
   olsun. Sol cizgi bagimliligi anlatir. */
.ang-param-satir.ang-alt-secenek {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--cizgi);
}

/* Devre disi alt secenek: ongoru kapaliyken */
.ang-param-satir.ang-devre-disi {
  opacity: .40;
}
.ang-param-satir.ang-devre-disi .ang-anahtar-kaydir {
  cursor: not-allowed;
}

/* --- Kaydirmali anahtar (.prog-anahtar ile ayni olculer) --- */
.ang-anahtar {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  flex: 0 0 auto;
}
.ang-anahtar input { opacity: 0; width: 0; height: 0; }
.ang-anahtar-kaydir {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--cizgi);
  border-radius: 20px;
  transition: background .2s;
}
.ang-anahtar-kaydir::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--soluk);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.ang-anahtar input:checked + .ang-anahtar-kaydir {
  background: var(--interceptor);
}
.ang-anahtar input:checked + .ang-anahtar-kaydir::before {
  transform: translateX(20px);
  background: #fff;
}

/* --- Aciklama notu --- */
.ang-param-not {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--soluk);
  background: rgba(255,255,255,.04);
  border-left: 2px solid var(--interceptor);
  border-radius: 0 3px 3px 0;
}

/* =================================================================
   Izleme penceresi: ONGORU (KESISME) BLOGU
   ================================================================= */
.angi-ongoru {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--cizgi);
  background: rgba(255,255,255,.03);
}
/* Cozum bulundu: vurgulu cerceve. Cozum yok: soluk, cunku saf takip
   ozel bir kabiliyet degil, geri dusulmus durumdur. */
.angi-ongoru-acik {
  border-color: rgba(0,229,255,.40);
  background: rgba(0,229,255,.07);
}
.angi-ongoru-kapali {
  opacity: .78;
}
.angi-ongoru-baslik {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--soluk);
}
.angi-ongoru-acik .angi-ongoru-baslik { color: var(--interceptor); }
.angi-ongoru-kaynak {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  color: var(--metin);
}
.angi-ongoru-acik .angi-ongoru-kaynak {
  background: rgba(0,229,255,.18);
  color: var(--interceptor);
}
.angi-ongoru-not {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cizgi);
  font-size: 9px;
  line-height: 1.45;
  color: var(--soluk);
}

/* =================================================================
   v2.4.44 - YER ISTASYONU 2 (ESP32-S3 kontrol paneli)
   ================================================================= */
.i2-popup {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4200;
  width: 720px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  overflow: hidden;
}
.i2-yenile {
  background: none;
  border: none;
  color: var(--soluk);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
}
.i2-yenile:hover { color: var(--metin); }
.i2-govde {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 14px;
  font-size: 11px;
  color: var(--metin);
}
.i2-bolum-bas {
  margin: 12px 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--soluk);
  border-bottom: 1px solid var(--cizgi);
  padding-bottom: 3px;
}
/* --- baglanti satiri --- */
.i2-bag {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.i2-bag-sol { flex: 1 1 300px; min-width: 0; }
.i2-bag-sag { flex: 0 0 auto; text-align: right; }
.i2-etiket {
  display: block;
  font-size: 9px;
  letter-spacing: .05em;
  color: var(--soluk);
  margin-bottom: 3px;
}
.i2-port-satir { display: flex; gap: 6px; }
.i2-giris, .i2-sec {
  background: var(--girdi, rgba(0,0,0,.28));
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  color: var(--metin);
  font-size: 11px;
  padding: 4px 6px;
  font-family: inherit;
}
.i2-giris { flex: 0 0 150px; }
.i2-sec { flex: 1 1 auto; min-width: 0; }
/* v2.4.59: saha makinesi (kopru) secici. Canta merkez sunucusunda
   degil pilotun makinesinde takilidir; birden fazla kopru varsa hedef
   makine burada secilir. Yalniz 2+ adayda gorunur. */
.i2-kopru-sar { margin-bottom: 8px; }
.i2-sec-genis { display: block; width: 100%; flex: none; }
.i2-onay-kutu {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--soluk);
  cursor: pointer;
}
.i2-rozet {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 6px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.i2-rozet-ok { background: rgba(46,204,113,.16); color: #2ecc71; }
.i2-rozet-yok { background: rgba(231,76,60,.16); color: #e74c3c; }
.i2-dugmeler { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.i2-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  color: var(--metin);
  font-size: 10px;
  padding: 4px 9px;
  cursor: pointer;
  font-family: inherit;
}
.i2-btn:hover { background: rgba(255,255,255,.12); }
.i2-btn-ana { background: rgba(0,229,255,.16); border-color: rgba(0,229,255,.4); }
/* --- olcum satiri --- */
.i2-olcu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  font-size: 9.5px;
  color: var(--soluk);
}
.i2-olcu b { color: var(--metin); font-weight: 700; }
.i2-olcu b.i2-kotu { color: #e74c3c; }
/* --- buton izgarasi --- */
.i2-btn-izgara {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.i2-tus {
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 4px 5px 5px;
  background: rgba(0,0,0,.20);
  transition: background .08s, border-color .08s;
  min-width: 0;
}
/* LED cikisi OLAN butonlar sari cerceve ile ayirt edilir (P1-P7);
   P8-P11'de LED yok, LED komutu sessizce yok sayilir. */
.i2-tus-ledli { border-color: rgba(240,196,32,.45); }
.i2-tus-basili {
  background: rgba(0,229,255,.22);
  border-color: var(--interceptor);
}
.i2-tus-ust { display: flex; align-items: center; justify-content: space-between; }
.i2-tus-ad { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.i2-tus-led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
}
.i2-tus-led-acik {
  background: #f0c420;
  border-color: #f0c420;
  box-shadow: 0 0 6px rgba(240,196,32,.8);
}
.i2-tus-eylem {
  margin-top: 2px;
  font-size: 8.5px;
  line-height: 1.25;
  color: var(--soluk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.i2-tus.i2-ucus .i2-tus-eylem { color: #ff9f43; }
.i2-tus.i2-harita .i2-tus-eylem { color: #54a0ff; }
/* --- alt iki kolon --- */
.i2-alt-iki { display: flex; gap: 14px; align-items: flex-start; }
.i2-kol-blok { flex: 1 1 50%; min-width: 0; }
.i2-joy-blok { flex: 1 1 50%; min-width: 0; }
.i2-kollar { display: flex; gap: 6px; }
.i2-kol {
  flex: 1 1 0;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 5px 6px;
  background: rgba(0,0,0,.20);
  text-align: center;
  min-width: 0;
}
.i2-kol-ad { font-size: 10px; font-weight: 700; color: var(--soluk); }
.i2-kol-deger { font-size: 13px; font-weight: 700; margin: 1px 0; }
.i2-kol-not {
  font-size: 8px;
  color: var(--soluk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* T1 patlatma kolu acikken kirmizi vurgu: pilot bir bakista gormeli */
.i2-kol-acik {
  border-color: #e74c3c;
  background: rgba(231,76,60,.16);
}
.i2-kol-acik .i2-kol-deger, .i2-kol-acik .i2-kol-not { color: #e74c3c; }
.i2-ledler { display: flex; flex-wrap: wrap; gap: 4px; }
.i2-led-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  color: var(--soluk);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  font-family: inherit;
}
.i2-led-btn:hover { background: rgba(255,255,255,.12); }
.i2-led-acik {
  background: rgba(240,196,32,.22);
  border-color: #f0c420;
  color: #f0c420;
}
.i2-led-hepsi { font-size: 9px; opacity: .85; }
/* --- joystickler --- */
.i2-joylar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.i2-joy {
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 5px;
  background: rgba(0,0,0,.20);
  text-align: center;
  min-width: 0;
}
/* Ek dron joystickleri (varsa) turuncu cerceve ile ayrilir: bunlar
   HARITAYI degil DRONU surer. */
.i2-joy-dron { border-color: rgba(240,160,32,.5); }
.i2-joy canvas { display: block; margin: 0 auto; }
.i2-joy-ad { font-size: 10px; font-weight: 700; margin-top: 2px; }
.i2-joy-not {
  font-size: 8px;
  color: var(--soluk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.i2-joy-deger { font-size: 8.5px; color: var(--soluk); margin-top: 2px; }
/* --- olay akisi --- */
.i2-akis {
  max-height: 130px;
  overflow: auto;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  background: rgba(0,0,0,.26);
}
.i2-akis-satir {
  display: flex;
  gap: 8px;
  padding: 2px 7px;
  font-size: 9.5px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.i2-akis-saat { color: var(--soluk); flex: 0 0 54px; }
.i2-akis-kanal { color: var(--interceptor); flex: 0 0 62px; font-weight: 700; }
.i2-akis-ac { color: var(--metin); flex: 1 1 auto; min-width: 0; }
.i2-akis-bos { padding: 8px; font-size: 9.5px; color: var(--soluk); text-align: center; }
/* --- yeniden boyutlandirma tutamaci --- */
.i2-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  color: var(--soluk);
  font-size: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1px;
  touch-action: none;
}
/* --- patlatma onayi --- */
.i2-onay-kap {
  position: fixed;
  inset: 0;
  z-index: 5200;
  background: rgba(0,0,0,.62);
  display: flex;
  align-items: center;
  justify-content: center;
}
.i2-onay {
  width: 380px;
  background: var(--panel);
  border: 1px solid #e74c3c;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  overflow: hidden;
}
.i2-onay-bas {
  background: rgba(231,76,60,.20);
  color: #e74c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.i2-onay-govde { padding: 14px 14px 10px; }
.i2-onay-soru { font-size: 14px; font-weight: 700; color: var(--metin); }
.i2-onay-not {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--soluk);
}
.i2-onay-alt {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 14px 14px;
}
.i2-onay-iptal, .i2-onay-tamam {
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--cizgi);
  background: rgba(255,255,255,.06);
  color: var(--metin);
}
.i2-onay-tamam {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}

/* ==================================================================
   v2.4.45 — SANAL DRON tek ust grubu
   Kullanici istegi: her SITL kaydi ayri grup acmasin; hepsi tek
   "SANAL DRON" grubunun altinda toplansin. Ic ice govde yapisi
   girinti ve sol serit ile gorsel olarak ayrilir.
   ================================================================== */
.bag-grup-sanal > .bag-satir-sanal{
  background: rgba(120, 90, 200, .10);
  border-left: 3px solid var(--sanal, #8b6ff0);
}
.bag-sanal-govde{ padding: 0; }
.bag-sanal-kayit{
  margin: 4px 0 4px 10px;
  border-left: 2px solid rgba(139, 111, 240, .35);
  border-radius: 0 4px 4px 0;
  background: rgba(255, 255, 255, .02);
}
.bag-sanal-kayit > .bag-satir-alt{
  padding-left: 6px;
  min-height: 30px;
}
.bag-sanal-kayit > .bag-satir-alt .bag-ad{ font-size: 11px; }
.bag-sanal-kayit > .bag-satir-alt .bag-alt{ font-size: 10px; }
.bag-sanal-kayit > .bag-grup-govde{ padding-left: 6px; }
/* Ust grubun kendi bos notu gizli: alt bloklar kendi notunu tasir */
.bag-sanal-govde > .bag-grup-bos{ display: none !important; }
.bag-sanal-sayac.dolu{ background: var(--sanal, #8b6ff0); }

/* ---------------------------------------------------------------
   v2.4.45 - Program Ayarlari: GCCDUAL seri port satiri
   --------------------------------------------------------------- */
.prog-ayar-port .prog-ayar-giris{
  flex:0 0 150px;
  background:var(--panel-arka,#161b22);
  color:var(--yazi,#e6edf3);
  border:1px solid var(--cerceve,#30363d);
  border-radius:4px;
  padding:3px 6px;
  font-size:11px;
  font-family:inherit;
}
.prog-ayar-port .prog-ayar-giris:disabled{opacity:.5;cursor:not-allowed;}
.prog-ayar-port .prog-ayar-giris:focus{
  outline:none;border-color:var(--vurgu,#58a6ff);
}

/* ===== v2.4.45: AI SSH konsolu ve SSH form alanlari ===== */
.ais-ssh-baslik{
  margin-top:10px; padding-top:8px; border-top:1px solid var(--cizgi);
  font-size:11px; font-weight:600; color:var(--vurgu);
  letter-spacing:.4px; text-transform:uppercase;
}
.ais-ssh-not{ font-size:10px; color:var(--soluk); margin-top:2px; }
.ai-satir-btnlar .ai-btn-ssh.tehlike{
  color:var(--kotu); border-color:var(--kotu);
}
.ai-satir-btnlar .ai-btn-konsol.etkin{
  color:var(--vurgu); border-color:var(--vurgu);
  background:rgba(0,0,0,.18);
}
.ai-konsol{
  margin:0 0 6px 0; border:1px solid var(--cizgi);
  border-radius:4px; overflow:hidden; background:#07090c;
}
.ai-konsol-baslik{
  display:flex; align-items:center; gap:8px;
  padding:4px 8px; background:var(--dugme-arka);
  border-bottom:1px solid var(--cizgi);
  font-size:10px; letter-spacing:.5px; color:var(--soluk);
}
.ai-konsol-baslik > span:first-child{ color:var(--vurgu); font-weight:600; }
.ai-konsol-baslik button{
  margin-left:auto; background:transparent; border:1px solid var(--cizgi);
  color:var(--soluk); border-radius:3px; cursor:pointer;
  width:20px; height:18px; font-size:9px; line-height:1;
}
.ai-konsol-baslik button + button{ margin-left:4px; }
.ai-konsol-baslik button:hover{ color:var(--vurgu); border-color:var(--vurgu); }
.ai-konsol-durum{ margin-left:6px; font-size:10px; }
.ai-konsol-durum.calisiyor{ color:var(--iyi); }
.ai-konsol-durum.bitti{ color:var(--kotu); }
.ai-konsol-govde{
  max-height:180px; overflow-y:auto; padding:4px 6px;
  font-family:"Consolas","Courier New",monospace; font-size:11px;
  line-height:1.45; color:#cfd6dd;
}
.ai-konsol-satir{ display:flex; gap:8px; white-space:pre-wrap;
  word-break:break-all; }
.ai-konsol-satir .zm{ color:#4d5a66; flex:0 0 auto; }
.ai-konsol-satir.akis-hata .mt{ color:#ff8a80; }
.ai-konsol-satir.akis-sistem .mt{ color:#8ab4f8; font-style:italic; }

/* ============================================================
   v2.4.45 — DRON HABERLESME KONSOLU (kart altinda acilir kapanir)
   Kullanici istegi: dron iletisim ciktilari genel konsola degil
   dronun kendi panelinin altina, CIPLAK bicimde yazilsin.
   ============================================================ */
.dk-konsol { border-top: 1px solid var(--cizgi); margin-top: 2px; }
.dk-konsol-bas {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; cursor: pointer; user-select: none;
  font-size: 11px; color: var(--soluk);
  background: var(--dugme-arka);
}
.dk-konsol-bas:hover { background: var(--dugme-hover); }
.dk-konsol-ok { font-size: 9px; transition: transform .15s; }
.dk-konsol-bas.kapali .dk-konsol-ok { transform: rotate(-90deg); }
.dk-konsol-ikon { font-size: 10px; color: var(--vurgu); }
.dk-konsol-ad { flex: 1; }
.dk-konsol-sayac {
  font-family: monospace; font-size: 10px; padding: 0 4px;
  border-radius: 6px; background: var(--panel);
  border: 1px solid var(--cizgi); color: var(--soluk);
}
.dk-konsol-araclar { display: flex; gap: 2px; }
.dk-konsol-btn {
  background: none; border: none; cursor: pointer;
  color: var(--soluk); font-size: 10px; padding: 1px 4px;
  border-radius: 3px;
}
.dk-konsol-btn:hover { background: var(--panel); color: var(--metin); }
.dk-konsol-btn.etkin { color: var(--uyari); }
.dk-konsol-govde {
  max-height: 168px; overflow-y: auto; overflow-x: hidden;
  background: #0b0f14; padding: 3px 4px;
  font-family: "Consolas", "DejaVu Sans Mono", monospace;
  font-size: 10.5px; line-height: 1.45;
}
.dk-konsol-govde.gizli { display: none; }
.dk-kons-satir {
  display: flex; gap: 5px; white-space: pre-wrap;
  word-break: break-word; align-items: baseline;
}
.dk-kons-ts { color: #5b6b7a; flex: 0 0 auto; }
.dk-kons-etiket {
  color: #7aa2c8; flex: 0 0 auto; min-width: 48px;
  font-weight: 600;
}
.dk-kons-metin { flex: 1 1 auto; color: #c8d4de; }
.dk-kons-bilgi  .dk-kons-metin { color: #c8d4de; }
.dk-kons-basari .dk-kons-metin { color: #7fdba0; }
.dk-kons-uyari  .dk-kons-metin { color: #e8c46a; }
.dk-kons-hata   .dk-kons-metin { color: #ef7a7a; }
.dk-kons-tekrar {
  flex: 0 0 auto; font-size: 9px; padding: 0 4px;
  border-radius: 6px; background: #24303c; color: #9fb3c4;
}

/* ===== v2.4.49: Program Ayarlari servis bolumu (systemd) ===== */
.svc-bolum { margin-top: 4px; }
.svc-durum-satir { align-items: center; }
.svc-rozet {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid; text-transform: uppercase;
}
.svc-rozet-aktif {
  color: var(--iyi, #2e9e4f); border-color: var(--iyi, #2e9e4f);
  background: rgba(46, 158, 79, .14);
}
.svc-rozet-durdu {
  color: var(--soluk, #8a94a6); border-color: var(--soluk, #8a94a6);
  background: rgba(138, 148, 166, .12);
}
.svc-rozet-yok {
  color: var(--kotu, #c0392b); border-color: var(--kotu, #c0392b);
  background: rgba(192, 57, 43, .14);
}
.svc-rozet-kurulmadi {
  color: #e67e22; border-color: #e67e22;
  background: rgba(230, 126, 34, .12);
}
.svc-dugme-kap {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px;
}
.svc-dugme {
  flex: 1 1 auto; min-width: 74px;
  padding: 6px 10px; font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--metin); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--cizgi); border-radius: 4px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.svc-dugme:hover:not(:disabled) {
  background: rgba(255, 255, 255, .12); border-color: var(--soluk);
}
.svc-dugme:disabled { opacity: .42; cursor: not-allowed; }
.svc-dugme-basari:hover:not(:disabled) {
  border-color: var(--iyi, #2e9e4f); color: var(--iyi, #2e9e4f);
}
.svc-dugme-uyari:hover:not(:disabled) {
  border-color: #e67e22; color: #e67e22;
}
.svc-dugme-tehlike:hover:not(:disabled) {
  border-color: var(--kotu, #c0392b); color: var(--kotu, #c0392b);
}
.svc-dugme-mini { flex: 0 0 auto; min-width: 0; padding: 4px 9px; }
.svc-gunluk-sar { margin-top: 8px; }
.svc-gunluk-kutu {
  max-height: 190px; overflow-y: auto;
  padding: 7px 9px; margin-top: 5px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; line-height: 1.45;
  color: var(--soluk); white-space: pre-wrap; word-break: break-word;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--cizgi); border-radius: 4px;
}

/* ===================================================================
   v2.4.50 — JOYSTICK AYARLARI PANELI (.ja-*)
   Onek `ja-` secildi: `.sv-` (AI rozeti) ve `.svc-` (servis paneli)
   ile cakismamasi icin denetlendi.
   =================================================================== */
.ja-kutu { width: min(600px, 100%); }
.ja-kaynak {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px;
}
.ja-kaynak label { font-size: 12px; color: var(--soluk); }
.ja-kaynak select {
  flex: 1 1 auto; padding: 6px 9px; font-size: 12px;
  background: var(--girdi-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 6px;
}
.ja-durum { font-size: 11px; color: var(--basari); }
.ja-durum.ja-yok { color: var(--soluk); }
/* Kayma uyarisi: pilot "durduk yere donuyor" belirtisini GORSUN */
.ja-uyari-kutu {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; margin-bottom: 12px;
  background: rgba(230, 160, 30, .12);
  border: 1px solid rgba(230, 160, 30, .45);
  border-radius: 7px;
  font-size: 11.5px; line-height: 1.5; color: var(--metin);
}
.ja-uyari-kutu > i { color: #e6a01e; margin-top: 1px; flex: 0 0 auto; }
.ja-satirlar { display: flex; flex-direction: column; gap: 11px; }
.ja-satir {
  padding: 10px 12px;
  background: var(--girdi-arka);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
}
.ja-satir-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.ja-satir-bas strong { font-size: 12.5px; color: var(--metin); }
.ja-ters {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--soluk); cursor: pointer;
  user-select: none;
}
.ja-ters input { cursor: pointer; }
/* Canli cubuk gostergesi: merkez cizgisi + hareketli nokta */
.ja-cubuk {
  position: relative; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--cizgi);
  margin-bottom: 6px;
}
.ja-cubuk-orta {
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: rgba(255, 255, 255, .3);
}
.ja-cubuk-nokta {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vurgu);
  transform: translate(-50%, -50%);
  transition: left .06s linear;
}
.ja-olcum {
  display: flex; gap: 16px; font-size: 10.5px;
  color: var(--soluk); margin-bottom: 7px;
}
.ja-olcum b { color: var(--metin); font-weight: 600; }
.ja-olcum b.ja-uyari { color: #e6a01e; }
.ja-kaydir {
  display: flex; align-items: center; gap: 9px; margin-top: 4px;
}
.ja-kaydir label {
  flex: 0 0 92px; font-size: 11px; color: var(--soluk);
}
.ja-kaydir input[type="range"] { flex: 1 1 auto; }
.ja-kaydir > span {
  flex: 0 0 40px; text-align: right;
  font-size: 11px; color: var(--metin);
  font-variant-numeric: tabular-nums;
}
.ja-egri { margin-top: 12px; }
.ja-egri label { flex: 0 0 130px; }
.ja-dugmeler {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; flex-wrap: wrap;
}
.ja-bosluk { flex: 1 1 auto; }

/* =================================================================
   v2.4.51 — POSTGRESQL ILK KURULUM / GOC SIHIRBAZI
   -----------------------------------------------------------------
   Bu perde GIRIS EKRANINDAN ONCE ve ONUN UZERINDE gorunur: veritabani
   yapilandirilmamisken kullanici dogrulanamaz (kullanicilar tablosu
   PostgreSQL'de), dolayisiyla giris formu gostermek anlamsizdir.
   Bu yuzden z-index sirket kilidinden (9400), giris ekranindan (3000)
   ve SERBEST FORM popup'indan (`.sf-popup` = 9500) YUKSEK, ancak uyari
   toast'larindan (9600) DUSUK tutulur — kayit hatasi bildirimi perdenin
   arkasinda kaybolmamalidir. OLCULDU: 9500 kullanilsa serbest form
   popup'i AYNI katmanda kalir ve DOM sirasina gore perdenin ustune
   cikabilirdi; 9550 bu belirsizligi kaldirir.

   Kullanici istegi: "tum bu sureclerde mutlaka progressbar olsun ve
   neyin surdugunu bilgilendirsin." Ilerleme cubugu iki katmandir:
   dolgu (yuzde) + ustunde surmekte olan adimin adi.
   ================================================================= */
.pgs-perde {
  position: fixed; inset: 0; z-index: 9550;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 14, .9);
  backdrop-filter: blur(4px);
  overflow: auto;
}
.pgs-kutu {
  width: min(660px, 100%);
  background: var(--panel-arka);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  padding: 20px 22px;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 15px;
}
/* ---- Baslik ---- */
.pgs-bas { display: flex; gap: 13px; align-items: flex-start; }
.pgs-bas > i {
  font-size: 22px; color: var(--vurgu); margin-top: 2px; flex: 0 0 auto;
}
.pgs-bas > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pgs-bas strong { font-size: 15px; letter-spacing: .4px; color: var(--metin); }
.pgs-bas span { font-size: 12px; color: var(--soluk); line-height: 1.5; }

/* ---- Adim gostergesi (1-2-3) ----
   Adim sayaci kullaniciya kac adim kaldigini soyler; sihirbazin
   "ne kadar surecek" belirsizligini kaldirir. */
.pgs-adimlar {
  display: flex; gap: 0; align-items: stretch;
  border: 1px solid var(--cizgi); border-radius: 9px; overflow: hidden;
}
.pgs-adim {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--soluk);
  background: rgba(255, 255, 255, .02);
  border-right: 1px solid var(--cizgi);
}
.pgs-adim:last-child { border-right: 0; }
:root[data-tema="acik"] .pgs-adim { background: rgba(0, 0, 0, .025); }
.pgs-adim-no {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  border: 1px solid var(--cizgi); color: var(--soluk);
}
.pgs-adim-ad {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgs-adim.aktif { color: var(--metin); background: rgba(31, 127, 158, .16); }
.pgs-adim.aktif .pgs-adim-no {
  background: var(--vurgu); border-color: var(--vurgu); color: #fff;
}
.pgs-adim.bitti .pgs-adim-no {
  background: var(--iyi); border-color: var(--iyi); color: #04121a;
}
.pgs-adim.bitti { color: var(--metin); }

/* ---- Alanlar ---- */
.pgs-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 13px; }
.pgs-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pgs-alan.genis { grid-column: 1 / -1; }
.pgs-etiket {
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--soluk); text-transform: uppercase;
}
.pgs-yildiz { color: var(--kotu); }
.pgs-giris {
  background: var(--giris-arka); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  width: 100%; box-sizing: border-box;
}
.pgs-giris:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 22%, transparent);
}
.pgs-ipucu { font-size: 11px; color: var(--soluk); line-height: 1.45; }

/* ---- Bilgi / hata seritleri ---- */
.pgs-hata {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: 7px;
  background: color-mix(in srgb, var(--kotu) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kotu) 42%, transparent);
  color: var(--kotu); font-size: 12.5px; line-height: 1.5;
  word-break: break-word;
}
.pgs-bilgi {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: 7px;
  background: rgba(31, 127, 158, .12);
  border: 1px solid rgba(31, 127, 158, .35);
  font-size: 12.5px; line-height: 1.55; color: var(--metin);
}
.pgs-bilgi.iyi {
  background: color-mix(in srgb, var(--iyi) 13%, transparent);
  border-color: color-mix(in srgb, var(--iyi) 40%, transparent);
}
.pgs-bilgi.uyari {
  background: rgba(230, 170, 40, .1);
  border-color: rgba(230, 170, 40, .35);
}
.pgs-bilgi > i { margin-top: 2px; flex: 0 0 auto; }

/* ---- Dogrulama ozet tablosu ---- */
.pgs-ozet {
  display: flex; flex-direction: column;
  border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden;
}
.pgs-ozet-satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--cizgi);
}
.pgs-ozet-satir:last-child { border-bottom: 0; }
.pgs-ozet-satir > span:first-child { color: var(--soluk); }
.pgs-ozet-satir > span:last-child {
  color: var(--metin); font-weight: 600; text-align: right;
  word-break: break-word;
}
.pgs-ozet-satir .f-iyi { color: var(--iyi); }
.pgs-ozet-satir .f-kotu { color: var(--kotu); }

/* ---- ILERLEME CUBUGU ----
   Kullanici istegi geregi hem yuzde hem "neyin surdugu" gosterilir.
   Gecis 220ms'dir: goc adimlari milisaniyeler icinde tamamlanabilir,
   daha uzun bir gecis cubugu gercekten geride birakir. */
.pgs-ilerleme { display: flex; flex-direction: column; gap: 8px; }
.pgs-ilerleme-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 12.5px;
}
.pgs-ilerleme-ileti {
  color: var(--metin); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pgs-ilerleme-yuzde {
  color: var(--vurgu); font-weight: 700; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.pgs-ilerleme-cubuk {
  height: 9px; border-radius: 6px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--cizgi);
}
:root[data-tema="acik"] .pgs-ilerleme-cubuk { background: rgba(0, 0, 0, .06); }
.pgs-ilerleme-dolgu {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #1f7f9e, #35b7d8);
  transition: width .22s ease;
}
.pgs-ilerleme-dolgu.bitti {
  background: linear-gradient(90deg, #1f9e6a, #35d89a);
}
.pgs-ilerleme-dolgu.hata {
  background: linear-gradient(90deg, #9e1f2f, #d8354a);
}
/* Adim gunlugu: hangi adimlarin bittigi gorulur (denetim izi). */
.pgs-gunluk {
  max-height: 168px; overflow: auto;
  border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 8px 10px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11.5px; line-height: 1.65; color: var(--soluk);
  background: rgba(0, 0, 0, .18);
}
:root[data-tema="acik"] .pgs-gunluk { background: rgba(0, 0, 0, .035); }
.pgs-gunluk-satir { display: flex; gap: 7px; }
.pgs-gunluk-satir > i { flex: 0 0 auto; margin-top: 3px; }
.pgs-gunluk-satir.tamam > i { color: var(--iyi); }
.pgs-gunluk-satir.hata { color: var(--kotu); }

/* ---- Alt bar ---- */
.pgs-alt {
  display: flex; gap: 9px; justify-content: flex-end;
  padding-top: 13px; border-top: 1px solid var(--cizgi);
}
.pgs-alt.ayrik { justify-content: space-between; }
.pgs-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border: 0; border-radius: 7px;
  background: linear-gradient(180deg, #1f7f9e, #15607a);
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px; cursor: pointer; font-family: inherit;
}
.pgs-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pgs-btn:disabled { opacity: .45; cursor: not-allowed; }
.pgs-btn-ikincil {
  background: var(--dugme-arka); border: 1px solid var(--cizgi);
  color: var(--metin); font-weight: 600;
}
.pgs-btn-ikincil:hover:not(:disabled) {
  background: var(--dugme-hover); filter: none;
}
.pgs-btn .fa-spinner { animation: pgs-don 1s linear infinite; }
@keyframes pgs-don { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .pgs-izgara { grid-template-columns: 1fr; }
  .pgs-kutu { padding: 16px; }
  .pgs-adim-ad { display: none; }
  .pgs-adim { justify-content: center; }
}

/* ===================================================================
   v2.4.53 - MERKEZ SUNUCU: baglanti yoneticisi secim listesi ve
   Program Ayarlari bolumu
   Kullanici istegi: "baglanti eklerken acik olan sunucular gorunsun
   ve kullanici secsin". Liste merkezden gelir; iletisim tek yonludur.
   =================================================================== */
/* --- Baglanti diyalogu: sunucu listesi --- */
.bag-merkez-arac{
  display:flex; align-items:center; gap:6px;
  margin:4px 0 6px 0;
}
.bag-merkez-arac .bag-merkez-sayac{
  font-size:10px; color:var(--soluk,#8b949e); margin-left:auto;
}
.bag-merkez-liste{
  max-height:190px; overflow-y:auto;
  border:1px solid var(--cizgi,#30363d); border-radius:4px;
  background:var(--panel-arka,#161b22);
}
.bag-merkez-satir{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; cursor:pointer;
  border-bottom:1px solid var(--cizgi,#30363d);
}
.bag-merkez-satir:last-child{ border-bottom:none; }
.bag-merkez-satir:hover{ background:rgba(88,166,255,.08); }
.bag-merkez-satir.secili{
  background:rgba(88,166,255,.16);
  box-shadow:inset 2px 0 0 var(--vurgu,#58a6ff);
}
.bag-merkez-satir .bmz-nokta{
  flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:var(--iyi,#3fb950);
}
.bag-merkez-satir.cevrimdisi .bmz-nokta{ background:var(--soluk,#8b949e); }
.bag-merkez-satir .bmz-govde{ flex:1 1 auto; min-width:0; }
.bag-merkez-satir .bmz-ad{
  font-size:11px; font-weight:600; color:var(--yazi,#e6edf3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bag-merkez-satir .bmz-alt{
  font-size:10px; color:var(--soluk,#8b949e);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bag-merkez-satir .bmz-sag{
  flex:0 0 auto; font-size:10px; color:var(--soluk,#8b949e);
  text-align:right;
}
/* --- Durum satirlari (her iki baglamda kullanilir) --- */
.bag-merkez-durum,
.pa-merkez-durum{
  font-size:10px; line-height:1.45; margin:4px 0 2px 0;
  padding:5px 7px; border-radius:4px;
  border:1px solid var(--cizgi,#30363d);
  background:rgba(0,0,0,.16); color:var(--soluk,#8b949e);
}
.bag-merkez-iyi{
  border-color:var(--iyi,#3fb950); color:var(--iyi,#3fb950);
}
.bag-merkez-kotu{
  border-color:var(--kotu,#f85149); color:var(--kotu,#f85149);
}
.bag-merkez-uyari{
  border-color:var(--uyari,#d29922); color:var(--uyari,#d29922);
}
/* --- Program Ayarlari: dogrula dugmesi --- */
.prog-ayar-dugme{
  flex:0 0 auto;
  background:var(--panel-arka,#161b22);
  color:var(--vurgu,#58a6ff);
  border:1px solid var(--vurgu,#58a6ff);
  border-radius:4px; padding:3px 10px;
  font-size:11px; font-family:inherit; cursor:pointer;
}
.prog-ayar-dugme:hover{ background:rgba(88,166,255,.12); }
.prog-ayar-dugme:disabled{
  opacity:.45; cursor:not-allowed;
  color:var(--soluk,#8b949e); border-color:var(--cizgi,#30363d);
}

/* ===================================================================
   v2.4.53 — Program Ayarlari > Merkez Sunucu > KOPRU KAYDI

   Kurulumun merkeze sunucu olarak kaydini ve kopru ajaninin canli
   durumunu gosterir. Renk kodlari mevcut `bag-merkez-*` siniflariyla
   PAYLASILIR (iyi/kotu/uyari); yeni renk sozlugu uretilmez, boylece
   tema degisimi tek noktadan yonetilir.
   =================================================================== */
.prog-ayar-altbaslik{
  font-size:10px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--soluk,#8b949e);
  margin:9px 0 3px 0; padding-top:7px;
  border-top:1px solid var(--cizgi,#30363d);
}
.prog-ayar-altbaslik i{ margin-right:5px; opacity:.75; }

/* Iki dugme yan yana. Popup min-width 340px oldugu icin dar durumda
   sarmalarina izin verilir (tasma yerine alt satira gecer). */
.pa-kopru-dugmeler{
  flex:0 0 auto; display:flex; gap:5px; flex-wrap:wrap;
  justify-content:flex-end;
}
.prog-ayar-dugme-ikincil{
  color:var(--soluk,#8b949e);
  border-color:var(--cizgi,#30363d);
}
.prog-ayar-dugme-ikincil:hover{
  background:rgba(139,148,158,.12);
  color:var(--metin,#c9d1d9);
}
.pa-kopru-durum{
  font-size:10px; line-height:1.45; margin:4px 0 2px 0;
  padding:5px 7px; border-radius:4px;
  border:1px solid var(--cizgi,#30363d);
  background:rgba(0,0,0,.16); color:var(--soluk,#8b949e);
  word-break:break-word;
}
/* Kayitli ama henuz baglanmamis: ne basari ne hata — beklemede. */
.bag-merkez-bekle{
  border-color:var(--uyari,#d29922); color:var(--uyari,#d29922);
}

/* ===============================================================
   v2.4.67 - PROGRAM AYARLARI: KOPRU KIMLIKLERI
   ---------------------------------------------------------------
   Merkez Uygulama kapali devre calisirken saha makineleri BU
   kuruluma baglanir. Her makineye bir kurulum kimligi verilir.

   Sir kutusu (.kok-sir-kutu) KALICIDIR: sunucu sirri yalniz bir kez
   dondurur, otomatik kapanan bir bildirim kullanicinin sirri
   kaybetmesine yol acardi.
   =============================================================== */
.kok-liste{ margin:5px 0 2px 0; display:flex; flex-direction:column; gap:3px; }
.kok-durum{
  font-size:10px; line-height:1.45; padding:5px 7px; border-radius:4px;
  border:1px solid var(--cizgi,#1e2630);
  background:var(--rozet-arka,rgba(0,0,0,.4));
  color:var(--soluk,#5c6b7a);
}
.kok-satir{
  display:flex; align-items:center; gap:6px;
  padding:5px 7px; border-radius:4px;
  border:1px solid var(--cizgi,#1e2630);
  background:var(--rozet-arka,rgba(0,0,0,.4));
}
/* Canli baglanti: sol kenarda yesil seritle isaretlenir. Renk TEK
   ayirt edici olmasin diye alt satirda ayrica "Cevrimici" yazar. */
.kok-satir-canli{
  border-left:3px solid var(--iyi,#3ddc84);
}
.kok-satir-sol{ flex:1 1 auto; min-width:0; }
.kok-ad{
  font-size:11px; color:var(--metin,#cfd8e3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kok-alt{
  font-size:9px; color:var(--soluk,#5c6b7a); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kok-sil{
  flex:0 0 auto; width:24px; height:24px; cursor:pointer;
  border-radius:4px; border:1px solid var(--cizgi,#1e2630);
  background:transparent; color:var(--soluk,#5c6b7a); font-size:10px;
}
.kok-sil:hover:not(:disabled){
  border-color:var(--kotu,#ff5d5d); color:var(--kotu,#ff5d5d);
  background:rgba(255,93,93,.12);
}
.kok-sil:disabled{ opacity:.4; cursor:not-allowed; }

.kok-sir-kutu{
  margin:6px 0; padding:7px; border-radius:4px;
  border:1px solid var(--uyari,#ffc94d);
  background:rgba(255,201,77,.09);
  display:flex; flex-direction:column; gap:4px;
}
.kok-sir-uyari{
  font-size:10px; line-height:1.45; color:var(--uyari,#ffc94d);
}
.kok-sir-uyari i{ margin-right:4px; }
.kok-sir-satir{ display:flex; align-items:center; gap:6px; }
.kok-sir-etiket{
  flex:0 0 96px; font-size:9px; color:var(--soluk,#5c6b7a);
}
/* Sir alani: kullanici kopyalayabilsin diye salt okunur giris olarak
   verilir (metin dugumu secilemez birakmak kopyalamayi zorlastirir). */
.kok-sir-giris{
  flex:1 1 auto; min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; padding:3px 5px; border-radius:3px;
  border:1px solid var(--cizgi,#1e2630);
  background:var(--giris-arka,#060809); color:var(--metin,#cfd8e3);
}

/* ===============================================================
   v2.4.53 Faz 7/8 - BAGLANTI YONETICISI: KOPRU (saha makinesi)
   gruplari
   ---------------------------------------------------------------
   Kullanici istegi: "dron baglanti yoneticisinde sisteme baglanan
   kullanicilarin uygulamalari altinda gruplanacak", "bu gruplama
   ayni zamanda ai ve video icin de gecerli olacak", "kopruler
   isim+IP ile gruplanir".

   Yapi (seri.js/bagKopruUstGrupCiz):
     .bag-grup.bag-grup-kopru[.kopru-cevrimici|.kopru-cevrimdisi]
       .bag-satir.bag-satir-kopru
         .bag-kat-ok  .bag-kopru-benek  .bag-bilgi  .bag-kopru-sayac
       .bag-grup-govde.bag-kopru-govde
         .bag-kopru-servisler > .bag-kopru-servis x5
         .bag-sanal-kayit  (kopruye bagli dron baglantilari)
         | .bag-kopru-bos  (bagli kayit yoksa)

   Renk: kopru grubu SANAL grubundan ayirt edilmelidir. SANAL mor
   (--sanal), kopru mavi-yesil (teal), siradan kayitlar notrdur.
   =============================================================== */
.bag-grup-kopru > .bag-satir-kopru{
  background: rgba(45, 160, 170, .10);
  border-left: 3px solid var(--kopru, #2da0aa);
}
.bag-grup-kopru.kopru-cevrimdisi > .bag-satir-kopru{
  background: rgba(120, 130, 140, .08);
  border-left-color: var(--soluk, #5c6b7a);
}
/* Cevrimici benegi: yanip sonmez (dron ucuran arayuzde dikkat
   dagitir), yalniz dolu/bos ayrimi yapar. */
.bag-kopru-benek{
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--soluk, #5c6b7a);
  margin-right: 2px;
}
.bag-kopru-benek.acik{
  background: var(--iyi, #3ddc84);
  border-color: var(--iyi, #3ddc84);
  box-shadow: 0 0 5px rgba(61, 220, 132, .55);
}
.bag-kopru-sayac.dolu{ background: var(--kopru, #2da0aa); }
.bag-kopru-govde{ padding: 0 0 4px 0; }

/* ---- Bes servis seridi ---- */
.bag-kopru-servisler{
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 5px 8px 5px 12px;
  border-bottom: 1px solid var(--cizgi, #1e2630);
}
.bag-kopru-servis{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 3px;
  font-size: 10px; line-height: 1.3;
  border: 1px solid var(--cizgi, #1e2630);
  background: rgba(255, 255, 255, .02);
  color: var(--soluk, #5c6b7a);
  white-space: nowrap;
}
.bag-kopru-servis i{ font-size: 9px; opacity: .85; }
.bag-kopru-servis-ad{ font-weight: 600; letter-spacing: .2px; }
.bag-kopru-servis-durum{ opacity: .85; }
.bag-kopru-servis.servis-calisiyor{
  border-color: rgba(61, 220, 132, .45);
  background: rgba(61, 220, 132, .10);
  color: var(--iyi, #3ddc84);
}
.bag-kopru-servis.servis-durdu{
  border-color: var(--cizgi, #1e2630);
  color: var(--soluk, #5c6b7a);
}
/* Durum BILINMIYOR: sessiz gecilmez, gorsel olarak isaretlenir.
   Kopru cevrimdisi ya da ic sorgu ucu yanit vermedi demektir. */
.bag-kopru-servis.servis-bilinmiyor{
  border-style: dashed;
  border-color: var(--uyari, #ffc94d);
  color: var(--uyari, #ffc94d);
  cursor: help;
}

/* ---- Kopruye bagli kayit yoksa ---- */
.bag-kopru-bos{
  padding: 6px 10px 4px 14px;
  font-size: 10px; color: var(--soluk, #5c6b7a);
  font-style: italic;
}
/* Kopru grubunda alt bloklar kendi notunu tasir */
.bag-kopru-govde > .bag-grup-bos{ display: none !important; }
/* Kopru altindaki kayit bloklarinin sol cizgisi kopru rengine uyar */
.bag-kopru-govde > .bag-sanal-kayit{
  border-left-color: rgba(45, 160, 170, .40);
}
/* KOPRU tur etiketi */
.bag-tur-kopru{ background: rgba(45, 160, 170, .20); color: #6fd3dc; }

/* =====================================================================
   v2.4.56 — AI SUNUCULARI ve KAMERALAR icin KOPRU GRUPLARI
   Kullanici istegi: "hem ai icin hem kameralar icin ayni kopru
   gruplamasi gerekiyor". Gorsel dil Baglanti Yoneticisi ile ayni
   tutulur (--kopru rengi, sol kenar cizgisi, KOPRU rozeti) ki pilot
   uc panelde ayni sey iki farkli bicimde gorunmesin.
   ===================================================================== */

/* ---- AI sunuculari ---- */
.ai-kopru-baslik{
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 4px 0; padding: 5px 8px;
  border-radius: 4px;
  background: rgba(45, 160, 170, .10);
  border-left: 3px solid var(--kopru, #2da0aa);
  font-size: 11px;
}
.ai-kopru-baslik:first-child{ margin-top: 0; }
.ai-kopru-baslik .ad{
  font-weight: 700; letter-spacing: .3px;
  color: var(--metin, #dfe6ee);
  text-transform: uppercase;
}
.ai-kopru-baslik .alt{
  font-size: 10px; color: var(--soluk, #5c6b7a);
}
.ai-kopru-baslik.grupsuz{
  background: rgba(120, 130, 140, .08);
  border-left-color: var(--soluk, #5c6b7a);
}
.ai-kopru-rozet{
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  background: rgba(45, 160, 170, .20); color: #6fd3dc;
}
/* Kopru basligi altindaki kayitlar iceri girer: hangi gruba ait
   oldugu bir bakista gorulur. */
.ai-kopru-baslik ~ .ai-satir{ margin-left: 10px; }

/* ---- Kameralar ---- */
.kam-kopru-liste{ display: block; }
.kam-kopru-baslik{
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 4px 0; padding: 5px 8px;
  border-radius: 4px;
  background: rgba(45, 160, 170, .10);
  border-left: 3px solid var(--kopru, #2da0aa);
  font-size: 11px;
}
.kam-kopru-baslik:first-child{ margin-top: 0; }
.kam-kopru-baslik .ad{
  font-weight: 700; letter-spacing: .3px;
  color: var(--metin, #dfe6ee);
  text-transform: uppercase;
}
.kam-kopru-baslik .alt{
  font-size: 10px; color: var(--soluk, #5c6b7a);
}
.kam-kopru-baslik.grupsuz{
  background: rgba(120, 130, 140, .08);
  border-left-color: var(--soluk, #5c6b7a);
}
.kam-kopru-rozet{
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  background: rgba(45, 160, 170, .20); color: #6fd3dc;
}
.kam-kopru-led{
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--soluk, #5c6b7a);
}
.kam-kopru-led.cevrimici{
  background: var(--iyi, #3ddc84);
  border-color: var(--iyi, #3ddc84);
  box-shadow: 0 0 5px rgba(61, 220, 132, .55);
}
.kam-kopru-bos{
  padding: 6px 10px 4px 14px;
  font-size: 10px; color: var(--soluk, #5c6b7a);
  font-style: italic;
}
/* Grup govdesi: onizleme kipinde izgara, liste kipinde duz akis.
   Izgara sinifi JS tarafinda eklenir (kam-izgara). */
.kam-kopru-govde{ margin-left: 10px; }


/* ===================================================================
   v2.5.0: BAKIM VE YAKINLIK BILESENLERI
   Islemler menusu gruplama + bakim pencereleri + 3B yakinlik secici.
   Sabit renk YOK: acik tema ayni siniflari kullanir.
   =================================================================== */

/* --- ISLEMLER MENUSU GRUP BASLIGI --------------------------------- */
/* Izgarada tum sutunlari kaplar; menu on bes dugmeden yirmi dorde
   cikinca duz izgara taranabilir olmaktan cikmisti. */
.dk-islem-grup {
  grid-column: 1 / -1;
  margin: 6px 0 1px;
  padding: 3px 2px 4px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.dk-islem-grup:first-child { margin-top: 0; }

/* --- BAKIM PENCERELERI (ortak) ------------------------------------ */
/* Kalibrasyon secimi ve her alt kalibrasyon ayni erisilebilir pencere
   sozlesmesini kullanir. `min()` kucuk ekranda viewport'u asmaz. */
.dk-mini-popup.db-kalib-secim,
.dk-mini-popup.db-kalib-pencere {
  width: min(560px, calc(100vw - 24px));
  height: min(520px, calc(100vh - 24px));
  min-width: min(500px, calc(100vw - 24px));
  min-height: min(400px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
}
.dk-mini-popup.db-kalib-secim > .db-govde,
.dk-mini-popup.db-kalib-pencere > .db-govde {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dk-mini-popup.db-kalib-pencere .db-akis {
  flex: 1 1 168px;
  min-height: 126px;
  max-height: none;
}
.db-motor-pencere { width: 420px; max-width: 95vw; }
.db-ilkayar-pencere { width: 440px; max-width: 95vw; }

.db-kalib-acik {
  margin: 9px 10px 4px;
  color: var(--metin); font-size: 11px; line-height: 1.5;
}
.db-uyari {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 9px 10px 2px; padding: 7px 9px;
  border: 1px solid var(--kotu); border-radius: 5px;
  background: var(--rozet-arka);
  color: var(--metin); font-size: 10.5px; line-height: 1.45;
}
.db-uyari i { color: var(--kotu); margin-top: 1px; }
.db-not {
  margin: 6px 10px 2px; padding: 6px 9px;
  border-left: 2px solid var(--interceptor);
  background: var(--rozet-arka);
  color: var(--soluk); font-size: 10px; line-height: 1.45;
}
.db-gorsel { margin: 8px 10px 2px; }
.db-btnler {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 10px 10px 4px;
}
.db-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--dugme-arka); color: var(--metin);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.db-btn:hover { background: var(--dugme-hover); }
.db-btn.iyi { border-color: var(--iyi); }
.db-btn.iyi i { color: var(--iyi); }
.db-btn.kotu { border-color: var(--kotu); }
.db-btn.kotu i { color: var(--kotu); }
.db-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- SAYI GIRISI (ortak) ------------------------------------------ */
.db-giris-satir {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
}
.db-giris-etiket {
  flex: 1 1 auto; min-width: 0;
  color: var(--metin); font-size: 10.5px; font-weight: 600;
}
.db-giris-ipucu {
  display: block; margin-top: 2px;
  color: var(--soluk); font-size: 9px; font-weight: 400;
  line-height: 1.35;
}
.db-giris-alan {
  flex: 0 0 96px; width: 96px;
  padding: 5px 7px;
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: var(--girdi); color: var(--metin);
  font-size: 11px; font-family: inherit;
}
.db-giris-alan:focus {
  outline: none; border-color: var(--interceptor);
}

/* --- KALIBRASYON MESAJ AKISI -------------------------------------- */
/* Kalibrasyon mesajlari eskiden yalniz genel konsola gidiyordu; artik
   her pencere KENDI oturumunun satirlarini gosterir. */
.db-akis-bas {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 10px 3px;
  color: var(--soluk); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.db-akis {
  margin: 0 10px 10px; padding: 7px 8px;
  max-height: 168px; overflow-y: auto;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--giris-arka);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px; line-height: 1.5;
}
.db-akis-sat {
  display: flex; gap: 7px; padding: 1px 0;
  color: var(--metin);
}
.db-akis-sat + .db-akis-sat {
  border-top: 1px solid var(--cizgi);
}
.db-akis-an {
  flex: 0 0 auto; color: var(--soluk);
}
.db-akis-metin { flex: 1 1 auto; word-break: break-word; }
.db-akis-sat.onem-kotu .db-akis-metin { color: var(--kotu); }
.db-akis-sat.onem-uyari .db-akis-metin { color: var(--uyari); }
.db-akis-sat.onem-iyi .db-akis-metin { color: var(--iyi); }
.db-akis-bos {
  color: var(--soluk); font-style: italic;
}

/* --- KALIBRASYON SECIM IZGARASI ----------------------------------- */
.db-secim-metin { width: 372px; max-width: 94vw; }
.db-secim-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px; padding: 11px 11px 4px;
}
.db-secim-hucre {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  min-height: 70px; padding: 8px 5px;
  border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.db-secim-hucre:hover { background: var(--dugme-hover); }
.db-secim-hucre:active { transform: scale(0.97); }
.db-secim-hucre i { font-size: 17px; color: var(--interceptor); }
.db-secim-hucre span {
  font-size: 9.5px; font-weight: 600; line-height: 1.25;
}
.db-secim-hucre.tehlikeli { border-color: var(--kotu); }
.db-secim-hucre.tehlikeli i { color: var(--kotu); }

/* --- IVME ALTI YON IZGARASI --------------------------------------- */
.db-ivme-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.db-ivme-hucre {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  min-height: 58px; padding: 6px 4px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--giris-arka); color: var(--soluk);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.db-ivme-ikon { font-size: 15px; }
.db-ivme-ad {
  font-size: 9px; font-weight: 600; text-align: center;
  line-height: 1.2;
}
.db-ivme-tik {
  position: absolute; top: 4px; right: 5px;
  font-size: 9px; color: var(--iyi); opacity: 0;
}
.db-ivme-hucre.sirada {
  border-color: var(--interceptor); color: var(--metin);
  background: var(--dugme-hover);
}
.db-ivme-hucre.tamam { color: var(--iyi); border-color: var(--iyi); }
.db-ivme-hucre.tamam .db-ivme-tik { opacity: 1; }
.db-ivme-durum {
  margin-top: 7px; padding: 5px 8px;
  border-radius: 4px; background: var(--rozet-arka);
  color: var(--metin); font-size: 10px; text-align: center;
}

/* --- PUSULA KALIBRASYON GORSELI ----------------------------------- */
.db-pusula { display: flex; align-items: center; gap: 12px; }
.db-pusula-kure {
  position: relative; flex: 0 0 96px;
  width: 96px; height: 96px;
  border: 1px solid var(--cizgi); border-radius: 50%;
  background: var(--giris-arka);
  overflow: hidden;
}
.db-pusula-halka {
  position: absolute; inset: 12px;
  border: 1px dashed var(--cizgi); border-radius: 50%;
}
.db-pusula-nokta {
  position: absolute; width: 3px; height: 3px;
  border-radius: 50%; background: var(--interceptor);
  transform: translate(-50%, -50%);
}
.db-pusula-yuzde {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--metin); font-size: 17px; font-weight: 700;
}
.db-pusula-bilgi { flex: 1 1 auto; min-width: 0; }
.db-pusula-arac {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0;
  color: var(--metin); font-size: 10px;
}
.db-pusula-arac + .db-pusula-arac {
  border-top: 1px solid var(--cizgi);
}
.db-pusula-arac b { color: var(--soluk); font-weight: 600; }

/* --- ILERLEME CUBUGU (ortak) -------------------------------------- */
.db-bar {
  height: 5px; margin-top: 7px;
  border-radius: 3px; background: var(--giris-arka);
  overflow: hidden;
}
.db-bar > i {
  display: block; height: 100%; width: 0;
  background: var(--interceptor);
  transition: width 0.3s;
}

/* --- SABIT ARAC / UFUK / BARO GORSELLERI -------------------------- */
.db-sema, .db-ufuk, .db-olcum, .db-esc-sat {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 9px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--giris-arka);
}
.db-sema-ok, .db-esc-no {
  flex: 0 0 auto; font-size: 26px; color: var(--interceptor);
}
.db-sema-etiket, .db-esc-metin {
  flex: 1 1 auto; color: var(--metin);
  font-size: 10px; line-height: 1.45;
}
.db-ufuk-merkez {
  position: relative; flex: 0 0 108px;
  width: 108px; height: 54px;
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: var(--giris-arka); overflow: hidden;
}
.db-ufuk-cizgi {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--interceptor);
  transform-origin: center;
}
.db-ufuk-kutu {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 2px; margin: -1px 0 0 -17px;
  background: var(--caymaz);
}
.db-ufuk-deger {
  flex: 1 1 auto; min-width: 0;
  color: var(--metin); font-size: 10px; line-height: 1.6;
}
.db-ufuk-deger b { color: var(--soluk); font-weight: 600; }
.db-olcum-cift {
  flex: 1 1 auto;
  color: var(--metin); font-size: 10px; line-height: 1.6;
}
.db-olcum-cift b { color: var(--soluk); font-weight: 600; }
.db-olcum-et {
  flex: 0 0 auto; font-size: 24px; color: var(--interceptor);
}

/* --- RADYO KANAL CUBUKLARI ---------------------------------------- */
.db-rc-iz {
  padding: 8px 9px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--giris-arka);
}
.db-rc-sat {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
}
.db-rc-ad {
  flex: 0 0 52px;
  color: var(--soluk); font-size: 9.5px; font-weight: 600;
}
.db-rc-kutu {
  position: relative; flex: 1 1 auto; height: 8px;
  border-radius: 4px; background: var(--dugme-arka);
  overflow: hidden;
}
.db-rc-dolgu {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--interceptor);
  transition: width 0.12s;
}
.db-rc-deg {
  flex: 0 0 42px; text-align: right;
  color: var(--metin); font-size: 9.5px;
  font-family: ui-monospace, Menlo, monospace;
}
.db-rc-bos {
  color: var(--soluk); font-size: 10px; font-style: italic;
}

/* --- MOTOR TESTI -------------------------------------------------- */
.db-motor-izgara {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin: 9px 10px 2px;
}
.db-motor-hucre {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 4px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; font-size: 10px; font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.db-motor-hucre:hover { background: var(--dugme-hover); }
.db-motor-hucre.secili {
  border-color: var(--interceptor); background: var(--dugme-hover);
}
.db-motor-hucre small {
  color: var(--soluk); font-size: 8px; font-weight: 400;
}
.db-motor-durum {
  margin: 8px 10px 2px; padding: 7px 9px;
  border-radius: 4px; background: var(--rozet-arka);
  color: var(--metin); font-size: 10.5px; line-height: 1.45;
}
.db-motor-durum.kotu { color: var(--kotu); }
.db-motor-durum.iyi { color: var(--iyi); }
.db-motor-geri {
  margin: 4px 10px 8px;
  color: var(--soluk); font-size: 9.5px; line-height: 1.45;
}

/* --- ILK AYAR (INITIAL TUNE) -------------------------------------- */
.db-rapor {
  width: calc(100% - 20px); margin: 8px 10px 2px;
  border-collapse: collapse;
  font-size: 10px;
}
.db-rapor th, .db-rapor td {
  padding: 4px 6px; text-align: left;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.db-rapor th {
  color: var(--soluk); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.db-rapor td.ad {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--interceptor);
}
.db-rapor td.simdi { color: var(--soluk); }
.db-rapor td.oneri { font-weight: 700; }
.db-rapor tr.degisecek td.oneri { color: var(--caymaz); }
.db-rapor tr.ayni td.oneri { color: var(--iyi); }
.db-ia-bos {
  margin: 10px; color: var(--soluk);
  font-size: 10.5px; font-style: italic;
}

/* ===================================================================
   YAKINLIK ALGILAYICISI — 3B GOVDE SECICI
   CSS 3B donusumu kullanilir; pencere icinde ikinci WebGL baglami
   acmak harita basarimini dusururdu.
   =================================================================== */
.dpx-pencere { width: 428px; max-width: 95vw; }
.dpx-sahne {
  position: relative;
  height: 232px; margin: 10px 10px 2px;
  border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--giris-arka);
  perspective: 760px;
  overflow: hidden;
}
.dpx-uzay {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-64deg) rotateZ(0deg);
  transition: transform 0.4s;
}
/* Govde: alti yuzlu kutu */
.dpx-yuz {
  position: absolute;
  border: 1px solid var(--interceptor);
  background: var(--rozet-arka);
}
/* Yon dugmeleri gövdenin dısında, ilgili yone kaydirilmis durur */
.dpx-yon {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  width: 60px; height: 38px; margin: -19px 0 0 -30px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; font-size: 9px; font-weight: 700;
  transform-style: preserve-3d;
  transition: border-color 0.2s, background 0.2s;
}
.dpx-yon:hover {
  background: var(--dugme-hover); border-color: var(--interceptor);
}
.dpx-yon.acik { border-color: var(--iyi); }
.dpx-yon.acik .dpx-yon-deg { color: var(--iyi); }
.dpx-yon.yakin { border-color: var(--kotu); }
.dpx-yon.yakin .dpx-yon-deg { color: var(--kotu); }
.dpx-yon.kapali { opacity: 0.5; }
.dpx-yon-ad { font-size: 8.5px; letter-spacing: 0.04em; }
.dpx-yon-deg {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; color: var(--soluk);
}
/* Sahne denetimleri */
.dpx-denetim {
  position: absolute; right: 7px; bottom: 7px;
  display: flex; gap: 4px;
}
.dpx-denetim button {
  width: 24px; height: 24px;
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: var(--dugme-arka); color: var(--metin);
  cursor: pointer; font-size: 10px;
}
.dpx-denetim button:hover { background: var(--dugme-hover); }
.dpx-ipucu {
  position: absolute; left: 8px; top: 7px;
  color: var(--soluk); font-size: 9px; line-height: 1.4;
  pointer-events: none;
}
/* Ozet satiri */
.dpx-ozet {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 10px 2px;
}
.dpx-ozet-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: var(--rozet-arka);
  color: var(--metin); font-size: 9.5px; font-weight: 600;
}
.dpx-ozet-rozet i { color: var(--interceptor); font-size: 9px; }
.dpx-ozet-rozet.kapali { color: var(--soluk); }
.dpx-ozet-rozet.kapali i { color: var(--soluk); }
/* Yon ayar penceresi */
.dpx-yon-pencere { width: 384px; max-width: 94vw; }
.dpx-olcum {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px; margin: 9px 10px 2px;
}
.dpx-buyuk {
  padding: 7px 8px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--giris-arka); text-align: center;
}
.dpx-olcum-etiket {
  color: var(--soluk); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.dpx-buyuk-deg {
  margin-top: 3px;
  color: var(--metin); font-size: 14px; font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
}
.dpx-buyuk-br {
  color: var(--soluk); font-size: 9px; font-weight: 400;
}
.dpx-bolum-bas {
  margin: 11px 10px 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--soluk); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.dpx-param { margin: 0 10px; }
.dpx-yok {
  margin: 9px 10px; padding: 9px 10px;
  border: 1px dashed var(--cizgi); border-radius: 5px;
  color: var(--soluk); font-size: 10px; line-height: 1.5;
}
.dpx-yok b { color: var(--metin); }

/* --- v2.5.0b: eksik siniflar (sinav bulgusu) --------------------- */
/* Ortak alan bileseni: bakim pencerelerindeki etiket+giris ciftleri.
   Motor testi, ilk ayar ve kalibrasyon pencereleri paylasir. */
.db-govde {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; overflow-y: auto;
}
.db-alanlar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 14px;
}
.db-alan { display: flex; flex-direction: column; gap: 4px; }
.db-alan-et {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soluk);
}
.db-alan-gir {
  background: var(--zemin2); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 6px;
  padding: 7px 9px; font-size: 13px; font-family: inherit;
  min-width: 0;
}
.db-alan-gir:focus {
  outline: none; border-color: var(--vurgu);
}
.db-alan-gir:disabled {
  opacity: .55; cursor: not-allowed;
}
.db-alan-ipucu {
  font-size: 11px; line-height: 1.45; color: var(--soluk);
}
/* Ileti akisi: saat damgasi ve yinelenen ileti sayaci */
.db-akis-saat {
  flex: 0 0 auto; color: var(--soluk);
  font-variant-numeric: tabular-nums;
}
.db-akis-tekrar {
  flex: 0 0 auto; margin-left: 6px; padding: 0 5px;
  border: 1px solid var(--kenar); border-radius: 8px;
  font-size: 10px; color: var(--soluk);
}

/* --- v2.5.0: arm secim penceresi -------------------------------- */
.dk-arm-perde {
  position: fixed; inset: 0; z-index: 4200;
  background: var(--perde);
  display: flex; align-items: center; justify-content: center;
}
.dk-arm-kart {
  background: var(--zemin1); border: 1px solid var(--kenar);
  border-radius: 10px; box-shadow: var(--golge2);
  width: 300px; max-width: calc(100vw - 24px);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.dk-arm-baslik {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--baslik-renk);
}
.dk-arm-not { font-size: 12px; color: var(--soluk); line-height: 1.5; }
.dk-arm-sec {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--zemin2); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 8px;
  padding: 9px 11px; cursor: pointer; font-family: inherit;
}
.dk-arm-sec:hover { border-color: var(--vurgu); }
.dk-arm-sec.tehlikeli { border-color: var(--uyari); }
.dk-arm-sec.tehlikeli:hover { border-color: var(--kotu); }
.dk-arm-sec-et { font-size: 13px; font-weight: 600; }
.dk-arm-sec.tehlikeli .dk-arm-sec-et { color: var(--uyari); }
.dk-arm-sec-ac { font-size: 11px; color: var(--soluk); line-height: 1.4; }
.dk-arm-iptal {
  margin-top: 2px; background: transparent; color: var(--soluk);
  border: 1px solid var(--kenar); border-radius: 8px;
  padding: 7px; cursor: pointer; font-family: inherit; font-size: 12px;
}
.dk-arm-iptal:hover { color: var(--metin); border-color: var(--vurgu); }

/* ================================================================
   v2.5.0c: BAKIM VE YAKINLIK — kalan siniflar
   Tam olcum: olc_css_eksik.py (42 sinif)
   ================================================================ */

/* --- Bakim: yatay alan dizilimi ve genis dugme ------------------- */
.db-alanlar-yatay {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
}
.db-alan-onay {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--metin); cursor: pointer;
}
.db-btn-genis { width: 100%; justify-content: center; }

/* --- Bakim: armli kilit uyarisi ---------------------------------- */
.db-kilit {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--uyari); color: var(--uyari);
  background: var(--zemin2); font-size: 12px; line-height: 1.5;
}

/* --- Bakim: yonerge notlari -------------------------------------- */
.db-notlar {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 11px; border-radius: 8px;
  background: var(--zemin2); border: 1px solid var(--kenar);
}
.db-notlar-sat {
  display: flex; gap: 7px; font-size: 12px; line-height: 1.5;
  color: var(--metin);
}
.db-notlar-sat::before {
  content: "\2022"; color: var(--vurgu); flex: 0 0 auto;
}

/* --- Bakim: olcum degeri (pusula, barometre) --------------------- */
.db-olcum-deg {
  font-size: 15px; font-weight: 600; color: var(--baslik-renk);
  font-variant-numeric: tabular-nums;
}

/* --- Bakim: rapor satirlari (kalibrasyon sonucu) ----------------- */
.db-rapor-sat {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid var(--kenar);
}
.db-rapor-sat:last-child { border-bottom: none; }
.db-rapor-ad { color: var(--soluk); }
.db-rapor-deg {
  color: var(--metin); font-variant-numeric: tabular-nums;
}

/* --- Bakim: radyo kanal izgarasi -------------------------------- */
.db-rc-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px 12px;
}

/* --- Bakim: islem sonucu ---------------------------------------- */
.db-sonuc {
  padding: 8px 11px; border-radius: 8px; font-size: 12px;
  line-height: 1.5; border: 1px solid var(--kenar);
  background: var(--zemin2); color: var(--metin);
}
.db-sonuc.iyi { border-color: var(--iyi); color: var(--iyi); }
.db-sonuc.kotu { border-color: var(--kotu); color: var(--kotu); }

/* --- Bakim: batarya voltaj kalibrasyonu -------------------------- */
.db-batarya-kalib {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1px solid var(--kenar); border-radius: 8px;
  background: var(--zemin2);
}
.db-batarya-kalib h4 {
  margin: 0; color: var(--baslik-renk); font-size: 12px;
  font-weight: 500; letter-spacing: .05em;
}
.db-batarya-kalib p {
  margin: 0; color: var(--soluk); font-size: 11px; line-height: 1.5;
}
.db-voltaj-canli {
  align-self: end; color: var(--soluk); font-size: 12px;
  font-variant-numeric: tabular-nums; padding-bottom: 8px;
}
@media (max-width: 520px) {
  .db-voltaj-canli { width: 100%; align-self: auto; padding-bottom: 0; }
}

/* --- Bakim: ilk ayar karsilastirma tablosu ----------------------- */
.db-tablo {
  display: flex; flex-direction: column;
  border: 1px solid var(--kenar); border-radius: 8px; overflow: hidden;
}
.db-tablo-sat {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px; padding: 6px 10px; font-size: 12px;
  border-bottom: 1px solid var(--kenar);
}
.db-tablo-sat:last-child { border-bottom: none; }
.db-tablo-bas {
  background: var(--zemin2); color: var(--soluk);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
.db-tablo-ad {
  color: var(--metin); font-family: var(--mono, monospace);
  word-break: break-all;
}
.db-tablo-mevcut {
  color: var(--soluk); font-variant-numeric: tabular-nums;
  text-align: right;
}
.db-tablo-oneri {
  color: var(--vurgu); font-variant-numeric: tabular-nums;
  text-align: right; font-weight: 600;
}
/* Onerilen deger aractakiyle ayniysa vurgu gereksiz */
.db-tablo-sat.ayni .db-tablo-oneri {
  color: var(--soluk); font-weight: 400;
}

/* ================================================================
   YAKINLIK ALGILAYICISI
   ================================================================ */

/* --- Ozet: yuva listesi ----------------------------------------- */
.dpx-ozet-bas {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soluk); margin-top: 2px;
}
.dpx-ozet-sat {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid var(--kenar);
}
.dpx-ozet-sat:last-child { border-bottom: none; }
.dpx-ozet-ad { color: var(--metin); flex: 0 0 auto; }
.dpx-ozet-bilgi {
  color: var(--soluk); text-align: right;
  font-variant-numeric: tabular-nums;
}
.dpx-ozet-uyari {
  padding: 8px 10px; border-radius: 8px; font-size: 12px;
  line-height: 1.5; color: var(--soluk);
  background: var(--zemin2); border: 1px solid var(--kenar);
}

/* --- Ozet: durum rozeti ----------------------------------------- */
.dpx-rozet {
  padding: 1px 7px; border-radius: 9px; font-size: 10px;
  letter-spacing: .04em; border: 1px solid var(--kenar);
  color: var(--soluk);
}
.dpx-rozet.iyi { border-color: var(--iyi); color: var(--iyi); }
.dpx-rozet.bos { border-color: var(--kenar); color: var(--soluk); }

/* --- Ozet: olcum yasi (bayat veri gorunur olmali) --------------- */
.dpx-yas {
  font-size: 10px; color: var(--soluk);
  font-variant-numeric: tabular-nums;
}
/* Bayat olcum: kullanici guncel sanmamali */
.dpx-yas.bayat { color: var(--uyari); }

/* --- Sahne: arac dugmeleri (dondur, sifirla, kalkan) ------------ */
.dpx-araclar {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.dpx-arac-btn {
  background: var(--zemin2); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 7px;
  padding: 5px 9px; font-size: 11px; cursor: pointer;
  font-family: inherit;
}
.dpx-arac-btn:hover { border-color: var(--vurgu); }
.dpx-arac-btn.etkin { border-color: var(--vurgu); color: var(--vurgu); }

/* --- Yon penceresi: kutu ve govde ------------------------------- */
.dpx-kutu {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; overflow-y: auto;
}
.dpx-yon-govde {
  display: flex; flex-direction: column; gap: 10px;
}
.dpx-durum {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--soluk);
}

/* --- Yon penceresi: canli olcum menzil cubugu ------------------- */
.dpx-menzil-dolgu {
  height: 100%; width: 0;
  background: var(--vurgu); border-radius: inherit;
  transition: width .18s linear;
}
/* Guvenlik payinin altina dusen olcum: renk uyarmali */
.dpx-menzil-dolgu.yakin { background: var(--kotu); }
.dpx-menzil-dolgu.pay { background: var(--uyari); }
.dpx-olcum-bos {
  font-size: 12px; color: var(--soluk); font-style: italic;
}

/* --- Yon penceresi: parametre alanlari -------------------------- */
.dpx-param-bas {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soluk); margin-top: 4px;
}
.dpx-param-not {
  font-size: 11px; line-height: 1.5; color: var(--soluk);
}
/* Onbellek bos uyarisi: uydurma varsayilan tuzagina karsi (v2.4.38) */
.dpx-param-uyari {
  padding: 8px 10px; border-radius: 8px; font-size: 12px;
  line-height: 1.5; color: var(--uyari);
  background: var(--zemin2); border: 1px solid var(--uyari);
}
.dpx-param-yol {
  font-family: var(--mono, monospace); font-size: 11px;
  color: var(--soluk); word-break: break-all;
}
.dpx-alan {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--kenar);
}
.dpx-alan:last-child { border-bottom: none; }
.dpx-alan-sol {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.dpx-alan-et { font-size: 12px; color: var(--metin); }
.dpx-alan-kod {
  font-family: var(--mono, monospace); font-size: 10px;
  color: var(--soluk);
}
.dpx-alan-gir {
  flex: 0 0 96px; background: var(--zemin2); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 6px;
  padding: 5px 7px; font-size: 12px; font-family: inherit;
  text-align: right;
}
.dpx-alan-gir:focus { outline: none; border-color: var(--vurgu); }
.dpx-alan-gir:disabled { opacity: .55; cursor: not-allowed; }
/* Degistirilmis alan: yazilmadan once gorunur olmali */
.dpx-alan-gir.degisti { border-color: var(--vurgu); }
.dpx-alan-btn {
  flex: 0 0 auto; background: var(--zemin2); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 6px;
  padding: 5px 9px; font-size: 11px; cursor: pointer;
  font-family: inherit;
}
.dpx-alan-btn:hover { border-color: var(--vurgu); }

/* ---- Faz 11 duzeltme: JS'te kullanilan ama CSS'te olmayan siniflar ---- */
.dpx-govde { padding: 0 0 8px; }
.dpx-kutu {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 96px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-62deg) rotateZ(0deg);
}
.dpx-yuz {
  position: absolute; left: 0; top: 0;
  width: 96px; height: 96px;
  border: 1px solid var(--interceptor);
  background: var(--rozet-arka);
  opacity: .55;
}
.dpx-y-on    { transform: translateZ(14px); }
.dpx-y-arka  { transform: translateZ(-14px) rotateY(180deg); }
.dpx-y-sol   { transform: rotateY(-90deg) translateZ(48px); width: 28px;
               left: 34px; }
.dpx-y-sag   { transform: rotateY(90deg) translateZ(48px); width: 28px;
               left: 34px; }
.dpx-y-ust   { transform: rotateX(90deg) translateZ(48px); height: 28px;
               top: 34px; }
.dpx-y-alt   { transform: rotateX(-90deg) translateZ(48px); height: 28px;
               top: 34px; }
.dpx-kol {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 4px; margin: -2px 0 0 0;
  background: var(--cizgi);
  transform-origin: 0 50%;
}
.dpx-k1 { transform: rotate(45deg); }
.dpx-k2 { transform: rotate(135deg); }
.dpx-k3 { transform: rotate(225deg); }
.dpx-k4 { transform: rotate(315deg); }
.dpx-pervane {
  position: absolute; right: -9px; top: -8px;
  width: 20px; height: 20px;
  border: 1px solid var(--interceptor); border-radius: 50%;
  opacity: .8;
}
.dpx-burun {
  position: absolute; left: 50%; top: -18px;
  transform: translateX(-50%);
  color: var(--vurgu); font-size: 14px;
}
.dpx-yon {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  min-width: 62px; padding: 4px 6px;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--kart-arka); color: var(--metin);
  font-size: 10px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dpx-yon:hover { border-color: var(--vurgu); background: var(--rozet-arka); }
.dpx-yon.dpx-etkin { border-color: var(--interceptor); }
.dpx-yon-ikon { font-size: 12px; color: var(--soluk); }
.dpx-yon-ad { font-size: 9px; color: var(--soluk);
              text-transform: uppercase; letter-spacing: .4px; }
.dpx-yon-deg { font-size: 12px; font-weight: 700; color: var(--metin);
               font-family: var(--mono, monospace); }
.dpx-yon-on   { left: 50%; top: 6px;    transform: translateX(-50%); }
.dpx-yon-arka { left: 50%; bottom: 6px; transform: translateX(-50%); }
.dpx-yon-sol  { left: 6px;  top: 50%;   transform: translateY(-50%); }
.dpx-yon-sag  { right: 6px; top: 50%;   transform: translateY(-50%); }
.dpx-yon-ust  { right: 6px; top: 6px; }
.dpx-yon-alt  { right: 6px; bottom: 6px; }
.dpx-buyuk { display: flex; align-items: baseline; gap: 4px;
             padding: 6px 10px 2px; }
.dpx-buyuk-deg { font-size: 26px; font-weight: 700; color: var(--metin);
                 font-family: var(--mono, monospace); line-height: 1; }
.dpx-buyuk-br { font-size: 12px; color: var(--soluk); }
.dpx-menzil { padding: 0 10px 8px; }
.dpx-menzil-cub {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--rozet-arka); overflow: hidden;
}
.dpx-menzil-dolgu {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--interceptor);
}
.dpx-menzil-imle {
  position: absolute; top: -2px; width: 2px; height: 10px;
  background: var(--vurgu);
}
.dpx-menzil-et {
  display: flex; justify-content: space-between;
  margin-top: 3px; font-size: 9px; color: var(--soluk);
  font-family: var(--mono, monospace);
}
.dpx-olcum-alt { padding: 0 10px 6px; font-size: 10px; color: var(--soluk); }
.dpx-param { padding: 6px 10px 2px; }
.dpx-bolum-bas {
  font-size: 10px; color: var(--soluk); text-transform: uppercase;
  letter-spacing: .6px; margin: 8px 10px 4px;
}
.db-bar { position: relative; height: 8px; border-radius: 4px;
          background: var(--rozet-arka); overflow: hidden; margin: 6px 0; }
.db-bar-kutu { position: absolute; left: 0; top: 0; height: 100%; width: 0;
               background: var(--interceptor); }
.db-bar-yazi { font-size: 10px; color: var(--soluk); text-align: right;
               font-family: var(--mono, monospace); }
.db-olcum { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.db-olcum-cift { font-size: 18px; font-weight: 700; color: var(--metin);
                 font-family: var(--mono, monospace); }
.db-olcum-et { font-size: 10px; color: var(--soluk); }
.db-pusula { display: flex; flex-direction: column; gap: 6px; }
.db-pusula-arac { display: flex; align-items: center; gap: 6px;
                  font-size: 11px; }
.db-ufuk { position: relative; height: 96px; border-radius: 6px;
           border: 1px solid var(--cizgi); overflow: hidden;
           background: var(--giris-arka); }
.db-ufuk-cizgi { position: absolute; left: 0; right: 0; top: 50%;
                 height: 1px; background: var(--interceptor); }
.db-ufuk-kutu { position: absolute; left: 50%; top: 50%;
                width: 42px; height: 42px; margin: -21px 0 0 -21px;
                border: 1px solid var(--cizgi); }
.db-ufuk-merkez { position: absolute; left: 50%; top: 50%;
                  width: 5px; height: 5px; margin: -2px 0 0 -2px;
                  border-radius: 50%; background: var(--vurgu); }
.db-sema { position: relative; height: 120px; border-radius: 6px;
           border: 1px solid var(--cizgi); background: var(--giris-arka);
           overflow: hidden; }
.db-sema-zemin { position: absolute; left: 0; right: 0; bottom: 0;
                 height: 1px; background: var(--cizgi); }
.db-sema-arac { position: absolute; left: 50%; top: 50%;
                transform: translate(-50%, -50%); }
.db-sema-govde { width: 44px; height: 10px; border-radius: 3px;
                 background: var(--rozet-arka);
                 border: 1px solid var(--interceptor); }
.db-sema-kol { position: absolute; height: 2px; background: var(--cizgi); }
.db-sema-baro { position: absolute; right: 8px; top: 8px; font-size: 10px;
                color: var(--soluk); }
.db-sema-etiket { font-size: 10px; color: var(--soluk); margin-top: 4px;
                  text-align: center; }
.db-sema-ok { color: var(--vurgu); font-size: 13px; }
.db-sema-sabit { position: absolute; left: 8px; bottom: 8px;
                 font-size: 10px; color: var(--soluk); }
.db-rc-sat { display: flex; align-items: center; gap: 6px;
             margin-bottom: 4px; }
.db-rc-iz { flex: 1; position: relative; height: 8px; border-radius: 4px;
            background: var(--rozet-arka); overflow: hidden; }
.db-rc-kutu { position: absolute; left: 0; top: 0; height: 100%; width: 0;
              background: var(--interceptor); }
.db-rc-deg { min-width: 42px; text-align: right; font-size: 10px;
             color: var(--metin); font-family: var(--mono, monospace); }
.db-esc-sat { display: flex; align-items: center; gap: 8px;
              padding: 4px 0; border-bottom: 1px solid var(--cizgi); }
.db-esc-no { min-width: 22px; font-size: 11px; font-weight: 700;
             color: var(--interceptor); }
.db-esc-adim { font-size: 11px; color: var(--metin); }
.db-akis-bas { font-size: 10px; color: var(--soluk);
               text-transform: uppercase; letter-spacing: .6px;
               margin: 6px 0 3px; }
.db-akis-sat { font-size: 10px; color: var(--metin);
               font-family: var(--mono, monospace); padding: 1px 0;
               border-bottom: 1px dotted var(--cizgi); }
.db-rapor { width: 100%; border-collapse: collapse; font-size: 11px; }
.db-rapor th, .db-rapor td { padding: 4px 6px; text-align: left;
                             border-bottom: 1px solid var(--cizgi); }
.db-rapor th { color: var(--soluk); font-weight: 600; font-size: 10px;
               text-transform: uppercase; letter-spacing: .4px; }
.db-secim-metin { font-size: 12px; color: var(--metin);
                  line-height: 1.5; margin-bottom: 10px; }

/* ---- Faz 11: acik temada 3B sahne okunabilirligi (olculdu) ----
   .dpx-kol 1.45 -> hedef >=3.0 ; .dpx-yon metin 1.69 -> hedef >=4.5
   --rozet-arka acik temada rgba(255,255,255,.55) oldugu icin
   beyaz sahnede kayboluyordu; sahneye kendi zemini verildi. */
.dpx-sahne {
  background: var(--giris-arka);
  background-image:
    linear-gradient(var(--cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
}
.dpx-yuz {
  background: var(--giris-arka);
  border-color: var(--interceptor);
  opacity: .75;
}
.dpx-kol {
  background: var(--metin);
  opacity: .75;
  height: 5px;
  margin-top: -2.5px;
}
.dpx-pervane {
  border-color: var(--vurgu);
  background: var(--giris-arka);
  opacity: .9;
}
.dpx-burun { color: var(--vurgu); font-weight: 700; }
.dpx-yon {
  background: var(--giris-arka);
  border-color: var(--metin);
  color: var(--metin);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.dpx-yon:hover {
  background: var(--giris-arka);
  border-color: var(--vurgu);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .26);
}
.dpx-yon.dpx-etkin { border-color: var(--vurgu); border-width: 2px; }
.dpx-yon-ad   { color: var(--metin); opacity: .72; }
.dpx-yon-ikon { color: var(--metin); opacity: .72; }
.dpx-yon-deg  { color: var(--metin); }
.dpx-yon-veriyok .dpx-yon-deg { color: var(--metin); opacity: .5; }

/* FAZ18-IS4-USTBAR-SOZLESME */

/* FAZ18-IS27-28-30: dron kartinda ok ikonu islevsiz -> gizlenir.
   Panel ici kart artik acilir kapanir DEGIL (baslik ve ok tiklama
   dinleyicileri kaldirildi). Ok ogesi DOM'da birakildi cunku
   `dkOkTazele()` ve `.dron-kart-baslik.kapali .dk-ok` kurali ona
   referans veriyor; kaldirilmasi gereksiz kirilma riski dogurur.
   Ayrik (pencere) modda kart kompakt gorunume CIFT TIK ile gecer. */
.dron-kart .dk-ok { display: none !important; }

/* FAZ18-IS21B: konum cozumu yokken sebebi baslik ozetinde gosterilir.
   Harita ikonu cizilmedigi icin kullanici aksi halde sebebi
   goremiyordu. Renk sabit YAZILMAZ - tema degiskeni kullanilir. */
.dk-ozet-konumsuz {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--uyari, #ffb300);
  border: 1px solid var(--uyari, #ffb300);
  background: rgba(255,179,0,0.10);
}

/* FAZ19-IS66-K2-ELLE-TARAMA — cihaz secimi baslik satiri.
   Etiket solda, tarama dugmesi sagda.
   DUGMENIN KENDISINE OLCU VERILMEZ: `dugme_birlik.css:123`
   yalniz-ikon kurali onu `--dgm-kare` (26px) kareye sabitler.
   Burada yalnizca YERLESIM tanimlanir. Renk/arka plan da
   yazilmaz; dugme arayuzun ortak bicimini alir. */
.kam-cihaz-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kam-cihaz-baslik label {
  margin: 0;
}
.kam-cihaz-baslik > button {
  flex: 0 0 auto;
}
.kam-cihaz-baslik > button:disabled {
  opacity: .55;
  cursor: default;
}


/* İş 108 — telemetri ve görüntü angajmanını görünür biçimde ayır. */
.ang-kip-bandi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ang-kip-rengi) 45%, var(--cizgi));
  border-radius: 6px;
  background: color-mix(in srgb, var(--ang-kip-rengi) 12%, var(--panel));
  color: var(--metin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
}
.ang-kip-bandi.telemetri { --ang-kip-rengi: var(--interceptor); }
.ang-kip-bandi.goruntu { --ang-kip-rengi: var(--kopru); }
.ang-kip-bandi > i { color: var(--ang-kip-rengi); }
.ang-dron-satir.devre-disi {
  cursor: not-allowed;
  opacity: .56;
}
.ang-dron-satir.devre-disi:hover {
  border-color: var(--cizgi);
  background: var(--dugme-arka);
}
.ang-dron-aktif-rozet {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--uyari) 45%, var(--cizgi));
  border-radius: 999px;
  background: color-mix(in srgb, var(--uyari) 10%, var(--panel));
  color: var(--uyari);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

/* v2.4.188: Elektro-Optik (M50) paneli — acilir-kapanir bolumler + gomulu video */
#yzM50 { min-width: 560px; }
.m50-icerik { max-height: calc(100vh - 120px); overflow-y: auto; }
.m50-ust { display: flex; align-items: center; gap: 10px; padding: 4px 2px 6px; }
.m50-ust #m50Ozet { flex: 1; color: var(--soluk); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m50-ust #btnM50Baglan { margin-left: auto; }
#m50Hata { color: var(--tehlike, #e5484d); font-size: 11px; margin: 0 2px 4px; display: none; }
.m50-bolum-ic { padding: 8px 10px 10px; }
.m50-video-sar { position: relative; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; min-height: 200px; }
.m50-video-sar img.kam-video-m50 { width: 100%; height: 100%; object-fit: contain; display: block; cursor: grab; touch-action: none; user-select: none; }
.m50-video-sar img.kam-video-m50.m50-ptz-aktif { cursor: grabbing; }
.m50-video-yok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--soluk); font-size: 12px; }
.m50-video-sar.var .m50-video-yok { display: none; }
.m50-video-ust { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.m50-video-ust button { pointer-events: auto; opacity: .85; }
.m50-video-ust button.aktif { outline: 2px solid var(--vurgu, #35a7ff); opacity: 1; }
.m50-video-ipucu { margin-left: auto; font-size: 10px; color: rgba(255,255,255,.7); background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 4px; }
.m50-ptz-izgara { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; justify-content: center; margin: 8px 0; }
.m50-ptz-izgara .m50-ptz { height: 40px; }
.m50-lens-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m50-dugme-satir { flex-wrap: wrap; gap: 6px; }
.m50-dugme-satir button { flex: 1 1 auto; }
.m50-bolum summary i { width: 14px; text-align: center; }

/* v2.4.152: Kamera formu acilir-kapanir bolumler */
#kamModalKutu .lok-kaydet-icerik { max-height: calc(100vh - 140px); overflow-y: auto; }
.kam-bolum {
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  margin-top: 8px;
}
.kam-bolum > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--soluk);
}
.kam-bolum > summary::-webkit-details-marker { display: none; }
.kam-bolum > summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform .15s ease;
}
.kam-bolum[open] > summary::before { transform: rotate(90deg); }
.kam-bolum > summary:hover { color: var(--metin); }
.kam-bolum[open] > summary { border-bottom: 1px solid var(--cizgi); }
.kam-bolum-rozet {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.kam-bolum-rozet.iyi { color: #7fd6a0; }
.kam-bolum-rozet.uyari { color: #ffcf7a; }
.kam-bolum-icerik { padding: 4px 10px 10px; }
/* `#kamModalKutu label { display:block; margin:10px 0 5px }` (ID
   ozgullugu) gorev satirlarina da uyguluyordu; metin ve anahtar dikeyde
   kayiyordu. Bu yuzden kurallar ayni ID kapsaminda yazilir. */
#kamModalKutu .kam-bolum .kam-ai-grid { gap: 6px 16px; margin-top: 6px; }
#kamModalKutu .kam-bolum .kam-ai-satir .tgl input { margin: 0; width: 0; }
#kamModalKutu .kam-bolum .kam-ai-satir .tgl { flex: 0 0 34px; width: 34px; max-width: 34px; }
#kamModalKutu .kam-bolum .kam-ai-satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 4px 0;
  letter-spacing: normal;
  font-size: 12px;
  color: var(--metin);
}
.kam-bolum-icerik > label:first-child { margin-top: 4px; }

/* ============================================================
 * v2.5.24: Kamera AI ayar paneli + görüntü hedefi + dron kamera satırı
 * ============================================================ */
/* Yapay Zeka Ayarları paneli (açılır-kapanır, sınıf başına) */
.kai-panel {
  position: fixed; z-index: 4000; width: 320px; max-width: calc(100vw - 20px);
  background: var(--panel, #131a24); color: var(--metin, #e6edf3);
  border: 1px solid var(--cizgi, #2a3542); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 13px;
}
.kai-panel-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; cursor: move;
  border-bottom: 1px solid var(--cizgi, #2a3542);
  font-weight: 600; font-size: 12px; letter-spacing: .02em;
}
.kai-panel-govde { padding: 8px 10px 10px; max-height: 70vh; overflow-y: auto; }
.kai-sinif { border: 1px solid var(--cizgi, #2a3542); border-radius: 6px; margin-top: 8px; }
.kai-sinif > summary {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  cursor: pointer; list-style: none; user-select: none;
}
.kai-sinif > summary::-webkit-details-marker { display: none; }
.kai-sinif > summary::after {
  content: "\25B8"; margin-left: auto; color: var(--soluk, #95a9b8);
  transition: transform .15s ease;
}
.kai-sinif[open] > summary::after { transform: rotate(90deg); }
.kai-sinif-ad { font-weight: 600; }
.kai-sinif-durum { font-size: 11px; color: var(--soluk, #95a9b8); }
.kai-sinif-durum.iyi { color: #7fd6a0; }
.kai-acik { width: 16px; height: 16px; accent-color: var(--interceptor, #3b82f6); }
.kai-sinif-ic { padding: 4px 10px 10px; border-top: 1px solid var(--cizgi, #2a3542); }
.kai-hassas-satir { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.kai-hassas { flex: 1; accent-color: var(--interceptor, #3b82f6); }
.kai-hassas-deger { min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.kai-hassas-yardim { margin-top: 4px; font-size: 11px; color: var(--soluk, #95a9b8); }
.kai-panel-not { margin-top: 10px; font-size: 11px; color: var(--soluk, #95a9b8); line-height: 1.4; }

/* Görüntü hedefi seçici (harita/yüzen/panel/tam) */
/* v2.4.190: coklu radar sekmeleri */
/* v2.4.194: RADARLAR / ELEKTRO-OPTIK CIHAZLARI liste panelleri */
.cl-liste { display: flex; flex-direction: column; gap: 4px; }
.cl-satir { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--cizgi); border-radius: 6px; background: var(--panel-arka, transparent);
  cursor: pointer; }
.cl-satir:hover { border-color: var(--vurgu, #35a7ff); }
.cl-satir.secili { background: rgba(53,167,255,.08); border-color: var(--vurgu, #35a7ff); }
.cl-govde { flex: 1 1 auto; min-width: 0; }
.cl-ad { font-weight: 600; font-size: 13px; color: var(--metin); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cl-alt { font-family: Consolas, monospace; font-size: 11px; color: var(--soluk); }
.cl-dgm { display: flex; gap: 4px; flex: 0 0 auto; }
.cl-dgm button { padding: 4px 8px; }
.cl-bos { padding: 14px; text-align: center; color: var(--soluk); font-size: 12px; }
/* v2.4.195: dipli yuzen paneller — icerik akar, dip (durum cubugu veya
   kaydet/iptal) her zaman altta sabit kalir. */
/* OLCULEN KUSUR (2.5.65): `.yuzen-panel.yz-dipli{display:flex}` kurali
   iki sinifli oldugu icin `.yuzen-panel.yuzen-gizli{display:none}` ile
   AYNI ozgullukteydi ve dosyada sonra geldiginden onu eziyordu: gizli
   dipli paneller gorunur kaliyor, ayni konumda ust uste ciziliyordu
   (kullanici ekran goruntusu: EO formunun arkasinda radar formu).
   `.yuzen-panel` zaten flex-column'dur (stil.css:316); display kurali
   GEREKSIZDI ve kaldirildi. */
.yuzen-panel.yz-dipli > .yuzen-icerik { flex: 1 1 auto; overflow: auto; min-height: 0; }
.form-dip { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--cizgi); background: rgba(0,0,0,.12); }
.form-dip button { min-width: 110px; }
.ra-liste { display: flex; flex-wrap: wrap; gap: 4px; }
.ra-sekme { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px;
  border: 1px solid var(--cizgi); background: transparent; color: var(--soluk); font-size: 11px; cursor: pointer; }
.ra-sekme:hover { color: var(--metin); background: var(--dugme-hover); }
.ra-sekme.secili { color: var(--metin); border-color: var(--vurgu, #35a7ff); background: rgba(53,167,255,.12); }
.ra-sekme.ra-ekle { padding: 4px 8px; }
.ra-nokta { width: 8px; height: 8px; border-radius: 50%; background: #8a97a5; display: inline-block; }
.ra-nokta.d-bagli { background: #6bd8b9; }
.ra-nokta.d-hata { background: #e05555; }
.ra-nokta.d-baglaniyor { background: #ffc94d; }

/* v2.4.189: kamera satiri — tek konum dugmesi + "..." menusu + konsol */
.kam-hedef-btn .kam-hedef-ok { font-size: 8px; margin-left: 3px; opacity: .7; }
.kam-menu .dk-menu-item.secili, .kam-hedef-menu .dk-menu-item.secili { color: var(--vurgu, #35a7ff); }
.kam-hedef-menu .dk-menu-item.secili i { color: var(--vurgu, #35a7ff); }
.kam-blok .kam-konsol { margin: 0 2px 4px; }
.kam-blok .kam-konsol .dk-konsol-govde { max-height: 180px; }
.kam-hedef-secici { display: inline-flex; gap: 2px; margin: 0 6px;
  border: 1px solid var(--cizgi, #2a3542); border-radius: 6px; overflow: hidden; }
/* v2.4.219 (kullanici bildirimi): mavi goruntu-konumu dugmesi bitisikti; yanal ic bosluk */
.kam-hedef-btn {
  border: 0; background: transparent; color: var(--soluk, #95a9b8);
  padding: 4px 10px; cursor: pointer; font-size: 12px; line-height: 1;
}
.kam-hedef-btn:hover { color: var(--metin, #e6edf3); background: rgba(255,255,255,.06); }
.kam-hedef-btn.secili { background: var(--interceptor, #3b82f6); color: #fff; }

/* Panelde "başka hedefte gösteriliyor" bilgisi */
.kam-baska-hedef { flex-direction: column; gap: 4px; font-size: 11px; opacity: .8; }
.kam-baska-hedef span { font-size: 11px; }

/* Tam ekran hedefi */
.kam-tam-ekran {
  position: fixed; inset: 0; z-index: 4200; background: #000;
  display: flex; flex-direction: column;
}
.kam-tam-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px; background: rgba(10,14,20,.85); color: #e6edf3;
  flex-wrap: wrap;
}
.kam-tam-ad { font-weight: 600; }
/* v2.4.173: takip/angajman dugmeleri arttigi icin sarmali (wrap) yapildi */
.kam-tam-arac { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.kam-tam-video { flex: 1; display: flex; align-items: center; justify-content: center; }
.kam-tam-video .kam-video { max-width: 100%; max-height: 100%; }

/* Dron kartı kamera kontrol satırı */
.dk-kamera-satir {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 6px 10px 2px; padding: 6px 8px;
  border: 1px solid var(--cizgi, #2a3542); border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.dk-kam-ad { font-size: 12px; color: var(--metin, #e6edf3); display: inline-flex; gap: 5px; align-items: center; }
.dk-kam-play {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  border: 1px solid var(--cizgi, #2a3542); border-radius: 6px;
  background: var(--interceptor, #3b82f6); color: #fff;
  padding: 4px 10px; cursor: pointer; font-size: 12px;
}
.dk-kam-play.aktif { background: #b4453a; }
.dk-kam-play:hover { filter: brightness(1.08); }
.kai-ac-btn i, .dk-kam-ai i { color: #b98bff; }

/* v2.4.158: Dron kartı kamera satırı — açılır menü (taşma önleme) */
.dk-kamera-satir { flex-wrap: nowrap; }
.dk-kam-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-kam-play { flex: 0 0 auto; }
.dk-kam-menu-sarmal { position: relative; flex: 0 0 auto; }
.dk-kam-menu-btn {
  border: 1px solid var(--cizgi, #2a3542); border-radius: 6px;
  background: transparent; color: var(--soluk, #95a9b8);
  padding: 4px 8px; cursor: pointer; line-height: 1;
}
.dk-kam-menu-btn:hover { color: var(--metin, #e6edf3); background: rgba(255,255,255,.06); }
.dk-kam-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 210px; padding: 8px; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel, #131a24); border: 1px solid var(--cizgi, #2a3542);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
/* v2.4.161: 'gizli' icin genel kural yok; .dk-kam-menu display:flex oldugundan
   ustune ozel gizleme kurali GEREKLI, yoksa menu tiklanmadan hep acik gorunur. */
.dk-kam-menu.gizli { display: none; }
.dk-kam-menu-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-kam-menu-etiket { font-size: 11px; color: var(--soluk, #95a9b8); }
.dk-kam-menu-ai {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  justify-content: center; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--cizgi, #2a3542); background: rgba(255,255,255,.03);
  color: var(--metin, #e6edf3); cursor: pointer; font-size: 12px;
}
.dk-kam-menu-ai:hover { background: rgba(255,255,255,.08); }

/* v2.4.161: Angajman panelinde kamera kalibrasyonu bolumu */
.ang-kalib > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ang-kalib > summary::-webkit-details-marker { display: none; }
.ang-kalib > summary::before { content: "▸ "; }
.ang-kalib[open] > summary::before { content: "▾ "; }
.ang-kalib-durum { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.ang-kalib select { background: var(--dugme-arka, #141a21); color: var(--metin, #cfd8e3); border: 1px solid var(--cizgi, #2a3542); border-radius: 4px; padding: 3px 6px; }
.ang-kalib .ang-kalib-kaydet { width: 100%; margin-top: 8px; }

/* v2.4.164: Yerel AI takibinden açılan YÜZEN angajman paneli */
.ang-perde.ang-yuzen { background: transparent !important; pointer-events: none; backdrop-filter: none !important; }
.ang-perde.ang-yuzen .ang-kutu { pointer-events: auto; position: fixed; top: 80px; right: 24px; left: auto;
  max-height: calc(100vh - 100px); overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.ang-perde.ang-yuzen .ang-baslik { cursor: move; user-select: none; display: flex; align-items: center; gap: 8px; }
.ang-yuzen-kapat { margin-left: auto; background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 15px; }
.ang-yerel-canli[data-durum="iyi"] { border-left: 3px solid #22c55e; }
.ang-yerel-canli[data-durum="uyari"] { border-left: 3px solid #f59e0b; }
.ang-yerel-canli[data-durum="hata"] { border-left: 3px solid #ef4444; }
.ang-yerel-hata { margin: 6px 12px; padding: 7px 10px; border-left: 3px solid #ef4444; background: rgba(239,68,68,.12); font-size: 12px; }
/* Takip araç alanı (yüzen pencere alt çubuğu / tam ekran çubuğu) */
.kam-takip-arac { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.kam-takip-arac[hidden] { display: none !important; }
.kam-takip-rozet { font: 700 11px/1 Segoe UI, system-ui, sans-serif; letter-spacing: .04em; padding: 5px 8px; border-radius: 4px;
  background: rgba(239,68,68,.16); color: #fca5a5; border: 1px solid #ef4444; white-space: nowrap; }
.kam-takip-angaje { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; cursor: pointer;
  background: #b91c1c; border: 1px solid #ef4444; color: #fff; font: 700 11px Segoe UI, system-ui, sans-serif; white-space: nowrap; }
.kam-takip-angaje:hover { filter: brightness(1.15); }
/* v2.4.173: kip bazli renk ayrimi — Angaje (kirmizi, varsayilan) /
   Takip Et (mavi, carpismaz) / Hedef Sec (notr gri) / Birak-Durdur (turuncu) */
.kam-takip-mesafe { background: #1d4ed8; border-color: #3b82f6; }
.kam-hedef-sec { background: #374151; border-color: #6b7280; }
.kam-takip-birak, .kam-ucus-durdur { background: #b45309; border-color: #f59e0b; }
.kam-takip-ipucu { font-size: 11px; color: var(--soluk, #8aa0b2); white-space: nowrap; }
/* v2.4.224: AI ayar paneli UYGULA satiri */
.kai-uygula-satir { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--cizgi); }
.kai-uygula-not { flex: 1 1 auto; font-size: 11px; color: var(--soluk); line-height: 1.4; }
.kai-uygula-dgm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 4px; cursor: pointer;
  background: #1d4ed8; border: 1px solid #3b82f6; color: #fff; font: 700 12px Segoe UI, system-ui, sans-serif; }
.kai-uygula-dgm:disabled { opacity: .45; cursor: default; }
.kai-uygula-dgm.kai-uygula-bekliyor { animation: kai-uygula-nabiz 1.2s ease-in-out infinite; }
@keyframes kai-uygula-nabiz { 50% { box-shadow: 0 0 0 4px rgba(59,130,246,.35); } }
/* v2.4.223: bekleyen islem — kilitli dugme, donen simge */
.kam-takip-angaje.kam-takip-bekliyor { opacity: .75; cursor: wait; }
.kam-takip-angaje.kam-takip-bekliyor:disabled { opacity: .75; }
.kam-takip-bildirim { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  padding: 6px 12px; border-radius: 4px; background: rgba(0,0,0,.75); color: #fff; font: 600 12px Segoe UI, system-ui, sans-serif; }