/* ==========================================================================
   1. RESET & DASAR GLOBAL (RAMAH MOBILE)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    /* 1. UBAH: Menggunakan warna hitam pekat (#000000) sebagai dasar */
    background-color: #000000;
    background-size: 340px auto; 
    background-position: center top; 
    background-repeat: repeat; 
    background-attachment: fixed;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(85px + env(safe-area-inset-bottom)); 
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 2. UBAH: Gradasi disesuaikan agar menyatu sempurna dengan warna hitam (#000000) */
    background: radial-gradient(circle, rgba(12, 9, 4, 0.514) 0%, rgba(70, 53, 23, 0.377) 100%);
    z-index: 1;
    pointer-events: none;
    animation: breathingGlow 4s infinite ease-in-out;
}


/* ⚠️ TAMBAHKAN KELAS INI PADA PEMBUNGKUS UTAMA KONTEN ANDA */
.konten-utama {
    position: relative;
    z-index: 10; /* Berada di paling atas (layer 10) agar teks bisa diklik */
    width: 100%;
}

/* 👇 TAMBAHKAN CSS GELEMBUNG DI BAWAH INI */
.gelembung {
    position: absolute;
    bottom: -60px;
    background-color: rgba(255, 255, 255, 0.12); /* Semi transparan agar serasi dengan tema gelap */
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
    z-index: 2; /* Berada di layer 2 (di atas background gambar & overlay body::before) */
    pointer-events: none; 
    animation: naik linear infinite;
}

@keyframes breathingGlow {
    0% { opacity: 0.4; }
    50% { opacity: 0.85; filter: brightness(1.2); }
    100% { opacity: 0.4; }
}

/* Animasi untuk gelembung */
@keyframes naik {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-115vh) rotate(360deg);
        opacity: 0;
    }
}
/* --- Tambahan CSS untuk Efek Bokeh Emas & Bintang --- */

/* Wadah agar gelembung tidak merusak tata letak halaman */
.container-gelembung {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2; /* Di atas background, di bawah teks konten */
    pointer-events: none;
}

/* Gaya Gelembung Bokeh Emas */
.gelembung-bokeh {
    position: absolute;
    bottom: -150px;
    background: radial-gradient(circle, rgba(230, 185, 110, 0.4) 0%, rgba(200, 140, 60, 0.05) 70%, rgba(0,0,0,0) 100%);
    border-radius: 50%;
    filter: blur(3px); /* Memberikan efek blur lembut di tepi gelembung */
    pointer-events: none;
    animation: naikAtas linear infinite;
}

/* Gaya Kerlip Bintang (Sparkle) */
.bintang-kerlip {
    position: absolute;
    bottom: -50px;
    background: #ffffff;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(230, 185, 110, 0.8);
    pointer-events: none;
    animation: naikAtas linear infinite, berkedip 2s ease-in-out infinite;
}

/* Animasi Bergerak ke Atas */
@keyframes naikAtas {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-120vh) scale(1.2);
        opacity: 0;
    }
}

/* Animasi Bintang Berkedip */
@keyframes berkedip {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ==========================================================================
   2. KONTAINER UTAMA (VERSI LUXURY LUXE GOLD GLASSMORPHISM)
   ========================================================================== */
.container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    text-align: center;
    /* Membuat latar belakang transparan sedikit lebih hangat sewarna cokelat gelap VIP */
    background: rgba(15, 12, 10, 0.45); 
    /* 🌟 DIUBAH: Garis tepi abu-abu diganti dengan warna emas premium transparan */
    border: 1.5px solid rgba(255, 215, 0, 0.3); 
    border-radius: 30px;
    padding: 35px 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* 🌟 DIUBAH: Ditambahkan efek pendaran kilau cahaya emas (box-shadow berlapis) */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 
                0 0 25px rgba(206, 190, 144), 
                inset 0 0 20px rgba(0, 0, 0, 0.6);
    margin: auto 0;
}


/* Animasi Denyut Logo */
.logo-area img { max-width: 170px; height: auto; }
.pulse-logo { display: inline-block; animation: pulseEffect 2s infinite ease-in-out; transition: transform 0.3s ease; }
@keyframes pulseEffect {
    0% { transform: scale(1); filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3)); }
    50% { transform: scale(1.04); filter: drop-shadow(0 6px 16px rgba(206, 190, 144)); }
    100% { transform: scale(1); filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3)); }
}

