:root {
      color-scheme: light;
      --bg: #f6f8fb;
      --bg-2: #eef2f7;
      --surface: #ffffff;
      --surface-2: #fbfcfe;
      --border: #e3e8ef;
      --border-soft: #eef1f6;
      --text: #0f172a;
      --muted: #475569;
      --soft: #94a3b8;
      --accent: #4f46e5;
      --accent-2: #4338ca;
      --accent-3: #6366f1;
      --radius: 18px;
      --radius-sm: 12px;
      --shadow: 0 12px 34px -16px rgba(15,23,42,.18);
      --shadow-lg: 0 30px 60px -28px rgba(15,23,42,.22);
      --maxw: 1120px;
      --ease: cubic-bezier(.22,.61,.36,1);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: "Segoe UI", system-ui, -apple-system, "Inter", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
    }
    /* ambient — açık, ferah */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background:
        radial-gradient(900px 520px at 50% -10%, rgba(79,70,229,.08), transparent 60%),
        var(--bg);
    }
    body::after {
      content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
      background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(900px 600px at 50% 0%, #000 0%, transparent 70%);
    }
    a { color: var(--accent); text-decoration: none; }
    .wrap { width: min(var(--maxw), 92%); margin: 0 auto; }
    .grad-text { background: linear-gradient(92deg, var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px;
      font-weight: 650; font-size: .94rem; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
      transition: transform .15s var(--ease), filter .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
    }
    .btn svg { width: 17px; height: 17px; }
    .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #ffffff; box-shadow: 0 10px 30px -10px rgba(79,70,229,.6); }
    .btn.primary:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; }
    .btn.ghost { border-color: var(--border); color: var(--text); background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
    .btn.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; transform: translateY(-2px); }

    /* Nav */
    header.nav { position: sticky; top: 0; z-index: 30; transition: background .25s var(--ease), border-color .25s var(--ease); border-bottom: 1px solid transparent; }
    header.nav.scrolled { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom-color: var(--border); box-shadow: 0 1px 0 rgba(15,23,42,.04); }
    .nav-inner { display: flex; align-items: center; gap: 18px; padding: 15px 0; }
    .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; letter-spacing: .2px; }
    .brand .logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #ffffff; font-weight: 900; box-shadow: 0 8px 22px -8px rgba(79,70,229,.7); }
    .nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
    .nav-links > a { color: var(--muted); font-size: .93rem; font-weight: 500; transition: color .15s; }
    .nav-links > a:hover { color: var(--text); text-decoration: none; }
    .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
    .lang-toggle button { background: transparent; color: var(--muted); border: 0; padding: 7px 13px; cursor: pointer; font-weight: 700; font-size: .78rem; transition: background .15s, color .15s; }
    .lang-toggle button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #ffffff; }
    @media (max-width: 780px) { .nav-links > a:not(.btn) { display: none; } }

    /* Hero */
    .hero { padding: 86px 0 40px; text-align: center; }
    .pill { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; letter-spacing: .04em; font-weight: 600;
      color: var(--accent); background: rgba(79,70,229,.08); border: 1px solid rgba(79,70,229,.25); padding: 6px 14px; border-radius: 999px; }
    .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(79,70,229,.18); }
    .hero h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); line-height: 1.04; margin: 22px auto 16px; max-width: 14ch; letter-spacing: -.02em; font-weight: 800; }
    .hero p.sub { color: var(--muted); font-size: clamp(1.02rem, 2.1vw, 1.22rem); max-width: 660px; margin: 0 auto 30px; }
    .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; color: var(--soft); font-size: .85rem; }
    .trust span { display: inline-flex; align-items: center; gap: 7px; }
    .trust svg { width: 15px; height: 15px; color: var(--accent); }

    /* Dashboard mock */
    /* Mockup, gerçek panele sadık kalsın diye KOYU: değişkenler bu ağaç içinde geçersiz kılınır (açık temada koyu ürün ekranı = şık kontrast). */
    .mock { width: min(1000px, 100%); margin: 52px auto 0; border-radius: var(--radius); border: 1px solid #243049; overflow: hidden;
      background: linear-gradient(180deg, #131c30, #0f1626); box-shadow: var(--shadow-lg);
      --surface: #131c30; --surface-2: #0f1626; --border: #243049; --border-soft: #1c2740; --text: #e7ecf5; --muted: #aab6cf; --soft: #8493b0; --accent: #818cf8; --accent-3: #5cc8ff; }
    .mock .chrome { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); background: rgba(0,0,0,.16); }
    .mock .chrome i { width: 11px; height: 11px; border-radius: 50%; }
    .mock .chrome i:nth-child(1){ background:#ff5f57; } .mock .chrome i:nth-child(2){ background:#febc2e; } .mock .chrome i:nth-child(3){ background:#28c840; }
    .mock .url { margin-left: 12px; font-size: .76rem; color: var(--soft); background: rgba(255,255,255,.04); border: 1px solid var(--border-soft); padding: 4px 12px; border-radius: 999px; }
    .mock .body { display: grid; grid-template-columns: 184px 1fr; min-height: 330px; }
    .mock .side { border-right: 1px solid var(--border-soft); padding: 16px 12px; display: grid; gap: 4px; align-content: start; background: rgba(0,0,0,.12); }
    .mock .side .si { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: .82rem; color: var(--muted); }
    .mock .side .si svg { width: 16px; height: 16px; opacity: .85; }
    .mock .side .si.active { background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(79,70,229,.10)); color: var(--text); font-weight: 600; }
    .mock .side .si.active svg { color: var(--accent); opacity: 1; }
    .mock .main { padding: 18px; display: grid; gap: 16px; align-content: start; }
    .mock .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .mock .scard { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-2); padding: 14px; display: flex; align-items: center; gap: 12px; }
    .ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
      background: conic-gradient(var(--rc, var(--accent)) calc(var(--p,60) * 1%), rgba(255,255,255,.07) 0); }
    .ring i { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--text); font-style: normal; }
    .scard .lbl { display: grid; gap: 2px; min-width: 0; }
    .scard .lbl b { font-size: .92rem; } .scard .lbl small { color: var(--soft); font-size: .72rem; }
    .mock .tbl { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
    .mock .tr { display: grid; grid-template-columns: 1.6fr .8fr .6fr; gap: 10px; padding: 11px 14px; align-items: center; font-size: .8rem; border-top: 1px solid var(--border-soft); }
    .mock .tr:first-child { border-top: 0; color: var(--soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: rgba(0,0,0,.14); }
    .mock .tr .nm { display: flex; align-items: center; gap: 9px; color: var(--text); }
    .mock .tr .nm b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.16); }
    .tag { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; justify-self: start; }
    .tag.ok { color: var(--accent); background: rgba(79,70,229,.12); }
    .tag.run { color: var(--accent-3); background: rgba(106,208,255,.12); }
    @media (max-width: 620px) { .mock .body { grid-template-columns: 1fr; } .mock .side { display: none; } .mock .stats { grid-template-columns: 1fr; } }

    /* Sections */
    section { padding: 64px 0; }
    .sec-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
    .sec-head .pill { margin-bottom: 14px; }
    .sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 12px; letter-spacing: -.01em; }
    .sec-head p { color: var(--muted); margin: 0; font-size: 1.03rem; }

    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
    .feature { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 24px; background: linear-gradient(180deg, var(--surface), var(--surface-2));
      transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); position: relative; }
    .feature:hover { border-color: rgba(79,70,229,.4); transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(79,70,229,.5); }
    .feature .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 15px;
      background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(79,70,229,.08)); color: var(--accent); border: 1px solid rgba(79,70,229,.2); }
    .feature .ico svg { width: 23px; height: 23px; }
    .feature h3 { margin: 0 0 7px; font-size: 1.08rem; }
    .feature p { margin: 0; color: var(--muted); font-size: .92rem; }

    /* Steps */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
    @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
    .step { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 26px 24px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); position: relative; }
    .step .num { counter-increment: step; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-weight: 800; color: #ffffff;
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); margin-bottom: 14px; }
    .step .num::before { content: counter(step); }
    .step h3 { margin: 0 0 6px; font-size: 1.08rem; }
    .step p { margin: 0; color: var(--muted); font-size: .92rem; }

    /* Stats band */
    .band { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,.012); }
    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
    @media (max-width: 700px) { .stats-row { grid-template-columns: repeat(2,1fr); } }
    .stat strong { display: block; font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 800; }
    .stat span { color: var(--muted); font-size: .88rem; }

    /* CTA */
    .cta { text-align: center; border: 1px solid rgba(79,70,229,.28); border-radius: 24px; padding: 52px 28px; position: relative; overflow: hidden;
      background: radial-gradient(700px 300px at 50% -40%, rgba(79,70,229,.18), transparent 70%), linear-gradient(180deg, var(--surface), var(--surface-2)); }
    .cta h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 10px; }
    .cta p { color: var(--muted); margin: 0 auto 26px; max-width: 540px; }
    .cta .req { margin-top: 16px; color: var(--soft); font-size: .82rem; }

    /* FAQ */
    .faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
    details.q { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-2); padding: 2px 18px; transition: border-color .15s; }
    details.q[open] { border-color: rgba(79,70,229,.3); }
    details.q summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
    details.q summary::-webkit-details-marker { display: none; }
    details.q summary .x { color: var(--accent); font-weight: 800; font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); }
    details.q[open] summary .x { transform: rotate(45deg); }
    details.q .a { margin: 0 0 16px; color: var(--muted); font-size: .94rem; }

    footer { border-top: 1px solid var(--border-soft); padding: 30px 0; color: var(--soft); font-size: .86rem; margin-top: 24px; }
    .foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
    .foot-inner .brand { font-size: 1rem; }
    .foot-links { display: flex; gap: 18px; }
    .foot-links a { color: var(--muted); }

    /* reveal */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

    header.nav {background:rgba(255,255,255,.97);border-bottom-color:var(--border)}
    [id] {scroll-margin-top:100px} .trust,footer {color:var(--muted)} .guide .btn.primary {color:white;text-decoration:none;white-space:normal}
    .resource-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .resource-card {display:block;padding:26px;background:white;border:1px solid var(--border);border-radius:18px;color:var(--text)} .resource-card h3 {font-size:21px;line-height:1.35;margin:0 0 14px} .resource-card p {color:var(--muted)} .resource-card span {color:var(--accent);font-weight:650} .resource-card:hover {border-color:var(--accent)}
    .guide .lead {font-size:1.15rem} .updated {font-size:.85rem;color:var(--muted)} .toc {padding:20px 24px;background:#eef2ff;border-radius:16px} .toc h2 {margin-top:0} .toc ol,.checklist {padding-left:1.4rem} .checklist li {padding:7px 0;color:var(--muted)} .guide .q {margin-bottom:10px} .guide-hero nav {font-size:.85rem;color:var(--muted)} .guide-section a {overflow-wrap:anywhere}
    .table-scroll {overflow-x:auto;margin:24px 0;border:1px solid var(--border);border-radius:12px} table {width:100%;border-collapse:collapse;font-size:.95rem;background:white} caption {text-align:left;padding:14px;font-weight:600;background:#eef2ff} th,td {text-align:left;vertical-align:top;padding:14px;border-bottom:1px solid var(--border)} th {background:#f8fafc} .project-facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0} .project-facts div {padding:16px;background:#f6f8fb;border-radius:12px} .project-facts dt {font-weight:700} .project-facts dd {margin:5px 0 0;color:var(--muted)}
    @media(max-width:780px) {.resource-grid {grid-template-columns:1fr} .nav-inner {flex-wrap:wrap} .nav-links {flex-wrap:wrap;justify-content:flex-end;gap:12px} .nav-links>a.mobile-guide {display:inline} }
    @media(max-width:560px) {.project-facts {grid-template-columns:1fr} .guide-hero {padding-top:36px} .table-scroll table {min-width:450px} .nav-links {gap:6px} .nav-links>a.mobile-guide {font-size:12px} .brand {font-size:1rem} .brand .logo {width:30px;height:30px} }
    @media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto} *,*::before,*::after {transition:none!important;animation:none!important}}
    .reveal {opacity:1;transform:none} .lang-toggle a {padding:6px 9px;border-radius:7px;font-size:12px;font-weight:700} .lang-toggle a[aria-current] {background:var(--accent);color:white}
    .skip {position:absolute;top:-100px;left:16px;z-index:100;background:white;padding:14px} .skip:focus {top:8px}
    :focus-visible {outline:3px solid #4338ca;outline-offset:4px} .guide {max-width:820px;margin:auto} .guide p,.answer p {line-height:1.8;color:var(--muted)} .guide h2 {margin-top:2rem} .guide ul {padding-left:1.3rem;line-height:1.8} .guide a,.answer a {color:var(--accent);text-decoration:underline}
    .answer {padding:32px;border:1px solid var(--border);border-radius:18px;background:white} .answer h2 {font-size:clamp(24px,3vw,34px)} .section-link {display:inline-block;margin-top:20px;color:var(--accent);font-weight:600} .guide article section {padding:0}
    .panel-preview {margin:0} .mock-note {font-size:12px;color:var(--muted);max-width:1000px;margin:14px auto 0;text-align:center} .guide-hero {padding:70px 0 24px} .guide-hero h1 {font-size:clamp(30px,5vw,50px);line-height:1.15} .guide-section {padding:24px 0 70px} .guide .callout {border-left:4px solid var(--accent);padding:16px 20px;background:#eef2ff}
    @media(max-width:560px) {.nav-inner {gap:8px} .nav-links {gap:8px} .nav-links>.btn {display:none} .hero h1 {font-size:36px} .answer {padding:22px} .foot-inner {gap:24px} }

    .resource-card h4 {font-size:21px;line-height:1.35;margin:0 0 14px}
    .guide-group {margin-top:36px} .guide-group>h3 {font-size:25px;margin-bottom:18px}
    .guide-categories {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .guide-categories a {padding:10px 16px;border:1px solid var(--border);border-radius:24px;background:white;color:var(--accent);font-weight:600}
    .answer-permalink {font-size:.85rem;padding:0 18px 14px;margin:0} .q:target {border-color:var(--accent)}
    [hidden] {display:none!important}
    .guide-journeys {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}
    .guide-journey {padding:24px;border:1px solid var(--border);border-radius:18px;background:#eef2ff}
    .guide-journey h3 {font-size:20px;margin-bottom:12px} .guide-journey ol {padding-left:20px}
    .guide-journey li {margin:10px 0;line-height:1.5} .guide-journey a {color:var(--accent);text-decoration:underline}
    .guide-filter {display:grid;grid-template-columns:2fr 1fr auto;gap:16px;align-items:end;padding:24px;background:white;border:1px solid var(--border);border-radius:18px}
    .guide-filter>div {min-width:0} .guide-filter label {display:block;font-weight:650;margin-bottom:8px}
    .guide-filter input,.guide-filter select,.guide-filter button {width:100%;min-height:46px;font:inherit;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:white;color:var(--text)}
    .guide-filter button {color:var(--accent);cursor:pointer;font-weight:650} .guide-filter p {grid-column:1/-1;margin:0;color:var(--muted)}
    @media(max-width:780px) {.guide-journeys,.guide-filter {grid-template-columns:1fr}}