/*
 * assets/css/auth.css
 * Halaman login / lupa password / atur password / error. Dua kolom di PC (panggung "Gerbang start" + form),
 * satu kolom di HP (panggung ringkas di atas form). Gerak & interaksi: assets/js/auth-gerak.js.
 */
.rd-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--rd-bg); }

/* =====================================================================
   PANGGUNG "GERBANG START" (kiri di PC, pita ringkas di HP)
   Warna hanya dari token theme.css. --rd-tx/--rd-ty (pointer, -1..1) dan --rd-energi (0..1, naik saat mengetik)
   diisi auth-gerak.js; tanpa JS nilainya 0 dan skater tetap meliuk lewat SVG.
   ===================================================================== */
.rd-auth-panggung {
    --rd-tx: 0; --rd-ty: 0; --rd-energi: 0;
    position: relative; overflow: hidden; isolation: isolate; background: var(--rd-navy); color: var(--rd-navy-teks);
    padding: 2.5rem clamp(2rem, 4vw, 3.5rem) 2.25rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: 100vh;
}
.rd-auth-aura, .rd-auth-aura::before { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.rd-auth-aura { width: 40rem; height: 40rem; right: -16rem; top: -14rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-aksen) 26%, transparent), transparent 70%); animation: rd-auth-napas 9s ease-in-out infinite alternate; }
.rd-auth-aura::before { content: ""; width: 34rem; height: 34rem; left: -26rem; top: 38rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-langit) 22%, transparent), transparent 70%); animation: rd-auth-napas 12s ease-in-out infinite alternate-reverse; }
@keyframes rd-auth-napas { to { transform: translate(-3rem, 2rem) scale(1.1); } }
.rd-auth-kisi {
    position: absolute; inset: -5%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--rd-navy-teks) 6%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--rd-navy-teks) 6%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 60% at 50% 70%, black, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 70%, black, transparent 75%);
    transform: translate3d(calc(var(--rd-tx) * -12px), calc(var(--rd-ty) * -10px), 0); transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.rd-auth-angin { position: absolute; inset: -10%; z-index: -1; transform: rotate(-7deg); pointer-events: none; }
.rd-auth-angin i { position: absolute; left: 0; height: 2px; width: 30%; opacity: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rd-navy-teks) 55%, transparent), transparent); animation: rd-auth-angin 5s cubic-bezier(.5, 0, .3, 1) infinite; }
.rd-auth-angin i:nth-child(1) { top: 18%; animation-delay: .3s; }
.rd-auth-angin i:nth-child(2) { top: 41%; width: 20%; animation-delay: 1.8s; background: linear-gradient(90deg, transparent, var(--rd-aksen), transparent); }
.rd-auth-angin i:nth-child(3) { top: 63%; animation-delay: 3.2s; }
.rd-auth-angin i:nth-child(4) { top: 86%; width: 22%; animation-delay: 2.4s; background: linear-gradient(90deg, transparent, var(--rd-langit), transparent); }
@keyframes rd-auth-angin { 0% { opacity: 0; transform: translateX(-100%); } 12% { opacity: 1; } 60% { opacity: .6; } 80%, 100% { opacity: 0; transform: translateX(400%); } }

.rd-auth-panggung .rd-logo { color: var(--rd-navy-teks); position: relative; align-self: flex-start; animation: rd-auth-masuk .6s both; }
.rd-auth-kutip { position: relative; max-width: 30rem; margin-top: auto; }
.rd-auth-kicker { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem; border-radius: 999px; background: var(--rd-navy-2); border: 1px solid var(--rd-navy-garis); color: var(--rd-langit); font-size: .8rem; font-weight: 600; animation: rd-auth-masuk .6s .1s both; }
.rd-auth-denyut { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rd-aksen); }
.rd-auth-denyut::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rd-aksen); animation: rd-auth-denyut 1.8s ease-out infinite; }
@keyframes rd-auth-denyut { to { transform: scale(3); opacity: 0; } }
.rd-auth-kutip p { font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.06; margin: .9rem 0 .7rem; }
.rd-auth-kutip-sub { color: var(--rd-navy-redup); font-size: .9rem; animation: rd-auth-masuk .7s .7s both; }
@keyframes rd-auth-masuk { from { opacity: 0; transform: translateY(24px); } }
/* Judul per huruf (auth-gerak.js) */
.rd-huruf-kata { display: inline-block; white-space: nowrap; }
.rd-huruf-h { display: inline-block; }
.is-pecah .rd-huruf-h { animation: rd-auth-huruf .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i) * 28ms); }
@keyframes rd-auth-huruf { from { opacity: 0; transform: translateX(.7em) skewX(-24deg) scaleX(1.35); } 55% { opacity: 1; } }

