:root { --bg:#f6f7f9; --fg:#14181f; --alt:#5a6472; --kart:#fff; --cizgi:#d8dde4; --vurgu:#1f6feb; --tehlike:#c62828; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1116; --fg:#e8ecf1; --alt:#97a1ae; --kart:#171c24; --cizgi:#2a313c; --vurgu:#4c8dff; --tehlike:#ef5350; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; }
main { max-width:640px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:1.5rem; margin:0 0 4px; } h2 { font-size:1rem; margin:28px 0 8px; color:var(--alt); }
.alt { color:var(--alt); font-size:.9rem; } .hata { color:var(--tehlike); }
button { font:inherit; padding:12px 16px; border-radius:10px; border:1px solid var(--cizgi); background:var(--kart); color:var(--fg); cursor:pointer; }
button.buyuk { width:100%; background:var(--vurgu); color:#fff; border:0; padding:16px; font-size:1.1rem; margin-top:16px; }
button.tehlike { border-color:var(--tehlike); color:var(--tehlike); }
.alt-sira { display:flex; gap:12px; margin-top:24px; }
.kutular { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; }
.kutu { background:var(--kart); border:1px solid var(--cizgi); border-radius:14px; padding:16px; min-height:96px; display:flex; flex-direction:column; justify-content:space-between; }
.kutu button { width:100%; background:var(--vurgu); color:#fff; border:0; margin-top:12px; }
.kutu.pasif { opacity:.55; } .kutu.pasif button { background:var(--cizgi); color:var(--alt); cursor:not-allowed; }
.kutu small { color:var(--alt); }
.serit { background:var(--tehlike); color:#fff; padding:10px 14px; border-radius:10px; margin-top:12px; }
ul { padding-left:18px; margin:0; } a { color:var(--vurgu); }