/**
 * Hiasan botol & bunga NOVA untuk halaman Masuk dan Daftar.
 *
 * ‼️ Berkas CSS TERPISAH, bukan <style> di dalam tiap halaman: kedua halaman
 * memakai hiasan yang sama persis, hanya beda sisi. Menyalinnya dua kali
 * berarti besok salah satunya diperbaiki dan yang lain tertinggal diam-diam.
 *
 * ‼️ Gambarnya (hero-botol, bunga-1/2, daun-1, kelopak-1/2) SUDAH tembus
 * pandang dari sananya — sama seperti di beranda. Jangan sekali-kali
 * menambahkan `mix-blend-mode` di sini: latar halaman Masuk/Daftar
 * bergradasi peach→lavender, dan multiply akan mengotori warnanya.
 *
 * ‼️ Seluruh animasi hanya memakai `transform`/`opacity` supaya ditangani
 * GPU, dan seluruhnya dimatikan bila pengguna meminta gerakan dikurangi.
 */

.auth-panggung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 80px);
    min-height: 100vh;
    min-height: 100svh;
    padding: 40px 16px;
}

.auth-isi { width: 100%; max-width: 26rem; flex-shrink: 0; }

/* ---------------------------------------------------------------- HIASAN */
/*
 * ‼️ DIPERBESAR & DIRAPATKAN (10 Agu 2026, permintaan owner).
 *
 * Versi sebelumnya: panggung 34vw, botol 46%, bunga menjorok jauh keluar
 * (right: -6% / -8%) sehingga komposisinya terasa kecil dan berpencar.
 * Sekarang panggungnya lebih lebar, botolnya lebih besar, dan bunganya
 * ditarik MASUK sampai menempel/menimpa botol — satu rangkaian utuh,
 * bukan tiga benda yang kebetulan berdekatan.
 */
.auth-hiasan {
    position: relative;
    flex: 0 1 clamp(380px, 44vw, 640px);
    aspect-ratio: 3 / 4;
    max-height: 86vh;
    pointer-events: none;
}

/*
 * ‼️ Disembunyikan di layar sempit — BUKAN sekadar diperkecil.
 * Di HP, hiasan ini hanya mendorong formulir turun dan menambah ±250 KB
 * gambar pada halaman yang justru paling butuh cepat terbuka.
 */
@media (max-width: 1023px) {
    .auth-hiasan { display: none; }
}

.auth-hiasan img { position: absolute; height: auto; display: block; will-change: transform; }

/* Cahaya lembut di belakang botol. */
.auth-hiasan::before {
    content: '';
    position: absolute; inset: 8% 2% 6%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 72%);
    animation: auth-bernapas 9s ease-in-out infinite;
}

.hiasan-botol {
    z-index: 5;
    width: 58%;
    left: 20%;
    top: 13%;
    filter: drop-shadow(0 36px 46px rgba(20, 17, 13, .3));
    animation: auth-melayang 8s ease-in-out infinite;
}

/* Bunga menempel ke botol — bukan menjorok keluar panggung. */
.hiasan-bunga-1 { z-index: 2; width: 60%; right: 1%;  top: 1%;    animation: auth-bunga-a 10s ease-in-out infinite; }
.hiasan-bunga-2 { z-index: 6; width: 56%; right: -1%; bottom: 7%; animation: auth-bunga-b 12s ease-in-out infinite; }
.hiasan-daun    { z-index: 2; width: 37%; left: 1%;   top: 21%;   animation: auth-daun 9s ease-in-out infinite; }

.hiasan-kelopak-1 { z-index: 7; width: 12%; left: 15%; top: 8%;     animation: auth-kelopak-a 13s ease-in-out infinite; }
.hiasan-kelopak-2 { z-index: 7; width: 10%; left: 9%;  bottom: 22%; animation: auth-kelopak-b 15s ease-in-out infinite; animation-delay: -4s; }

/* ---------- Sisi: Masuk = hiasan KIRI, Daftar = hiasan KANAN ---------- */
.auth-panggung.hiasan-kiri { flex-direction: row; }
.auth-panggung.hiasan-kanan { flex-direction: row-reverse; }

/* ------------------------------------------------------------ KEYFRAMES */
@keyframes auth-melayang {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    30%      { transform: translate3d(0, -9px, 0) rotate(.7deg); }
    62%      { transform: translate3d(0, -14px, 0) rotate(-.6deg); }
}
@keyframes auth-bernapas {
    0%, 100% { transform: scale(1); opacity: .95; }
    50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes auth-bunga-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%      { transform: translate3d(-5px, -10px, 0) rotate(1.6deg) scale(1.015); }
}
@keyframes auth-bunga-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%      { transform: translate3d(6px, -8px, 0) rotate(-1.9deg) scale(1.02); }
}
@keyframes auth-daun {
    0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 0); }
    50%      { transform: rotate(2.4deg) translate3d(0, -6px, 0); }
}
@keyframes auth-kelopak-a {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .25; }
    25%  { opacity: .85; }
    50%  { transform: translate3d(-14px, -28px, 0) rotate(26deg); opacity: .7; }
    100% { transform: translate3d(4px, -58px, 0) rotate(56deg); opacity: 0; }
}
@keyframes auth-kelopak-b {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .2; }
    30%  { opacity: .75; }
    50%  { transform: translate3d(13px, -24px, 0) rotate(-22deg); opacity: .6; }
    100% { transform: translate3d(-6px, -54px, 0) rotate(-50deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-hiasan *,
    .auth-hiasan::before {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}