*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --gold:#FFD700;
    --gold2:#FFB800;
    --gold3:#FFF2A8;

    --purple:#a855ff;
    --purple2:#6d00ff;
    --purple3:#d946ff;

    --dark:#050008;
    --panel:#16051f;
    --text:#fff;
    --muted:#d9c7e8;
}

html,
body{
    min-height:100%;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    overflow-x:hidden;
    background:
        radial-gradient(circle at 50% -10%,rgba(168,85,255,.34),transparent 35%),
        radial-gradient(circle at 8% 20%,rgba(217,70,255,.16),transparent 26%),
        radial-gradient(circle at 92% 72%,rgba(109,0,255,.22),transparent 32%),
        linear-gradient(180deg,#08000f 0%,#030006 100%);
}

/* background titik neon */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-4;
    background:
        radial-gradient(circle,rgba(217,70,255,.95) 1.25px,transparent 2px) 0 0/42px 42px,
        radial-gradient(circle,rgba(255,215,106,.75) 1px,transparent 2px) 21px 21px/58px 58px;
    opacity:.48;
    animation:bgPulse 1.6s infinite alternate;
}

/* sweep cahaya halus */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        linear-gradient(115deg,transparent 0%,transparent 42%,rgba(255,255,255,.08) 50%,transparent 58%,transparent 100%);
    background-size:260% 260%;
    animation:lightSweep 5.5s linear infinite;
}

.bg-grid,
.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
}

.bg-grid{
    z-index:-3;
}

.particles{
    z-index:-2;
    overflow:hidden;
}

.dot{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:
        0 0 8px var(--gold),
        0 0 18px rgba(255,215,0,.8);
    animation:floatDot linear infinite, blink .75s infinite alternate;
}

.page{
    width:100%;
    max-width:430px;
    margin:auto;
    padding:10px 15px 32px;
    position:relative;
}

.hero-card{
    text-align:center;
    position:relative;
}

/* logo diperbesar */
.logo-wrap{
    min-height:112px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:2px;
}

.logo{
    display:block;
    width:100%;
    max-width:390px;
    max-height:110px;
    object-fit:contain;
    margin:auto;
    filter:
        drop-shadow(0 0 8px rgba(255,215,106,.95))
        drop-shadow(0 0 18px rgba(255,184,0,.72))
        drop-shadow(0 0 34px rgba(217,70,255,.82));
    animation:logoGlow 1.8s ease-in-out infinite alternate;
}

/* running text seamless */
.ticker{
    position:relative;
    width:90%;
    height:50px;
    margin:2px auto 16px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-radius:12px;
    border:1px solid rgba(255,215,106,.65);
    background:
        linear-gradient(180deg,rgba(64,16,96,.96),rgba(10,0,18,.98));
    box-shadow:
        0 0 10px rgba(255,215,106,.7),
        0 0 28px rgba(217,70,255,.6),
        inset 0 0 18px rgba(255,255,255,.1);
    white-space:nowrap;
}

.ticker::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(90deg,#100018 0%,transparent 12%,transparent 88%,#100018 100%);
}

.ticker::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    transform:translateX(-140%);
    animation:shine 3s infinite;
}

.ticker-track{
    display:flex;
    width:max-content;
    animation:marquee 18s linear infinite;
    will-change:transform;
}

.ticker-track span{
    padding-right:70px;
    color:#fff;
    font-weight:900;
    font-size:13px;
    text-shadow:
        0 0 8px #fff,
        0 0 16px rgba(255,215,0,.65);
}

/* statistik kecil */
.mini-stats{
    width:92%;
    margin:0 auto 14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.mini-stats div{
    padding:9px 6px;
    border-radius:10px;
    border:1px solid rgba(255,215,106,.34);
    background:linear-gradient(180deg,rgba(33,9,48,.92),rgba(10,0,15,.96));
    box-shadow:0 0 12px rgba(217,70,255,.28);
}

.mini-stats strong{
    display:block;
    color:var(--gold);
    font-size:13px;
    text-shadow:0 0 9px rgba(255,215,0,.9);
}

.mini-stats span{
    display:block;
    margin-top:2px;
    color:#f4e9ff;
    font-size:10px;
}

/* banner utama */
.banner-card{
    position:relative;
    height:380px;
    margin:0 auto 18px;
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(255,215,106,.62);
    background:
        radial-gradient(circle at 50% 18%,rgba(217,70,255,.28),transparent 36%),
        radial-gradient(circle at 50% 75%,rgba(255,215,106,.16),transparent 30%),
        linear-gradient(180deg,#1b062c,#08000f);
    box-shadow:
        0 0 14px rgba(255,215,106,.46),
        0 0 34px rgba(217,70,255,.72),
        0 0 72px rgba(109,0,255,.42),
        inset 0 0 38px rgba(0,0,0,.82);
    animation:borderPulse 1.35s infinite alternate;
}

.banner-card::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        conic-gradient(from 180deg,transparent,rgba(217,70,255,.18),transparent,rgba(255,215,106,.16),transparent);
    animation:spinGlow 8s linear infinite;
}

.banner-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg,transparent 18%,rgba(255,255,255,.16) 44%,transparent 58%);
    transform:translateX(-120%);
    animation:shine 3.8s infinite;
}

