/* Halaman Masuk — kartu krem di langit malam, Pijar menjaga pintu. */
.hal-masuk { min-height: 100vh; min-height: 100dvh; }
.masuk-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 96px 16px 32px; }

.masuk-kartu {
  position: relative; width: min(420px, 100%); padding: 64px 24px 26px; border-radius: 28px;
  background: var(--krem); color: var(--tinta); box-shadow: var(--bayang-besar); text-align: center;
  animation: naik-kartu .6s var(--pop);
  color-scheme: light;   /* kotak centang & isian tampil terang di kartu krem */
}
@keyframes naik-kartu { from { transform: translateY(30px) rotate(-2deg); opacity: 0; } }
.masuk-kartu > .pijar { position: absolute; top: -78px; left: 50%; width: 112px; margin-left: -56px; }
.masuk-kartu .pijar-gelembung { left: 88%; max-width: 128px; }
.masuk-kartu h1 { font-size: 32px; }
.masuk-sub { margin: 6px 0 22px; color: #4A4F72; }

form { text-align: left; }
.label { display: block; font: 600 16px var(--font-judul); margin-bottom: 6px; }
.input-kode {
  width: 100%; min-height: 62px; padding: 0 14px; border-radius: 16px;
  border: 3px solid var(--tinta); background: var(--kertas); color: var(--tinta);
  font: 600 28px var(--font-judul); letter-spacing: .16em; text-align: center; text-transform: uppercase;
  box-shadow: var(--bayang-kecil); transition: box-shadow .2s ease, border-color .2s ease;
}
.input-kode::placeholder { color: #6E7290; letter-spacing: .16em; }
.input-kode:focus { outline: none; border-color: var(--ungu-tua); box-shadow: 0 0 0 4px rgba(107,78,230,.3), var(--bayang-kecil); }
.input-kode[aria-invalid="true"] { border-color: #B3261E; animation: getar .4s ease; }
@keyframes getar { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.bantu { margin: 6px 0 0; font-size: 14px; color: #4A4F72; }
.galat {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #FFE1DB; color: #B3261E; font-size: 15px; box-shadow: inset 4px 0 0 var(--koral);
}
.galat .icon { width: 20px; height: 20px; margin-top: 2px; }

.centang { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 10px 0 12px; cursor: pointer; font-size: 16px; }
.centang input { width: 22px; height: 22px; margin: 0; accent-color: var(--ungu-tua); cursor: pointer; flex: none; }

.tombol-masuk { width: 100%; min-height: 56px; font-size: 18px; }
.tombol-masuk:disabled { cursor: progress; transform: none; }
.putaran { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(27,35,70,.25); border-top-color: var(--tinta); animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.tombol-masuk[aria-busy="true"] .putaran { display: inline-block; }
.tombol-masuk[aria-busy="true"] .ikon-buka { display: none; }

.kontak { margin: 20px 0 0; font-size: 15px; color: #4A4F72; }
.kontak a { color: var(--ungu-tua); font-weight: 800; }

/* Pijar menggeleng saat kode salah */
.pijar.geleng .pijar-badan { animation: geleng .55s ease; }
@keyframes geleng { 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } }