/* FVT SEC — SOC teması */
:root {
  --bg: #04070f;
  --bg2: #070d1a;
  --panel: rgba(10, 18, 34, .82);
  --line: rgba(64, 150, 200, .18);
  --line2: rgba(64, 150, 200, .35);
  --text: #b8cfe0;
  --muted: #55708a;
  --cyan: #38d8f5;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --gold: #ffd479;
  font-size: 13px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 700px at 50% 42%, #0a1626 0%, var(--bg) 65%);
  color: var(--text);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  height: 100vh; overflow: hidden;
}

/* ── LOGIN ── */
.login-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; background: radial-gradient(900px 600px at 50% 40%, #0a1626, var(--bg)); }
.login-box { width: 320px; padding: 34px 30px; border: 1px solid var(--line2); background: var(--panel); border-radius: 8px; box-shadow: 0 0 60px rgba(56, 216, 245, .08); }
.login-brand { font-size: 26px; letter-spacing: 4px; color: #fff; text-align: center; }
.login-brand span { color: var(--cyan); }
.login-sub { text-align: center; color: var(--muted); font-size: 10px; letter-spacing: 3px; margin: 6px 0 24px; }
.login-box input { width: 100%; margin-bottom: 12px; padding: 10px 12px; background: #060c18; border: 1px solid var(--line); color: var(--text); border-radius: 4px; font-family: inherit; }
.login-box input:focus { outline: none; border-color: var(--cyan); }
.login-box button { width: 100%; padding: 10px; background: linear-gradient(90deg, #0a3346, #0e4a63); color: var(--cyan); border: 1px solid var(--line2); border-radius: 4px; letter-spacing: 3px; cursor: pointer; font-family: inherit; }
.login-box button:hover { filter: brightness(1.3); }
.login-err { color: var(--red); font-size: 11px; margin-top: 10px; text-align: center; min-height: 14px; }

/* ── LAYOUT ── */
#dash { display: flex; flex-direction: column; height: 100vh; }
.tab { color: var(--muted); text-decoration: none; }
.tab.active { color: #7fa8c9; border-bottom: 1px solid var(--cyan); }
.modal-wrap { position: fixed; inset: 0; background: rgba(2, 5, 10, .75); z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal-box { width: 460px; max-height: 80vh; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 0 80px rgba(56, 216, 245, .12); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-head b { color: var(--cyan); font-size: 14px; }
.modal-body { flex: 1; overflow-y: auto; font-size: 11px; line-height: 1.7; margin-bottom: 10px; }
.modal-body .sec { color: #7fa8c9; letter-spacing: 1px; font-size: 9px; margin-top: 8px; }
.ip-click { cursor: pointer; text-decoration: underline dotted; }
.ip-click:hover { color: var(--cyan); }
.topbar { display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(6, 11, 22, .9); }
.brand { font-size: 15px; letter-spacing: 3px; color: #fff; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.brand b { color: var(--cyan); }
.brand-logo { height: 26px; width: auto; filter: drop-shadow(0 0 6px rgba(56, 216, 245, .35)); }
.brand-sub { font-size: 9px; color: var(--muted); letter-spacing: 2px; margin-left: 10px; }
.chips { display: flex; gap: 14px; flex: 1; justify-content: center; }
.chip label { display: block; font-size: 8px; color: var(--muted); letter-spacing: 2px; }
.chip b { font-size: 11px; font-weight: 600; }
.ok { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--red); }
.tempo, .clock { text-align: right; }
.tempo-num { font-size: 20px; color: var(--gold); line-height: 1; }
#t-clock { font-size: 16px; color: var(--cyan); }
.tempo-lbl { font-size: 8px; color: var(--muted); letter-spacing: 2px; }
.mini-btn { background: #0a1a2c; color: var(--text); border: 1px solid var(--line2); padding: 5px 10px; border-radius: 3px; font-family: inherit; font-size: 10px; letter-spacing: 1px; cursor: pointer; }
.mini-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.mini-btn.danger:hover { border-color: var(--red); color: var(--red); }

.grid { flex: 1; display: grid; grid-template-columns: 300px 1fr 300px; grid-template-rows: minmax(420px, 1fr) 218px 218px; gap: 10px; padding: 10px; min-height: 0; overflow-y: auto; }
.grid::-webkit-scrollbar { width: 6px; } .grid::-webkit-scrollbar-thumb { background: var(--line2); }
.bottom2 { grid-column: 1 / 4; grid-row: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-height: 0; }
.col-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.col-center { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
.col-right { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bottom { grid-column: 1 / 4; grid-row: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; min-height: 0; }
.feed-item { padding: 4px 0; border-bottom: 1px solid rgba(64,150,200,.08); font-size: 10px; }
.feed-item b { display: block; }
.feed-item .meta { color: var(--muted); font-size: 9px; }
.feed-item.alarm b { color: var(--red); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow: hidden; display: flex; flex-direction: column; }
.panel.grow { flex: 1; min-height: 0; }
.p-title { font-size: 10px; letter-spacing: 2px; color: #7fa8c9; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.p-badge { font-size: 8px; color: var(--muted); letter-spacing: 1px; }

.kv { list-style: none; }
.kv li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; border-bottom: 1px dotted rgba(64,150,200,.08); }
.kv li span { color: var(--muted); }
.kv li b { font-weight: 500; }

/* canlı akış */
.feed { flex: 1; overflow: hidden; font-size: 10px; line-height: 1.7; }
.feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.feed .st2 { color: var(--cyan); } .feed .st3 { color: #7dd3fc; } .feed .st4 { color: var(--amber); } .feed .st5 { color: var(--red); }
.feed .ip { color: var(--muted); }

.archive { flex: 1; overflow-y: auto; font-size: 10px; }
.archive::-webkit-scrollbar { width: 4px; } .archive::-webkit-scrollbar-thumb { background: var(--line2); }
.arch-item { padding: 5px 0; border-bottom: 1px solid rgba(64,150,200,.08); }
.arch-item b { display: block; color: var(--text); font-weight: 500; }
.arch-item span { color: var(--muted); font-size: 9px; }
.arch-item.red b { color: var(--red); } .arch-item.amber b { color: var(--amber); }

.ai div { padding: 4px 0; font-size: 10px; line-height: 1.5; }
.ai .high { color: var(--red); } .ai .med { color: var(--amber); } .ai .low { color: #7dd3fc; } .ai .ok { color: var(--green); }

.bars { list-style: none; font-size: 10px; overflow: hidden; flex: 1; }
.bars li { position: relative; padding: 2px 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars li i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56,216,245,.16), transparent); border-left: 2px solid var(--cyan); z-index: 0; }
.bars li em { position: relative; z-index: 1; font-style: normal; }
.bars li b { position: absolute; right: 4px; z-index: 1; color: var(--cyan); font-weight: 500; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-height: 0; }

.list-scroll { flex: 1; overflow-y: auto; font-size: 10px; }
.list-scroll::-webkit-scrollbar { width: 4px; } .list-scroll::-webkit-scrollbar-thumb { background: var(--line2); }
.ban-item { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px solid rgba(64,150,200,.08); }
.ban-item .bid { color: var(--red); }
.ban-item .why { color: var(--muted); font-size: 9px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ban-item button { font-size: 8px; padding: 1px 6px; }
.proc-item { display: flex; justify-content: space-between; padding: 2px 0; font-size: 10px; }
.proc-item .nm { color: var(--text); } .proc-item .meta { color: var(--muted); }

.action-row { display: flex; gap: 6px; margin-top: 6px; }
.action-row input { flex: 1; background: #060c18; border: 1px solid var(--line); color: var(--text); padding: 4px 8px; border-radius: 3px; font-family: inherit; font-size: 10px; }

.col-center canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-btn { position: absolute; top: 8px; right: 8px; z-index: 5; opacity: .55; }
.fs-btn:hover { opacity: 1; }
/* tam ekran sinir ağı */
.col-center.fullscreen { position: fixed; inset: 0; z-index: 45; background: radial-gradient(1400px 900px at 50% 45%, #0a1626 0%, var(--bg) 70%); border: none; border-radius: 0; }
.col-center.fullscreen .center-legend { bottom: 14px; left: 18px; font-size: 11px; }
.center-legend { position: absolute; bottom: 8px; left: 12px; display: flex; gap: 14px; font-size: 9px; color: var(--muted); }
.center-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

.statusbar { display: flex; gap: 26px; padding: 6px 16px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); background: rgba(6, 11, 22, .9); }
canvas#spark, canvas#waf-chart { width: 100%; }