/* ============================================================
   Kiosk Console — halaman masuk & pemasangan (tema terang)
   Dipakai bersama app.css; seluruh gaya di bawah dibatasi pada
   .authpage agar tidak memengaruhi tampilan portal yang gelap.
   ============================================================ */
body.auth-light{
  background:#FFFCF4;
  color:#2C2822;
}

.authpage{
  --kuning:#F5B435;
  --kuning-tua:#D9922A;
  --tinta:#2C2822;
  --abu:#7C7669;
  --garis:#E8E2D6;
  --kertas:#FFFFFF;
  --kanvas:#F6F3EC;

  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 20px;
  overflow:hidden;
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tinta);
}

/* Bentuk latar: lingkaran besar yang sengaja terpotong tepi layar */
.authpage .blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.authpage .blob.a{width:420px;height:420px;background:#F7C45A;top:-170px;left:-110px}
.authpage .blob.b{width:300px;height:300px;background:#FBE3A8;top:-60px;right:-90px}
.authpage .blob.c{width:480px;height:480px;background:#F7C45A;bottom:-250px;right:-120px}
.authpage .blob.d{width:260px;height:260px;background:#FAEDD2;bottom:-110px;left:-70px}

.card{
  position:relative;z-index:1;
  width:min(960px,100%);
  background:var(--kertas);
  border-radius:20px;
  box-shadow:0 30px 60px -28px rgba(66,56,32,.35), 0 2px 6px rgba(66,56,32,.06);
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.card.satu{grid-template-columns:1fr;width:min(640px,100%)}
.card .kiri{padding:46px 48px}
.card .kanan{background:var(--kanvas);border-left:1px solid var(--garis);display:grid;place-items:center;padding:40px}

.logo{display:flex;align-items:baseline;gap:8px;margin-bottom:38px}
.logo b{font-size:27px;font-weight:700;color:var(--kuning);letter-spacing:-.6px}
.logo span{font-size:19px;font-weight:600;color:var(--tinta)}

.card h1{font-size:25px;font-weight:600;margin:0 0 8px;letter-spacing:-.3px}
.card .lede{color:var(--abu);margin:0 0 26px;max-width:40ch;font-size:13.5px;line-height:1.6}

.isian{position:relative;margin-bottom:14px}
.isian input{
  width:100%;padding:13px 15px;border-radius:9px;border:1.5px solid var(--garis);
  background:#fff;color:var(--tinta);font-size:14px;transition:border-color .15s,box-shadow .15s;
}
.isian input::placeholder{color:#B3AB9C}
.isian input:focus{outline:none;border-color:var(--kuning);box-shadow:0 0 0 4px rgba(245,180,53,.16)}
.isian.sandi input{padding-right:64px}
.lihat{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--abu);font-size:12.5px;cursor:pointer;padding:6px 8px;border-radius:6px
}
.lihat:hover{color:var(--kuning-tua)}

.baris{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 26px;font-size:13px}
.ingat{display:flex;align-items:center;gap:8px;color:var(--abu);cursor:pointer}
.ingat input{width:16px;height:16px;accent-color:var(--kuning);cursor:pointer}
.baris a{color:var(--abu);text-decoration:none}
.baris a:hover{color:var(--kuning-tua);text-decoration:underline}

.tombol{
  width:100%;padding:13px;border:0;border-radius:999px;cursor:pointer;
  background:var(--kuning);color:#3A2C0C;font-weight:600;font-size:14.5px;letter-spacing:.2px;
  transition:background .15s,transform .05s;
}
.tombol:hover{background:var(--kuning-tua);color:#fff}
.tombol:active{transform:translateY(1px)}
.tombol.sekunder{background:#fff;border:1.5px solid var(--garis);color:var(--tinta)}
.tombol.sekunder:hover{background:#FBF7EE;color:var(--tinta)}
.authpage button:focus-visible,.authpage a:focus-visible,.authpage input:focus-visible{
  outline:2px solid var(--kuning-tua);outline-offset:2px}

.pesan{border-radius:9px;padding:11px 14px;margin-bottom:18px;font-size:13px;line-height:1.5}
.pesan.galat{background:#FDECE8;border:1px solid #F3CFC6;color:#A8412B}
.pesan.kabar{background:#FEF6E4;border:1px solid #F3DFB2;color:#8A6412}

.kaki{margin-top:26px;color:#9B9486;font-size:12px;line-height:1.6}

/* Panel kanan: ilustrasi dan keterangan singkat */
.sorot{background:#fff;border-radius:14px;padding:26px 24px 22px;max-width:320px;text-align:center;
  box-shadow:0 14px 30px -20px rgba(66,56,32,.45);border-bottom:3px solid var(--kuning)}
.sorot svg{width:100%;height:auto;display:block;margin-bottom:20px}
.sorot h2{font-size:16px;font-weight:600;margin:0 0 8px}
.sorot p{color:var(--abu);font-size:12.5px;margin:0;line-height:1.6}

/* Pemasangan: langkah dan daftar periksa */
.langkah{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.langkah div{flex:1;min-width:64px;height:4px;border-radius:2px;background:var(--garis)}
.langkah div.aktif{background:var(--kuning)}
.langkah div.lewat{background:#E3C98A}
.periksa{list-style:none;margin:0 0 24px;padding:0;font-size:13.5px}
.periksa li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--garis)}
.periksa .tanda{font-weight:700;line-height:1.4}
.periksa .ya{color:#3F9A63}
.periksa .tidak{color:#C24B32}
.periksa small{display:block;color:var(--abu)}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.labelisian{display:block;font-size:12.5px;color:var(--abu);margin-bottom:6px}

@media (max-width:860px){
  .card{grid-template-columns:1fr}
  .card .kanan{display:none}
  .card .kiri{padding:36px 28px}
  .dua{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}