/* ═══════════════════════════════════════════════════════════════
   tasarim-komuta.css — Komuta Merkezi sayfasına özel stiller
   Kaynak: tasarim/komuta-merkezi.html <style> (sayfa bileşenleri)
   Tüm kurallar #view-komuta altında scope'lu → diğer ekranlara sızmaz.
   (.panel/.ph jenerik stilleri tasarim.css'te; burada sayfa-özel olanlar var.)
   ═══════════════════════════════════════════════════════════════ */

/* KPI şeridi */
#view-komuta .kpi{ display:grid; grid-template-columns:repeat(6,1fr); background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:18px; }
#view-komuta .kp{ padding:16px 20px; border-right:1px solid var(--line); display:flex; align-items:center; gap:14px; }
#view-komuta .kp:last-child{ border-right:none; }
#view-komuta .kp .n{ font-size:30px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
#view-komuta .kp .n.g{ color:var(--gold); } #view-komuta .kp .n.r{ color:var(--red); }
#view-komuta .kp .meta .l{ font-size:11.5px; font-weight:600; color:var(--t1); letter-spacing:.2px; }
#view-komuta .kp .meta .s{ font-size:10.5px; color:var(--t3); margin-top:3px; }

/* Izgara */
#view-komuta .grid{ display:grid; grid-template-columns:1fr 332px; gap:18px; align-items:start; }
#view-komuta .colL{ display:flex; flex-direction:column; gap:18px; min-width:0; }
#view-komuta .colR{ display:flex; flex-direction:column; gap:18px; }

/* Öncelik tablosu */
#view-komuta .thead,#view-komuta .trow{ display:grid; grid-template-columns:78px 80px 76px 100px 120px 78px 96px 1fr 86px; gap:10px; align-items:center; }
#view-komuta .thead{ padding:9px 20px; font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--t3); font-weight:600; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#view-komuta .trow{ padding:12px 20px; border-bottom:1px solid var(--line2); font-size:12.5px; }
#view-komuta .trow:last-child{ border-bottom:none; } #view-komuta .trow:hover{ background:#13233a; }
#view-komuta .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 9px; border-radius:7px; }
#view-komuta .pill.k{ background:rgba(229,82,79,.14); color:#f08a87; }
#view-komuta .pill.y{ background:rgba(224,145,60,.14); color:#eab06f; }
#view-komuta .pill.o{ background:rgba(138,148,168,.14); color:#aeb6c6; }
#view-komuta .flame{ font-size:11px; }
#view-komuta .ap{ font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
#view-komuta .muted{ color:var(--t2); }
#view-komuta .gun{ font-weight:700; font-variant-numeric:tabular-nums; }
#view-komuta .gun.r{ color:var(--red); } #view-komuta .gun.o{ color:var(--orange); }
#view-komuta .oner{ font-size:11.5px; line-height:1.35; }
#view-komuta .oner.r{ color:#ef9b98; } #view-komuta .oner.o{ color:#e6ab68; } #view-komuta .oner.m{ color:var(--t2); }
#view-komuta .rowact{ display:flex; gap:7px; justify-content:flex-end; color:var(--t3); }
#view-komuta .rowact svg{ width:15px; height:15px; cursor:pointer; } #view-komuta .rowact svg:hover{ color:var(--gold); }

/* Sonraki aksiyon */
#view-komuta .nx{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line2); }
#view-komuta .nx:first-of-type{ border-top:none; }
#view-komuta .nx .d{ width:8px; height:8px; border-radius:50%; flex:none; }
#view-komuta .nx .d.r{ background:var(--red); } #view-komuta .nx .d.o{ background:var(--orange); } #view-komuta .nx .d.m{ background:var(--t3); }
#view-komuta .nx .x{ flex:1; } #view-komuta .nx .x .t{ font-size:12.5px; font-weight:500; } #view-komuta .nx .x .c{ font-size:10.5px; color:var(--t3); margin-top:2px; font-variant-numeric:tabular-nums; }
#view-komuta .nx .ar{ color:var(--t3); } #view-komuta .nx .ar svg{ width:15px; height:15px; }
#view-komuta .plnk{ text-align:right; padding:13px 20px; font-size:11px; color:var(--gold); font-weight:600; cursor:pointer; }

/* Bekleyen cevap tablosu */
#view-komuta .bhead,#view-komuta .brow{ display:grid; grid-template-columns:1.1fr 64px 56px 76px 90px; gap:8px; align-items:center; }
#view-komuta .bhead{ padding:9px 20px; font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--t3); font-weight:600; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#view-komuta .brow{ padding:11px 20px; border-bottom:1px solid var(--line2); font-size:12px; }
#view-komuta .brow:last-child{ border-bottom:none; } #view-komuta .brow:hover{ background:#13233a; }
#view-komuta .cat{ display:flex; align-items:center; gap:9px; font-weight:500; } #view-komuta .cat i{ width:8px; height:8px; border-radius:2px; flex:none; }
#view-komuta .brow .c{ text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
#view-komuta .brow .s{ color:var(--t2); font-variant-numeric:tabular-nums; }
#view-komuta .brow .f{ color:var(--t2); font-variant-numeric:tabular-nums; font-size:11px; }

