:root { --primary: #00f2ff; --secondary: #eb00ff; --dark: #050505; --tiktok: #ff0050; --online: #2ecc71; --gold: #ffd700; --gold-dark: #b8860b; }
body { background-color: var(--dark); color: white; font-family: 'Rajdhani', sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; margin: 0; }
.bg-animated { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #1a0b2e 0%, #000000 90%); z-index: -2; }

/* PORTAL & BUTTONS */
#landing-portal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050505 0%, #1a0b2e 100%); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; transition: opacity 0.5s ease; }
.portal-container { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px 30px; border-radius: 30px; backdrop-filter: blur(20px); box-shadow: 0 0 50px rgba(0,0,0,0.5); width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.portal-logo { font-family: 'Orbitron'; font-size: 2.8rem; font-weight: 900; letter-spacing: 3px; background: linear-gradient(to right, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; filter: drop-shadow(0 0 15px var(--primary)); }
.portal-btn { width: 100%; padding: 16px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.4); color: white; font-family: 'Orbitron'; letter-spacing: 2px; border-radius: 12px; cursor: pointer; transition: 0.3s; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.portal-btn:hover { background: var(--primary); color: black; box-shadow: 0 0 20px var(--primary); }
.portal-btn.idol-mode { border-color: rgba(235, 0, 255, 0.4); color: var(--secondary); }

/* MAIN UI */
#main-app { display: none; height: 100%; flex-direction: column; }
.top-bar { text-align: center; padding: 15px 0; z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; }
h1.mega-title { font-family: 'Orbitron'; font-size: 1.8rem; background: linear-gradient(to right, #fff, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; margin: 0; }
.logout-portal-btn { position: absolute; left: 20px; top: 18px; color: rgba(255,255,255,0.5); font-size: 1.2rem; cursor: pointer; z-index: 20; transition: 0.3s; }
.nav-tabs-custom { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; /* Jarak dikecilkan agar tidak nabrak pinggir */
    margin-top: 15px; 
    flex-wrap: wrap; /* Kalau layar HP terlalu kecil, otomatis turun ke baris bawah dengan rapi */
    padding: 0 10px;
}
.tab-link { 
    color: #666; 
    text-decoration: none; 
    font-family: 'Orbitron'; 
    font-size: 0.65rem; /* Font dikecilkan sedikit */
    letter-spacing: 1px; /* Jarak antar huruf dirapatkan */
    cursor: pointer; 
    padding-bottom: 6px; 
    border-bottom: 3px solid transparent; 
    transition: 0.3s; 
}
.tiktok-official-btn { 
    background: black; 
    border: 1px solid var(--tiktok); 
    color: white; 
    padding: 4px 10px; /* Tombol dikecilkan sedikit */
    border-radius: 20px; 
    font-size: 0.6rem; 
    font-family: 'Orbitron'; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    cursor: pointer; 
    box-shadow: 0 0 10px rgba(255, 0, 80, 0.4); 
}

/* ANIMASI GIFT HEBOH */
#gift-anim-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30000; overflow: hidden; }
.falling-rose { position: absolute; font-size: 3rem; animation: fall-down 3s linear forwards; filter: drop-shadow(0 0 5px red); }
@keyframes fall-down { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } }
.drift-car { position: absolute; bottom: 20%; left: -200px; font-size: 8rem; animation: car-pass 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; filter: drop-shadow(0 10px 20px rgba(0,242,255,0.5)); }
@keyframes car-pass { 0% { transform: translateX(0) skewX(10deg); } 50% { transform: translateX(60vw) skewX(-10deg) scale(1.2); } 100% { transform: translateX(120vw) skewX(0deg); } }
.shake-screen { animation: shake-hard 0.5s ease-in-out; }
@keyframes shake-hard { 0%, 100% { transform: translate(0,0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-5px, -5px); } 20%, 40%, 60%, 80% { transform: translate(5px, 5px); } }
.supernova-flash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; animation: flash-bang 0.5s ease-out forwards; z-index: 30001; }
.giant-planet { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 15rem; animation: planet-explode 2s ease-out forwards; filter: drop-shadow(0 0 50px var(--gold)); z-index: 30002; }
@keyframes flash-bang { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes planet-explode { 0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2) rotate(360deg); opacity: 0; } }

/* --- CARDS & FRAME --- */
#member-view { height: calc(100vh - 180px); margin-top: 10px; display: flex; justify-content: center; align-items: center; }
.swiper { width: 280px; height: 430px; } /* Dikecilkan sedikit agar UI bernapas */

/* Optimasi Frame: Menghapus box-shadow animation yang bikin LAG */
.luxury-frame { 
    border: 3px solid var(--gold) !important; 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); 
    z-index: 10; 
    position: relative;
}
/* Pakai pseudo-element untuk animasi glow (Sangat ringan di GPU HP) */
.luxury-frame::after {
    content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    animation: pulse-glow 2s infinite alternate;
}
@keyframes pulse-glow { 0% { opacity: 0.5; } 100% { opacity: 1; } }

.luxury-frame::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to bottom right, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%); animation: shine-rotate 5s infinite linear; pointer-events: none; }
@keyframes shine-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.crown-badge { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 3rem; z-index: 100; color: var(--gold); filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)); animation: crown-float 2s infinite ease-in-out; }
@keyframes crown-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }

