:root { --zemin: #ffffff; --yazi: #1b1d24; --soluk: #6a6f7d; --kart: #f5f6f9; --cizgi: #e3e5eb; --vurgu: #e5484d; --yesil: #0f8a4f; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --zemin: #16171d; --yazi: #eceef4; --soluk: #9a9fae; --kart: #1e2028; --cizgi: #2b2e38; --vurgu: #f0585d; --yesil: #34c47c; color-scheme: dark; } }
[hidden] { display: none !important; }
.logo-resim { width: 76px; height: 76px; border-radius: 18px; }
html, body { margin: 0; min-height: 100%; background: var(--zemin); color: var(--yazi); font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
.kap { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 40px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 30px) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.logo { width: 72px; height: 72px; border-radius: 18px; background: var(--vurgu); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 32px; }
h1 { margin: 4px 0 0; font-size: 28px; }
.alt, .not { color: var(--soluk); margin: 0; line-height: 1.45; font-size: 14px; }
section { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.dugme { padding: 14px 18px; border-radius: 14px; border: 0; background: var(--yazi); color: var(--zemin); font: inherit; font-weight: 700; font-size: 16px; }
.dugme.ikincil { background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi); }
.satir { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--kart); border-radius: 12px; text-align: left; font-size: 15px; }
.satir b { font-weight: 600; } .satir span { color: var(--soluk); text-align: right; }
.tamam { color: var(--yesil) !important; font-weight: 700; } .olmaz { color: var(--vurgu) !important; font-weight: 700; }
.hata { color: var(--vurgu); font-weight: 600; }