/* Hesaplama araçları (birikim.html, kredi.html): ortak tasarım */
:root{--canvas:#0b1420;--canvas-deep:#08101a;--panel:#111c2b;--panel-2:#16243a;--line:rgba(155,167,184,.16);--line-strong:rgba(155,167,184,.42);--accent:#d6b03c;--accent-hover:#e8c65a;--up:#6fcf97;--down:#ee8a7b;--text-secondary:#9ba7b8;--text-primary:#eee8da;--ink:#0b1420;--ease-out:cubic-bezier(.22,1,.36,1);--display:"Unbounded",system-ui,sans-serif;--body:"Onest",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--gutter:clamp(16px,4vw,56px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:radial-gradient(ellipse 80% 60% at 50% -10%,#14233a 0%,var(--canvas) 60%,var(--canvas-deep) 100%) fixed,var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0}
p{margin:0}a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}.skip:focus{top:16px}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gutter);background:rgba(8,16,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.marka{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.marka svg{width:20px;height:28px;color:var(--accent)}
.nav nav{display:flex;gap:24px;align-items:center}
.nav nav a{text-decoration:none;font-size:15px;color:var(--text-secondary)}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text-primary)}
@media (max-width:860px){.nav nav a{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--accent);color:var(--ink)!important;font-weight:600;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .3s var(--ease-out),background .3s}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-primary)!important;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{background:rgba(238,232,218,.06)}
main{max-width:1100px;margin:0 auto;padding:clamp(40px,7vw,88px) var(--gutter) 64px}
h1{font-size:clamp(32px,5vw,58px);margin:14px 0 16px;max-width:16ch}
h1 em{font-style:normal;color:var(--accent)}
.giris{color:var(--text-secondary);font-size:18px;max-width:56ch}
.mod{display:inline-flex;gap:4px;padding:4px;margin-top:32px;border:1px solid var(--line);border-radius:999px;background:rgba(8,16,26,.5)}
.mod button{font:inherit;font-size:15px;font-weight:600;color:var(--text-secondary);background:transparent;border:0;border-radius:999px;padding:10px 18px;cursor:pointer}
.mod button[aria-pressed=true]{background:var(--accent);color:var(--ink)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:16px 0 28px;padding:22px;border:1px solid var(--line);border-radius:22px;background:rgba(17,28,43,.75)}
.form label{display:grid;gap:7px;font-size:14px;font-weight:500;align-content:start}
.form label small{font-weight:400;color:var(--text-secondary);font-size:12.5px}
.form input{width:100%;font:inherit;font-size:17px;color:var(--text-primary);background:rgba(8,16,26,.6);border:1.5px solid rgba(155,167,184,.38);border-radius:12px;padding:12px 14px}
.form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(214,176,60,.14)}
.form .kutucuk{grid-column:1/-1;display:flex;gap:10px;align-items:center;font-weight:400;color:var(--text-secondary)}
.form .kutucuk input{width:18px;height:18px;padding:0;accent-color:var(--accent)}
.manset{padding:clamp(22px,3vw,34px);border-radius:24px;border:1px solid rgba(214,176,60,.4);background:linear-gradient(120deg,rgba(214,176,60,.12),rgba(17,28,43,.8) 50%);margin-bottom:20px}
.manset p{color:var(--text-secondary);font-size:16px}
.manset .buyuk{font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,48px);color:var(--text-primary);margin:8px 0;font-variant-numeric:tabular-nums}
.manset .buyuk em{font-style:normal;color:var(--accent)}
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.kart{border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(to bottom,rgba(22,36,58,.75),rgba(17,28,43,.75))}
.kart .ad{font-weight:600}
.kart .deger{font-family:var(--display);font-weight:500;font-size:24px;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.kart .not{font-size:13px;color:var(--text-secondary);margin-top:6px}
.art{color:var(--up)}.az{color:var(--down)}
.panel{border:1px solid var(--line);border-radius:22px;padding:22px;background:rgba(17,28,43,.75)}
.panel h2{font-size:18px;margin-bottom:6px}
.lejant{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--text-secondary);margin-bottom:12px}
.lejant i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.grafik{position:relative;height:300px}
.grafik svg{width:100%;height:100%}
.ipucu-kutu{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:10px;padding:6px 10px;font-family:var(--mono);font-size:12px;white-space:nowrap;opacity:0;transition:opacity .15s}
.aciklama{margin-top:44px;max-width:72ch}
.aciklama h2{font-size:clamp(20px,2.4vw,26px);margin:36px 0 12px}
.aciklama p{color:var(--text-secondary);margin-bottom:14px;line-height:1.7}
.aciklama a{color:var(--accent)}
.hata-not{color:var(--down);font-size:15px;margin-bottom:20px}
.yasal{color:#7d8899;font-size:13.5px;margin-top:36px;display:grid;gap:8px}
.yasal a{color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.form select{width:100%;font:inherit;font-size:17px;color:var(--text-primary);background:rgba(8,16,26,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d6b03c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px;border:1.5px solid rgba(155,167,184,.38);border-radius:12px;padding:12px 14px;appearance:none}
.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(214,176,60,.14)}
.form select option{background:var(--panel)}
.form details{grid-column:1/-1;font-size:14px;color:var(--text-secondary)}
.form details summary{cursor:pointer}
.form details .ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:12px}
.plan{margin-top:20px}
.plan summary{cursor:pointer;font-weight:600;padding:4px 0}
.tablo-kap{overflow-x:auto;margin-top:12px;max-height:480px;overflow-y:auto}
.plan table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;min-width:560px}
.plan th,.plan td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.plan th{position:sticky;top:0;background:var(--panel);color:var(--text-secondary);font-weight:500}
.plan td:first-child,.plan th:first-child{text-align:left}