/* Reset & Mobile Optimization */
* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body { 
    background-color: #050507; min-height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 30px 16px;
    overflow-x: hidden; position: relative; color: #fff;
}

/* --- LOADER SCREEN --- */
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #050507; z-index: 9999; display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}
.loader {
    --color: #ff2e4d; --size: 50px; width: var(--size); height: var(--size);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.loader span {
    width: 100%; height: 100%; background-color: var(--color);
    animation: keyframes-blink 0.6s alternate infinite linear; border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 46, 77, 0.4);
}
.loader span:nth-child(1) { animation-delay: 0ms; }
.loader span:nth-child(2) { animation-delay: 200ms; }
.loader span:nth-child(3) { animation-delay: 300ms; }
.loader span:nth-child(4) { animation-delay: 400ms; }
.loader span:nth-child(5) { animation-delay: 500ms; }
.loader span:nth-child(6) { animation-delay: 600ms; }

@keyframes keyframes-blink { 
    0% { opacity: 0.2; transform: scale(0.6); } 
    50% { opacity: 1; transform: scale(1); } 
}

/* --- BACKGROUND ANIMASI --- */
.nebula, .nebula-2 {
    position: absolute; border-radius: 50%; z-index: 0; filter: blur(60px); pointer-events: none;
}
.nebula {
    width: 300px; height: 300px; background: rgba(255, 46, 77, 0.15);
    top: -10%; left: -10%; animation: float1 10s infinite alternate ease-in-out;
}
.nebula-2 {
    width: 250px; height: 250px; background: rgba(255, 0, 85, 0.1);
    bottom: -10%; right: -10%; animation: float2 12s infinite alternate ease-in-out;
}
@keyframes float1 { 100% { transform: translate(30px, 30px) scale(1.2); } }
@keyframes float2 { 100% { transform: translate(-30px, -30px) scale(1.1); } }

#stars {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    background-size: 80px 80px; animation: moveStars 50s linear infinite; pointer-events: none; opacity: 0.2;
}
@keyframes moveStars { from { background-position: 0 0; } to { background-position: 0 -400px; } }

/* --- Container Layout --- */
.container { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 350px; }

/* --- Premium Card Layout --- */
.card { 
    background: rgba(13, 13, 16, 0.85); border: 1px solid rgba(255, 46, 77, 0.15); 
    border-radius: 20px; padding: 26px 22px; text-align: center; 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 46, 77, 0.05);
}

.logo { font-size: 30px; font-weight: 900; margin-bottom: 8px; letter-spacing: 2px; color: #ffffff; text-shadow: 0 0 15px rgba(255, 46, 77, 0.6); }
.desc { color: #94a3b8; margin-bottom: 22px; font-size: 13px; line-height: 1.5; }

/* --- TOMBOL MISI --- */
.btn-misi-combined { 
    width: 100%; padding: 14px; border: none; border-radius: 12px; 
    font-size: 15px; font-weight: 700; color: #ffffff; 
    background: linear-gradient(135deg, #ff2e4d 0%, #a30015 100%);
    box-shadow: 0 4px 15px rgba(255, 46, 77, 0.3);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s; 
    cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-misi-combined:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(255, 46, 77, 0.2); }

/* --- TOMBOL DOWNLOAD --- */
.download-link {
    color: rgba(255, 255, 255, 0.3); padding: 14px 20px; display: flex; justify-content: center; align-items: center; 
    background: rgba(255, 255, 255, 0.03); font-size: 15px; font-weight: 600; gap: 12px; border-radius: 12px; 
    margin-top: 14px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; pointer-events: none;
    transition: all 0.3s ease;
}
.download-link.enabled {
    color: #ffffff; background: rgba(255, 46, 77, 0.1); border-color: #ff2e4d; pointer-events: auto; cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 46, 77, 0.2);
}
.download-link.enabled:active { transform: scale(0.96); background: rgba(255, 46, 77, 0.2); }

.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-container { margin-top: 14px; font-size: 13px; color: #ff2e4d; font-weight: 600; text-shadow: 0 0 8px rgba(255, 46, 77, 0.3); }

/* --- PANEL STATS REALTIME --- */
.stats-panel-bottom {
    display: flex; justify-content: center; gap: 12px; margin-top: 22px; padding-top: 16px;
    font-size: 12px; color: #888888; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-item { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.04); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.2s; }
.btn-like { cursor: pointer; }
.btn-like:active { transform: scale(0.85); }
.btn-like i { transition: color 0.3s; }
.btn-like.liked i { color: #ff2e4d; filter: drop-shadow(0 0 5px rgba(255, 46, 77, 0.6)); }
.btn-like.liked span { color: #ff2e4d; font-weight: 600; }

/* --- SOCIAL CARD --- */
.social-combined-card { padding: 18px; border-color: rgba(255, 255, 255, 0.08); }
.social-title { color: #ffffff; font-size: 14px; font-weight: 600; margin-bottom: 14px; text-align: center; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-item {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; 
    padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; transition: transform 0.2s, background 0.2s;
}
.social-item:active { transform: scale(0.92); }
.social-item i { font-size: 24px; transition: transform 0.3s; }
.social-item:hover i { transform: translateY(-3px); }
.social-item span { color: #ffffff; font-size: 12px; font-weight: 600; }
.item-tg i { color: #229ed9; }
.item-wa i { color: #25d366; }

/* Mini Terms Row */
.terms-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:6px;
    margin:8px 0 18px 0;
}

/* Checkbox Area */
.checkbox-container{
    display:flex;
    align-items:center;
    gap:6px;

    flex:1;

    font-size:10px;
    color:#94a3b8;

    cursor:pointer;
}

/* Sembunyikan checkbox asli */
.custom-checkbox{
    display:none;
}

/* Box Checkbox Mini */
.checkmark{
    position:relative;

    width:14px;
    height:14px;

    flex-shrink:0;

    border-radius:4px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,46,77,.55);

    transition:.2s;
}

.checkmark::after{
    content:"";

    position:absolute;

    left:4px;
    top:1px;

    width:3px;
    height:6px;

    border:solid #fff;
    border-width:0 1.5px 1.5px 0;

    transform:rotate(45deg);

    opacity:0;
}

.custom-checkbox:checked + .checkmark{
    background:#ff2e4d;
    border-color:#ff2e4d;

    box-shadow:0 0 8px rgba(255,46,77,.45);
}

.custom-checkbox:checked + .checkmark::after{
    opacity:1;
}

/* Text */
.agree-text{
    font-size:10px;
    line-height:1.2;
    color:#525252;
}

/* Button Baca Mini */
.terms-btn{
    height:24px;
    min-width:52px;

    padding:0 10px;

    border-radius:999px;

    border:1px solid rgba(255,46,77,.4);
    background:rgba(255,46,77,.08);

    color:#ff2e4d;

    font-size:9px;
    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.terms-btn:hover{
    background:#ff2e4d;
    color:#fff;
}

/* POP UP */
.popup-overlay{
    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.65);
    backdrop-filter:blur(6px);

    z-index:99999;
}

.popup-box{
    width:280px;

    background:#111827;
    border:1px solid rgba(255,46,77,.4);

    border-radius:18px;

    padding:22px;

    text-align:center;

    box-shadow:0 0 30px rgba(255,46,77,.25);

    animation: popupShow .25s ease;
}

@keyframes popupShow{
    from{
        opacity:0;
        transform:scale(.85);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

.popup-icon{
    font-size:32px;
    margin-bottom:10px;
}

.popup-title{
    color:#fff;
    font-size:17px;
    font-weight:700;
    margin-bottom:8px;
}

.popup-text{
    color:#9ca3af;
    font-size:13px;
    line-height:1.5;
    margin-bottom:16px;
}

.popup-btn{
    width:100%;

    border:none;
    border-radius:12px;

    padding:10px;

    background:#ff2e4d;
    color:#fff;

    font-weight:600;

    cursor:pointer;
}

/* =======================================================
   PERBAIKAN LOGO UKURAN PAS & ANIMASI TEKS KIRI KE KANAN
   ======================================================= */

/* Pengaturan Gambar Logo Berdetak (Diperkecil ke 42px agar pas) */
.card > .logo-img-pulse {
    width: 42px;
    height: auto;
    object-fit: contain;
    margin-bottom: 6px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    /* Membuat pendaran glow merah mengikuti bentuk lekukan file logo.png */
    filter: drop-shadow(0 0 6px rgba(255, 46, 77, 0.65));
    
    /* Hanya mengaktifkan animasi berdetak & perubahan tebal glow pada gambar logo */
    animation: logoImgHeartbeat 2s infinite ease-in-out;
}

/* Teks VARNIX (Efek Warna Gradasi Mengalir Berjalan dari Kiri ke Kanan) */
.logo {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
    
    /* Kombinasi susunan warna gradasi dari Kiri ke Kanan */
    background: linear-gradient(to right, #000000 0%, #000000 25%, #ff2e4d 50%, #000000 75%, #000000 100%);
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Menjalankan animasi pergeseran teks sekaligus pergerakan glow */
    animation: textFlowLeftToRight 4s linear infinite;
}

/* =======================================================
   ANIMASI ANIMATED GLOW (MENGIKUTI PERGERAKAN WARNA)
   ======================================================= */
@keyframes textFlowLeftToRight {
    0% {
        background-position: 200% center;
        /* Di awal, pendaran merah tipis mengikuti posisi gradasi */
        filter: drop-shadow(0px 0px 2px rgba(255, 46, 77, 0.4))
                drop-shadow(0px 0px 8px rgba(255, 46, 77, 0.2));
    }
    50% {
        background-position: 100% center;
        /* Saat warna merah pekat bergeser ke tengah, pendaran ikutan menyala terang benderang */
        filter: drop-shadow(0px 0px 4px rgba(255, 46, 77, 0.9))
                drop-shadow(0px 0px 14px rgba(255, 46, 77, 0.6))
                drop-shadow(0px 0px 22px rgba(255, 46, 77, 0.3));
    }
    100% {
        background-position: 0% center;
        /* Kembali meredup halus mengikuti hilangnya warna merah ke kanan */
        filter: drop-shadow(0px 0px 2px rgba(255, 46, 77, 0.4))
                drop-shadow(0px 0px 8px rgba(255, 46, 77, 0.2));
    }
}



/* --- KEYFRAMES ANIMASI --- */

/* Animasi Detak Jantung dan Efek Pendaran Cahaya Khusus Gambar Logo */
@keyframes logoImgHeartbeat {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 46, 77, 0.65));
    }
    50% {
        transform: scale(1.08); /* Gambar membesar sedikit secara halus */
        filter: drop-shadow(0 0 14px rgba(255, 46, 77, 0.95)); /* Efek glow menebal */
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 46, 77, 0.65));
    }
}

/* Animasi Pergerakan Warna Gradasi Teks */
@keyframes textFlowLeftToRight {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: 0% center;
    }
}