/* ===== FixChat — tanıtım & auth ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --pri:#6366f1; --pri-d:#4f46e5; --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background:#fff; line-height:1.6; }
a { color: var(--pri); text-decoration: none; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Nav */
.nav { position: sticky; top:0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); z-index:50; }
.nav .container { display:flex; align-items:center; height:68px; gap:28px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink); }
.logo .mark { width:34px;height:34px;border-radius:9px;background:var(--pri);display:flex;align-items:center;justify-content:center; }
.logo .mark svg { width:18px;height:18px;fill:#fff; }
.nav .links { display:flex; gap:24px; margin-left:auto; align-items:center; }
.nav .links a { color:#334155; font-weight:500; font-size:15px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:10px; padding:11px 20px; font-size:15px; font-weight:600; cursor:pointer; transition:.15s; }
.btn-primary { background:var(--pri); color:#fff; }
.btn-primary:hover { background:var(--pri-d); }
.btn-ghost { background:#f1f5f9; color:var(--ink); }
.btn-ghost:hover { background:#e2e8f0; }
.btn-lg { padding:14px 28px; font-size:16px; }

/* Hero */
.hero { padding:90px 0 70px; background:radial-gradient(1000px 500px at 70% -10%, #eef2ff 0%, transparent 60%); }
.hero .container { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.hero h1 { font-size:52px; line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.hero h1 .grad { background:linear-gradient(90deg,#6366f1,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:19px; color:var(--mut); margin-bottom:30px; max-width:520px; }
.hero .cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero .note { margin-top:16px; font-size:14px; color:var(--mut); }
.badge-pill { display:inline-block; background:#eef2ff; color:var(--pri-d); font-weight:600; font-size:13px; padding:6px 14px; border-radius:30px; margin-bottom:22px; }

/* Hero görsel — sahte sohbet */
.mock { background:#0b1220; border-radius:20px; padding:18px; box-shadow:0 30px 70px rgba(15,23,42,.35); }
.mock .bar { background:var(--pri); border-radius:12px 12px 0 0; color:#fff; padding:14px 16px; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.mock .scr { background:#f7f8fa; border-radius:0 0 12px 12px; padding:16px; display:flex; flex-direction:column; gap:10px; min-height:280px; }
.mb { padding:9px 13px; border-radius:14px; font-size:13px; max-width:80%; }
.mb.in { background:var(--pri); color:#fff; align-self:flex-start; border-bottom-left-radius:4px; }
.mb.out { background:#fff; border:1px solid var(--line); align-self:flex-end; border-bottom-right-radius:4px; }
.mb.q { background:#fff; border:1.5px solid var(--pri); color:var(--pri); align-self:flex-end; }

/* Bölümler */
section.block { padding:80px 0; }
.section-head { text-align:center; max-width:680px; margin:0 auto 50px; }
.section-head h2 { font-size:36px; letter-spacing:-1px; margin-bottom:14px; }
.section-head p { color:var(--mut); font-size:18px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feature { border:1px solid var(--line); border-radius:16px; padding:28px; transition:.2s; }
.feature:hover { box-shadow:0 12px 30px rgba(15,23,42,.08); transform:translateY(-3px); }
.feature .ico { width:48px;height:48px;border-radius:12px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px; }
.feature h3 { font-size:18px; margin-bottom:8px; }
.feature p { color:var(--mut); font-size:15px; }

/* Adımlar */
.steps { background:#f8fafc; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step { text-align:center; }
.step .num { width:46px;height:46px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px; }
.code-box { background:#0b1220; color:#7dd3fc; border-radius:12px; padding:16px; font-family:ui-monospace,Menlo,monospace; font-size:13px; text-align:left; overflow:auto; max-width:560px; margin:24px auto 0; }

/* CTA şerit */
.cta-strip { background:linear-gradient(90deg,#6366f1,#a855f7); color:#fff; border-radius:24px; padding:56px; text-align:center; }
.cta-strip h2 { font-size:34px; margin-bottom:12px; }
.cta-strip p { opacity:.9; font-size:18px; margin-bottom:26px; }
.cta-strip .btn { background:#fff; color:var(--pri-d); }

footer { border-top:1px solid var(--line); padding:34px 0; color:var(--mut); font-size:14px; }
footer .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* Auth */
.auth-wrap { min-height:100vh; display:flex; }
.auth-side { flex:1; background:linear-gradient(160deg,#4f46e5,#7c3aed); color:#fff; padding:60px; display:flex; flex-direction:column; justify-content:center; }
.auth-side h2 { font-size:34px; line-height:1.2; margin-bottom:18px; }
.auth-side ul { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.auth-side li { display:flex; gap:10px; align-items:flex-start; opacity:.95; }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card { width:100%; max-width:400px; }
.auth-card h1 { font-size:26px; margin-bottom:6px; }
.auth-card .sub { color:var(--mut); margin-bottom:26px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; color:#475569; margin-bottom:6px; }
.field input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; outline:none; }
.field input:focus { border-color:var(--pri); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.err { background:#fee2e2; color:#b91c1c; padding:11px 14px; border-radius:9px; font-size:14px; margin-bottom:18px; }
.auth-foot { text-align:center; margin-top:20px; color:var(--mut); font-size:14px; }

@media (max-width:900px) {
  .hero .container, .features, .steps-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:38px; }
  .nav .links a:not(.btn) { display:none; }
  .auth-side { display:none; }
}