/*!
 * Cyber Digital — Auth pages (login + daftar), v2
 * Panel kiri brand (selalu gelap) + panel kanan form (ikut tema terang/gelap).
 * Memakai token dari modern.css (--cd-*). Scoped ke #cd-login-root.
 */
body.cd-auth-page { margin: 0; background: var(--cd-bg) !important; color: var(--cd-ink); font-family: var(--cd-font); -webkit-font-smoothing: antialiased; }
#cd-login-root { min-height: 100vh; font-family: var(--cd-font); }
#cd-login-root *, #cd-login-root *::before, #cd-login-root *::after { box-sizing: border-box; }
#cd-login-root a { text-decoration: none; }

.au-wrap { display: grid; grid-template-columns: minmax(380px, 5fr) 6fr; min-height: 100vh; }

/* ── Panel kiri ───────────────────────────── */
.au-left {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 36px clamp(32px, 4.5vw, 64px);
  color: #E8F4F7;
  background:
    radial-gradient(900px 500px at 105% -10%, rgba(43,99,192,.55), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(250,173,62,.20), transparent 60%),
    linear-gradient(160deg, #0D2B58 0%, #081F42 55%, #050F26 100%);
}
.au-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.au-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: au-float 9s ease-in-out infinite; }
.au-glow-1 { width: 280px; height: 280px; right: -60px; top: 18%; background: rgba(43,99,192,.38); }
.au-glow-2 { width: 220px; height: 220px; left: -50px; bottom: 22%; background: rgba(250,173,62,.18); animation-delay: -4s; }
@keyframes au-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-22px,0); } }

