:root{
      --bg: #ffffff;
      --text: #1f2937;
      --muted: #6b7280;
      --border: #e5e7eb;
      --primary: #0f3d5e;   /* Lacivert - güven */
      --accent: #16a34a;    /* Yeşil - aksiyon */
      --warning: #f59e0b;   /* Sarı - bilgilendirme */
      --card: #f8fafc;
      --link: #0ea5e9;
      --shadow: 0 10px 25px rgba(0,0,0,.07);
      --radius: 14px;
      --radius-sm: 10px;
      --radius-lg: 22px;
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg: #0b1220;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --border: #1f2937;
        --card: #0f172a;
        --shadow: 0 8px 18px rgba(0,0,0,.35);
      }
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;line-height:1.65}
    img{max-width:100%;height:auto}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}

    .wrap{max-width:1100px;margin-inline:auto;padding:28px}
    .hero{
      position:relative;
      border-radius: var(--radius-lg);
      background: linear-gradient(120deg, rgba(15,61,94,.95), rgba(14,165,233,.9)), url('https://images.unsplash.com/photo-1529429612779-c8e40ef2f36e?q=80&w=1600&auto=format&fit=crop') center/cover;
      color:#fff; padding:48px 28px; overflow:hidden; box-shadow: var(--shadow);
    }
    .hero h1{margin:0 0 10px; font-size: clamp(26px, 3.4vw, 42px); letter-spacing:.2px;}
    .hero p{margin:8px 0 18px; color:#e5ecf5}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(255,255,255,.12); color:#fff; padding:8px 12px;
      border-radius:999px; font-size:14px; backdrop-filter: blur(6px);
      border:1px solid rgba(255,255,255,.18)
    }
    .hero-actions{display:flex; gap:12px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; gap:10px; font-weight:600;
      background:var(--accent); color:#fff; border:0; padding:12px 16px; border-radius:12px;
      box-shadow:var(--shadow); cursor:pointer
    }
    .btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
    .btn:hover{transform:translateY(-1px)}
    .layout{display:grid; grid-template-columns: 280px 1fr; gap:26px; margin-top:24px}
    @media (max-width: 980px){ .layout{grid-template-columns: 1fr} }

    /* Sticky side */
    .side{
      position:sticky; top:18px; align-self:start; background:var(--card); border:1px solid var(--border);
      border-radius: var(--radius); padding:18px; box-shadow: var(--shadow)
    }
    .side h3{margin:0 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted)}
    .toc{list-style:none; margin:0; padding:0; display:grid; gap:10px}
    .toc a{display:block; padding:8px 10px; border-radius:10px; border:1px dashed var(--border); color:var(--text)}
    .toc a:hover{background:#ffffff10}

    /* Article */
    article{background:var(--bg)}
    article h2{margin-top:26px; font-size: clamp(22px, 2.6vw, 30px)}
    article h3{margin-top:18px; font-size: clamp(18px, 2.1vw, 22px)}
    .meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px}
    .callout{
      display:flex; gap:12px; background:var(--card); border:1px solid var(--border);
      padding:14px 16px; border-radius: var(--radius); box-shadow:var(--shadow)
    }
    .card{
      background:var(--card); border:1px solid var(--border); border-radius: var(--radius);
      padding:16px; box-shadow:var(--shadow)
    }
    .grid-2{display:grid; grid-template-columns: repeat(2,1fr); gap:16px}
    @media (max-width: 800px){ .grid-2{grid-template-columns: 1fr} }

    .icon-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
    .icon-list li{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px}
    .icon{width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px; background: #e8f5ee; color:#0a7a3a; font-weight:700}
    .icon.warn{background:#fff8e6; color:#b45309}

    /* FAQ */
    details{border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--card)}
    details + details{margin-top:12px}
    summary{cursor:pointer; font-weight:600}
    details[open]{box-shadow:var(--shadow)}

    /* CTA */
    .cta{
      margin-top:30px; background:
      radial-gradient(1200px 300px at 10% -10%, rgba(22,163,74,.35), transparent 40%),
      radial-gradient(1200px 300px at 110% 110%, rgba(14,165,233,.25), transparent 40%),
      linear-gradient(135deg, #0f3d5e, #145b7a);
      color:#fff; border-radius: var(--radius-lg); padding:26px; display:grid; gap:12px; box-shadow:var(--shadow)
    }
    .cta a.btn{background:#10b981}
    .cta p{margin:0; color:#e6f6ef}

    .kicker{font-size:13px; color:#9fb8c9; text-transform:uppercase; letter-spacing:.45px}
    .chip{display:inline-flex; align-items:center; gap:8px; background:#e9f5ff; color:#0b5aa3; padding:6px 10px; border-radius:999px; border:1px solid #cae6ff}
    @media (prefers-color-scheme: dark){
      .chip{background:#0b2642; color:#b9ddff; border-color:#10395f}
    }

    .copy{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); padding:8px 10px; border-radius:10px; cursor:pointer}
    .small{font-size:13px; color:var(--muted)}
    .notice{display:flex; gap:10px; background:#fff8e8; color:#5b3a00; border:1px solid #fde9c5; padding:12px 14px; border-radius:12px}
    @media (prefers-color-scheme: dark){ .notice{background:#3a2b10; color:#fde68a; border-color:#604e1b} }

    .divider{height:1px;background:var(--border);margin:20px 0}