/* Arena: HUD + lantai slalom */
.rd-auth-arena { position: relative; transform: translate3d(calc(var(--rd-tx) * 10px), calc(var(--rd-ty) * 6px), 0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); animation: rd-auth-masuk .9s .35s cubic-bezier(.2, .8, .2, 1) both; }
.rd-auth-hud {
    position: relative; z-index: 2; width: max-content; min-width: 13.5rem; margin: 0 0 -1.5rem auto; padding: .8rem 1rem .85rem; border-radius: 1rem;
    background: color-mix(in srgb, var(--rd-navy-2) 88%, transparent); border: 1px solid var(--rd-navy-garis); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px); transform: rotate(-2deg); animation: rd-auth-hud-apung 5s ease-in-out infinite alternate;
}
@keyframes rd-auth-hud-apung { to { transform: rotate(-1deg) translateY(-6px); } }
.rd-auth-hud-atas { display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--rd-navy-redup); }
.rd-auth-hud-status { color: var(--rd-langit); }
.rd-auth-hud.is-finish .rd-auth-hud-status { color: var(--rd-aksen); }
.rd-auth-hud-waktu { display: flex; align-items: baseline; gap: .35rem; }
.rd-auth-hud-waktu b { font-size: 2.3rem; font-weight: 700; font-style: italic; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rd-auth-hud.is-finish .rd-auth-hud-waktu b { color: var(--rd-aksen); animation: rd-auth-kedip .5s ease-out; }
@keyframes rd-auth-kedip { from { transform: scale(1.12); } }
.rd-auth-hud-waktu small { color: var(--rd-navy-redup); font-size: .75rem; }
.rd-auth-hud-bar { height: 4px; border-radius: 4px; background: var(--rd-navy-garis); overflow: hidden; margin-top: .3rem; }
.rd-auth-hud-bar span { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rd-langit), var(--rd-aksen)); transform-origin: left; transform: scaleX(0); }

.rd-auth-lantai { position: relative; perspective: 900px; }
.rd-auth-lintasan { display: block; width: 100%; height: auto; overflow: visible; transform: rotateX(40deg) rotateZ(-3deg); transform-origin: 50% 70%; }
.rd-auth-lajur { fill: var(--rd-navy-2); stroke: var(--rd-navy-garis); stroke-width: 2; }
.rd-auth-sumbu { stroke: color-mix(in srgb, var(--rd-navy-teks) 14%, transparent); stroke-width: 2; stroke-dasharray: 16 14; }
.rd-auth-jejak { fill: none; stroke: color-mix(in srgb, var(--rd-navy-teks) 14%, transparent); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.rd-auth-jalur-alir {
    fill: none; stroke: var(--rd-aksen); stroke-linecap: round; stroke-width: calc(3px + var(--rd-energi) * 3px);
    stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: calc(.45 + var(--rd-energi) * .5);
    animation: rd-auth-gores 2.2s .6s cubic-bezier(.6, 0, .2, 1) forwards;
}
@keyframes rd-auth-gores { to { stroke-dashoffset: 0; } }
.rd-auth-cone-badan { fill: var(--rd-aksen); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s var(--rd-pegas); }
.rd-auth-cone--langit { fill: var(--rd-langit); }
.rd-auth-cone-cincin { fill: none; stroke: var(--rd-aksen); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rd-auth-cone.is-kena .rd-auth-cone-badan { animation: rd-auth-cone-kena .5s cubic-bezier(.34, 1.6, .64, 1); }
.rd-auth-cone.is-kena .rd-auth-cone-cincin { animation: rd-auth-cincin .7s ease-out; }
@keyframes rd-auth-cone-kena { 40% { transform: scale(1.35) rotate(-12deg); } }
@keyframes rd-auth-cincin { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(2.2); } }
.rd-auth-panggung.is-fokus .rd-auth-cone-badan { filter: drop-shadow(0 0 6px var(--rd-aksen)); }
.rd-auth-finish-petak { fill: url(#rd-auth-petak); }
.rd-auth-petak-a { fill: var(--rd-navy-teks); }
.rd-auth-petak-b { fill: var(--rd-navy); }
.rd-auth-sensor { fill: var(--rd-navy-garis); transition: fill .15s ease; }
.rd-auth-panggung.is-finish .rd-auth-sensor { fill: var(--rd-aksen); filter: drop-shadow(0 0 6px var(--rd-aksen)); }
.rd-auth-skater-cahaya { fill: var(--rd-aksen); opacity: calc(.2 + var(--rd-energi) * .3); }
.rd-auth-skater-ekor { fill: var(--rd-aksen); }
.rd-auth-skater-titik { fill: var(--rd-navy-teks); stroke: var(--rd-aksen); stroke-width: 4; }
.rd-auth-kilat { position: absolute; right: 9%; top: -20%; bottom: -20%; width: 30%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-aksen) 45%, transparent), transparent); }
.rd-auth-panggung.is-finish .rd-auth-kilat { animation: rd-auth-kilat .7s ease-out; }
@keyframes rd-auth-kilat { 15% { opacity: 1; transform: scale(1.1); } to { opacity: 0; transform: scale(.7); } }

