/* ====================================================================
   Çok-Sensörlü Anti-Drone (C-UAS) Tespit & Sınıflandırma — site stili
   Koyu "komuta-merkezi" teması. Bağımlılıksız, tek dosya.
   ==================================================================== */
:root{
  --bg:#0a0f1c; --bg2:#0d1526; --panel:#111c33; --card:#13203a; --card2:#16233f;
  --border:#223150; --border2:#2c4066;
  --ink:#e8eef9; --ink2:#aab8d4; --muted:#7e8fb0;
  --accent:#38bdf8; --accent2:#22d3ee;
  --radar:#38bdf8; --rf:#a78bfa; --eo:#34d399; --ac:#fbbf24; --fus:#f472b6; --cls:#f59e0b;
  --ok:#4ade80; --warn:#fb7185; --danger:#f43f5e;
  --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:1180px;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 500px at 80% -10%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(167,139,250,.06), transparent 55%);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* ----------------------------- NAV -------------------------------- */
header.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(10,15,28,.82); border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; white-space:nowrap}
.brand .logo{width:30px;height:30px;flex:0 0 auto}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.5px}
.nav nav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap}
.nav nav a{color:var(--ink2); padding:7px 8px; border-radius:8px; font-size:12.5px; font-weight:500}
.nav nav a:hover{background:var(--card); color:var(--ink); text-decoration:none}
.nav nav a.active{color:var(--accent); background:rgba(56,189,248,.1)}
.menu-btn{display:none; margin-left:auto; background:var(--card); border:1px solid var(--border);
  color:var(--ink); border-radius:8px; padding:8px 12px; font-size:16px; cursor:pointer}

/* ---------------------------- HERO -------------------------------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero .wrap{padding:66px 22px 50px}
.hero .badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:999px; border:1px solid var(--border2); background:var(--card); color:var(--ink2)}
.pill.scope{border-color:rgba(74,222,128,.4); color:var(--ok); background:rgba(74,222,128,.08)}
.pill.prog{border-color:rgba(56,189,248,.4); color:var(--accent); background:rgba(56,189,248,.08)}
.hero h1{font-size:clamp(28px,4.4vw,46px); font-weight:800; letter-spacing:-.5px; max-width:16ch}
.hero .lede{font-size:clamp(16px,1.9vw,20px); color:var(--ink2); max-width:62ch; margin-top:14px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px;
  font-weight:700; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:.15s}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#07121f}
.btn.primary:hover{filter:brightness(1.08); text-decoration:none}
.btn.ghost{background:var(--card); border-color:var(--border2); color:var(--ink)}
.btn.ghost:hover{background:var(--card2); text-decoration:none}

/* ------------------------- STAT TILES ----------------------------- */
.stats{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 16px 14px}
.stat .v{font-size:clamp(20px,2.4vw,27px); font-weight:800; color:var(--ink); letter-spacing:-.5px}
.stat .v small{font-size:13px; font-weight:700; color:var(--accent)}
.stat .k{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4}
.stat.r{border-top:2px solid var(--radar)} .stat.g{border-top:2px solid var(--eo)}
.stat.y{border-top:2px solid var(--ac)} .stat.p{border-top:2px solid var(--rf)}
.stat.c{border-top:2px solid var(--accent)} .stat.m{border-top:2px solid var(--fus)}

/* --------------------------- SECTIONS ----------------------------- */
section{padding:62px 0; border-bottom:1px solid var(--border)}
section:nth-of-type(even){background:linear-gradient(180deg,var(--bg2),transparent)}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.kicker::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block}
section h2{font-size:clamp(23px,3vw,33px); font-weight:800; letter-spacing:-.5px}
section .intro{color:var(--ink2); max-width:72ch; font-size:16.5px}

