:root{
  --bg:#F3F5F6; --surface:#FFFFFF; --ink:#14191E; --muted:#5A6570; --line:#D9DFE4;
  --accent:#0C6B63; --accent-ink:#FFFFFF; --bad:#B0352D; --bad-soft:#F7DDDA; --good:#1F7D4C;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0F1316; --surface:#161B20; --ink:#E7EBEE; --muted:#9AA5AF; --line:#2A333B;
  --accent:#4DB4A8; --accent-ink:#0B1B19; --bad:#F06C61; --bad-soft:#3B1A17; --good:#53C485; color-scheme:dark }}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5;
  display:grid; place-items:center; padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.kart{width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:32px 28px; display:flex; flex-direction:column; gap:16px}
.marka{font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-.01em}
.marka i{font-style:normal; color:var(--accent); font-weight:500}
.alt{font-size:12.5px; color:var(--muted); margin-top:-12px}
h1{font-family:var(--f-display); font-size:20px; margin:8px 0 0; font-weight:700}
p{margin:0; color:var(--muted)}
p b{color:var(--ink)}
button{font:inherit; font-weight:600; background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; padding:12px 16px; cursor:pointer}
button:disabled{opacity:.6; cursor:progress}
button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.hata{background:var(--bad-soft); color:var(--bad); border-radius:8px; padding:10px 12px; font-size:13.5px}
.not{font-size:12.5px; color:var(--muted)}