.rd-auth-chip-wadah { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; }
.rd-auth-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: var(--rd-navy-2); border: 1px solid var(--rd-navy-garis); font-size: .85rem; font-weight: 500;
    animation: rd-auth-masuk .7s cubic-bezier(.2, .8, .2, 1) both, rd-auth-apung 4s ease-in-out infinite alternate; animation-delay: calc(.9s + var(--rd-urut) * .15s), calc(var(--rd-urut) * -1.3s); }
.rd-auth-chip i { color: var(--rd-aksen); }
@keyframes rd-auth-apung { to { transform: translateY(-6px); } }
@keyframes rd-auth-cone { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(-7px) rotate(-10deg); } }
.rd-auth-panggung.is-jeda *, .rd-auth-panggung.is-jeda *::before, .rd-auth-panggung.is-jeda *::after { animation-play-state: paused !important; }

/* Kolom form */
.rd-auth-isi { display: flex; flex-direction: column; padding: 1.5rem clamp(1rem, 5vw, 4rem) 2.5rem; }
.rd-auth-atas { display: flex; align-items: center; gap: 1rem; }
.rd-auth-logo-hp { display: none; }
.rd-auth-kembali { color: var(--rd-teks-redup); font-size: .9rem; font-weight: 500; display: inline-flex; gap: .5rem; align-items: center; margin-right: auto; }
.rd-auth-kembali:hover { color: var(--rd-teks); }
.rd-auth-kembali i { transition: transform var(--rd-transisi); }
.rd-auth-kembali:hover i { transform: translateX(-3px); }
.rd-auth-form { width: 100%; max-width: 26rem; margin: auto; padding: 2rem 0; animation: rd-auth-masuk .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
.rd-auth-hakcipta { margin: 0; text-align: center; color: var(--rd-teks-redup); font-size: .75rem; }
.rd-auth-pesan { display: flex; gap: .65rem; padding: .8rem 1rem; border-radius: 1rem; margin-bottom: 1.25rem; font-size: .88rem; background: var(--rd-info-bg); color: var(--rd-info-teks); animation: rd-auth-masuk .5s both; }
.rd-auth-pesan i { margin-top: .15rem; }
.rd-auth-pesan-galat { background: var(--rd-bahaya-bg); color: var(--rd-bahaya-teks); }
.rd-auth-pesan-sukses { background: var(--rd-sukses-bg); color: var(--rd-sukses-teks); }
.rd-auth-akun { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 1rem; border: 1px solid var(--rd-garis); margin-bottom: 1.25rem; }
.rd-auth-akun .rd-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rd-aksen); color: var(--rd-aksen-teks); font-weight: 700; flex: none; }
.rd-auth-akun small { display: block; color: var(--rd-teks-redup); }
.rd-pilih-channel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.25rem; }
.rd-pilih-channel label { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border-radius: 1rem; border: 1px solid var(--rd-garis); cursor: pointer; transition: border-color var(--rd-transisi), background-color var(--rd-transisi); }
.rd-pilih-channel input { position: absolute; opacity: 0; }
.rd-pilih-channel label:has(input:checked) { border-color: var(--rd-aksen); background: var(--rd-aksen-lembut); color: var(--rd-aksen-tua); }
.rd-pilih-channel label:has(input:focus-visible) { outline: 3px solid var(--rd-aksen); outline-offset: 2px; }
.rd-pilih-channel strong { font-size: .92rem; }
.rd-pilih-channel small { color: var(--rd-teks-redup); font-size: .78rem; overflow-wrap: anywhere; }
.rd-input-otp { text-align: center; font-family: var(--rd-mono); font-size: 1.6rem; letter-spacing: .5em; padding-left: 1.75rem !important; }
.rd-auth-tautan-bawah { margin-top: 1.25rem; text-align: center; font-size: .9rem; }

