:root {
    --blue: #1565C0;
    --blue-dark: #0D47A1;
    --blue-light: #E3F2FD;
    --ink: #0F172A;
    --muted: #64748B;
    --line: #E2E8F0;
    --pool: #0288D1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* Navbar */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    max-width: 1120px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--blue); }
.nav-brand .logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), #42A5F5);
    display: grid; place-items: center; color: #fff; font-size: 18px;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a.link { color: var(--muted); font-weight: 500; transition: color .2s; }
.nav-links a.link:hover { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-btn {
    padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 13px; color: var(--muted); background: #fff; cursor: pointer; transition: all .2s;
}
.lang-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px;
    transition: all .2s; cursor: pointer; border: none;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: var(--blue-light); }
.btn-white { background: #fff; color: var(--blue-dark); }
.btn-white:hover { background: var(--blue-light); }

/* Hero */
.hero {
    padding: 140px 24px 90px;
    background: radial-gradient(1100px 520px at 85% -10%, #BBDEFB55, transparent),
                radial-gradient(900px 480px at 0% 0%, #E3F2FD88, transparent),
                linear-gradient(180deg, #F6FAFF, #fff);
    text-align: center;
}
.hero h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: -1px; max-width: 820px; margin: 0 auto 18px; }
.hero h1 .accent { color: var(--blue); }
.hero p.lead { font-size: clamp(16px, 2.4vw, 20px); color: var(--muted); max-width: 640px; margin: 0 auto 30px; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-badge {
    display: inline-block; margin-bottom: 18px; padding: 7px 16px; border-radius: 999px;
    background: var(--blue-light); color: var(--blue-dark); font-size: 13px; font-weight: 600;
}
.hero-stats {
    display: flex; gap: 48px; justify-content: center; margin-top: 56px; flex-wrap: wrap;
}
.hero-stats .stat b { font-size: 30px; color: var(--blue); display: block; }
.hero-stats .stat span { color: var(--muted); font-size: 14px; }

/* Bölümler */
section.block { max-width: 1120px; margin: 0 auto; padding: 80px 24px; }
.sec-title { text-align: center; margin-bottom: 48px; }
.sec-title h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
.sec-title p { color: var(--muted); max-width: 560px; margin: 10px auto 0; }

/* Hizmetler */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.feature-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px;
    transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13,71,161,.08); }
.feature-card .ic {
    width: 50px; height: 50px; border-radius: 12px; margin-bottom: 16px;
    background: var(--blue-light); color: var(--blue-dark);
    display: grid; place-items: center; font-size: 22px;
}
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }

/* Nasıl? Adımlar */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; background: #F8FAFC; border: 1px solid var(--line); border-radius: 14px; padding: 26px 20px 20px; }
.step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; top: -14px; left: 20px;
    background: var(--blue); color: #fff; font-weight: 700; font-size: 14px;
    padding: 3px 10px; border-radius: 8px;
}
.step b { display: block; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14px; }

/* CTA */
.cta {
    background: linear-gradient(120deg, var(--blue-dark), var(--blue));
    color: #fff; text-align: center; padding: 80px 24px;
}
.cta h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 12px; }
.cta p { opacity: .85; max-width: 520px; margin: 0 auto 28px; }

/* Footer */
footer { background: #0F172A; color: #94A3B8; text-align: center; padding: 34px 24px; font-size: 14px; }
footer .brand { color: #fff; font-weight: 700; }
footer .links { margin: 14px 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer a:hover { color: #fff; }

@media (max-width: 720px) {
    .nav-links { display: none; }
    .hero { padding-top: 120px; }
}