/* ============================================================================
   AIGENCY CETM 2.0 — cekirdek tasarim sistemi
   HUD / komuta merkezi dili: keskin kenar, kose ayraci, tarama cizgisi,
   veri yogun tipografi, tehdit seviyesine gore sinyal rengi.
   Harici font/CDN yok — CSP 'self' ile tam uyumlu.
   ========================================================================= */

:root {
  /* --- taban: mavi-yesile calan neredeyse siyah --- */
  --bg-0: #04060a;
  --bg-1: #070b11;
  --bg-2: #0b111a;
  --bg-3: #111a26;
  --bg-elev: #0d141e;

  /* --- cizgi ve kenar --- */
  --line: #18242f;
  --line-soft: #121b25;
  --line-hot: #1f3a4a;

  /* --- metin --- */
  --fg: #d7e3ee;
  --fg-dim: #8698a9;
  --fg-mute: #566675;
  --fg-ghost: #35404c;

  /* --- sinyal: tehdit seviyeleri --- */
  --sig: #00e5ff;           /* birincil / nominal */
  --sig-dim: #0a7f8f;
  --crit: #ff2d55;
  --high: #ff6b35;
  --med:  #ffb020;
  --low:  #00d9a3;
  --info: #5b8def;
  --ghost-purple: #a855f7;

  /* --- parlama --- */
  --glow-sig: 0 0 0 1px rgba(0,229,255,.25), 0 0 18px -4px rgba(0,229,255,.45);
  --glow-crit: 0 0 0 1px rgba(255,45,85,.3), 0 0 22px -4px rgba(255,45,85,.5);

  /* --- tipografi --- */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-med: 240ms cubic-bezier(.4,0,.2,1);

  --rail: 232px;
  --topbar: 52px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- arka plan dokusu: ince izgara + yavas tarama --- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
  opacity: .35;
  mix-blend-mode: multiply;
}

#root { position: relative; z-index: 2; min-height: 100%; }
/* Cekmece veya kip acikken arkadaki sayfa kaymasin. */
body.layer-open { overflow: hidden; }

::selection { background: rgba(0,229,255,.28); color: #fff; }

/* --- kaydirma cubugu --- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--line-hot); border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--sig-dim); }

/* ====================================================== tipografi yardimci */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-mute);
}

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

a { color: var(--sig); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======================================================= HUD panel sistemi */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-1));
  border: 1px solid var(--line);
  padding: 14px 16px;
}
/* kose ayraclari — HUD hissi */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--sig-dim); opacity: .75;
}
.panel::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.panel::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.panel.is-crit { border-color: rgba(255,45,85,.35); }
.panel.is-crit::before, .panel.is-crit::after { border-color: var(--crit); opacity: 1; }

.panel-head {
  display: flex; align-items: center; gap: 10px;
  margin: -14px -16px 12px; padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0,0,0,.25);
}
.panel-head h2 { flex: 1; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--fg-dim); font-weight: 600; }

/* ============================================================ durum isigi */
.dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--fg-ghost); position: relative;
}
.dot.live   { background: var(--low);  box-shadow: 0 0 8px var(--low); animation: pulse 2.4s ease-in-out infinite; }
.dot.warn   { background: var(--med);  box-shadow: 0 0 8px var(--med); }
.dot.crit   { background: var(--crit); box-shadow: 0 0 10px var(--crit); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================== rozet/etiket */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px;
  border: 1px solid var(--line-hot); color: var(--fg-dim);
  background: rgba(255,255,255,.015);
}
.tag.crit { border-color: rgba(255,45,85,.45); color: var(--crit); background: rgba(255,45,85,.07); }
.tag.high { border-color: rgba(255,107,53,.45); color: var(--high); background: rgba(255,107,53,.07); }
.tag.med  { border-color: rgba(255,176,32,.45); color: var(--med);  background: rgba(255,176,32,.07); }
.tag.low  { border-color: rgba(0,217,163,.45);  color: var(--low);  background: rgba(0,217,163,.07); }
.tag.sig  { border-color: rgba(0,229,255,.45);  color: var(--sig);  background: rgba(0,229,255,.07); }

/* ================================================================ dugmeler */
.btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; cursor: pointer;
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--line-hot);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn:hover { color: var(--sig); border-color: var(--sig-dim); background: rgba(0,229,255,.06); }
.btn:focus-visible { outline: 1px solid var(--sig); outline-offset: 2px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.primary { color: var(--bg-0); background: var(--sig); border-color: var(--sig); font-weight: 700; }
.btn.primary:hover { background: #4df0ff; }
.btn.danger { color: var(--crit); border-color: rgba(255,45,85,.45); }
.btn.danger:hover { background: rgba(255,45,85,.12); }
.btn.sm { padding: 4px 9px; font-size: 10px; }

/* ================================================================ girdiler */
input, select, textarea {
  font-family: var(--mono); font-size: 13px;
  background: var(--bg-0); color: var(--fg);
  border: 1px solid var(--line-hot); padding: 9px 11px; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sig-dim); box-shadow: var(--glow-sig);
}
input::placeholder { color: var(--fg-ghost); }
label { display: block; margin-bottom: 6px; }

/* ================================================================= tablo */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
  text-align: left; padding: 7px 10px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-1); z-index: 1;
}
tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover { background: rgba(0,229,255,.035); }
tbody tr:last-child td { border-bottom: none; }

/* ================================================================== izgara */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
/* kaotik ritim: esit olmayan kolonlar */
.g-chaos { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.25fr); }
.g-split { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); }

@media (max-width: 1400px) {
  .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1200px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-chaos, .g-split { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
}

/* ============================================================== yardimcilar */
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.tiny { font-size: 11px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.scroll-y { overflow-y: auto; }

/* izgara hucresi icerigi tasmasin: grid ogesi varsayilan min-width:auto'dur */
.grid > * { min-width: 0; }
.panel { min-width: 0; }

/* genis tablolar paneli germesin, kendi icinde yatay kaysin */
.table-wrap { overflow: auto; max-height: 460px; }
.table-wrap table { width: 100%; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; }

.c-crit { color: var(--crit); }
.c-high { color: var(--high); }
.c-med  { color: var(--med); }
.c-low  { color: var(--low); }
.c-sig  { color: var(--sig); }

/* hareket azaltma tercihine saygi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  body::after { display: none; }
}

/* alti sutunlu olcum siralari (posta, ritim) */
.g6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1500px) { .g6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px)  { .g6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .g6 { grid-template-columns: 1fr; } }