:root{
  --primary:#7C3AED; --primary-dark:#6D28D9; --header-from:#4C1D95;
  --ink:#221B3A; --text:#1B1830; --muted:#6B6A82; --faint:#9b9ab0;
  --bg:#FAF8FF; --surface:#FFFFFF; --border:#ECEAF3;
  --amber:#F59E0B; --green:#16A34A;
  --radius:20px; --shadow:0 18px 50px rgba(27,24,48,.12);
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(250,248,255,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .logo{width:34px;height:34px;border-radius:9px;display:block}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{color:var(--muted); font-weight:600; font-size:15px}
.nav-links a:hover{color:var(--ink); text-decoration:none}
@media(max-width:640px){.nav-links{display:none}}

/* Hero */
.hero{background:linear-gradient(160deg,var(--header-from) 0%,var(--primary-dark) 55%,var(--primary) 100%);
  color:#fff; padding:80px 0 96px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.hero h1{font-size:52px; line-height:1.08; font-weight:800; letter-spacing:-1px}
.hero p.sub{font-size:20px; opacity:.92; margin-top:18px; max-width:520px}
.hero .cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.badge-note{font-size:13px; opacity:.8; margin-top:14px}
.phone{justify-self:center; width:300px; max-width:100%; border-radius:42px;
  box-shadow:0 40px 90px rgba(14,9,34,.5); border:6px solid rgba(255,255,255,.14)}
@media(max-width:840px){
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .hero h1{font-size:38px}
  .hero .cta{justify-content:center}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .phone{margin-top:24px; width:260px}
}

/* App Store button */
.appstore{display:inline-flex; align-items:center; gap:12px; background:#000; color:#fff;
  padding:12px 22px; border-radius:14px; font-weight:600}
.appstore:hover{text-decoration:none; opacity:.9}
.appstore svg{width:26px;height:26px;fill:#fff}
.appstore .t{display:flex; flex-direction:column; line-height:1.1; text-align:left}
.appstore .t small{font-size:11px; opacity:.85}
.appstore .t b{font-size:18px; font-weight:700}
.appstore.disabled{opacity:.55; cursor:default}

/* Sections */
section{padding:72px 0}
.section-title{font-size:32px; font-weight:800; text-align:center; letter-spacing:-.5px}
.section-sub{text-align:center; color:var(--muted); margin-top:10px; max-width:620px; margin-left:auto;margin-right:auto}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px}
@media(max-width:840px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow)}
.card .ic{width:48px;height:48px;border-radius:13px;background:#F0EAFE;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.card h3{font-size:19px; font-weight:800; color:var(--ink)}
.card p{color:var(--muted); margin-top:8px; font-size:15px}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px}
@media(max-width:840px){.steps{grid-template-columns:1fr}}
.step{text-align:center}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;
  font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.step h3{font-size:18px;font-weight:800;color:var(--ink)}
.step p{color:var(--muted); margin-top:6px; font-size:15px}

/* Download band */
.band{background:linear-gradient(160deg,var(--header-from),var(--primary)); color:#fff; border-radius:28px;
  padding:56px 32px; text-align:center; margin:8px 0}
.band h2{font-size:30px; font-weight:800}
.band p{opacity:.9; margin-top:10px}
.band .cta{margin-top:26px; display:flex; justify-content:center}

/* Legal pages */
.legal{padding:56px 0 80px}
.legal .doc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:40px; box-shadow:var(--shadow); max-width:820px; margin:0 auto}
.legal h1{font-size:34px; font-weight:800; color:var(--ink); letter-spacing:-.5px}
.legal .eff{color:var(--faint); font-size:14px; margin-top:8px; margin-bottom:28px}
.legal h2{font-size:20px; font-weight:800; color:var(--ink); margin-top:30px}
.legal p,.legal li{color:#3a3850; margin-top:12px; font-size:16px}
.legal ul{margin-top:8px; padding-left:22px}
.legal li{margin-top:8px}
.legal a{font-weight:600}

/* Dil seçici — nav linkleri mobilde gizlense de bu görünür kalır */
.nav-right{display:flex; align-items:center; gap:26px}
.lang{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700}
.lang a{color:var(--muted)}
.lang a:hover{color:var(--ink); text-decoration:none}
.lang .on{color:var(--primary)}
.lang .sep{color:var(--faint); font-weight:400}

/* Footer */
footer{border-top:1px solid var(--border); padding:40px 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px}
footer .flinks{display:flex; gap:22px; flex-wrap:wrap}
footer .flinks a{color:var(--muted); font-weight:600}