body { background: var(--baja); color: #fff; min-height: 100dvh; }
.masuk { width: min(880px, 100%); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.kembali { display: inline-flex; align-items: center; gap: 4px; color: var(--baja-teks); text-decoration: none; font-weight: 500; min-height: 40px; margin-left: -4px; }
.kembali:hover { color: #fff; }
.merek { display: flex; align-items: center; gap: 12px; margin: 24px 0 28px; }
.merek strong { display: block; font-size: 15px; }
.merek span { color: var(--baja-teks); font-size: 13px; }
.merek-ikon { width: 44px; height: 44px; border-radius: 10px; background: var(--aksen); display: grid; place-items: center; }
.merek-ikon .ikon { width: 24px; height: 24px; }
.masuk h1 { font-size: clamp(26px, 5vw, 34px); }
.masuk-kepala p { color: var(--baja-teks); max-width: 52ch; margin: 8px 0 28px; }
.pilihan { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pilihan { grid-template-columns: 1fr 1fr; } }
.peran { display: flex; flex-direction: column; gap: 10px; background: var(--putih); color: var(--teks); border-radius: 12px; padding: 22px; }
.peran h2 { font-size: 17px; }
.peran p { margin: 0; color: var(--teks-2); flex: 1; }
.peran-ikon { width: 40px; height: 40px; border-radius: 8px; background: var(--baja); color: #fff; display: grid; place-items: center; }
.peran form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.peran > .tombol { margin-top: auto; }
.peran .tombol { width: 100%; min-height: 44px; }