.flip-card { width: 100%; height: 100%; perspective: 1000px; }
.flip-card-inner { 
    position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    transform-style: preserve-3d; border-radius: 20px;
    will-change: transform; /* Ini kunci utama anti-lag di HP */
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
.luxury-frame .flip-card-front { border: none; inset: 0; width: 100%; height: 100%; }
.flip-card-front { background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; }

.front-gradient { background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.4) 60%, transparent); padding: 25px 20px 20px 20px; text-align: left; }
.front-name { font-family: 'Orbitron'; font-size: 1.6rem; margin: 0; }
.flip-card-back { background: rgba(10, 10, 20, 0.98); transform: rotateY(180deg); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.data-row { display: flex; justify-content: space-between; width: 100%; margin-bottom: 8px; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 3px; }
.chat-btn-big { flex: 2; background: linear-gradient(90deg, var(--secondary), var(--primary)); border: none; padding: 10px; border-radius: 50px; font-weight: bold; font-family: 'Orbitron'; font-size: 0.8rem; color: black; box-shadow: 0 0 10px rgba(0, 242, 255, 0.3); }

/* --- EFEK HOLOGRAM GYROSCOPE --- */
.holo-glare {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 215, 0, 0.3) 25%, rgba(0, 242, 255, 0.3) 40%, rgba(235, 0, 255, 0.3) 55%, transparent 60%);
    mix-blend-mode: overlay; /* Diganti jadi overlay agar muka avatar tidak tertutup putih */
    background-size: 200% 200%; background-position: 50% 50%;
    z-index: 5; pointer-events: none; border-radius: inherit; 
    opacity: 0.5; /* Diturunkan drastis agar elegan dan ringan */
}

/* MODALS (FIXED) */
#fan-login-modal, #luxury-modal, #gacha-result-modal, #gacha-upload-modal, #gacha-summon-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 20000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
.modal-content-lux { 
    width: 90%; 
    max-width: 450px; 
    background: #111; 
    border: 1px solid var(--primary); 
    border-radius: 20px; 
    padding: 25px; 
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.2); 
    
    /* --- TAMBAHAN BIAR BISA SCROLL --- */
    max-height: 85vh; /* Maksimal tingginya 85% dari layar HP */
    overflow-y: auto; /* Munculin scrollbar kalau kontennya kepanjangan */
    padding-bottom: 50px; /* Biar ada ruang ekstra pas keyboard muncul */
}
.lux-input { background: #222 !important; border: 1px solid #555 !important; border-radius: 10px; padding: 12px; color: white !important; width: 100%; margin-bottom: 15px; font-family: 'Rajdhani'; font-size: 1rem; }
.lux-input:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 10px var(--primary); }

#chat-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: none; justify-content: center; align-items: flex-end; }
.chat-window { width: 100%; max-width: 500px; height: 90vh; background: #0a0a0a; border-top: 2px solid var(--secondary); border-radius: 25px 25px 0 0; display: flex; flex-direction: column; }
.chat-header { padding: 15px 20px; background: #111; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; }
.chat-body { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 15px; margin-bottom: 10px; font-size: 0.9rem; position: relative; }
.msg-fan { align-self: flex-end; background: rgba(0, 242, 255, 0.1); border: 1px solid var(--primary); }
.msg-idol { align-self: flex-start; background: rgba(235, 0, 255, 0.1); border: 1px solid var(--secondary); }
.msg-gift { border: 2px solid var(--gold) !important; background: rgba(255, 204, 0, 0.1) !important; box-shadow: 0 0 10px var(--gold); }

/* GACHA RESULT */
.gacha-card-reveal { width: 220px; height: 320px; background: #000; border-radius: 15px; border: 3px solid var(--gold); overflow: hidden; position: relative; box-shadow: 0 0 50px var(--gold); animation: pop-in 0.5s ease-out; margin: 0 auto; }
.gacha-card-reveal img { width: 100%; height: 100%; object-fit: cover; }
.rarity-badge { font-family: 'Orbitron'; font-size: 2.5rem; font-weight: 900; margin-bottom: 15px; text-shadow: 0 0 20px currentColor; letter-spacing: 5px; animation: pulse-text 1s infinite; text-transform: uppercase; }
@keyframes pulse-text { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }
.orbit-container { position: relative; width: 200px; height: 200px; animation: spin-orbit 1s linear infinite; margin: 0 auto; }
.orbit-item { position: absolute; width: 30px; height: 50px; background: var(--primary); border-radius: 5px; box-shadow: 0 0 15px var(--primary); }
.oi-1 { top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--gold); }
.oi-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); background: var(--secondary); }
@keyframes spin-orbit { 100% { transform: rotate(360deg); } }

/* GALLERY & GAMES */
#gallery-view { display: none; height: 75vh; overflow-y: auto; padding: 15px; padding-bottom: 120px; scrollbar-width: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1200px; margin: 0 auto; }
.gallery-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.1); background: #111; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 10px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.75rem; }
#game-view { display: none; height: 75vh; overflow-y: auto; padding: 20px; }
.game-card { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--primary); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
.game-icon { font-size: 3rem; background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.music-widget { position: fixed; bottom: 25px; right: 20px; background: rgba(0,0,0,0.85); border: 1px solid var(--secondary); padding: 8px 15px; border-radius: 50px; z-index: 100; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.visualizer { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.visualizer.active { display: flex; }
.v-bar { width: 2px; background: var(--primary); animation: v-jump 0.5s infinite ease-in-out; }
@keyframes v-jump { 0%, 100% { height: 4px; } 50% { height: 12px; } }

/* ADD MEMBER BUTTON */
.add-member-btn { position: fixed; bottom: 80px; left: 20px; width: 50px; height: 50px; background: rgba(0,0,0,0.8); border: 2px solid var(--primary); border-radius: 50%; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; z-index: 100; box-shadow: 0 0 15px var(--primary); transition: 0.3s; }
.add-member-btn:hover { transform: scale(1.1) rotate(90deg); background: var(--primary); color: black; }