/* Halaman masuk. Panel kiri sengaja gelap di kedua tema — ia panel merek,
   bukan permukaan yang ikut berganti. Sisi formulir mengikuti tema pembaca. */

.auth{display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); min-height:100vh}
@media (max-width:860px){.auth{grid-template-columns:1fr; min-height:100dvh}}

/* ---------------- panel merek ---------------- */
.auth-brand{
  --panel:#0B1418; --panel-2:#11212700; --panel-ink:#E8F1F3;
  --panel-mute:#7D949A; --panel-line:#1E3038; --panel-accent:#2FB3C9;
  position:relative; overflow:hidden; background:var(--panel); color:var(--panel-ink);
  display:flex; flex-direction:column; justify-content:space-between; gap:36px;
  padding:44px 44px 38px;
}
@media (max-width:860px){.auth-brand{padding:28px 24px 24px; gap:22px}}
.auth-brand > *{position:relative; z-index:1}
.auth-brand .fiber{position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.5}
.auth-brand .fiber path{fill:none; stroke:var(--panel-accent); stroke-width:1}
.auth-brand .fiber .dim{stroke:#25424B}
.auth-brand .pulse{stroke:var(--panel-accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:38 560; filter:drop-shadow(0 0 5px rgba(47,179,201,.6));
  animation:kirim 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes kirim{from{stroke-dashoffset:598}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.auth-brand .pulse{animation:none; stroke-dasharray:none; opacity:.5}}

.auth-brand .mark{display:flex; align-items:baseline; gap:10px}
.auth-brand .mark b{font-family:"Archivo",sans-serif; font-size:19px; font-weight:700; letter-spacing:-.02em}
.auth-brand .mark span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--panel-mute)}
.auth-brand h1{font-family:"Archivo",sans-serif; font-size:clamp(26px,3.4vw,38px); font-weight:700;
  line-height:1.12; letter-spacing:-.025em; max-width:15ch; margin:0}
.auth-brand .lede{color:var(--panel-mute); font-size:14.5px; line-height:1.6; max-width:44ch; margin:14px 0 0}
.auth-brand .lede b{color:var(--panel-ink); font-weight:500}
@media (max-width:860px){.auth-brand h1{font-size:23px} .auth-brand .lede{display:none}}

.principles{display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--panel-line)}
@media (max-width:860px){.principles{display:none}}
.principles li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--panel-line); font-size:13px; color:var(--panel-mute)}
.principles .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--panel-accent)}
.principles b{color:var(--panel-ink); font-weight:500}
.auth-brand .kaki{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--panel-mute)}

/* ---------------- sisi formulir ---------------- */
.auth-form{display:flex; align-items:center; justify-content:center; padding:44px 32px;
  background:var(--bg)}
@media (max-width:860px){.auth-form{padding:32px 22px 48px}}
.auth-box{width:100%; max-width:352px}
.auth-box h2{font-family:"Archivo",sans-serif; font-size:21px; font-weight:600; letter-spacing:-.02em; margin:0}
.auth-box .sub{font-size:13.5px; color:var(--ink-2); margin:6px 0 26px}
.auth-box form{display:flex; flex-direction:column; gap:16px}
.auth-box .f-row label{font-size:12px; font-weight:500; color:var(--ink-2)}
.auth-box .f-input{padding:11px 13px; font-size:14.5px; background:var(--surface); border-radius:8px}
.auth-box .f-input::placeholder{color:var(--ink-3)}

.pw{position:relative}
.pw .f-input{padding-right:74px}
.pw button{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; cursor:pointer;
  background:transparent; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 8px; border-radius:6px}
.pw button:hover{background:var(--surface-3); color:var(--ink-2)}
.pw button:focus-visible{outline:2px solid var(--s1); outline-offset:1px}

.auth-alert{display:flex; gap:11px; align-items:flex-start; border-radius:8px; padding:11px 13px;
  font-size:13px; line-height:1.5; border:1px solid transparent; border-left-width:3px}
.auth-alert.error{background:var(--crit-bg); border-color:color-mix(in srgb,var(--crit) 30%,transparent);
  border-left-color:var(--crit); color:var(--ink)}
.auth-alert.ok{background:var(--good-bg); border-color:color-mix(in srgb,var(--good) 30%,transparent);
  border-left-color:var(--good); color:var(--ink)}
.auth-alert .ico{font-family:"IBM Plex Mono",monospace; font-weight:700; line-height:1.35}
.auth-alert.error .ico{color:var(--crit)}
.auth-alert.ok .ico{color:var(--good)}

.auth-box .btn{justify-content:center; width:100%; padding:11px 16px; font-size:14.5px}
.caps{display:none; align-items:center; gap:7px; font-size:11.5px; color:var(--warn);
  font-family:"IBM Plex Mono",monospace}
.caps.on{display:flex}
.auth-foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); line-height:1.6}
.auth-foot a{color:var(--ink-2)}