.seo-title {
    font-size: 1.55rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, #aa956b 0%, #cebe90 50%, #aa956b 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    margin-bottom: 6px;
    
    /* 🌟 SOLUSI OUTSIDE STROKE HITAM PEKAT DENGAN GLOW EMAS 🌟 */
    /* 4 baris pertama membuat cetakan garis tepi hitam tebal 1.5px murni di LUAR teks */
    filter: drop-shadow(1.5px 1.5px 0px #000000) 
            drop-shadow(-1.5px -1.5px 0px #000000) 
            drop-shadow(1.5px -1.5px 0px #000000) 
            drop-shadow(-1.5px 1.5px 0px #000000)
            /* Baris terakhir memberikan pendaran bayangan cahaya emas lembut di belakang stroke */
            drop-shadow(0px 4px 12px rgba(206, 190, 144));
}

.subtitle { 
    font-size: 0.82rem; 
    /* 🌟 DIUBAH: Warna ungu diganti ke putih abu-abu netral agar sangat bersih dan kontras */
    color: #e2e8f0; 
    line-height: 1.5; 
    /* 🌟 DIUBAH: Jarak bawah dinaikkan dari 25px menjadi 45px agar posisi boks atas ke roda lebih lega */
    margin-bottom: 45px; 
    padding: 0 15px; 
}

/* ==========================================================================
   3. STRUKTUR LAYOUT RODA EMAS KUSTOM
   ========================================================================== */
/* Container Utama untuk menaruh .wheel-wrapper pas di tengah layar */
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Menggunakan tinggi penuh layar */
    background-color: #111; /* Contoh warna latar belakang gelap */
}

/* Kode Anda yang sudah disesuaikan agar item di dalamnya sinkron */
.wheel-wrapper {
    position: relative; 
    width: 100%; 
    max-width: 320px; 
    aspect-ratio: 1 / 1; 
    margin: 0 auto 28px auto;
}

canvas {
    /* Mengunci ukuran canvas agar pas di dalam lingkaran emas */
    width: 76%; 
    height: 76%; 
    
    /* Menggunakan persentase manual yang presisi untuk posisi tengah */
    position: absolute; 
    top: 12%; 
    left: 12%; 
    
    border-radius: 50%; 
    z-index: 3;
    
    /* Animasi putar dari JavaScript Anda */
    transition: transform 5s cubic-bezier(0.1, 0.8, 0.1, 1);
}

.wheel-frame-overlay {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 5; 
    object-fit: contain; 
    pointer-events: none; /* Agar klik mouse bisa menembus bingkai ke canvas */
    
    /* 🌟 TAMBAHKAN FILTER BAYANGAN 3D DI BAWAH INI 🌟 */
    /* Membuat bingkai emas terlihat timbul nyata dan memisahkan kedalamannya dari roda di belakangnya */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65)) 
            drop-shadow(0 0 10px rgba(255, 215, 0, 0.15));
}


/* Form Kontrol Input & Tombol */
.form-group { width: 100%; padding: 0 5px; }
input[type="text"] {
    width: 100%; padding: 14px 20px; font-size: 0.95rem; font-weight: 600; text-align: center;
    border-radius: 50px; border: 2px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.4);
    color: #ffffff; letter-spacing: 2px; outline: none;
}
.btn-spin {
    width: 100%; 
    padding: 14px; 
    margin-top: 14px; 
    font-size: 1.05rem; 
    font-weight: 900; 
    color: #0c081a;
    /* 🌟 DIUBAH: Gradasi dari Oranye Pekat diganti ke Emas Logam Champagne 3D */
    background: linear-gradient(135deg, #ffffff 0%, #e6d5a7 30%, #cebe90 70%, #aa956b 100%); 
    border: 1px solid #fff6d6; 
    border-radius: 50px; 
    cursor: pointer;
    text-transform: uppercase; 
    letter-spacing: 1px; 
    /* 🌟 DIUBAH: Shadow diganti dari warna oranye menjadi kilau emas lembut */
    box-shadow: 0 6px 20px rgba(206, 190, 144, 0.35);
    position: relative;
    overflow: hidden;
}
/* 🌟 ANIMASI KILATAN CAHAYA EMAS BERGERAK SECARA BERKALA 🌟 */
.btn-spin::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%; width: 30%; height: 200%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: rotate(30deg);
    animation: luxuryGlow 3.5s infinite ease-in-out;
}

