:root{
  /* 🔴 Uygulamanın MAVİ sistemine hizalı. Altın YALNIZ masthead wordmark'ta (--brand). */
  --bg:#0B0D11; --bg-2:#0E121A; --surface:#12151B; --surface-2:#171B23;
  --txt:#ECEEF3; --txt-2:#A7AFBE; --faint:#6B7384;
  --line:#252A35; --line-2:#333A48;
  --accent:#5B8CFF; --accent-2:#7CA2FF; --accent-soft:rgba(91,140,255,.13);
  --brand:#B89E6E;   /* masthead altını — "Heimdall." noktası + ayraçlar */
  --err:#E5484D;
  --serif:"Georgia","Times New Roman",serif;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --glow:rgba(120,150,220,.10);
}
[data-theme="light"]{
  --bg:#E9EDF4; --bg-2:#EEF1F6; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --txt:#161B24; --txt-2:#45505F; --faint:#727B8E;
  --line:#DCE1EA; --line-2:#C4CCD9;
  --accent:#5B8CFF; --accent-2:#3E63DD; --accent-soft:rgba(91,140,255,.14);
  --brand:#8A6D2E; --err:#C0453E; --glow:rgba(91,140,255,.10);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; color:var(--txt); font-family:var(--sans); min-height:100dvh;
  background:
    radial-gradient(1100px 620px at 50% 46%, var(--glow) 0%, transparent 60%),
    radial-gradient(560px 360px at 50% 46%, var(--accent-soft) 0%, transparent 66%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  display:flex; align-items:center; justify-content:center; padding:24px;
}
/* kenarları karartan hafif vinyet → ortadaki ışık havuzu belirginleşir (referans hissi) */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(150% 130% at 50% 48%, transparent 48%, rgba(0,0,0,.6) 100%)}
[data-theme="light"] .vignette{background:radial-gradient(150% 130% at 50% 48%, transparent 60%, rgba(20,30,50,.10) 100%)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.themebtn{position:fixed;top:16px;right:18px;z-index:5;width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--txt-2);cursor:pointer}
.themebtn svg{width:18px;height:18px}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}

/* ===== yatay kompozisyon: amblem │ giriş │ alanlar + dairesel ok ===== */
.cluster{position:relative; z-index:2; display:flex; align-items:center; gap:38px; max-width:100%}

.rise{opacity:0; transform:translateY(9px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}
.d4{animation-delay:.3s}.d5{animation-delay:.4s}.d6{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

.brandcol{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.brandcol .eye{width:46px;height:46px;margin-bottom:14px;filter:drop-shadow(0 3px 14px rgba(184,158,110,.28))}
.brand{font-family:var(--serif); font-weight:400; font-size:46px; line-height:1; letter-spacing:1px; color:var(--txt); margin:0}
.brand .dot{color:var(--brand)}
.brandcol .tag{margin-top:14px; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--txt-2); letter-spacing:.3px; max-width:230px}
.brandcol .eyebrow{font-size:11px;font-weight:600;letter-spacing:6px;color:var(--accent);text-transform:uppercase;margin-bottom:12px;opacity:.9}

.vdiv{width:1px; align-self:stretch; min-height:150px; flex:none;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.loginlabel{flex:none; font-size:28px; font-weight:300; letter-spacing:4px; color:var(--txt-2); text-transform:lowercase}

.authcol{display:flex; flex-direction:column; width:370px; max-width:64vw}
form.authcol{margin:0}

/* hata: alanların ÜSTÜNDE, vurgu-kırmızı (referanstaki "You need to be logged in!" hissi) */
.err{color:var(--err); font-size:13px; min-height:16px; margin:0 0 9px 2px; font-weight:600; letter-spacing:.2px}
.err:not(:empty){opacity:1; transform:none; animation:shake .32s}  /* 🔴 statik opacity/transform ŞART: shake, rise-forwards'u ezip metni görünmez+kayık bırakmasın */
@keyframes shake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}50%{transform:translateX(-2px)}}

.loginbox{display:flex; align-items:center; gap:0}
.fields{display:flex; flex-direction:column; gap:9px; flex:1; min-width:0}

.ctrl{position:relative}
.fic{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--faint); pointer-events:none; transition:color .18s}
.ctrl:focus-within .fic{color:var(--accent)}
.field input, .fields input{
  width:100%; height:54px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  color:var(--txt); padding:0 14px 0 44px; font-size:16px; font-family:var(--sans); letter-spacing:.3px; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.fields input:hover, .field input:hover{border-color:var(--line-2)}
.fields input:focus, .field input:focus{border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft)}
.fields input:focus-visible, .field input:focus-visible{outline:none}
.fields input::placeholder, .field input::placeholder{color:var(--faint)}
.fields input:-webkit-autofill, .field input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset; -webkit-text-fill-color:var(--txt); caret-color:var(--txt); transition:background-color 999999s}
#p{padding-right:48px}
.show{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:none; border-radius:8px;
  background:none; color:var(--faint); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .16s, background .16s}
.show:hover{color:var(--accent); background:var(--accent-soft)}
.show svg{width:18px; height:18px}

/* dairesel ok butonu — iki alanın sağında, dikey ortada; seam'e hafif biner (referans) */
.arrowbtn{flex:none; width:60px; height:60px; margin-left:-14px; border:none; border-radius:50%; cursor:pointer; position:relative; z-index:2;
  background:var(--accent-bg); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -10px rgba(91,140,255,.6), 0 0 0 5px var(--bg);
  transition:filter .18s, transform .12s, box-shadow .2s, background .2s}
