/* Sade tasarım: beyaz zemin, bol boşluk, tek yeşil vurgu */
:root{
  --bg:#fff; --paper:#f6f7f5; --ink:#111312; --mute:#6a706c; --line:#e4e7e3; --acc:#1f8a5b;
  --sans:'Inter Tight',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111312; --paper:#1a1d1b; --ink:#f1f3f1; --mute:#9aa29d; --line:#2a2f2c; --acc:#4cc38a;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:18px max(16px,calc(50% - 524px))}
.brand{font-weight:700;font-size:19px;text-decoration:none;display:flex;gap:8px;align-items:center}
.mark{color:var(--acc)}
nav{display:flex;align-items:center;gap:18px}nav a{text-decoration:none;font-weight:500}
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;font-size:13px;font-weight:500;border:1px solid var(--line);padding:3px 10px;border-radius:99px}
details.lang summary::-webkit-details-marker{display:none}
details.lang div{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px;display:grid;min-width:140px;box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:20}
details.lang div a{padding:6px 10px;border-radius:8px;font-size:14px}
details.lang div a:hover,details.lang div a[aria-current]{background:var(--paper)}
details.lang div a[aria-current]{color:var(--acc)}
main{max-width:1080px;margin:0 auto;padding:0 16px 64px}
.hero{padding:64px 0 16px}
.eyebrow{color:var(--acc);font-weight:500;margin:0}
h1{font-size:clamp(32px,6vw,58px);line-height:1.05;margin:.2em 0;font-weight:700;letter-spacing:-.035em}
.lead{font-size:18px;color:var(--mute);max-width:620px}
.group h2{font-size:22px;font-weight:700;margin:48px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08);border-color:var(--acc)}
.card h3{margin:0 0 .3em;font-size:18px}
.card p{margin:0;color:var(--mute);font-size:15px}
.crumb{font-size:13px;color:var(--mute);padding:24px 0 0}
.crumb a{text-decoration:none}
.tool{display:grid;gap:20px}
.calc{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.units{grid-column:1/-1;justify-self:start;display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px}
.units button{font:500 13px var(--sans);background:transparent;color:var(--ink);border:0;border-radius:99px;padding:6px 14px;cursor:pointer}
.units button[aria-pressed=true]{background:var(--acc);color:#fff}
.fields{display:grid;gap:14px}
.fields label{display:grid;gap:4px;font-weight:500;font-size:15px}
.fields small{font-weight:400;color:var(--mute);font-size:13px}
.inp{display:flex;border:1px solid transparent;border-radius:10px;background:var(--paper)}
.inp:focus-within{border-color:var(--acc)}
.inp select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:16px var(--sans);padding:10px 12px;outline:0}
.inp input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:16px var(--sans);padding:10px 12px;outline:0}
.inp em{font-style:normal;font-size:13px;color:var(--mute);padding:0 12px;align-self:center}
.check{display:flex!important;gap:8px;align-items:center}
.result{background:var(--paper);border-radius:16px;padding:20px;align-self:start;position:sticky;top:16px}
.result h2{font-size:14px;font-weight:500;color:var(--mute);margin:0 0 6px}
.result dl{margin:0}
.result div{padding:10px 0;border-top:1px solid var(--line)}
.result dt{font-size:14px;color:var(--mute)}
.result dd{margin:0;font-size:20px;font-weight:700}
.result .main dd{font-size:34px;color:var(--acc)}
.note{font-size:12px;color:var(--mute);margin:12px 0 0}
.guide{max-width:720px;margin-top:48px}
.guide h2{font-size:22px;margin:1.4em 0 .3em}
.guide li{margin:.3em 0}
footer{border-top:1px solid var(--line);padding:24px max(16px,calc(50% - 524px));font-size:13px;color:var(--mute)}
@media (max-width:720px){.calc{grid-template-columns:1fr;padding:16px}.result{position:static}nav{gap:12px}}
.warn{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:10px;background:#fff4e5;color:#7a4b00;font-size:14px}
@media (prefers-color-scheme:dark){.warn{background:#2e2414;color:#f3c77a}}
.mark{display:block;border-radius:6px}
.flinks a{margin-inline-end:16px;text-decoration:none;color:var(--ink)}
.info{margin-top:24px}.info h1{font-size:clamp(28px,5vw,44px)}.mail{font-size:20px;font-weight:700;color:var(--acc)}
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.15);display:flex;gap:16px;align-items:center;flex-wrap:wrap;z-index:10;font-size:14px}
.consent[hidden]{display:none}.consent p{margin:0;flex:1 1 260px}.consent div{display:flex;gap:8px}
.consent button{font:500 14px var(--sans);border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:8px 16px;cursor:pointer}
.consent .pri{background:var(--acc);border-color:var(--acc);color:#fff}
[dir=rtl] .crumb,[dir=rtl] .guide{text-align:right}
:lang(zh) body,:lang(ar) body{font-family:system-ui,sans-serif}
[dir=rtl] .result dd{direction:ltr;text-align:right}