:root { --bg: #F3F6F5; --card: #FFFFFF; --ink: #10231F; --muted: #5B6B67; --accent: #0C7A6B; --line: #DCE6E3; }
@media (prefers-color-scheme: dark) { :root { --bg: #0E1715; --card: #15211E; --ink: #E5EFEC; --muted: #9DB1AC; --accent: #3CC6B1; --line: #26352F; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; }
.card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 18px 40px -28px rgba(0,0,0,.35); }
.mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
  background: linear-gradient(135deg, #1E88E5, #23A9A0 55%, #49AC4D); margin-bottom: 14px; }
h1 { margin: 0 0 8px; font-size: 21px; }
.lead { margin: 0 0 12px; }
.state { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
body[data-state="kod"] .state[data-state="kod"], body[data-state="oturum"] .state[data-state="oturum"],
body[data-state="yetki"] .state[data-state="yetki"], body[data-state="gecersiz"] .state[data-state="gecersiz"] { display: block; }
.foot { margin: 16px 0 0; color: var(--muted); font-size: 13px; }