.au-logo, .au-left-body, .au-left-foot { position: relative; z-index: 1; }
.au-logo { display: inline-flex; align-self: flex-start; }
.au-logo img { height: 40px; width: auto; display: block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.au-logo:hover img { transform: scale(1.04); }

.au-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #C5DCFA; }
.au-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #FAAD3E; box-shadow: 0 0 0 0 rgba(250,173,62,.6); animation: au-ping 2s infinite; }
@keyframes au-ping { 70% { box-shadow: 0 0 0 8px rgba(250,173,62,0); } 100% { box-shadow: 0 0 0 0 rgba(250,173,62,0); } }
.au-headline { margin: 1.1rem 0 .75rem; font-size: clamp(1.9rem, 2.9vw, 2.7rem); line-height: 1.12; font-weight: 700; letter-spacing: -.035em; color: #fff; max-width: 14em; }
.au-sub { margin: 0 0 1.75rem; max-width: 30em; color: #B4C7E6; font-size: 1rem; line-height: 1.6; }

.au-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; max-width: 30em; }
.au-benefits li { display: flex; gap: .9rem; align-items: flex-start; color: #B4C7E6; font-size: .9rem; line-height: 1.45; }
.au-benefits strong { display: block; color: #fff; font-weight: 600; font-size: .95rem; }
.au-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #8DB8F2; }
.au-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.au-stats { display: flex; gap: .75rem; margin-bottom: 1rem; }
.au-stats > div { flex: 1; padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.au-stats b { display: block; font-size: 1.1rem; color: #fff; letter-spacing: -.02em; }
.au-stats span { font-size: .75rem; color: #8FA8CF; }
.au-left-foot small { color: #8CA2C8; font-size: .78rem; }
.au-left-foot a { color: #B4C7E6; }
.au-left-foot a:hover { color: #fff; }

/* Entrance panel kiri */
.au-logo, .au-eyebrow, .au-headline, .au-sub, .au-benefits li, .au-stats { animation: au-rise .65s cubic-bezier(.22,1,.36,1) both; }
.au-eyebrow { animation-delay: .05s; } .au-headline { animation-delay: .1s; } .au-sub { animation-delay: .16s; }
.au-benefits li:nth-child(1) { animation-delay: .22s; } .au-benefits li:nth-child(2) { animation-delay: .3s; } .au-benefits li:nth-child(3) { animation-delay: .38s; }
.au-stats { animation-delay: .46s; }
@keyframes au-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Panel kanan ──────────────────────────── */
.au-right { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 clamp(20px, 4vw, 56px) 56px; background: var(--cd-bg); min-width: 0; }
.au-controls { width: 100%; max-width: 760px; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.au-controls-right { display: flex; align-items: center; gap: .5rem; }
.au-back { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--cd-muted); padding: .4rem .6rem .4rem .3rem; border-radius: 9px; transition: color .15s, background .15s, transform .2s; }
.au-back:hover { color: var(--cd-ink); background: var(--cd-hover); transform: translateX(-2px); }
.au-lang { display: inline-flex; background: var(--cd-track); border-radius: 10px; padding: 3px; }
.au-lang a { padding: 6px 12px; border-radius: 8px; font-size: .8rem; font-weight: 600; color: var(--cd-muted); }
.au-lang a.active { background: var(--cd-surface); color: var(--cd-ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.au-theme { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--cd-line-2); background: var(--cd-surface); color: var(--cd-ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.au-theme:hover { border-color: var(--cd-brand); }
.au-theme:active { transform: scale(.94); }
.au-theme .icon-sun { display: none; }
[data-cd-theme="dark"] .au-theme .icon-sun { display: block; }
[data-cd-theme="dark"] .au-theme .icon-moon { display: none; }

.au-form-inner { width: 100%; max-width: 420px; margin: auto 0; animation: au-rise .6s .1s cubic-bezier(.22,1,.36,1) both; }
.au-form-inner.au-form-wide { max-width: 760px; margin: 0; }
.au-title { margin: 0 0 .35rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; color: var(--cd-ink); }
.au-lead { margin: 0 0 1.75rem; color: var(--cd-muted); font-size: .95rem; }

.au-field { margin-bottom: 1.1rem; }
.au-label { display: block; margin-bottom: .4rem; font-size: .84rem; font-weight: 600; color: var(--cd-ink); }
.au-input-wrap { position: relative; }
#cd-login-root .au-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--cd-line-2); border-radius: 11px; background: var(--cd-surface); color: var(--cd-ink); font: 400 .95rem var(--cd-font); outline: 0; transition: border-color .15s, box-shadow .2s; }
#cd-login-root .au-input::placeholder { color: var(--cd-faint); }
#cd-login-root .au-input:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.16); }
#cd-login-root .au-input.au-has-reveal { padding-right: 46px; }
.au-reveal-btn { position: absolute; right: 4px; top: 4px; height: 38px; width: 38px; border: 0; background: none; color: var(--cd-muted); cursor: pointer; display: grid; place-items: center; border-radius: 9px; }
.au-reveal-btn:hover { color: var(--cd-ink); background: var(--cd-hover); }
.au-reveal-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-reveal-btn .icon-eye-off, .au-reveal-btn.revealed .icon-eye { display: none; }
.au-reveal-btn.revealed .icon-eye-off { display: block; }
.au-forgot { display: block; text-align: right; margin-top: .5rem; font-size: .84rem; font-weight: 500; color: var(--cd-primary); }
.au-forgot:hover { text-decoration: underline !important; }
.au-captcha { margin-bottom: 1.1rem; }

#cd-login-root .au-submit, #cd-login-root .au-register-submit {
  position: relative; overflow: hidden; width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--cd-btn-bg); color: #fff !important;
  font: 600 .95rem var(--cd-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 8px 20px -10px rgba(21,53,106,.7);
  transition: background .15s, transform .15s, box-shadow .25s;
}
#cd-login-root .au-submit:hover, #cd-login-root .au-register-submit:hover { background: var(--cd-btn-hover); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(21,53,106,.8); }
#cd-login-root .au-submit:active, #cd-login-root .au-register-submit:active { transform: scale(.98); }
#cd-login-root .au-submit:disabled { opacity: .75; cursor: wait; }
.au-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: au-spin .7s linear infinite; }
.au-submit.loading .au-spin { display: block; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-switch { margin: 1.5rem 0 0; text-align: center; color: var(--cd-muted); font-size: .9rem; }
.au-switch a { color: var(--cd-primary); font-weight: 600; }
.au-switch a:hover { text-decoration: underline !important; }
.au-form-inner .alert { border-radius: 12px; font-size: .9rem; margin-bottom: 1.1rem; }

/* ── Form daftar (membungkus markup WHMCS) ─ */
.au-register #registration { counter-reset: au-step; }
#cd-login-root .au-register .card.au-card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; margin-bottom: 0 !important; counter-increment: au-step; }
#cd-login-root .au-register .card.au-card + .card.au-card, #cd-login-root .au-register #containerNewUserSecurity .card.au-card { margin-top: .25rem; }
#cd-login-root .au-register .card.au-card .card-body { background: transparent !important; padding: 1.4rem 0 .6rem !important; border-top: 1px solid var(--cd-line); }
#cd-login-root .au-register #containerNewUserSignup > .card.au-card:first-of-type .card-body { border-top: 0; padding-top: 0 !important; }
.au-register h3.card-title { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; color: var(--cd-ink); }
.au-register h3.card-title::before { content: counter(au-step); width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--cd-primary-light); color: var(--cd-primary); font-size: .8rem; font-weight: 700; }
.au-register h3.card-title small { font-weight: 400; color: var(--cd-muted); }
.au-register .form-group { margin-bottom: 1rem; }
#cd-login-root #registration .prepend-icon { position: relative; display: block; }
#cd-login-root #registration .prepend-icon .field-icon { position: absolute; left: 0; top: 0; width: 44px; height: 46px; display: grid; place-items: center; margin: 0; color: var(--cd-faint); pointer-events: none; z-index: 2; }
#cd-login-root #registration .prepend-icon .field-icon i { font-size: .9rem; }
#cd-login-root #registration .field, #cd-login-root #registration .form-control { width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--cd-line-2); border-radius: 11px; background: var(--cd-surface); color: var(--cd-ink); font-size: .95rem; box-shadow: none; transition: border-color .15s, box-shadow .2s; }
#cd-login-root #registration select.field, #cd-login-root #registration select.form-control { padding-left: 42px; }
#cd-login-root #registration .form-group:not(.prepend-icon) .field, #cd-login-root #registration .form-group:not(.prepend-icon) .form-control { padding-left: 14px; }
#cd-login-root #registration .field:focus, #cd-login-root #registration .form-control:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 4px rgba(0,156,184,.16); outline: 0; }
.au-register .intl-tel-input, .au-register .iti { width: 100%; display: block; }
.au-register .iti input[type=tel], .au-register .intl-tel-input input[type=tel] { padding-left: 62px !important; }
.au-register .password-strength-meter .progress { height: 8px; border-radius: 99px; background: var(--cd-track); overflow: hidden; }
.au-register .password-strength-meter .progress-bar { border-radius: 99px; transition: width .35s ease; }
.au-register .btn.generate-password { width: 100%; height: 46px; border-radius: 11px; }
.au-register .form-check { display: flex; gap: .6rem; align-items: flex-start; color: var(--cd-muted); font-size: .88rem; }
.au-register .form-check-input { position: static; margin-top: .25rem; }
.au-register .au-submit-row { margin: 1.5rem 0 0; }
.au-register .field-help-text { font-size: .8rem; color: var(--cd-muted); }

/* ── Responsif ────────────────────────────── */
@media (max-width: 991.98px) {
  .au-wrap { grid-template-columns: 1fr; }
  .au-left { position: relative; height: auto; padding: 22px 20px 26px; gap: 1rem; }
  .au-left-body, .au-left-foot { display: none; }
  .au-logo img { height: 34px; }
  .au-right { padding: 0 20px 40px; }
  .au-form-inner { margin: 0; padding-top: .5rem; }
}
@media (max-width: 575.98px) { .au-register .col-sm-6 { flex: 0 0 100%; max-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .au-wrap * { animation: none !important; transition: none !important; }
}

/* Dark: kartu section tetap transparan, input ikut token */
[data-cd-theme="dark"] #cd-login-root .au-register .card.au-card, [data-cd-theme="dark"] #cd-login-root .au-register .card.au-card .card-body { background: transparent !important; }
[data-cd-theme="dark"] #cd-login-root #registration .field, [data-cd-theme="dark"] #cd-login-root #registration .form-control { background: var(--cd-surface) !important; color: var(--cd-ink) !important; border-color: var(--cd-line-2) !important; }

/* ── Lupa sandi: stepper, state sukses, input berikon ── */
.au-steps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; align-items: center; gap: .5rem; }
.au-steps li { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--cd-faint); flex: 1; position: relative; }
.au-steps li:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin-left: .5rem; border-radius: 2px; background: var(--cd-line-2); transition: background .4s; }
.au-steps li.is-done:not(:last-child)::after { background: var(--cd-brand); }
.au-steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cd-track); color: var(--cd-muted); font-size: .75rem; transition: background .3s, color .3s, transform .3s; }
.au-steps li.is-done span { background: var(--cd-primary-light); color: var(--cd-primary); }
.au-steps li.is-current { color: var(--cd-ink); }
.au-steps li.is-current span { background: var(--cd-btn-bg); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px rgba(0,156,184,.18); }

.au-input-wrap.au-has-icon .au-input-ico { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--cd-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#cd-login-root .au-input-wrap.au-has-icon .au-input { padding-left: 42px; }

.au-state { text-align: center; padding: 1rem 0; }
.au-state-ico { width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 22px; display: grid; place-items: center; background: var(--cd-primary-light); color: var(--cd-primary); animation: au-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.au-state-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.au-state-ok .au-state-ico { background: var(--cd-ok-bg); color: var(--cd-ok); }
.au-state .au-lead { margin-bottom: 1.5rem; }
@keyframes au-pop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
a.au-submit-link { text-decoration: none; }
.au-pwstrength .progress { height: 8px; border-radius: 99px; background: var(--cd-track); overflow: hidden; margin-bottom: .75rem !important; }
.au-pwstrength .alert { font-size: .8rem; }
.au-form-inner .alert { padding: .85rem 1.1rem; }

/* Cadangan ruang di sudut kanan-bawah agar badge reCAPTCHA (muncul melebar saat form
   difokuskan) tidak pernah menimpa tombol submit pada form pendek seperti login. */
.au-right { padding-bottom: 120px; }
@media (max-width: 991.98px) { .au-right { padding-bottom: 100px; } }

/* PENTING — jangan beri .au-form-inner animasi yang memakai `transform` (atau `translate`,
   `filter`, `will-change:transform`, dsb). Google menyisipkan badge reCAPTCHA ("protected by
   reCAPTCHA") sebagai elemen position:fixed di dalam tombol submit. Elemen manapun di antara
   badge itu dan <body> yang punya transform/animasi-transform yang AKTIF saat badge pertama
   kali disisipkan akan "menjebak" posisi fixed itu ke kotak elemen tersebut, bukan ke viewport —
   sehingga badge terlihat menimpa tombol alih-alih menempel rapi di pojok layar.
   Makanya .au-form-inner memakai fade opacity-only (au-rise-fade), BUKAN animasi au-rise biasa
   yang dipakai elemen lain (translateY) yang aman karena tidak membungkus badge reCAPTCHA. */
@keyframes au-rise-fade { from { opacity: 0; } to { opacity: 1; } }
.au-form-inner { animation: au-rise-fade .5s .1s ease-out both; }