/* Form: garis kecepatan di bawah kolom saat fokus, peringatan Caps Lock, tombol "meluncur" saat dikirim */
.rd-auth-kolom .rd-input-ikon::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rd-langit), var(--rd-aksen)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.rd-auth-kolom .rd-input-ikon:focus-within::after { transform: scaleX(1); }
.rd-input-ikon:focus-within > i { animation: rd-auth-cone .6s ease-out; }
.rd-capslock { display: flex; align-items: center; gap: .4rem; color: var(--rd-peringatan-teks); font-size: .8rem; font-weight: 600; padding: .3rem 0 0 1rem; animation: rd-auth-masuk .3s both; }
.rd-auth-form .rd-btn-aksen { position: relative; overflow: hidden; }
.rd-auth-form .rd-btn-aksen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); opacity: 0; }
.rd-auth-form .rd-btn-aksen:hover::after { animation: rd-auth-sapu .7s ease-out; }
.rd-auth-form .rd-btn-aksen.is-meluncur::after { animation: rd-auth-sapu .55s ease-in infinite; }
@keyframes rd-auth-sapu { 0% { left: -40%; opacity: 1; } 100% { left: 110%; opacity: 1; } }
.rd-auth-form h1.is-pecah { overflow: visible; }

/* Halaman error */
.rd-error-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; background: var(--rd-aksen-lembut); color: var(--rd-aksen-tua); font-size: .82rem; font-weight: 600; margin: 0 0 1rem; }
.rd-error-kode { font-size: clamp(5rem, 14vw, 8rem); line-height: .9; margin: 0 0 .75rem; color: var(--rd-teks); }
.rd-error-pesan { color: var(--rd-teks-redup); font-size: 1.05rem; margin: 0 0 1.25rem; }
.rd-error-cone { display: flex; gap: 1.25rem; margin: 0 0 1.75rem; }
.rd-error-cone span { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 18px solid var(--rd-aksen); animation: rd-auth-cone 3.2s ease-in-out infinite; }
.rd-error-cone span:nth-child(2) { border-bottom-color: var(--rd-langit); animation-delay: .2s; }
.rd-error-cone span:nth-child(3) { animation-delay: .4s; }
.rd-auth-form h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin: 0 0 .5rem; }
.rd-auth-sub { color: var(--rd-teks-redup); margin: 0 0 1.75rem; }
.rd-auth-kolom { margin-bottom: 1.1rem; }
.rd-input-ikon { position: relative; }
.rd-input-ikon > i { position: absolute; left: 1.2rem; top: 50%; translate: 0 -50%; color: var(--rd-teks-redup); font-size: .9rem; transition: color var(--rd-transisi); }
.rd-input-ikon .rd-input { padding-left: 2.9rem; }
.rd-input-ikon:focus-within > i { color: var(--rd-aksen); }
.rd-intip { position: absolute; right: .35rem; top: 50%; translate: 0 -50%; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--rd-teks-redup); }
.rd-intip:hover { background: var(--rd-permukaan-2); color: var(--rd-teks); }
.rd-input.is-galat { border-color: var(--rd-bahaya-teks); animation: rd-goyang-input .4s; }
@keyframes rd-goyang-input { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.rd-galat { color: var(--rd-bahaya-teks); font-size: .82rem; min-height: 1.2rem; padding: .25rem 0 0 1rem; }
.rd-tautan-kecil { font-size: .85rem; font-weight: 600; }

/* Sakelar "Ingat saya" */
.rd-sakelar { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 1.5rem; cursor: pointer; font-size: .92rem; }
.rd-sakelar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-sakelar-jalur { flex: none; position: relative; width: 2.75rem; height: 1.6rem; border-radius: 999px; background: var(--rd-garis); transition: background-color .25s ease; }
.rd-sakelar-jalur::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--rd-permukaan); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .35s var(--rd-pegas); }
.rd-sakelar input:checked + .rd-sakelar-jalur { background: var(--rd-aksen); }
.rd-sakelar input:checked + .rd-sakelar-jalur::after { transform: translateX(1.15rem); }
.rd-sakelar input:focus-visible + .rd-sakelar-jalur { outline: 3px solid var(--rd-aksen); outline-offset: 2px; }
.rd-btn-besar { min-height: 3.25rem; font-size: 1rem; }
.rd-auth-catatan { display: flex; gap: .55rem; color: var(--rd-teks-redup); font-size: .82rem; margin: 1.25rem 0 0; }

@media (max-width: 991.98px) {
    .rd-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .rd-auth-panggung { min-height: 0; padding: 1rem 1rem 1.25rem; gap: 0; border-radius: 0 0 1.75rem 1.75rem; }
    .rd-auth-panggung > .rd-logo, .rd-auth-kutip, .rd-auth-chip-wadah { display: none; }
    .rd-auth-hud { min-width: 0; padding: .55rem .8rem .6rem; margin-bottom: -1.1rem; }
    .rd-auth-hud-waktu b { font-size: 1.7rem; }
    .rd-auth-lintasan { transform: rotateX(42deg) rotateZ(-3deg); }
    .rd-auth-logo-hp { display: inline-flex; }
    .rd-auth-kembali { display: none; }
    .rd-auth-atas { justify-content: space-between; }
    .rd-auth-form { margin-top: 1.25rem; }
}
}