:root {
  --ink: #0f172a; --muted: #5b6b82; --line: #e5e9f0; --soft: #f7f9fc;
  --brand: #1d4ed8; --brand-dark: #1e40af; --ok: #16803c; --warn: #b45309; --bad: #c02626;
  --bg: #ffffff; --card: #ffffff; --input: #ffffff; --topbar: #ffffff;
  --tint-blue-bg: #eef3ff; --tint-blue-line: #dbe6ff;
  --tint-warn-bg: #fffaf0; --tint-warn-line: #f3e2c0; --tint-warn-ink: #7a5a10;
  --tint-ok-bg: #f2fbf5; --tint-ok-line: #cdeeda;
  --tint-bad-bg: #fff5f5; --tint-bad-line: #f3caca;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --fade: rgba(255, 255, 255, 0.25);
  --on-brand: #ffffff;
  color-scheme: light;
}
[data-theme="dark"] {
  --ink: #e9eefb; --muted: #9fb0cc; --line: #2a3654; --soft: #151d35;
  --brand: #6b96ff; --brand-dark: #8aacff; --ok: #57d98a; --warn: #f0b64b; --bad: #f47d7d;
  --bg: #0b1020; --card: #121a33; --input: #0f1629; --topbar: #0d1428;
  --tint-blue-bg: rgba(107, 150, 255, 0.14); --tint-blue-line: rgba(107, 150, 255, 0.35);
  --tint-warn-bg: rgba(240, 182, 75, 0.12); --tint-warn-line: rgba(240, 182, 75, 0.35); --tint-warn-ink: #f2c56a;
  --tint-ok-bg: rgba(87, 217, 138, 0.12); --tint-ok-line: rgba(87, 217, 138, 0.35);
  --tint-bad-bg: rgba(244, 125, 125, 0.12); --tint-bad-line: rgba(244, 125, 125, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --fade: rgba(11, 16, 32, 0.3);
  --on-brand: #0b1020;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 15.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 990px; margin: 0 auto; padding: 0 20px; }
.dar { max-width: 780px; }
h1 { font-size: 28px; line-height: 1.25; margin: 18px 0 10px; letter-spacing: -0.02em; }
h2 { font-size: 20px; margin: 26px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 16.5px; margin: 18px 0 8px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.mini { font-size: 12.5px; color: var(--muted); }
.lead { font-size: 17px; color: var(--muted); }
.crumb { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* üst bar */
.top { border-bottom: 1px solid var(--line); background: var(--topbar); position: sticky; top: 0; z-index: 20; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.logo { font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }
.logo span { color: var(--brand); }
.logo.small { font-size: 15px; margin-bottom: 6px; }
.logo-img { height: 30px; width: auto; display: block; }
.logo.small .logo-img { height: 22px; }
.logo-koyu { display: none; }
[data-theme="dark"] .logo-acik { display: none; }
[data-theme="dark"] .logo-koyu { display: block; }

/* yönetim paneli */
.pencere { margin: 14px 0 6px; }
.pencere a { display: inline-block; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; margin-right: 6px; font-size: 13px; color: var(--ink); background: var(--card); }
.pencere a.aktif { border-color: var(--brand); color: var(--brand); font-weight: 650; }
.pencere a:hover { text-decoration: none; border-color: var(--brand); }
.stat-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.stat-kutu { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); box-shadow: var(--shadow); }
.stat-kutu b { display: block; font-size: 24px; letter-spacing: -0.02em; margin-top: 2px; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th, .tablo td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablo th { color: var(--muted); font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.tablo tr:hover td { background: var(--soft); }
.tablo .ip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.bar { height: 8px; border-radius: 6px; background: var(--tint-blue-bg); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
@media (max-width: 760px) { .stat-izgara { grid-template-columns: repeat(2, 1fr); } .tablo { font-size: 12.5px; } }
.nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav > a { color: var(--ink); font-size: 14px; }
.nav > a:hover { color: var(--brand); text-decoration: none; }
.inline { display: inline; margin: 0; }
.tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; }
.tema-btn:hover { border-color: var(--brand); }

/* butonlar */
.btn { display: inline-block; background: var(--brand); color: var(--on-brand); border: none; padding: 11px 20px; border-radius: 10px; font-weight: 650; font-size: 14.5px; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.buyuk { padding: 14px 26px; font-size: 16px; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-mini { display: inline-block; border: 1px solid var(--brand); color: var(--brand); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; background: var(--card); cursor: pointer; font-family: inherit; }
.btn-mini.ghost { border-color: var(--line); color: var(--muted); }
.btn-mini:hover { text-decoration: none; border-color: var(--brand-dark); color: var(--brand-dark); }

/* hero */
.hero { padding: 44px 0 26px; }
.hero h1 { font-size: 34px; max-width: 700px; }
.hero p { max-width: 640px; }
.hero-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* kartlar */
.kart-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--card); box-shadow: var(--shadow); }
.card .ikon { font-size: 24px; }
.card h3 { margin: 10px 0 6px; }
.card p { font-size: 14px; color: var(--muted); }
.card a.devam { font-size: 14px; font-weight: 600; }
.adim-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 26px; }
.adim-no { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; }

/* sihirbaz */
.sw-bar { height: 6px; background: var(--soft); border-radius: 999px; margin: 16px 0 6px; overflow: hidden; }
.sw-bar-ic { height: 100%; background: var(--brand); width: 0; transition: width 0.25s; }
.sw-ust { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.alan { margin: 14px 0; }
.alan-lb { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ai-rozet { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--tint-blue-bg); border: 1px solid var(--tint-blue-line); border-radius: 999px; padding: 2px 9px; }
.alan input[type="text"], .alan input[type="date"], .alan input[type="number"], .alan select, .alan textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--input); color: var(--ink);
}
.alan textarea { resize: vertical; min-height: 90px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 2px solid var(--tint-blue-line); border-color: var(--brand); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; cursor: pointer; background: var(--card); }
.chip input { margin: 0; }
.sw-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.sw-nav .btn { min-width: 130px; }

.uyari { border: 1px solid var(--tint-warn-line); background: var(--tint-warn-bg); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--tint-warn-ink); margin: 14px 0; }
.uyari div { margin: 3px 0; }

/* belge */
.belge-kutu { border: 1px solid var(--line); border-radius: 14px; margin: 18px 0; overflow: hidden; }
.belge-baslik-cubuk { padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rozet { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.rozet.onizleme { background: var(--tint-warn-bg); color: var(--warn); border: 1px solid var(--tint-warn-line); }
.rozet.acik { background: var(--tint-ok-bg); color: var(--ok); border: 1px solid var(--tint-ok-line); }
.rozet.ai { background: var(--tint-blue-bg); color: var(--brand); border: 1px solid var(--tint-blue-line); }
.belge-metin { margin: 0; padding: 22px 24px; white-space: pre-wrap; font: 14px/1.75 Georgia, "Times New Roman", serif; color: var(--ink); }
.bulanik { position: relative; }
.bulanik .belge-metin { filter: blur(6px); user-select: none; pointer-events: none; }
.bulanik-kapak { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--fade), var(--bg) 90%); }
.odeme-cta { text-align: center; }
.odeme-cta h3 { margin-top: 4px; }
.odeme-cta .btn { margin: 10px 0 6px; }
.belge-aksiyon { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.basari { border: 1px solid var(--tint-ok-line); background: var(--tint-ok-bg); color: var(--ok); border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 14px; margin: 16px 0; }
.guide { margin-top: 18px; }
.guide ol { margin: 10px 0 6px; padding-left: 20px; }
.guide li { margin: 6px 0; }

/* panel */
.panel-izgara { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0 40px; }
.surec-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.surec-satir:last-child { border-bottom: none; }
.surec-sol { min-width: 220px; }
.surec-baslik { font-weight: 650; font-size: 14.5px; }
.surec-alt { font-size: 12.5px; color: var(--muted); }
.surec-sag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sayac { font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); }
.sayac.ok { color: var(--ok); background: var(--tint-ok-bg); border-color: var(--tint-ok-line); }
.sayac.yakin { color: var(--warn); background: var(--tint-warn-bg); border-color: var(--tint-warn-line); }
.sayac.gecik { color: var(--on-brand); background: var(--bad); border-color: var(--bad); }
.durum-select, .form-satir input, .form-satir select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: var(--input); color: var(--ink); }
.form-satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }

/* formlar */
.form-kutu { max-width: 430px; margin: 30px auto; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.form-kutu label { display: block; font-weight: 600; font-size: 13.5px; margin: 12px 0 5px; }
.form-kutu input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--input); color: var(--ink); }
.hata { border: 1px solid var(--tint-bad-line); background: var(--tint-bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin: 12px 0; }

/* hesaplayıcı */
.hesap-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sonuc-kutu { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 14px; }
.sonuc-buyuk { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.not-liste { font-size: 13px; color: var(--muted); padding-left: 18px; }

/* form alanları — genel karanlık mod uyumu */
input, select, textarea { color: var(--ink); background-color: var(--input); accent-color: var(--brand); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }

/* SSS + şerit */
details.sss { border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; margin: 10px 0; }
details.sss summary { font-weight: 650; cursor: pointer; font-size: 14.5px; }
details.sss p { font-size: 14px; color: var(--muted); margin: 8px 0 2px; }
.serit { display: flex; gap: 22px; flex-wrap: wrap; margin: 26px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

/* alt */
.alt { border-top: 1px solid var(--line); margin-top: 48px; padding: 28px 0 36px; background: var(--soft); }
.alt-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 20px; }
.alt-grid b { font-size: 13.5px; display: block; margin-bottom: 8px; }
.alt-grid a { display: block; font-size: 13px; color: var(--muted); margin: 5px 0; }
.alt-grid a:hover { color: var(--brand); }
.disclaimer { font-size: 12px; color: var(--muted); margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 760px) {
  .kart-izgara, .adim-izgara, .hesap-izgara { grid-template-columns: 1fr; }
  .alt-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 27px; }
  .nav { gap: 8px; }
  .nav > a { font-size: 13px; }
  .belge-metin { padding: 16px; }
}