/* Warna dan huruf mengikuti dashboard. */
:root{
  --backdrop:#efe5d6; --surface:#fffdf9; --sunk:#f7f1e8; --line:#e4d9c7;
  --fg:#2f2921; --muted:#766b5c; --accent:#96704a; --accent-dark:#7d5c3b;
  --cocoa:#3a3128; --beige:#e8d8bf; --kunyit:#d9a441; --bad:#b3362b; --bad-bg:#fbe8e5;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--backdrop);color:var(--fg);font:500 15px/1.5 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.card{width:100%;max-width:860px;min-height:500px;display:grid;grid-template-columns:5fr 6fr;background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:0 14px 50px rgba(110,84,50,.16)}
.panel{background:var(--cocoa);color:var(--surface);padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.mark{width:52px;height:52px;border-radius:16px;background:var(--kunyit);color:var(--cocoa);display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:.02em}
.eyebrow{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--beige)}
h1{margin:0;font-size:32px;line-height:1.15;font-weight:800}
.lede{margin:12px 0 0;color:var(--beige);max-width:26ch}
.form-side{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
h2{margin:0;font-size:24px;font-weight:800}
.sub{margin:4px 0 22px;color:var(--muted)}
.err{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--bad-bg);color:var(--bad);font-weight:700;font-size:14px}
.err[hidden]{display:none}
label{display:block;margin:0 0 6px;font-weight:700;font-size:13.5px}
input{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--sunk);color:var(--fg);font:600 16px "Nunito",system-ui,sans-serif;margin-bottom:16px}
input:focus{outline:0;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(150,112,74,.18)}
.pw{position:relative}
.pw input{padding-right:72px}
.toggle{position:absolute;top:4px;right:4px;height:40px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--accent-dark);font:800 13px "Nunito",system-ui,sans-serif;cursor:pointer}
.toggle:hover{background:var(--line)}
.toggle:focus-visible,.btn:focus-visible{outline:3px solid rgba(150,112,74,.45);outline-offset:2px}
.btn{width:100%;height:48px;margin-top:6px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:800 15px "Nunito",system-ui,sans-serif;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-dark)}
.btn:disabled{opacity:.7;cursor:progress}
.foot{margin:20px 0 0;text-align:center;color:var(--muted);font-size:12.5px}
@media (max-width:700px){
  body{align-items:flex-start;padding-top:16px;padding-bottom:16px}
  .card{grid-template-columns:1fr;min-height:0;border-radius:24px}
  .panel{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:22px 24px}
  .mark{width:46px;height:46px;border-radius:14px;font-size:16px;flex:none}
  .eyebrow{margin-bottom:0;font-size:11px}
  h1{font-size:21px}
  .lede{display:none}
  .form-side{padding:28px 24px 26px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}