/* Belediye yükü harita (TODO: Leaflet — şimdilik stilize/statik) */
#view-komuta .byk{ display:grid; grid-template-columns:1fr 150px; gap:0; }
#view-komuta .map{ position:relative; height:268px; margin:8px 0 16px 20px; border-radius:12px; background:radial-gradient(120% 120% at 30% 20%,#10243f,#0a1828); overflow:hidden; border:1px solid var(--line); }
#view-komuta .land{ position:absolute; background:#16304f; opacity:.55; border-radius:46% 54% 50% 50%/52% 48% 52% 48%; filter:blur(.4px); }
#view-komuta .water{ position:absolute; left:0; right:0; top:44%; height:42px; background:linear-gradient(90deg,transparent,#0d2138,#0d2138,transparent); transform:rotate(-14deg); opacity:.7; }
#view-komuta .mk{ position:absolute; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; border:2px solid #0a1828; box-shadow:0 4px 10px -2px #000; transform:translate(-50%,-50%); }
#view-komuta .mk.big{ background:var(--blue); } #view-komuta .mk.hot{ background:var(--orange); } #view-komuta .mk.crit{ background:var(--red); }
#view-komuta .dlist{ padding:16px 20px 16px 16px; display:flex; flex-direction:column; justify-content:center; gap:0; }
#view-komuta .dl{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line2); font-size:12.5px; }
#view-komuta .dl:last-child{ border-bottom:none; }
#view-komuta .dl .v{ font-weight:700; background:var(--inner); min-width:24px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11.5px; }

/* Operasyon akış */
#view-komuta .fl{ display:flex; gap:12px; padding:12px 20px; border-top:1px solid var(--line2); }
#view-komuta .fl:first-of-type{ border-top:none; }
#view-komuta .fl .fa{ width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
#view-komuta .fl .fa.sys{ background:var(--inner); color:var(--gold); } #view-komuta .fl .fa.sys svg{ width:15px; height:15px; }
#view-komuta .fl .ft{ flex:1; font-size:12px; line-height:1.4; } #view-komuta .fl .ft b{ font-weight:600; color:#fff; } #view-komuta .fl .ft .tm{ font-size:10.5px; color:var(--t3); margin-top:3px; }

/* Son aktiviteler */
#view-komuta .acts5{ display:grid; grid-template-columns:repeat(5,1fr); padding:6px 8px 12px; }
#view-komuta .a5{ display:flex; gap:10px; padding:12px; border-right:1px solid var(--line2); }
#view-komuta .a5:last-child{ border-right:none; }
#view-komuta .a5 .ai{ width:30px; height:30px; border-radius:8px; flex:none; background:var(--inner); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold2); }
#view-komuta .a5 .ai svg{ width:14px; height:14px; color:var(--gold); }
#view-komuta .a5 .at{ font-size:11.5px; line-height:1.35; } #view-komuta .a5 .at b{ color:#fff; font-weight:600; } #view-komuta .a5 .at .s{ color:var(--t3); font-size:10px; margin-top:3px; }

/* İş emirleri */
#view-komuta .ie{ display:flex; align-items:center; gap:8px; padding:14px 20px 16px; flex-wrap:wrap; }
#view-komuta .ieb{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--inner); border-radius:11px; }
#view-komuta .ieb .icn{ width:30px; height:30px; border-radius:8px; background:#0e1c2e; display:flex; align-items:center; justify-content:center; }
#view-komuta .ieb .icn svg{ width:15px; height:15px; }
#view-komuta .ieb .v{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
#view-komuta .ieb .l{ font-size:10.5px; color:var(--t2); margin-top:2px; }
#view-komuta .ie .sep{ flex:1; }
#view-komuta .busy{ display:flex; align-items:center; gap:7px; padding-left:14px; border-left:1px solid var(--line); }
#view-komuta .busy .bch{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--t2); }
#view-komuta .busy .bch .ba{ width:24px; height:24px; border-radius:50%; background:var(--inner); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:var(--gold2); }

/* Personel durumu */
#view-komuta .pers{ padding:6px 0 8px; }
#view-komuta .pr{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line2); }
#view-komuta .pr:first-child{ border-top:none; }
#view-komuta .pr .pa{ width:34px; height:34px; border-radius:50%; flex:none; background:var(--inner); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold2); }
#view-komuta .pr .pn{ flex:1; } #view-komuta .pr .pn .nm{ font-size:12.5px; font-weight:600; color:#fff; } #view-komuta .pr .pn .gs{ font-size:10.5px; color:var(--t2); margin-top:1px; }
#view-komuta .pr .bar{ width:80px; } #view-komuta .pr .bar .tk{ height:6px; background:#0e1c2e; border-radius:6px; overflow:hidden; } #view-komuta .pr .bar .tk i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:6px; }
#view-komuta .pr .bar .pc{ font-size:11px; font-weight:700; text-align:right; margin-top:4px; color:var(--gold2); }

/* Giriş animasyonu */
#view-komuta .blk{ opacity:0; transform:translateY(10px); animation:tk-rz .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tk-rz{ to{ opacity:1; transform:none; } }
#view-komuta .b1{ animation-delay:.04s; } #view-komuta .b2{ animation-delay:.1s; } #view-komuta .b3{ animation-delay:.16s; } #view-komuta .b4{ animation-delay:.22s; } #view-komuta .b5{ animation-delay:.28s; }