@keyframes luxuryGlow {
    0% { left: -60%; }
    30% { left: 140%; }
    100% { left: 140%; }
}

.btn-spin:disabled { 
    background: #3d374d; 
    color: #6d6680; 
    box-shadow: none; 
    cursor: not-allowed; 
}
/* Memastikan animasi mati saat tombol sedang loading/disabled */
.btn-spin:disabled::after {
    display: none;
}


/* ==========================================================================
   4. OPTIMASI MENU FOOTER STICKY DENGAN EFEK NAIK-TURUN (WAVE GOLDEN THEME)
   ========================================================================== */
.pinned-footer {
    position: fixed; 
    bottom: 0; 
    /* 🌟 KUNCI POSISI DI TENGAH LAYAR 🌟 */
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    max-width: 440px; /* Diubah dari 480px menjadi 440px agar sama persis dengan lebar kontainer tengah */
    height: 68px; 
    background: rgba(10, 8, 6, 0.95); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border-top: 1.5px solid rgba(206, 190, 144); 
    border-radius: 20px 20px 0 0; /* Membuat sudut atas melengkung mewah */
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    z-index: 9999;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.85);
}


.footer-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    width: 25%; 
    height: 100%; 
}

.footer-custom-icon { 
    width: 32px; 
    height: 32px; 
    object-fit: contain; 
    margin-bottom: 5px; 
    /* 🌟 DIUBAH: Kecerahan dinaikkan dan ditambahkan efek pendaran cahaya neon emas lembut 🌟 */
    filter: brightness(110%) drop-shadow(0 2px 6px rgba(206, 190, 144));
    animation: floatEffect 3s infinite ease-in-out; 
}


/* Mempertahankan efek delay gelombang naik-turun Anda yang sudah sangat bagus */
.footer-item:nth-child(1) .footer-custom-icon { animation-delay: 0s; }
.footer-item:nth-child(2) .footer-custom-icon { animation-delay: 0.3s; }
.footer-item:nth-child(3) .footer-custom-icon { animation-delay: 0.6s; }
.footer-item:nth-child(4) .footer-custom-icon { animation-delay: 0.9s; }

.footer-text { 
    font-size: 0.72rem; 
    font-weight: 700; /* Dibuat sedikit lebih tebal agar teks kecil mudah dibaca di layar HP */
    color: #cbd5e1; /* 🌟 DIUBAH: Warna teks ungu abu-abu diganti ke warna putih abu-abu netral */
    letter-spacing: 0.3px; 
    transition: color 0.3s ease;
}

/* 🌟 INTERAKSI AKTIF: Saat menu disentuh/klik, teks berubah emas dan ikon menyala */
.footer-item:hover .footer-text, .footer-item:active .footer-text {
    color: #ffcc00; /* Teks otomatis berganti warna emas menyala */
}

.footer-item:active .footer-custom-icon, .footer-item:hover .footer-custom-icon { 
    /* Menggabungkan skala 1.1 dengan efek melayang animasi Anda */
    transform: scale(1.1) translateY(-4px); 
    filter: brightness(120%) drop-shadow(0 4px 10px rgba(255, 215, 0, 0.65)); 
}

@keyframes floatEffect { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-4px); } 
    100% { transform: translateY(0px); } 
}

/* ==========================================================================
   5. MODAL POP-UP DIALOG (REVISI PREMIUM ULTRA TRANSPARANT)
   ========================================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    /* FIX: Diganti transparan agar roda utama di belakang terlihat jelas */
    background: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); 
    display: flex; align-items: center; justify-content: center;
    z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 16px;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* OVERLAY PEMBUKA SELAMAT DATANG */
.welcome-overlay-transparant {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); 
    display: flex; align-items: center; justify-content: center;
    z-index: 110; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 16px;
}
.welcome-overlay-transparant.active { opacity: 1; visibility: visible; }