[data-theme="light"] .arrowbtn{box-shadow:0 12px 30px -10px rgba(91,140,255,.5), 0 0 0 5px var(--bg-2)}
.arrowbtn:hover{filter:brightness(1.08); box-shadow:0 16px 34px -10px rgba(91,140,255,.7), 0 0 0 5px var(--bg)}
.arrowbtn:active{transform:scale(.96)}
.arrowbtn .go-arrow{width:24px;height:24px}
.arrowbtn[aria-busy="true"]{background:var(--accent-bg);pointer-events:none}
.arrowbtn[aria-busy="true"] .go-arrow{display:none}
.arrowbtn.locked, .arrowbtn:disabled{background:var(--line-2); color:var(--txt-2); cursor:not-allowed; box-shadow:0 0 0 5px var(--bg); pointer-events:none}
.arrowbtn.locked .go-arrow{opacity:.5}
.spin{width:18px;height:18px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp .7s linear infinite;display:none}
.arrowbtn[aria-busy="true"] .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

.caps{font-size:11px;color:var(--accent-2);margin:9px 0 0 2px;display:none;letter-spacing:.3px}
.caps.on{display:block}
.help{margin:14px 0 0 2px;font-size:12px;color:var(--txt-2);letter-spacing:.2px}
.help.lock{color:var(--err);font-weight:600}

.foot{position:fixed;left:0;right:0;bottom:16px;text-align:center;z-index:2;
  font-size:11px;color:var(--faint);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:8px}
.foot b{color:var(--accent-2);font-weight:600}
.foot .sep{opacity:.55}
.foot .brw{display:inline-flex;align-items:center;gap:5px;opacity:.85}
.foot .brw svg{width:14px;height:14px;opacity:.8}

/* ===== parola-değiştir kartı (dikey) — .wrap/.go/.field/.eyebrow/.tag korunur ===== */
.wrap{position:relative;z-index:2;width:380px;max-width:100%;text-align:left}
.wrap .eyebrow{font-size:11px;font-weight:600;letter-spacing:6px;color:var(--accent);text-transform:uppercase;margin:0 0 12px;text-align:center}
.wrap .brand{text-align:center;font-size:28px;margin-bottom:8px}
.wrap .tag{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--txt-2);text-align:center}
.field{margin-bottom:14px}
.field .row{margin-bottom:7px}
label{font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:var(--txt-2); font-weight:600}
button.go{
  width:100%; height:52px; border:none; border-radius:12px; cursor:pointer; margin-top:2px;
  font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff;
  font-family:var(--sans); background:var(--accent-bg);
  box-shadow:0 10px 30px -14px rgba(91,140,255,.45);
  display:inline-flex; align-items:center; justify-content:center; gap:10px}
button.go:hover{filter:brightness(1.08)}
button.go:disabled{background:var(--line-2);color:var(--txt-2);cursor:default;box-shadow:none}
/* güçlü parola şart listesi: durum ŞEKİLLE de taşınır (boş halka / onay / çarpı) + ekran okuyucu metni — renk tek başına anlam taşımaz */
.pwreq{list-style:none;margin:-4px 0 14px;padding:0 2px;display:grid;gap:7px}
.pwreq[hidden]{display:none}
.pwreq li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.35;color:var(--txt-2)}
.pwreq svg{flex:none;width:16px;height:16px;color:var(--faint)}
.pwreq .ck,.pwreq .xx{display:none}
.pwreq li.ok{color:var(--txt)}
.pwreq li.ok svg{color:var(--accent)}
.pwreq li.ok .ck{display:inline}
.pwreq li.bad{color:var(--err)}
.pwreq li.bad svg{color:var(--err)}
.pwreq li.bad .xx{display:inline}

@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.err:not(:empty){animation:none}.spin{animation:none}}

/* ===== mobil: dikey yığ ===== */
@media (max-width:760px){
  .cluster{flex-direction:column; gap:20px; text-align:center}
  .brandcol{align-items:center}
  .brandcol .tag{max-width:280px}
  .vdiv{width:64px;min-height:0;height:1px;align-self:center;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
  .loginlabel{font-size:22px}
  .authcol{width:340px;max-width:86vw;text-align:left}
  .err{text-align:left}
}
@media (max-width:380px){ .brand{font-size:40px} .authcol{width:100%} }

/* === BEYAZ ALAN VARYANTI (Ricochet) — koyu sahnede aydınlık pill alanlar (kullanıcı tercihi) === */
.fields input, .field input{ background:#F7F8FA; border-color:transparent; color:#1B2230; box-shadow:0 8px 22px -14px rgba(0,0,0,.55) }
.fields input::placeholder, .field input::placeholder{ color:#9AA3B2 }
.fields input:hover, .field input:hover{ border-color:#D7DCE6 }
.fields input:focus, .field input:focus{ background:#FFFFFF; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.fic{ color:#8A93A6 }
.ctrl:focus-within .fic{ color:var(--accent) }
.show{ color:#8A93A6 }
.show:hover{ color:var(--accent); background:rgba(91,140,255,.10) }
.fields input:-webkit-autofill, .field input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #F7F8FA inset; -webkit-text-fill-color:#1B2230; caret-color:#1B2230 }