/* Login page: dark asphalt brand panel on wide screens, single column on phones */
.masuk { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.masuk-sisi { display: none; }
.masuk-form-wadah { display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.masuk-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.masuk-form h2 { font-size: 26px; margin-top: 14px; }
.masuk-form > p.muted { margin: -10px 0 4px; }
.galat-umum { margin: 0; color: var(--merah); font-weight: 500; }
.pindah { text-align: center; margin: 0; }
.pindah a { color: var(--teks); font-weight: 600; }
@media (min-width: 900px) {
  .masuk { grid-template-columns: minmax(380px, 46%) 1fr; }
  .merek-hp { display: none; }
  .masuk-sisi {
    display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #fff;
    background: var(--aspal-900); position: relative; overflow: hidden;
  }
  .masuk-slogan h1 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; max-width: 14em; font-weight: 650; }
  /* Lane markings: a quiet road motif instead of a stock illustration */
  .masuk-garis { height: 6px; background: repeating-linear-gradient(90deg, var(--aksen) 0 56px, transparent 56px 96px); opacity: .9; }
}