/* ========== Reset & Vars ========== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
:root{
  --bg:#061226;        /* genel arka plan  */
  --ink:#e9f2ff;       /* ana metin       */
  --muted:#9fb6d1;     /* ikincil metin   */
  --card:#0a1830;      /* kart üst        */
  --card2:#0c1d39;     /* kart alt        */
  --line:#123056;      /* kart kenar      */
  --accent:#39baf7;    /* CTA mavi        */
  --accent-2:#2b7acb;  /* TR harita mavi  */
  --panel:#0a1b33;     /* tipografi blok  */
  --tile:#f4f7fb;      /* beyaz karo      */
  --tile-ink:#0b1424;  /* beyaz karo yazı */
}
body{background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin-inline:auto;padding-inline:24px}

/* ========== Kozmik Aura (görsel arka plan) ========== */
.cosmic{position:relative;isolation:isolate}
.cosmic::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 800px at 50% -180px,#0f2b53 0%,#07162b 42%,transparent 70%) no-repeat;
}
.cosmic::after{
  content:"";position:absolute;left:-20%;right:-20%;top:-40%;height:1200px;z-index:-3;
  background:
    radial-gradient(closest-side,#2aa8ff44,transparent 72%),
    radial-gradient(closest-side,#2aa8ff22,transparent 75%);
  filter:blur(60px)
}

/* ========== Nav ========== */
.nav{position:sticky;top:0;z-index:30;background:#0b1a31a0;backdrop-filter:blur(8px);border-bottom:1px solid #ffffff0d}
.nav .wrap{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.1px}
.brand-dot{width:10px;height:10px;border-radius:999px;background:#38bdf8;box-shadow:0 0 16px 8px #38bdf866}
.menu{display:none;gap:28px;font-size:14px;color:#cfe0f9}
@media (min-width:768px){.menu{display:flex}}
.menu a:hover{color:#fff}

/* ========== Hero ========== */
.hero{padding:64px 0 24px;text-align:center}
.h-xl{font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(40px,6vw,72px)}
.h-xl .line2{display:block}
.sub{color:var(--muted);margin-top:8px}
.cta{display:inline-flex;gap:10px;align-items:center;margin-top:22px;background:var(--accent);color:#071426;border-radius:999px;padding:14px 18px;font-weight:800;box-shadow:0 8px 40px #39baf766}
.cta-ico{font-size:22px;margin-top:-2px}

/* ========== 4 Kart ========== */
.grid-4{display:grid;gap:20px}
@media (min-width:768px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px #0000003a;padding:20px}
.badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px}
.badge.sky{background:#38bdf826;border:1px solid #38bdf84d}
.badge.emr{background:#10b98126;border:1px solid #10b9814d}
.badge.ambr{background:#f59e0b26;border:1px solid #f59e0b4d}
.badge.indg{background:#6366f126;border:1px solid #6366f14d}
.card h3{font-weight:700;font-size:18px}
.card p{color:#d6e6ffcc;font-size:13.5px;margin-top:4px}
.more{margin-top:10px;display:inline-flex;gap:6px;color:#9ad6ff;font-size:14px}
.more:hover{text-decoration:underline}

/* ========== Orta Blok ========== */
.grid-2{display:grid;gap:24px}
@media (min-width:1024px){.grid-2{grid-template-columns:1.05fr .95fr}}
.panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:0 10px 32px #0000003a;padding:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.chip{border:1px solid #1f3f66;background:#0b1f39;color:#cfe4ff;border-radius:12px;padding:2px 8px;font-size:12px}
.mock{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.mock .b{height:112px;border-radius:14px}
.b.sky{background:linear-gradient(180deg,#38bdf84f,#38bdf81c)}
.b.ind{background:linear-gradient(180deg,#6366f14f,#6366f11c)}
.b.emr{background:linear-gradient(180deg,#10b9814f,#10b9811c)}
.b.ambr{background:linear-gradient(180deg,#f59e0b4f,#f59e0b1c)}
.mock-big{margin-top:12px;height:116px;border:1px solid #ffffff18;border-radius:14px;background:#0a1425aa;display:grid;place-items:center;color:#cfe4ffcc;font-size:14px}
.slab{border:1px solid var(--line);background:linear-gradient(180deg,#0b1a32,#0a172d);border-radius:18px;box-shadow:0 10px 32px #0000003a;padding:20px}
.slab .row{display:grid;gap:16px}
@media (min-width:768px){.slab .row{grid-template-columns:1fr 1fr}}
.slab .tile{background:var(--panel);border-radius:14px;padding:18px}
.slab h4{font-size:28px;font-weight:900;line-height:1.12}

/* TR silüet */
.turkey{margin-top:10px;width:100%;height:170px}
.turkey path{fill:var(--accent-2);opacity:.9;filter:drop-shadow(0 0 10px var(--accent-2))}

/* ========== Alt 3 Beyaz Karo ========== */
.karo{display:grid;gap:16px}
@media (min-width:768px){.karo{grid-template-columns:repeat(3,1fr)}}
.k{background:var(--tile);color:var(--tile-ink);border-radius:18px;font-weight:900;padding:26px;text-align:center}
.k span{color:#0979e6}
.k:hover{transform:translateY(-1px);transition:.2s}

/* ========== Footer ========== */
.foot{padding:0 0 56px}
.foot-grid{display:grid;gap:16px}
@media (min-width:768px){.foot-grid{grid-template-columns:1fr 1fr;align-items:center}}
.badges{display:flex;justify-content:center;gap:22px;color:#e5eeff}
@media (min-width:768px){.badges{justify-content:flex-start}}
.dot{width:10px;height:10px;border-radius:999px;background:#10b981;display:inline-block}
.right{ text-align:center}
@media (min-width:768px){.right{text-align:right}}