:root{
    --bg:#050505;
    --bg2:#111111;
    --card:#181818;

    --primary:#ff1e1e;
    --primary2:#d60000;
    --primary-dark:#b30000;

    --dark:#050505;
    --dark2:#111111;
    --dark3:#1b1b1b;

    --text:#ffffff;
    --white:#ffffff;

    --border:#6d0000;
}


/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}



/* ==========================
   CONTAINER
========================== */

.container{

    width:95%;
    max-width:1200px;
    margin:auto;

}

/* ==========================
   HEADER
========================== */

header{

    position:sticky;
    top:0;

    width:100%;

    background:#080808;

    border-bottom:2px solid var(--primary);

    z-index:999;

    box-shadow:
    0 0 25px rgba(255,0,0,.35);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

header .container{

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo img{

    width:220px;

    transition:.4s;

}

.logo img:hover{

    transform:scale(1.08);

    filter:

    drop-shadow(0 0 12px #ff1e1e)

    drop-shadow(0 0 30px #ff0000);

}

/* ==========================
   HERO
========================== */

.hero{

margin-top:25px;
padding:30px 0;

}

.hero img{

    width:100%;

    border-radius:18px;

    border:2px solid #991111;

    box-shadow:

    0 0 40px rgba(255,0,0,.25);

}

@media(max-width:480px){

.hero{

padding:15px 0;

}

.hero-overlay{

padding:18px;

}

.hero-overlay h1{

font-size:34px;

line-height:1.1;

}

.hero-overlay h2{

font-size:20px;

}

.hero-overlay p{

font-size:14px;

width:100%;

}

}


/* ==========================
   BUTTON
========================== */

.btn{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    height:95px;

    border-radius:15px;

    text-decoration:none;

    transition:.35s;

    cursor:pointer;

}


.login:hover{

background:#1d1d1d;

border-color:#ff3d3d;

}

.btn:hover{

    transform:translateY(-4px);

}

/*==================================
    BACKGROUND GAMING
==================================*/

body{

    font-family:Arial, Helvetica, sans-serif;

    color:var(--text);

    overflow-x:hidden;

    background:
    radial-gradient(circle at top,#3a0000 0%,#111111 35%,#050505 100%);

    background-attachment:fixed;

}

/*==================================
    CARD
==================================*/

.content{

    padding:25px 0 50px;

}

.content .container{

    background:rgba(20,20,20,.75);

    border:1px solid rgba(255,30,30,.35);

    border-radius:20px;

    padding:30px;

    backdrop-filter:blur(12px);

    box-shadow:

    0 0 35px rgba(255,0,0,.18);

}

.content h1{

    text-align:center;

    color:#fff;

    font-size:32px;

    margin-bottom:20px;

    text-shadow:0 0 12px rgba(255,0,0,.6);

}

.content h2{

    color:#ff3d3d;

    margin:25px 0 15px;

}

.content p{

    line-height:1.9;

    color:#ddd;

    margin-bottom:18px;

}

/*==================================
    TABLE
==================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

}

table th{

    background:#c70000;

    color:white;

    padding:15px;

}

table td{

    padding:15px;

    background:#161616;

    border:1px solid #2f2f2f;

}

table tr:hover{

    background:#242424;

    transition:.3s;

}

/*==================================
    FOOTER
==================================*/

footer{

    margin-top:40px;

    padding:30px;

    text-align:center;

    background:#080808;

    border-top:2px solid #990000;

    padding-bottom:120px;

}

/*==================================
    BOTTOM MENU
==================================*/

.bottom-menu{

    position:fixed;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    width:95%;

    max-width:700px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    padding:10px;

    background:rgba(18,18,18,.92);

    border-radius:18px;

    border:1px solid #ff2d2d;

    box-shadow:0 0 25px rgba(255,0,0,.35);

    backdrop-filter:blur(12px);

}

.bottom-menu a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    transition:.3s;

}

.bottom-menu img{

    width:26px;

    margin-bottom:5px;

}

.bottom-menu a:hover{

    color:#ff3d3d;

    transform:translateY(-4px);

}

/*=================================
        HERO PREMIUM
=================================*/


.hero-box{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    border:2px solid #ff1b1b;

    box-shadow:

    0 15px 40px rgba(0,0,0,.55),

    0 0 35px rgba(255,0,0,.35);

}

.hero-box img{

    width:100%;

    height:550px;

    object-fit:cover;

    display:block;

}

@media(max-width:768px){

.hero-box img{

    height:380px;

}

}

.hero-overlay{

    position:absolute;

    z-index:5;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:70px;

    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.88),

    rgba(0,0,0,.45),

    rgba(0,0,0,.10)

    );

}

.hero-overlay h1{

    font-size:48px;

    line-height:1.1;

    font-weight:900;

    color:white;

    text-shadow:

    0 0 18px red;

}

.hero-overlay h2{

    margin-top:15px;

    font-size:28px;

    color:#ff2a2a;

}

.hero-overlay p{

    margin-top:20px;

    width:45%;

    line-height:1.8;

}

/*==============================
        CTA PREMIUM
==============================*/

.cta{

margin-top:30px;

padding:25px 0;

}

.cta .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


.btn span{

    font-size:30px;

    font-weight:bold;

}

.btn small{

    margin-top:8px;

    font-size:16px;

}

.daftar{

    background:

    linear-gradient(180deg,

    #ff3535,

    #930000);

    box-shadow:

    0 0 20px rgba(255,0,0,.35);

}

.daftar:hover{

    box-shadow:

    0 0 40px rgba(255,0,0,.8);

}


/*===============================
    SHINE EFFECT
===============================*/

.btn::before{

content:"";

position:absolute;

top:-100%;
left:-40%;

width:60px;
height:250%;

background:rgba(255,255,255,.35);

transform:rotate(25deg);

animation:shine 3s linear infinite;

}

@keyframes shine{

0%{

left:-40%;

}

100%{

left:130%;

}

}

/*==============================
    BUTTON HOVER
==============================*/

.btn:hover{

transform:

translateY(-6px);

box-shadow:

0 0 35px rgba(255,0,0,.7);

transition:.4s;

}

/*==============================
    GLOW BORDER
==============================*/

.hero-box::after{

content:"";

position:absolute;

inset:0;

border-radius:20px;

box-shadow:

inset 0 0 35px rgba(255,0,0,.35);

pointer-events:none;

}


@media(max-width:768px){

.stats .container{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:480px){

.stats .container{

grid-template-columns:1fr;

}

}

@media (max-width:768px){

.hero-overlay{

padding:15px;

bottom:8px;

width:96%;

}

.hero-overlay h1{

font-size:34px;

}

.hero-overlay h2{

font-size:15px;

}

.hero-overlay p{

width:100%;

font-size:12px;

}

.logo img{

width:170px;

}

.btn{

min-height:90px;

padding:20px;

text-align:center;

}

.btn span{

font-size:28px;

line-height:1.1;

}

.bottom-menu{

gap:5px;

padding:6px;

}

.bottom-menu img{

width:22px;

}

.feature .container{

grid-template-columns:1fr;

}

}

.feature-item{

padding:25px;

border-radius:18px;

background:#111;

border:1px solid rgba(255,0,0,.3);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:

transform .3s,

box-shadow .3s;

.feature-item:hover{

transform:translateY(-8px);

box-shadow:

0 0 15px rgba(255,0,0,.15);

}

}

::selection{

background:#ff1e1e;

color:#fff;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#b30000;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff1e1e;

}

@keyframes heroGlow{

0%{

box-shadow:

0 0 20px rgba(255,0,0,.2);

}

50%{

box-shadow:

0 0 45px rgba(255,0,0,.6);

}

100%{

box-shadow:

0 0 20px rgba(255,0,0,.2);

}

}

.hero-box{

animation:heroGlow 3s ease-in-out infinite;

}

a{

text-decoration:none;

color:inherit;

}

.information{

margin:40px 0;

}

.information .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.left-card,
.right-card{

background:#111;

padding:30px;

border-radius:18px;

border:1px solid rgba(255,0,0,.3);

}

@media(max-width:768px){

.information .container{

grid-template-columns:1fr;

}

}

/*=============================
        PROVIDER
=============================*/

@media (max-width:768px){

    .provider-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

}

@media (max-width:480px){

    .provider{

        padding:50px 15px;

    }

    .provider-grid{

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }

}

/* GRID */

.provider-grid{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

/* CARD */

.provider-item{

    display:block;

    overflow:hidden;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#181818;

    transition:.35s;

}

.provider-item:hover{

    transform:translateY(-5px);

    box-shadow:0 0 18px rgba(255,215,0,.25);

    border-color:#FFD700;

}

/* IMAGE */

.provider-item img{

    width:100%;

    display:block;

    border-radius:12px;

    transition:.35s;

}

.provider-item:hover img{

    transform:scale(1.03);

}

/*=============================
        PAYMENT
=============================*/

.payment{
    padding:60px 20px;
}

.payment h2{
    text-align:center;
    font-size:32px;
    margin-bottom:30px;
    color:#FFD700;
    text-shadow:0 0 15px rgba(255,215,0,.5);
}

.payment-grid{
    max-width:1000px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.payment-item{

    background:#181818;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    transition:.3s;

}

.payment-item:hover{

    transform:translateY(-4px);

    border-color:#FFD700;

    box-shadow:0 0 15px rgba(255,215,0,.25);

}

.payment-item img{

    max-width:85%;

    max-height:36px;

    width:auto;

    height:auto;

    object-fit:contain;

}

/*=============================
        LIVE STATS
=============================*/

.stats{
    margin:35px 0;
}

.stats .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.stat-card{
    background:#141414;
    border:1px solid rgba(255,0,0,.35);
    border-radius:18px;
    padding:25px 15px;
    text-align:center;
}

.stat-card h3{
    color:#ff2d2d;
    font-size:38px;
    margin-bottom:10px;
}

.stat-card p{
    color:#ddd;
    font-size:15px;
}

.stat-box{

background:#111;

border:1px solid rgba(255,0,0,.3);

padding:30px;

border-radius:20px;

text-align:center;

transition:.4s;

box-shadow:0 0 15px rgba(255,0,0,.15);

}

.stat-box:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(255,0,0,.45);

}

.stat-box h2{

font-size:38px;

color:#ff2a2a;

margin-bottom:10px;

text-shadow:0 0 15px red;

}

.stat-box p{

color:#ddd;

font-size:15px;

}

@keyframes glowCard{

0%{

box-shadow:0 0 15px rgba(255,0,0,.15);

}

50%{

box-shadow:0 0 35px rgba(255,0,0,.45);

}

100%{

box-shadow:0 0 15px rgba(255,0,0,.15);

}

}

.feature-item,
.provider-item,
.payment-item,
.left-card,
.right-card,
.stat-box{

animation:glowCard 4s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

.daftar{

animation:pulse 2s infinite;

}

.reveal{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.particles{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.particles span{

position:absolute;

display:block;

width:8px;

height:8px;

background:#ff1e1e;

border-radius:50%;

animation:particle 12s linear infinite;

opacity:.4;

}

.particles span:nth-child(1){left:10%;animation-delay:0s;}
.particles span:nth-child(2){left:25%;animation-delay:2s;}
.particles span:nth-child(3){left:45%;animation-delay:4s;}
.particles span:nth-child(4){left:65%;animation-delay:6s;}
.particles span:nth-child(5){left:80%;animation-delay:8s;}
.particles span:nth-child(6){left:92%;animation-delay:10s;}

@keyframes particle{

0%{

transform:translateY(100vh) scale(.5);

opacity:0;

}

20%{

opacity:.5;

}

100%{

transform:translateY(-120px) scale(1.5);

opacity:0;

}

}

/*==================================
            FAQ
==================================*/

.faq{

padding:70px 0;

}

.faq h2{

text-align:center;

font-size:34px;

margin-bottom:35px;

color:#fff;

text-shadow:0 0 15px rgba(255,0,0,.5);

}

.faq-item{

margin-bottom:18px;

border-radius:15px;

overflow:hidden;

border:1px solid rgba(255,0,0,.3);

background:#111;

box-shadow:0 0 20px rgba(255,0,0,.1);

}

.faq-question{

width:100%;

padding:20px;

background:#141414;

border:none;

outline:none;

cursor:pointer;

text-align:left;

font-size:18px;

font-weight:bold;

color:#fff;

transition:.3s;

}

.faq-question:hover{

background:#1b1b1b;

color:#ff3d3d;

}

.faq-answer{

display:none;

padding:20px;

background:#181818;

color:#ddd;

line-height:1.8;

}

@media(max-width:768px){

.faq h2{

font-size:26px;

}

.faq-question{

font-size:16px;

padding:16px;

}

.faq-answer{

font-size:14px;

padding:16px;

}

}

.running-text{

background:#8b0000;

padding:12px;

font-weight:bold;

color:#fff;

border-top:1px solid red;

border-bottom:1px solid red;

box-shadow:0 0 15px rgba(255,0,0,.4);

}

#loader{

position:fixed;

inset:0;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-logo img{

width:220px;

animation:loaderGlow 1.5s infinite;

}

@keyframes loaderGlow{

0%{

transform:scale(1);

opacity:.5;

}

50%{

transform:scale(1.1);

opacity:1;

}

100%{

transform:scale(1);

opacity:.5;

}

}

.feature-item,
.provider-grid img,
.payment-grid img,
.counter-box,
.stat-box,
.left-card,
.right-card{

background:rgba(20,20,20,.7);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

}

.feature-item:hover,
.provider-grid img:hover,
.payment-grid img:hover,
.counter-box:hover,
.stat-box:hover{

transform:translateY(-10px);

box-shadow:

0 20px 40px rgba(255,0,0,.3);

}

@keyframes borderGlow{

0%{

border-color:#ff1e1e;

}

50%{

border-color:#ff8080;

}

100%{

border-color:#ff1e1e;

}

}

.hero-box,
.content .container,
.left-card,
.right-card{

animation:borderGlow 3s infinite;

}

section{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media (max-width:768px){

.stats .container{

grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:480px){

.stats{

margin:25px 0;

}

.stats .container{

grid-template-columns:1fr 1fr;

gap:12px;

}

.stat-card{

padding:20px 10px;

}

.stat-card h3{

font-size:30px;

}

.stat-card p{

font-size:13px;

}

}