/* --------------------------- CARDS -------------------------------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.card h3{font-size:18px; display:flex; align-items:center; gap:10px}
.card h3 .dot{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.card p{color:var(--ink2); font-size:14.5px; margin-bottom:0}
.card ul{color:var(--ink2); font-size:14.5px; margin:.4em 0 0; padding-left:18px}
.card ul li{margin-bottom:5px}
.card.sensor{position:relative; overflow:hidden}
.card.sensor .tag{position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; background:rgba(74,222,128,.1); color:var(--ok); border:1px solid rgba(74,222,128,.3)}

/* ------------------------- KÜNYE TABLE ---------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--border)}
thead th{background:var(--panel); color:var(--ink); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.5px; position:sticky; top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(56,189,248,.04)}
td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.fill-me{color:var(--ac); font-style:italic}
table.tot tfoot td{font-weight:800; background:var(--panel); border-top:2px solid var(--border2)}

/* -------------------------- DIAGRAMS ------------------------------ */
figure{margin:0}
.diagram{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center}
.diagram img{width:100%; height:auto; display:block; border-radius:9px}
figcaption{color:var(--muted); font-size:13px; margin-top:12px; text-align:center}
.result-img{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px}
.result-img img{width:100%; height:auto; display:block; border-radius:6px}

/* ---------------------------- CODE -------------------------------- */
.code-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.code-tabs button{background:var(--card); border:1px solid var(--border); color:var(--ink2);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans)}
.code-tabs button.active{background:rgba(56,189,248,.12); border-color:var(--accent); color:var(--accent)}
.code-panel{display:none} .code-panel.active{display:block}
.codebox{position:relative; background:#0b1220; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.codebox .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel)}
.codebox .bar .fname{font-family:var(--mono); font-size:12.5px; color:var(--ink2)}
.codebox .bar .dots{display:flex; gap:6px}
.codebox .bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.codebox .copy{margin-left:auto; background:var(--card); border:1px solid var(--border2); color:var(--ink2);
  font-size:12px; padding:5px 11px; border-radius:7px; cursor:pointer; font-family:var(--sans)}
.codebox .copy:hover{color:var(--ink); background:var(--card2)}
.codebox pre{margin:0; padding:16px 18px; overflow:auto; max-height:460px; font-family:var(--mono);
  font-size:12.8px; line-height:1.6; color:#d6e2f5}
.codebox pre code{white-space:pre}
.tok-kw{color:#c792ea} .tok-str{color:#c3e88d} .tok-com{color:#5f7599; font-style:italic}
.tok-num{color:#f78c6c} .tok-fn{color:#82aaff} .tok-dec{color:#ffcb6b}
.run-out{background:#07101c; border:1px dashed var(--border2); border-radius:var(--radius-sm);
  padding:14px 16px; margin-top:12px; font-family:var(--mono); font-size:12.3px; color:#9fe6c0; white-space:pre-wrap; overflow:auto}
.run-out .lbl{color:var(--muted); display:block; margin-bottom:6px; font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1px}

/* --------------------------- C2 DEMO ------------------------------ */
.c2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start}
.c2-screen{background:#060d18; border:1px solid var(--border2); border-radius:var(--radius); padding:14px; position:relative}
.c2-screen canvas{width:100%; height:auto; display:block; border-radius:8px; background:
  radial-gradient(circle at center, #0a1626 0%, #070f1b 70%)}
.c2-hud{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--accent2); margin-bottom:8px; letter-spacing:.5px}
.c2-side .card{height:100%}
.track-list{font-family:var(--mono); font-size:12.5px}
.track-row{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--border)}
.track-row:last-child{border:none}
.track-row .badge{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px}
.b-drone{background:rgba(244,63,94,.15); color:#fda4b4; border:1px solid rgba(244,63,94,.4)}
.b-kus{background:rgba(52,211,153,.13); color:#6ee7b7; border:1px solid rgba(52,211,153,.35)}
.b-gurultu{background:rgba(126,143,176,.13); color:#aab8d4; border:1px solid rgba(126,143,176,.35)}
.c2-controls{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

/* ------------------------- BUDGET CHART --------------------------- */
.chart{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.bar-row{display:grid; grid-template-columns:200px 1fr 92px; align-items:center; gap:12px; margin-bottom:12px; font-size:13.5px}
.bar-row .lbl{color:var(--ink2)}
.bar-track{background:var(--bg2); border-radius:6px; height:26px; overflow:hidden; position:relative}
.bar-fill{height:100%; border-radius:0 6px 6px 0; background:linear-gradient(90deg,var(--accent),var(--accent2));
  display:flex; align-items:center; transition:width 1s cubic-bezier(.2,.8,.2,1); width:0}
.bar-row .val{text-align:right; font-family:var(--mono); font-weight:700; color:var(--ink)}
.bar-row.hl .bar-fill{background:linear-gradient(90deg,var(--fus),#fb7185)}

/* --------------------------- TIMELINE ----------------------------- */
.wp{display:grid; grid-template-columns:70px 1fr; gap:16px; margin-bottom:18px}
.wp .id{font-weight:800; font-size:17px; color:var(--accent); text-align:center; padding-top:4px}
.wp .body{border-left:2px solid var(--border2); padding-left:18px; position:relative}
.wp .body::before{content:""; position:absolute; left:-7px; top:6px; width:12px;height:12px;border-radius:50%;background:var(--accent); border:3px solid var(--bg)}
.wp .body h4{font-size:16px; margin-bottom:3px}
.wp .body .months{font-size:12px; color:var(--muted); font-family:var(--mono)}

/* -------------------------- CALLOUTS ------------------------------ */
.callout{border-radius:var(--radius); padding:18px 20px; border:1px solid; font-size:14.5px; display:flex; gap:14px}
.callout .ico{font-size:20px; flex:0 0 auto; line-height:1.3}
.callout.scope{background:rgba(74,222,128,.06); border-color:rgba(74,222,128,.3)}
.callout.warn{background:rgba(251,113,133,.07); border-color:rgba(251,113,133,.35)}
.callout.info{background:rgba(56,189,248,.06); border-color:rgba(56,189,248,.3)}
.callout b{color:var(--ink)}
.callout.scope b{color:var(--ok)} .callout.warn b{color:var(--warn)}

/* ---------------------------- LISTS ------------------------------- */
.checks{list-style:none; padding:0; margin:0}
.checks li{padding:9px 0 9px 30px; position:relative; color:var(--ink2); border-bottom:1px solid var(--border); font-size:14.5px}
.checks li:last-child{border:none}
.checks li::before{content:"✓"; position:absolute; left:0; top:8px; color:var(--ok); font-weight:800}

/* --------------------------- FOOTER ------------------------------- */
footer{padding:46px 0 60px; color:var(--muted); font-size:13.5px}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
footer h4{color:var(--ink); font-size:14px; letter-spacing:.5px}
footer a{color:var(--ink2)}
footer .legal{grid-column:1/-1; border-top:1px solid var(--border); padding-top:20px; margin-top:6px; font-size:12.5px}

/* -------------------------- RESPONSIVE ---------------------------- */
@media(max-width:980px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .c2{grid-template-columns:1fr}
  .nav nav{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column;
    background:var(--bg2); border-bottom:1px solid var(--border); padding:10px 22px}
  .nav nav.open{display:flex} .menu-btn{display:block}
  footer .wrap{grid-template-columns:1fr}
}
@media(max-width:620px){
  .stats{grid-template-columns:repeat(2,1fr)} .g2,.g3,.g4{grid-template-columns:1fr}
  .bar-row{grid-template-columns:120px 1fr 72px; font-size:12px}
  .hero .wrap{padding:44px 22px 36px}
}
@media print{
  header.nav,.c2-controls,.copy,.menu-btn,.cta{display:none}
  body{background:#fff; color:#000} section{break-inside:avoid; border-color:#ccc}
  .card,.table-wrap,.chart,.diagram{break-inside:avoid}
}
/* reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:.6s ease}
.reveal.in{opacity:1; transform:none}