.banner-glow{
    position:absolute;
    width:230px;
    height:230px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:var(--gold);
    filter:blur(90px);
    opacity:.14;
    animation:glowBreath 1.7s infinite alternate;
}

.banner-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:25px 22px;
}

.eyebrow{
    color:var(--gold);
    font-weight:900;
    font-size:12px;
    letter-spacing:1.6px;
    margin-bottom:10px;
    text-shadow:
        0 0 10px var(--gold),
        0 0 22px rgba(217,70,255,.85);
}

.banner-content h1{
    font-size:30px;
    line-height:1.08;
    text-transform:uppercase;
    color:#050008;
    -webkit-text-stroke:1px rgba(255,215,106,.65);
    text-shadow:
        0 0 8px rgba(255,215,0,.9),
        0 0 22px rgba(217,70,255,.85);
    margin-bottom:18px;
}

/* ===========================
   BANNER IMAGE FIX
=========================== */

.banner-image-card{

    position:relative;

    width:100%;

    aspect-ratio:1086 / 1448;

    height:auto !important;

    padding:0;

    overflow:hidden;

    border-radius:24px;

    background:#090009;

}

.banner-image-card .banner-img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    border-radius:24px;

}

/* Nonaktifkan elemen banner lama */
.banner-image-card .banner-content,
.banner-image-card .banner-glow{
    display:none;
}

.promo-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.promo-list div{
    min-height:66px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid rgba(255,215,106,.45);
    background:
        linear-gradient(180deg,rgba(18,3,30,.82),rgba(5,0,10,.92));
    box-shadow:
        inset 0 0 14px rgba(255,255,255,.06),
        0 0 14px rgba(217,70,255,.28);
}

.promo-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:linear-gradient(180deg,#fff2a8,#ffb800);
    box-shadow:
        0 0 12px rgba(255,215,0,.95),
        0 0 24px rgba(217,70,255,.55);
    font-size:24px;
}

.promo-list p{
    text-align:left;
}

.promo-list b{
    display:block;
    font-size:17px;
    color:#fff;
    text-shadow:0 0 10px rgba(255,255,255,.75);
}

.promo-list small{
    display:block;
    margin-top:3px;
    color:var(--gold3);
    font-size:13px;
}

/* tombol */
.cta-row{
    display:flex;
    gap:14px;
    margin-top:24px;
}

.btn-red{
    flex:1;
    position:relative;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    color:#fff;
    padding:16px 10px;
    border-radius:13px;
    border:1px solid rgba(255,215,106,.48);
    background:
        linear-gradient(180deg,#d946ff 0%,#8b20ff 50%,#5a00c8 100%);
    font-weight:900;
    font-size:18px;
    letter-spacing:.5px;
    box-shadow:
        0 0 12px rgba(255,215,106,.58),
        0 0 24px rgba(217,70,255,.82),
        inset 0 0 16px rgba(255,255,255,.18);
    transition:.25s ease;
    animation:btnPulse .9s infinite alternate;
}

.btn-red::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    transform:translateX(-140%);
    animation:shine 2.6s infinite;
}

.btn-red:hover{
    transform:translateY(-2px) scale(1.02);
    filter:brightness(1.18);
}

