:root {
  --bg-0:#0e0f13; --bg-1:#161920; --bg-2:#1e2230; --bg-3:#262b3d;
  --bd-1:rgba(99,148,191,0.25); --tx-0:#f0ece0; --tx-1:rgba(240,236,224,0.75);
  --tx-2:rgba(240,236,224,0.40); --accent:#5679A6; --accent-h:#6394BF;
  --danger:#e05a4a; --danger-dim:rgba(224,90,74,0.18);
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  background:var(--bg-0); color:var(--tx-0);
  font:14px/1.5 "Segoe UI",system-ui,sans-serif;
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.kart {
  width:100%; max-width:380px; background:var(--bg-1);
  border:1px solid var(--bd-1); border-radius:12px; padding:26px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.panel { max-width:680px; }
h1 { font-size:20px; margin:0 0 4px; }
.alt { color:var(--tx-2); font-size:13px; margin:0 0 18px; }
label { display:block; font-size:12px; color:var(--tx-2); margin:12px 0 5px; }
input {
  width:100%; padding:10px 12px; background:var(--bg-0); color:var(--tx-0);
  border:1px solid var(--bd-1); border-radius:6px; outline:none; font:inherit;
}
input:focus { border-color:var(--accent); }
.btn {
  margin-top:16px; padding:10px 16px; border:none; border-radius:6px;
  background:var(--accent); color:#fff; font-size:14px; cursor:pointer;
}
.btn:hover { background:var(--accent-h); }
.btn.tam { width:100%; }
.btn.ikincil { background:var(--bg-3); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.uyari { margin-bottom:6px; padding:10px 12px; border-radius:6px; font-size:13px;
  background:var(--danger-dim); border:1px solid var(--danger); }
.satir { display:flex; align-items:center; gap:10px; }
.bosluk { height:14px; }
.mini { font-size:12px; color:var(--tx-2); }
.ph {
  margin-top:18px; padding:24px; text-align:center; color:var(--tx-2);
  background:var(--bg-2); border:1px dashed var(--bd-1); border-radius:8px;
}