/* KOTAK KONTAINER CARD DIALOG */
.modal-card {
    background: #17102b; border: 2px solid #f39c12; border-radius: 20px; width: 100%; max-width: 360px;
    padding: 30px 20px; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9);
    transform: scale(0.8); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-card,
.welcome-overlay-transparant.active .modal-card { transform: scale(1); }

.modal-card h2 { font-size: 1.6rem; background: linear-gradient(45deg, #ffe066, #f39c12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; font-weight: 800; }

/* Kardus Dialog Pembuka */
.welcome-card { border-color: #cebe90; box-shadow: 0 20px 60px rgba(0,0,0,0.9); }
.welcome-card h2 { background: linear-gradient(45deg, #d7c486, #d7c486); -webkit-background-clip: text; }
.welcome-logo-area { margin: 15px 0; }
.welcome-text { font-size: 0.88rem; color: #d1cae6; line-height: 1.6; margin-bottom: 5px; }
.btn-welcome-start { background: linear-gradient(45deg, #cebe90, #a89864); color: #1c1c1c; margin-top: 20px; font-weight: 800; box-shadow: 0 6px 20px rgb(156, 153, 153); }

/* Komponen Hadiah Di Dalam Pop-up */
.prize-announcement { font-size: 1.35rem; font-weight: 800; color: #ffffff; margin: 16px 0; background: rgba(243, 156, 18, 0.08); padding: 12px; border-radius: 12px; border: 1px dashed rgba(243, 156, 18, 0.4); border-left: 5px solid #f39c12; }
.verification-code { font-size: 0.75rem; color: #8c81ad; background: rgba(0, 0, 0, 0.2); padding: 4px 10px; border-radius: 4px; display: inline-block; }

/* Tombol Klaim WhatsApp */
.btn-claim { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px; background: #d7c486; color: #ffffff; text-decoration: none; font-weight: 700; font-size: 0.95rem; border-radius: 50px; margin-top: 18px; }
.btn-claim svg { width: 20px; height: 20px; margin-right: 8px; fill: #ffffff; }

/* FIX TOMBOL OK PENUTUP DIALOG */
.modal-overlay .btn-spin {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: #fff;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.08);
}
.modal-overlay .btn-spin:hover {
    background: linear-gradient(135deg, #475569, #334155);
}
.logo-menang {
            width: 1.5em;
            height: 1.5em;
            vertical-align: middle;
            object-fit: contain;
        }
/* ==========================================================================
   7. LINTASAN BARU ROKET SILANG + GETARAN NYATA (AMAN DARI ASTRONOT)
   ========================================================================== */
.roket-melintas {
    position: fixed;
    /* Memulai titik jangkar dasar dari sudut kanan bawah layar */
    bottom: 0;
    right: 0;
    
    width: 140px; /* Ukuran roket proporsional */
    height: auto;
    z-index: 2; /* Di belakang kontainer roda utama */
    pointer-events: none;
            
    /* Menjalankan animasi lintasan silang (GPU) & animasi getaran mesin jet Anda */
    animation: roketMeluncurSilang 13s linear infinite,
               getaranMesinJetSilang 0.15s linear infinite;
}

/* ==========================================================================
   LOGIKA LINTASAN SILANG GPU (KANAN BAWAH KE KIRI ATAS)
   ========================================================================== */
@keyframes roketMeluncurSilang {
    0% {
        /* Mulai dari luar layar kanan bawah. 
           Dirotasi -125 deg agar moncong roket menghadap lurus ke kiri atas secara alami */
        transform: translate3d(200px, 200px, 0) rotate(-125deg) scale(0.75);
        opacity: 0;
    }
    10% {
        opacity: 0.45; /* Transparansi pas agar menyatu mewah di background hitam */
    }
    90% {
        opacity: 0.45;
    }
    100% {
        /* Terbang lurus menembus keluar layar bagian kiri atas */
        transform: translate3d(-115vw, -115vh, 0) rotate(-125deg) scale(1.05);
        opacity: 0;
    }
}
/* ==========================================================================
   🌟 TAHAP FINAL: EFEK CAHAYA TURUN PAS DI TENGAH INTI API SEBELAH KANAN 🌟
   ========================================================================== */
@keyframes getaranMesinJetSilang {
    0%, 100% {
        margin-bottom: 0px;
        margin-right: 0px;
        /* KUNCI: Y diturunkan ke 14px, X digeser ke kanan ke 30px */
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.7))
                drop-shadow(30px 14px 20px rgba(255, 221, 102, 0.7));
    }
    50% {
        /* Efek getaran mikro pada bodi roket */
        margin-bottom: -1px;
        margin-right: 1px;
        /* KUNCI: Saat mesin bergetar kencang, api memanjang lurus ke kanan (X=50px, Y=14px) */
        filter: drop-shadow(0 12px 15px rgba(0, 0, 0, 0.7))
                drop-shadow(50px 14px 35px rgba(243, 156, 18, 0.9));
    }
}

/* ==========================================================================
   8. EFEK KOIN BINTANG BERLAPIS GELEMBUG & BERPUTAR 3D
   ========================================================================== */
/* Lapisan luar berbentuk gelembung sabun putih transparan mengkilap */
.koin-gelembung {
    position: absolute;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    
    /* Membuat garis tepi gelembung sabun putih yang mengkilap */
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3), 
                0 0 15px rgba(255, 255, 255, 0.1);
                
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px; /* Memberikan jarak pembatas antara koin dengan gelembung luarnya */
    pointer-events: none;
    
    /* Menggunakan animasi bawaan 'naikAtas' milik Anda agar melayang ke atas */
    animation: naikAtas linear infinite;
    
    /* Mengaktifkan mode rendering 3D di dalam gelembung */
    perspective: 1000px; 
}

/* Gambar koin di dalam gelembung yang dipaksa berputar 3D secara konstan */
.koin-putar-dalam {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Efek bayangan tipis mengikuti bentuk koin bintang */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    
    /* Menjalankan animasi putaran koin secara horizontal */
    animation: putarKoinY 3s linear infinite;
}

/* --- ANIMASI BERPUTAR 3D HORIZONTAL (Y-AXIS) --- */
@keyframes putarKoinY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
/* ==========================================================================
   9. FIX TOTAL: REVISI SPACEMAN UKURAN JUMBO PREMIUM (ANTI-KOTAK & SMOOTH)
   ========================================================================== */
.spaceman-container {
    position: fixed;
    /* Titik jangkar dasar dimulai dari sudut kiri bawah layar */
    bottom: 0;
    left: 0;
    
    /* 🌟 DIUBAH: Ukuran diperbesar dari 200px menjadi 280px agar terlihat megah 🌟 */
    width: 280px; 
    height: auto;
    z-index: 2; 
    pointer-events: none; 
    
    /* drop-shadow tetap mengunci lekukan tubuh alami astronot secara presisi tanpa kotak hitam */
    filter: drop-shadow(0 0 15px rgba(230, 185, 110, 0.45))
            drop-shadow(-35px 25px 20px rgba(0, 0, 0, 0.65))
            drop-shadow(-60px 45px 35px rgba(206, 190, 144, 0.15));
            
    /* Menjalankan lintasan mulus berbasis akselerasi kartu grafis GPU */
    animation: spacemanMeluncurAkselerasiJumbo 14s linear infinite;
}

.spaceman-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.astronot-gambar-utuh {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   LOGIKA LINTASAN TRANSLATE3D TERKALIBRASI UNTUK UKURAN BESAR
   ========================================================================== */
@keyframes spacemanMeluncurAkselerasiJumbo {
    0% {
        /* 🌟 DIUBAH: Mundur ke -340px agar bodi besar tidak muncul mengagetkan di awal 🌟 */
        transform: translate3d(-340px, 340px, 0) rotate(14deg) scale(0.85);
        opacity: 0;
    }
    8% {
        opacity: 0.65; /* Transparansi pas agar menyatu mewah dengan background gelap */
    }
    92% {
        opacity: 0.65;
    }
    100% {
        /* Terbang lurus menanjak menembus keluar layar kanan atas secara total */
        transform: translate3d(120vw, -120vh, 0) rotate(14deg) scale(1.05);
        opacity: 0;
    }
}