/* =================================================================
   SYNCORA — layar masuk (fitur/masuk.js), desain krem 26 Okt 2026
   Dua panel: kiri = merek (hitam hangat, tulisan raksasa, jalur 3 langkah), kanan = formulir / pilih akun demo.
   .tabs, .linkbtn, .btn, .card, .badge, .notice, .tb-btn, .avatar ada di style.css: tidak diduplikasi di sini.
   Aksen vermilion hemat: kata "kedua", halte terakhir, tombol utama. Tanpa aurora/gradien/glow.
   ================================================================= */
.login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;gap:12px;padding:12px;
  --gp:#0d0c0b;--gp-fg:#f3eee4;--gp-mut:#a8a094;--gp-line:rgba(243,238,228,.2)}
/* mode gelap: latar halaman sudah #0d0c0b, jadi panel merek memakai warna kartu supaya tetap terlihat sebagai panel */
:root[data-theme="dark"] .login{--gp:#171513}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .login{--gp:#171513}}
.login .side{min-width:0}

/* ---------- panel merek ---------- */
.login .brandside{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:18px;
  padding:20px 20px 22px;border-radius:var(--r-xl);background:var(--gp);color:var(--gp-fg);border:1px solid var(--gp-line)}
/* butiran kertas halus, sama dengan latar aplikasi tetapi untuk permukaan gelap */
.login .brandside::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .9  0 0 0 0 .85  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.login .brandside .lbl{color:var(--gp-mut)}
.login .brandtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.login .brandtop .wordmark{font-size:26px;color:var(--gp-fg)}
.login .brandmid{display:grid;gap:14px}
.login .brandside h1{font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:.96;color:var(--gp-fg);max-width:14ch;animation:naikJudul .8s .1s var(--ease-out) both}
.login .brandside h1 .hl{color:var(--api-hi)}
.login .brandside .lead{color:var(--gp-mut);max-width:40ch;font-size:16px;line-height:1.55;animation:rise .6s .25s var(--ease-out) both}
/* tulisan raksasa samar di dasar panel */
.login .raksasa{position:absolute;left:-.02em;bottom:-.14em;z-index:-1;pointer-events:none;user-select:none;white-space:nowrap;
  font:400 clamp(100px,15vw,236px)/1 var(--f-display);letter-spacing:.01em;color:rgba(243,238,228,.06)}

/* jalur 3 langkah: garis tergambar, halte muncul bergiliran (satu gerak halus per halte) */
.login .route{position:relative;display:none;gap:20px;margin:0;padding:0;list-style:none;max-width:440px}
.login .route::before,.login .route::after{content:"";position:absolute;left:17px;top:20px;bottom:20px;width:2px;border-radius:2px}
.login .route::before{background:var(--gp-line)}
.login .route::after{background:var(--gp-fg);opacity:.55;transform-origin:top;animation:drawY 1.2s .5s var(--ease-out) both}
.login .route li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;animation:rise .5s var(--ease-out) both;animation-delay:calc(.35s + var(--i) * .22s)}
.login .route .stop{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gp);border:1.5px solid var(--gp-line);
  font:600 11px var(--f-mono);letter-spacing:.06em;color:var(--gp-fg)}
.login .route li:last-child .stop{background:var(--api);border-color:var(--api);color:var(--on-api)}
.login .route b{display:block;font:400 1.5rem/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.login .route small{display:block;margin-top:5px;color:var(--gp-mut);font-size:14px;line-height:1.45}
/* versi ringkas untuk HP */
.login .route-mini{display:flex;align-items:center;gap:8px;font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gp-fg)}
.login .route-mini span:last-child{color:var(--api-hi)}
.login .route-mini i{flex:0 1 28px;height:1.5px;background:var(--gp-line)}
.login .raksasa{display:none}

/* ---------- panel formulir ---------- */
.login .formside{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 0 20px}
.login-tools{align-self:flex-end;margin-bottom:12px}
.login #lPanel,.login .panel{width:100%;max-width:440px}
.login .panel.card{padding:26px 24px;border-radius:var(--r-xl);box-shadow:var(--shadow-hover)}
.login .panel .tabs{margin:0 0 20px}
.login .panel h2{font-size:2rem;line-height:1}
.login .panel .sub{margin-top:8px;font-size:15px}
.login .panel > :is(h2,.sub,label,input,.pw,.hint,.btn,.lrow){animation:rise .5s var(--ease-out) both}
.login .panel > .btn{margin-top:20px;min-height:50px}
.login .panel.swap > *{animation:none}
.login .hint b,.login .catatan b{color:var(--ink)}
.login .catatan{margin-top:14px}
.login .lerr{margin-top:14px;padding:11px 14px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-soft);
  color:var(--ink);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.login .lerr:empty{display:none}
.login .lrow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:14px}
.login .lfoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);text-align:center}
.login .lfoot a{font-weight:700}
.login .lfoot a:hover{color:var(--api-text)}
/* kolom kata sandi dengan tombol Lihat */
.login .pw{position:relative}
.login .pw input{padding-right:92px}
.login .pw-t{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 12px;border:0;border-radius:999px;background:none;
  color:var(--muted);font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .15s,background-color .15s}
.login .pw-t:hover{color:var(--ink);background:var(--brand-soft)}

/* ---------- mode demo: kartu pilih akun ---------- */
.login .panel.demo{max-width:600px}
.login .demo-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.login .demo .grup{margin:22px 0 10px}
.login .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.pick{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:transparent;color:inherit;font:inherit;cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .2s var(--ease-kuat)}
.pick:hover{border-color:var(--ink);background:var(--brand-soft)}
.pick:active{transform:scale(.98)}
.pick-t{min-width:0;flex:1}
.pick b{display:block;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick small{display:block;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.pick .go{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sunken);color:var(--muted);
  transition:transform .25s var(--ease-kuat),color .18s,background-color .18s}
.pick .go svg{width:14px;height:14px}
.pick:hover .go{transform:translateX(2px);color:var(--pill-fg);background:var(--pill)}
.pick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- HP / tablet kecil: panel merek ringkas di atas ---------- */
@media (max-width:899px){
  .login .brandmid .lbl{display:none}
  .login .brandtop .lbl{font-size:11px}
}
@media (max-width:520px){
  .login{padding:8px;gap:8px}
  .login .brandtop .lbl{display:none}
  .login .brandside{padding:16px 16px 18px;gap:12px}
  .login .brandside h1{font-size:2.2rem;max-width:none}
  .login .brandside .lead{font-size:15px}
  .login .panel.card{padding:20px 16px}
  .login .panel h2{font-size:1.7rem}
}

/* ---------- desktop: dua panel sejajar ---------- */
@media (min-width:900px){
  .login{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;padding:20px}
  .login .brandside{position:sticky;top:20px;height:calc(100vh - 40px);height:calc(100dvh - 40px);justify-content:space-between;gap:20px;padding:36px 44px 40px}
  .login .brandside .lead{font-size:17px}
  .login .route{display:grid}
  .login .route-mini{display:none}
  .login .raksasa{display:block}
  .login .formside{justify-content:center;padding:20px 28px 28px}
  .login-tools{position:absolute;top:0;right:8px;margin:0}
  .login .panel.card{padding:32px}
  /* ruang menyempit: sembunyikan penjelasan per langkah, judul langkah tetap */
  @media (max-height:740px){
    .login .route small{display:none}
    .login .route{gap:12px}
  }
  @media (max-height:620px){
    .login .brandmid .lead{display:none}
  }
}
@media (min-width:1400px){
  .login .brandside h1{font-size:5rem}
}