@font-face { font-family: 'Outfit'; src: url(/fonts/Outfit_700Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url(/fonts/PlusJakartaSans_400Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url(/fonts/PlusJakartaSans_600SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url(/fonts/PlusJakartaSans_700Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
:root { --bg:#FAF9F6; --surface:#FFFFFF; --ink:#191A23; --ink-soft:#5B5E6B; --blue:#1E5FE0; --blue-soft:#E4EFF9; --gold:#F2A93B; --gold-ink:#A95F08; --gold-soft:#F6E4B9; --red:#B8323F; --green:#1B7F4B; --line:#E3E1DA; --field:#FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#121212; --surface:#1A1A1A; --ink:#FFFFFF; --ink-soft:#A8A8A8; --blue:#3F7CE8; --blue-soft:#1F2C45; --gold-ink:#F2A93B; --gold-soft:#3A2F18; --red:#E4707B; --green:#4CC38A; --line:#2B2B2B; --field:#121212; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Jakarta', -apple-system, 'Segoe UI', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color: var(--blue); }
.wrap { max-width: 720px; margin: 0 auto; padding-inline: 20px; }
.top { padding-block: 18px; border-bottom: 1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.top a.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:'Outfit', sans-serif; font-weight:700; font-size:18px; }
.top img { width:32px; height:32px; border-radius:8px; }
.top a.get { font-size:14px; font-weight:700; text-decoration:none; background:var(--blue); color:#fff; padding:8px 16px; border-radius:12px; white-space:nowrap; }
main { padding-block: 40px 72px; }
.kicker { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:0 0 10px; }
h1 { font-family:'Outfit', sans-serif; font-weight:700; font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 14px; text-wrap:balance; }
h2 { font-family:'Outfit', sans-serif; font-weight:700; font-size:21px; margin:38px 0 12px; }
p { font-size:16px; margin:0 0 14px; max-width:64ch; }
.lead { color:var(--ink-soft); margin-bottom:24px; }
.updated { font-size:13.5px; color:var(--ink-soft); margin:0 0 24px; }
.note { font-size:13.5px; color:var(--ink-soft); }

/* Hesaplayıcı */
.tool { background:var(--surface); border:2.5px solid var(--blue); border-radius:20px; padding:22px; margin:0 0 20px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; }
.fields .full { grid-column:1 / -1; }
@media (max-width:520px) { .fields { grid-template-columns:1fr; } }
label { display:block; font-size:13.5px; font-weight:600; margin:0 0 5px; }
.hint { display:block; font-size:12.5px; color:var(--ink-soft); font-weight:400; margin-top:4px; line-height:1.4; }
input[type=text], input[type=number], input[type=date], select { width:100%; font:inherit; font-size:16px; padding:11px 13px; border:1.5px solid var(--line); border-radius:12px; background:var(--field); color:var(--ink); -webkit-appearance:none; appearance:none; min-height:46px; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.seg { display:flex; gap:6px; background:var(--line); padding:4px; border-radius:12px; }
.seg button { flex:1; font:inherit; font-size:14px; font-weight:600; padding:9px 6px; border:2px solid transparent; border-radius:9px; background:transparent; color:var(--ink-soft); cursor:pointer; }
.seg button[aria-pressed=true] { background:var(--surface); color:var(--ink); border-color:var(--blue); }
details.adv { margin-top:16px; }
details.adv summary { cursor:pointer; font-size:14px; font-weight:700; color:var(--blue); }
details.adv .fields { margin-top:14px; }
.err { color:var(--red); font-size:14px; font-weight:600; margin:14px 0 0; min-height:1.2em; }

.answer { background:var(--blue); color:#fff; border-radius:20px; padding:24px 26px; margin:0 0 8px; }
.answer .lbl { font-size:13px; font-weight:600; opacity:.88; margin:0 0 4px; }
.answer .big { font-family:'Outfit', sans-serif; font-weight:700; font-size:clamp(34px,8vw,52px); line-height:1.08; margin:0 0 8px; overflow-wrap:anywhere; }
.answer p { font-size:14.5px; margin:0; opacity:.94; }
.answer.good { background:var(--green); }
.answer.warn { background:var(--gold); color:#191A23; }
.kv { margin:16px 0 0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.kv div { display:flex; justify-content:space-between; gap:16px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:15px; }
.kv div:last-child { border-bottom:none; }
.kv .k { color:var(--ink-soft); }
.kv .v { font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.kv .tot { background:var(--blue-soft); }
.kv .tot .k { color:var(--ink); font-weight:700; }
.result { display:none; }
.result.on { display:block; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); max-height:420px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:right; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; }
th:first-child, td:first-child { text-align:left; }
th { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); position:sticky; top:0; background:var(--surface); }
tr:last-child td { border-bottom:none; }
tr.now td { background:var(--blue-soft); font-weight:700; }
@media (max-width:480px) { th, td { padding:9px 9px; font-size:14px; } }
.formula { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:15px; margin:0 0 14px; }
.chart { width:100%; height:auto; display:block; }
.chart text { fill:var(--ink-soft); font-size:11px; font-family:'Jakarta', sans-serif; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 0; font-size:13.5px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.cta { background:var(--blue-soft); border-radius:20px; padding:24px 26px; margin:38px 0 0; }
.cta h2 { margin:0 0 8px; }
.cta p { margin:0 0 16px; }
.btn { display:inline-block; background:var(--blue); color:#fff; text-decoration:none; padding:13px 22px; border-radius:14px; border:0; font:inherit; font-weight:700; cursor:pointer; }
.btn.calc { width:100%; margin-top:18px; font-size:17px; padding:14px 22px; }
.related { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
@media (max-width:520px) { .related { grid-template-columns:1fr; } }
.related a { display:block; padding:12px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; }
.related a:hover { border-color:var(--blue); }
footer { border-top:1px solid var(--line); padding-block:26px 40px; font-size:13px; color:var(--ink-soft); }
footer .wrap { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
footer a { color:var(--ink-soft); }
.legal { font-size:13px; color:var(--ink-soft); margin-top:28px; }