/* Halaman masuk / daftar / lupa sandi (client, partner, office) */
.auth-body { background: var(--paper); }
.auth { display: grid; grid-template-columns: minmax(360px, 44%) 1fr; min-height: 100vh; }
.auth-art {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px clamp(28px, 4vw, 56px); background: var(--ink); color: var(--paper); overflow: hidden;
}
.auth-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.auth-brand span { font: 500 24px/1 var(--serif); }
.auth-brand small { font: 600 11.5px/1 var(--sans); padding: 5px 9px; border-radius: 99px; border: 1px solid currentColor; opacity: .75; }
/* lengkung janur besar */
.auth-arch { position: absolute; left: 50%; bottom: -8%; width: min(78%, 420px); aspect-ratio: 3 / 4.2; transform: translateX(-50%); }
.auth-arch::before, .auth-arch::after, .auth-arch span {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--janur); border-bottom: 0; border-radius: 999px 999px 0 0;
}
.auth-arch::after { inset: 22px 22px 0; border-color: rgba(216, 203, 106, .45); }
.auth-arch span { inset: 44px 44px 0; border-color: rgba(216, 203, 106, .22); }
.auth-quote { position: absolute; z-index: 2; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(62%, 300px); text-align: center; }
.auth-line { font: 450 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); letter-spacing: -.015em; }
.auth-sub { margin-top: 14px; color: #B9C1B4; font-size: 14px; }

.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 20px; }
.auth-brand--top { display: none; color: var(--ink); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card--wide { max-width: 520px; }
.auth-card h1 { font: 500 clamp(30px, 4vw, 38px)/1.1 var(--serif); letter-spacing: -.02em; }
.auth-card .sub { margin: 10px 0 26px; color: var(--muted); }
.auth-alt { margin-top: 22px; font-size: 14px; color: var(--muted); }
.auth-foot a { color: inherit; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-main { justify-content: flex-start; padding-top: 28px; }
  .auth-brand--top { display: inline-flex; align-self: flex-start; }
  .auth-card { margin-top: 12px; }
}