/* Halaman masuk dan daftar */

.masuk { flex: 1; display: grid; min-height: 100dvh; }
@media (min-width: 960px) { .masuk { grid-template-columns: minmax(400px, 5fr) 6fr; } }

/* Panel merek (hanya layar lebar) */
.masuk-merek { display: none; }
@media (min-width: 960px) {
  .masuk-merek {
    display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 48px;
    background: var(--biru-800); color: #fff;
  }
}
.merek-putih .merek-nama { color: #fff; }
.merek-putih .merek-logo { background: #fff; color: var(--biru-700); }

.masuk-pesan { display: grid; gap: 28px; max-width: 460px; }
.masuk-pesan h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; }

.langkah { display: grid; gap: 16px; }
.langkah li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; color: var(--biru-200); }
.langkah span {
  width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%; font-size: .8125rem; font-weight: 600; color: #fff;
}
.masuk-catatan { font-size: .8125rem; color: var(--biru-300); }

/* Panel formulir */
.masuk-panel { display: grid; place-items: center; padding: 28px 16px 48px; background: var(--abu-25); }
@media (min-width: 960px) { .masuk-panel { padding: 48px; } }

.masuk-kartu { display: grid; gap: 22px; width: 100%; max-width: 440px; }
.masuk-merek-kecil { margin-bottom: 4px; }
@media (min-width: 960px) { .masuk-merek-kecil { display: none; } }

.form-auth { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--abu-100); border-radius: var(--radius-lg); background: #fff; }
.form-auth h2 + p { margin-top: 4px; }
.bidang { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }

.input-sandi { position: relative; }
.input-sandi .input { padding-right: 96px; }
.tampilkan-sandi {
  position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 84px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; font-size: .8125rem; font-weight: 600; color: var(--biru-700);
}
.tampilkan-sandi:hover { background: var(--biru-50); }

@media (max-width: 480px) { .form-auth { padding: 20px 16px; } }