/* ═══════════════════════════════════════════════════════════════
   tasarim.css — BAVEKA Operasyon Sistemi V2 görsel sistemi
   Kaynak: tasarim/DESIGN_README.md + tasarim/komuta-merkezi.html (onaylı maket)
   Kapsam (Adım 2): tasarım token'ları + ortak kabuk (sidebar + topbar) + jenerik panel.
   Sayfa-özel stiller (kpi/öncelik tablo/harita vb.) ilgili sayfa adımında eklenir.
   NOT: Henüz index.html'e <link> ile bağlanmadı — Adım 2 tel-örgüsünde bağlanacak.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tasarım token'ları ───────────────────────────────────────── */
:root{
  /* SABİT vurgular — her iki temada AYNI */
  --gold:#d4a64f; --gold2:#e6bd6b; --vio:#7c5cff; --vio2:#9d7bff;
  --green:#3fbf6f; --red:#e5524f; --orange:#e0913c; --blue:#4d9fd6;
  --purple:#8a78d6; --pink:#cf72a8; --teal:#46a6b0; --panel2:#0f1b2c;
  --r-card:16px; --r-ctrl:11px;
  /* Tema değişkenleri — varsayılan = navy (data-theme yoksa da çözülür) */
  --bg:#0a1320; --bg2:#0c1726; --panel:#111e30; --inner:#0e1c2e;
  --line:#1e2e44; --line2:#1a2942; --t1:#e9eef6; --t2:#8a94a8; --t3:#5f6b80;
}
/* ── ÇİFT TEMA (data-theme, documentElement üzerinde) — sadece renkler ─ */
[data-theme="navy"]{
  --bg:#0a1320; --bg2:#0c1726; --panel:#111e30; --inner:#0e1c2e;
  --line:#1e2e44; --line2:#1a2942; --t1:#e9eef6; --t2:#8a94a8; --t3:#5f6b80;
}
[data-theme="gece"]{
  --bg:#0d0f14; --bg2:#14171d; --panel:#1a1e26; --inner:#161a21;
  --line:#262b34; --line2:#20242c; --t1:#e8eaed; --t2:#9aa0aa; --t3:#6b7280;
}

/* ── Tema kabuğu (body) ───────────────────────────────────────── */
body.tasarim-v2{
  font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--t1);
  display:flex; min-height:100vh; -webkit-font-smoothing:antialiased; font-size:13px;
}
body.tasarim-v2 a{ text-decoration:none; color:inherit; }
body.tasarim-v2 ::-webkit-scrollbar{ width:9px; height:9px; }
body.tasarim-v2 ::-webkit-scrollbar-thumb{ background:#1e2e44; border-radius:6px; }
body.tasarim-v2 ::-webkit-scrollbar-track{ background:transparent; }

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.sb{ width:264px; flex:none; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sb .logo{ display:flex; align-items:center; gap:13px; padding:22px 22px 20px; border-bottom:1px solid var(--line); }
.sb .logo img.logo-img{ height:34px; width:auto; display:block; }
.sb .logo .mono{ width:46px; height:46px; flex:none; border-radius:11px;
  background:linear-gradient(150deg,#223a5e,#101f33); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -8px #000; }
.sb .logo .lt{ font-family:'Playfair Display',serif; font-size:20px; font-weight:700; letter-spacing:2px; color:#fff; line-height:1; }
.sb .logo .ls{ font-size:8px; letter-spacing:1.5px; color:var(--t3); margin-top:3px; text-transform:uppercase; }
.sb .logo .lo{ font-size:8.5px; letter-spacing:1.8px; color:var(--gold); margin-top:4px; text-transform:uppercase; font-weight:600; }

.sb .status{ display:flex; align-items:center; gap:9px; padding:13px 22px; font-size:12.5px; color:var(--t2); border-bottom:1px solid var(--line); cursor:pointer; }
.sb .status .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(63,191,111,.18); }
.sb .status svg{ width:14px; height:14px; margin-left:auto; opacity:.5; }

.sb .nav{ flex:1; padding:10px 12px; overflow:auto; }
.sb .ng{ font-size:9.5px; letter-spacing:1.8px; color:var(--t3); text-transform:uppercase; padding:14px 12px 7px; font-weight:600; }
/* .ni = yeni tasarım sınıfı; .nav-item = menu.js sözleşmesi (ikisi birlikte taşınır) */
.sb .ni{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; color:var(--t2);
  font-size:13px; margin:1px 0; transition:all .2s; position:relative; cursor:pointer; }
.sb .ni svg,.sb .ni .licon{ width:17px; height:17px; opacity:.7; flex:none; }
.sb .ni:hover{ background:rgba(255,255,255,.04); color:var(--t1); }
/* Aktif durum: menu.js .active sınıfını ekler (showView) */
.sb .ni.active{ background:linear-gradient(90deg,rgba(212,166,79,.16),rgba(212,166,79,.04)); color:#fff; }
.sb .ni.active svg,.sb .ni.active .licon{ opacity:1; color:var(--gold); }
.sb .ni.active::before{ content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; background:var(--gold); border-radius:0 3px 3px 0; }
/* Sağdaki rozet (nb-dosya, nb-gorev…) */
.sb .ni .nav-badge{ margin-left:auto; font-size:10px; font-weight:700; color:var(--t2); background:var(--inner); padding:1px 7px; border-radius:8px; min-width:18px; text-align:center; }
/* Alt menü (Raporlar/Yönetim/Sistem açılır) */
.sb .nav-sub{ margin:2px 0 4px 8px; padding-left:8px; border-left:1px solid var(--line); }
.sb .nav-sub-item{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:8px; color:var(--t2); font-size:12.5px; cursor:pointer; transition:all .15s; }
.sb .nav-sub-item:hover{ background:rgba(255,255,255,.04); color:var(--t1); }
.sb .nav-sub-item.active{ color:var(--gold); }
.sb .nav-ok{ margin-left:auto; font-size:10px; color:var(--t3); transition:transform .2s; }

.sb .sf{ padding:14px 18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.sb .sf .av{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:var(--gold2); background:#1a2c46; border:1px solid #2a4a6e; }
.sb .sf .un{ font-size:13px; color:#fff; font-weight:600; }
.sb .sf .ur{ font-size:11px; color:var(--t2); }
.sb .sf .lg{ font-size:9.5px; color:var(--t3); margin-top:3px; }

/* ── MAIN + ÜST BAR ───────────────────────────────────────────── */
.tasarim-v2 main{ flex:1; min-width:0; display:flex; flex-direction:column; max-width:1640px; }
.tasarim-v2 .top{ display:flex; align-items:center; justify-content:space-between; padding:20px 26px 16px; gap:20px; }
.tasarim-v2 .top h1{ font-size:21px; font-weight:700; letter-spacing:.4px; }
.tasarim-v2 .top .sub{ font-size:11.5px; color:var(--t2); margin-top:2px; }
.tasarim-v2 .tr{ display:flex; align-items:center; gap:14px; }
.tasarim-v2 .clock{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:8px 15px; }
.tasarim-v2 .clock .c-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.tasarim-v2 .clock .c-time{ font-variant-numeric:tabular-nums; font-weight:600; font-size:14px; letter-spacing:.5px; }
.tasarim-v2 .clock .c-date{ font-size:11px; color:var(--t2); text-align:left; line-height:1.2; border-left:1px solid var(--line); padding-left:12px; }
.tasarim-v2 .ic{ width:38px; height:38px; border-radius:10px; background:var(--panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--t2); position:relative; cursor:pointer; }
.tasarim-v2 .ic svg{ width:17px; height:17px; } .tasarim-v2 .ic:hover{ color:#fff; }
.tasarim-v2 .ic .bdg{ position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:9.5px; font-weight:700;
  min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--bg); }
.tasarim-v2 .ic.wa{ color:var(--green); }
.tasarim-v2 .cont{ padding:4px 26px 30px; overflow:auto; }

/* ── Jenerik panel/başlık (sayfalar paylaşır) ─────────────────── */
.tasarim-v2 .panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; } /* DESIGN_README: kart 16px */
.tasarim-v2 .ph{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px 13px; }
.tasarim-v2 .ph .pt{ display:flex; align-items:center; gap:10px; }
.tasarim-v2 .ph .pt .pi{ width:30px; height:30px; border-radius:8px; background:var(--inner); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.tasarim-v2 .ph .pt .pi svg{ width:16px; height:16px; }
.tasarim-v2 .ph .pt h3{ font-size:13.5px; font-weight:700; letter-spacing:.3px; }
.tasarim-v2 .ph .pt .ps{ font-size:10.5px; color:var(--t3); margin-top:1px; }
.tasarim-v2 .ph .lnk{ font-size:11px; color:var(--gold); font-weight:600; background:rgba(212,166,79,.1); padding:5px 11px; border-radius:8px; cursor:pointer; }

/* ── Dar mod (mobil/daraltılmış sidebar) ──────────────────────── */
@media (max-width:920px){
  .sb{ width:72px; }
  .sb .logo .lt,.sb .logo .ls,.sb .logo .lo,.sb .ni span.lbl,.sb .ng,.sb .sf .un,.sb .sf .ur,.sb .sf .lg{ display:none; }
  .sb .logo{ justify-content:center; padding:18px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — BİREBİR MAKET (tasarim/ana-ekran.html) — yüksek specificity
   (.tasarim-v2 .sb → main.css'in .sidebar/.nav-item kurallarını ezer)
   Kompakt: öğeler üstte toplanır, geniş/seyrek DEĞİL.
   ═══════════════════════════════════════════════════════════════ */
.tasarim-v2 .sb{ width:264px; }
.tasarim-v2 .sb .logo{ flex-direction:column; align-items:center; gap:0; padding:24px 18px 16px; border-bottom:1px solid var(--line); }
.tasarim-v2 .sb .logo .logo-img{ width:180px; max-width:100%; height:auto; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.tasarim-v2 .sb .logo .lo{ margin-top:12px; text-align:center; font-size:9px; letter-spacing:2.5px; color:var(--gold); text-transform:uppercase; font-weight:600; }
.tasarim-v2 .sb .status{ display:flex; align-items:center; gap:9px; padding:13px 22px; font-size:12.5px; color:var(--t2); border-bottom:1px solid var(--line); cursor:pointer; }
.tasarim-v2 .sb .status .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(63,191,111,.18); flex:none; }
.tasarim-v2 .sb .status svg{ width:14px; height:14px; margin-left:auto; opacity:.5; }
.tasarim-v2 .sb .nav{ flex:1; padding:10px 12px; overflow:auto; justify-content:flex-start; }
.tasarim-v2 .sb .ng{ font-size:9.5px; letter-spacing:1.8px; color:var(--t3); text-transform:uppercase; padding:14px 12px 7px; font-weight:600; }
.tasarim-v2 .sb .ni{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; color:var(--t2); font-size:13px; line-height:1.2; margin:1px 0; min-height:0; position:relative; cursor:pointer; transition:all .2s; }
.tasarim-v2 .sb .ni svg{ width:17px; height:17px; opacity:.7; flex:none; }
.tasarim-v2 .sb .ni:hover{ background:rgba(255,255,255,.04); color:var(--t1); }
.tasarim-v2 .sb .ni.active{ background:linear-gradient(90deg,rgba(212,166,79,.16),rgba(212,166,79,.04)); color:#fff; }
.tasarim-v2 .sb .ni.active svg{ opacity:1; color:var(--gold); }
.tasarim-v2 .sb .ni.active::before{ content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; background:var(--gold); border-radius:0 3px 3px 0; }
.tasarim-v2 .sb .chev{ margin-left:auto; width:14px; height:14px; opacity:.45; flex:none; transition:transform .2s; }
.tasarim-v2 .sb .divider{ height:1px; background:var(--line); margin:10px 12px; }
.tasarim-v2 .sb .nav-sub{ margin:2px 0 6px 8px; padding-left:8px; border-left:1px solid var(--line); }
.tasarim-v2 .sb .nav-sub-item{ display:block; padding:7px 12px; border-radius:8px; color:var(--t2); font-size:12.5px; cursor:pointer; transition:all .15s; }
.tasarim-v2 .sb .nav-sub-item:hover{ background:rgba(255,255,255,.04); color:var(--t1); }
.tasarim-v2 .sb .nav-sub-item.active{ color:var(--gold); }
.tasarim-v2 .sb .sf{ padding:14px 18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.tasarim-v2 .sb .sf .av{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--gold2); background:#1a2c46; border:1px solid #2a4a6e; }
.tasarim-v2 .sb .sf .un{ font-size:13px; color:#fff; font-weight:600; }
.tasarim-v2 .sb .sf .ur{ font-size:11px; color:var(--t2); }
.tasarim-v2 .sb .sf .lg{ font-size:9.5px; color:var(--t3); margin-top:3px; }