.btn-red.alt{
    background:linear-gradient(180deg,#ffcf5a,#ffb800 52%,#a86900 100%);
    color:#160015;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* trust row */
.trust-row{
    width:94%;
    margin:14px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.trust-row span{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:34px;
    border-radius:9px;
    border:1px solid rgba(255,215,106,.25);
    background:rgba(20,4,32,.78);
    color:#fff2c7;
    font-size:11px;
    font-weight:800;
    box-shadow:0 0 12px rgba(217,70,255,.2);
}

/* table */
.link-table{
    margin-top:34px;
    border-radius:11px;
    overflow:hidden;
    border:1px solid rgba(255,215,106,.52);
    box-shadow:
        0 0 16px rgba(255,215,106,.28),
        0 0 34px rgba(217,70,255,.42);
}

.table-head,
.table-row{
    display:grid;
    grid-template-columns:1fr 120px;
}

.table-head div{
    background:linear-gradient(180deg,#b65cff,#7214df);
    text-align:center;
    padding:12px;
    font-weight:900;
    border:1px solid rgba(0,0,0,.95);
    color:#fff;
    text-shadow:0 0 8px rgba(255,255,255,.8);
}

.table-row div{
    min-height:68px;
    background:linear-gradient(180deg,#2a143d,#171020);
    border:1px solid rgba(0,0,0,.95);
    padding:18px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:13px;
    color:#f7edff;
}

.btn-blue{
    display:inline-block;
    color:#190015;
    text-decoration:none;
    padding:10px 20px;
    border-radius:11px;
    font-weight:900;
    font-size:19px;
    background:linear-gradient(180deg,#fff2a8,#ffb800 55%,#b87400);
    box-shadow:
        0 0 10px rgba(255,215,106,.9),
        0 0 22px rgba(217,70,255,.55);
    transition:.25s ease;
    animation:goldPulse 1s infinite alternate;
}

.btn-blue:hover{
    transform:scale(1.06);
    filter:brightness(1.18);
}

.footer{
    margin-top:30px;
    text-align:center;
    font-size:12px;
    color:#d8c8e9;
}

.footer-badges{
    display:flex;
    justify-content:center;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.footer-badges span{
    padding:6px 9px;
    border-radius:999px;
    border:1px solid rgba(255,215,106,.32);
    background:rgba(21,4,34,.82);
    color:#fff2c7;
    font-size:10px;
    font-weight:800;
}

.footer a{
    color:var(--gold);
    text-decoration:none;
    text-shadow:0 0 10px rgba(255,215,106,.7);
}

.footer a:hover{
    color:#fff;
}

@keyframes bgPulse{
    from{opacity:.32;filter:brightness(.85)}
    to{opacity:.65;filter:brightness(1.18)}
}

@keyframes lightSweep{
    0%{background-position:160% 0}
    100%{background-position:-160% 0}
}

@keyframes logoGlow{
    from{
        transform:scale(1);
        filter:
            drop-shadow(0 0 7px rgba(255,215,106,.8))
            drop-shadow(0 0 15px rgba(255,184,0,.65))
            drop-shadow(0 0 25px rgba(217,70,255,.72));
    }

    to{
        transform:scale(1.035);
        filter:
            drop-shadow(0 0 12px rgba(255,215,106,1))
            drop-shadow(0 0 28px rgba(255,184,0,.9))
            drop-shadow(0 0 48px rgba(217,70,255,.9));
    }
}

@keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-33.333%)}
}

@keyframes borderPulse{
    from{
        box-shadow:
            0 0 12px rgba(255,215,106,.32),
            0 0 28px rgba(217,70,255,.52),
            inset 0 0 28px rgba(0,0,0,.8);
    }

    to{
        box-shadow:
            0 0 24px rgba(255,215,106,.62),
            0 0 56px rgba(217,70,255,.82),
            inset 0 0 42px rgba(217,70,255,.12);
    }
}

@keyframes spinGlow{
    to{transform:rotate(360deg)}
}

@keyframes shine{
    0%{transform:translateX(-140%)}
    48%,100%{transform:translateX(140%)}
}

@keyframes glowBreath{
    from{
        opacity:.1;
        transform:translate(-50%,-50%) scale(.82);
    }

    to{
        opacity:.28;
        transform:translate(-50%,-50%) scale(1.16);
    }
}

@keyframes btnPulse{
    from{
        box-shadow:
            0 0 10px rgba(255,215,106,.42),
            0 0 20px rgba(217,70,255,.62),
            inset 0 0 12px rgba(255,255,255,.14);
    }

    to{
        box-shadow:
            0 0 20px rgba(255,215,106,.72),
            0 0 40px rgba(217,70,255,.88),
            inset 0 0 18px rgba(255,255,255,.2);
    }
}

@keyframes goldPulse{
    from{
        box-shadow:
            0 0 8px rgba(255,215,106,.7),
            0 0 16px rgba(217,70,255,.35);
    }

    to{
        box-shadow:
            0 0 18px rgba(255,215,106,1),
            0 0 28px rgba(217,70,255,.65);
    }
}

@keyframes floatDot{
    0%{transform:translateY(105vh) scale(.55)}
    100%{transform:translateY(-20vh) scale(1.15)}
}

@keyframes blink{
    from{opacity:.25}
    to{opacity:1}
}

@media(max-width:380px){
    .page{
        padding:8px 10px 28px;
    }

    .logo-wrap{
        min-height:98px;
    }

    .logo{
        max-width:360px;
        max-height:96px;
    }

    .ticker{
        width:93%;
        height:48px;
    }

    .ticker-track{
        animation-duration:20s;
    }

    .mini-stats{
        width:94%;
    }

    .banner-card{
        height:365px;
    }

    .banner-content h1{
        font-size:25px;
    }

    .promo-list b{
        font-size:15px;
    }

    .promo-list small{
        font-size:12px;
    }

    .table-head,
    .table-row{
        grid-template-columns:1fr 96px;
    }

    .btn-blue{
        font-size:16px;
        padding:9px 13px;
    }
}