/* Genel */
:root{
  --bg:#0f1020;
  --card:#181b3a;
  --muted:#aab0ff;
  --text:#e8e9ff;
  --accent:#6c5ce7;
  --accent-2:#00d4ff;
  --accent-3:#ff7a59;
  --success:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(108,92,231,.25), transparent),
              radial-gradient(1000px 700px at 90% 20%, rgba(0,212,255,.15), transparent),
              var(--bg);
  color:var(--text); line-height:1.6; overflow-x:hidden;
}

.container{width:min(1100px, 92%); margin-inline:auto}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(15,16,32,.5); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-dot{width:14px; height:14px; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent))}
.brand-text{font-weight:700; letter-spacing:.4px; color:#fff}
.nav{display:flex; gap:14px; align-items:center}
.nav-link{color:var(--muted); text-decoration:none; font-weight:500}
.nav-link:hover{color:#fff}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700; letter-spacing:.3px; border:1px solid transparent; transition:.2s transform, .2s filter, .2s background}
.btn:hover{transform:translateY(-1px); filter:saturate(1.1)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#000}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.2)}
.btn-glass{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:#fff}
.btn-whatsapp{background:linear-gradient(135deg, #25D366, #128C7E); color:#001}
.btn-lg{padding:16px 26px; border-radius:16px; font-size:1.05rem}

/* Hero */
.hero{padding:84px 0 36px; text-align:center}
.badge{display:inline-block; background:rgba(108,92,231,.15); color:#cfd2ff; border:1px solid rgba(108,92,231,.5); padding:8px 12px; border-radius:999px; font-size:.86rem}
.hero h1{font-size:clamp(2rem, 4.5vw, 3.4rem); margin:18px 0 10px}
.highlight{background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:#d9dbff; max-width:820px; margin:0 auto 22px}
.meta{display:flex; gap:16px; justify-content:center; color:#c4c7ff; padding:0; list-style:none}
.meta li{background:rgba(255,255,255,.06); padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
.cta-wrap{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Cards */
.cards{padding:48px 0}
.cards h2{margin:0 0 20px; font-size:1.6rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.card h3{margin-top:0}

/* Highlight CTA */
.highlight-cta{padding:30px 0 64px}
.highlight-cta .panel{background:linear-gradient(135deg, rgba(108,92,231,.2), rgba(0,212,255,.18)); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:26px; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.25)}

/* Footer */
.site-footer{margin-top:40px; padding:28px 0 36px; border-top:1px solid rgba(255,255,255,.06); background:rgba(15,16,32,.6); backdrop-filter:blur(6px)}
.site-footer h3,.site-footer h4{margin-top:0}
.ticks{list-style:none; padding:0; margin:0}
.ticks li{position:relative; padding-left:24px; margin:8px 0}
.ticks li::before{content:'✔'; position:absolute; left:0; top:0; opacity:.7}
.tiny{margin-top:22px; font-size:.85rem; color:#b8bbff; text-align:center}

/* Animated background blobs */
.animated-bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.blob{position:absolute; width:42vw; max-width:620px; aspect-ratio:1/1; border-radius:50%; filter:blur(42px); opacity:.35; mix-blend:screen}
.b1{background:radial-gradient(circle at 30% 30%, var(--accent), transparent 70%); left:-10vw; top:-10vh; animation:float1 12s ease-in-out infinite}
.b2{background:radial-gradient(circle at 70% 30%, var(--accent-2), transparent 70%); right:-12vw; top:10vh; animation:float2 16s ease-in-out infinite}
.b3{background:radial-gradient(circle at 50% 70%, var(--accent-3), transparent 70%); left:20vw; bottom:-10vh; animation:float3 18s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px, -10px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px, 10px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px, 20px)}}