/* ===========================
        RAMZZ HUB v2
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Poppins:wght@300;400;500;600&display=swap');

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

:root{

    --bg:#090510;
    --bg2:#170B29;

    --pink:#ff4fa3;
    --purple:#a44cff;
    --cyan:#4fd8ff;

    --card:rgba(25,20,40,.72);

    --text:#fff;
    --gray:#bdbdbd;

}

html{

scroll-behavior:smooth;

}

body{

background:
radial-gradient(circle at top right,#6122b833 0%,transparent 40%),
radial-gradient(circle at bottom left,#ff4fa320 0%,transparent 40%),
linear-gradient(180deg,#090510,#170B29,#090510);

color:white;

font-family:'Poppins',sans-serif;

overflow-x:hidden;

min-height:100vh;

}

/* Scroll */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--pink),var(--purple));

border-radius:50px;

}

/* Floating Glow */

body::before{

content:"";

position:fixed;

width:420px;
height:420px;

background:var(--pink);

filter:blur(180px);

opacity:.13;

top:-150px;
right:-150px;

z-index:-5;

}

body::after{

content:"";

position:fixed;

width:350px;
height:350px;

background:#7a3fff;

filter:blur(170px);

opacity:.12;

bottom:-140px;
left:-140px;

z-index:-5;

}

/* =======================
       Loading
======================= */

#loading{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

background:#090510;

z-index:9999;

transition:.7s;

}
.loading-logo{

    width:150px;
    height:150px;

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

    border-radius:50%;

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

    border:2px solid rgba(255,79,163,.35);

    box-shadow:
    0 0 30px rgba(255,79,163,.35);

    overflow:hidden;

    animation:pulse 2s infinite;

}

.loading-logo img{

    width:100px;
    height:100px;

    border-radius:50%;

    object-fit:cover;

    display:block;

}
.loading-logo img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

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

    filter:drop-shadow(0 0 15px #ff4fa3);

}

#loading h3{

margin-top:30px;

letter-spacing:8px;

font-weight:400;

color:#ffd8f0;

}

#loading h1{

font-family:'Orbitron';

font-size:58px;

margin-top:10px;

}

#loading span{

color:var(--pink);

text-shadow:

0 0 12px var(--pink),

0 0 25px var(--pink);

}

.progress{

width:330px;

height:8px;

background:#2d2144;

margin-top:45px;

border-radius:50px;

overflow:hidden;

}

.progress-bar{

width:0;

height:100%;

background:

linear-gradient(

90deg,

var(--pink),

var(--purple),

var(--cyan)

);

animation:loading 3s linear forwards;

}

#loading p{

margin-top:18px;

color:var(--gray);

font-size:15px;

}

/* =======================
         Header
======================= */

#main{

display:none;

padding:22px;

animation:fade .8s;

}

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.brand{

display:flex;

align-items:center;

gap:15px;

}
.brand img{

    width:50px;

    height:50px;

    object-fit:cover;

    border-radius:50%;

}

.brand h2{

font-family:'Orbitron';

font-size:24px;

}

.brand span{

color:#bdbdbd;

font-size:13px;

}
/* ===========================
        HERO BANNER
=========================== */
/* ===========================
        HERO BANNER
=========================== */

.hero{

    position:relative;

    width:100%;

    height:220px;

    border-radius:28px;

    overflow:hidden;

    margin-bottom:28px;

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

    box-shadow:
        0 0 30px rgba(255,79,163,.18);

}

.hero video,
.hero img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    animation:bannerZoom 12s ease-in-out infinite alternate;

}

/* Overlay gelap */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92) 10%,
        rgba(0,0,0,.60) 35%,
        rgba(0,0,0,.20) 70%,
        rgba(0,0,0,.05) 100%
    );

    z-index:1;

}

/* Blur di bawah */

.hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:90px;

    background:rgba(15,10,25,.30);

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

    z-index:2;

}

.hero-content{

    position:absolute;

    left:25px;

    bottom:22px;

    z-index:3;

}

.hero-content h1{

    font-family:'Orbitron';

    font-size:32px;

    color:#fff;

    text-shadow:
        0 0 12px rgba(255,79,163,.9);

}

.hero-content p{

    margin-top:8px;

    color:#e0e0e0;

    font-size:15px;

}

/* Efek zoom pelan */

@keyframes bannerZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }

}

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

.stats{

    display:grid;

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

    gap:12px;

    margin:25px 0 35px;

}

.stat{

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

    backdrop-filter:blur(18px);

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

    border-radius:20px;

    padding:16px 10px;

    text-align:center;

    transition:.35s;

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

}

.stat:hover{

    transform:translateY(-6px);

    border-color:rgba(255,79,163,.4);

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

}

.stat h2{

    font-family:'Orbitron',sans-serif;

    color:var(--pink);

    font-size:24px;

    margin-bottom:6px;

}

.stat p{

    color:var(--gray);

    font-size:12px;

    font-weight:500;

}

/* ===========================
      SECTION TITLE
=========================== */

.section-title{

    font-family:'Orbitron';

    font-size:30px;

    margin-bottom:18px;

}

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

.card{

    position:relative;

    background:var(--card);

    backdrop-filter:blur(20px);

    border-radius:26px;

    overflow:hidden;

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

    margin-bottom:25px;

    transition:.35s;

    box-shadow:
        0 0 18px rgba(255,79,163,.08);

}

.card:hover{

    transform:translateY(-8px);

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

}

.card img{

    width:100%;

    height:200px;

    object-fit:cover;

    display:block;

}

.content{

    padding:20px;

}

.content h2{

    font-family:'Orbitron';

    margin-bottom:8px;

}

.content p{

    color:var(--gray);

}

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

button{

    margin-top:18px;

    width:100%;

    padding:16px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-family:'Orbitron';

    letter-spacing:2px;

    color:white;

    background:

    linear-gradient(
    90deg,
    var(--pink),
    var(--purple),
    var(--cyan));

    background-size:250%;

    transition:.35s;

    box-shadow:

    0 0 20px rgba(255,79,163,.25);

}

button:hover{

    background-position:right;

    transform:scale(1.02);

    box-shadow:

    0 0 35px rgba(255,79,163,.6);

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

footer{

    margin-top:40px;

    padding:25px 15px;

    text-align:center;

    color:var(--gray);

    font-size:14px;

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

}

/* ===========================
      FLOATING PARTICLES
=========================== */

.particle{

    position:fixed;

    width:6px;

    height:6px;

    border-radius:50%;

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

    animation:float 12s linear infinite;

    pointer-events:none;

    z-index:-1;

}

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

.card{

    opacity:0;

    transform:translateY(40px);

    animation:cardFade .8s forwards;

}

.card:nth-child(1){

animation-delay:.15s;

}

.card:nth-child(2){

animation-delay:.3s;

}

.card:nth-child(3){

animation-delay:.45s;

}

.card:nth-child(4){

animation-delay:.6s;

}

/* ===========================
       KEYFRAMES
=========================== */

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes cardFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        transform:translateY(-110vh);

        opacity:0;

    }

}
/* ===========================
      MOBILE
=========================== */

@media(max-width:768px){

.hero{
    height:180px;
}

.hero-content h1{
    font-size:24px;
}

.hero-content p{
    font-size:13px;
}

/* Statistik tetap sejajar */
.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.stat{
    padding:14px 8px;
    border-radius:15px;
}

.stat h2{
    font-size:18px;
}

.stat p{
    font-size:10px;
}

.section-title{
    font-size:24px;
}

.brand img{
    width:45px;
}

.brand h2{
    font-size:20px;
}

.card img{
    height:170px;
}

button{
    padding:14px;
    font-size:14px;
}

#loading h1{
    font-size:42px;
}

.progress{
    width:280px;
}

}

/* ===========================
      DESKTOP
=========================== */

@media(min-width:900px){

#main{

max-width:900px;

margin:auto;

padding:35px;

}

.hero{

height:320px;

}

.card img{

height:260px;

}
button{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

}
.discord-banner{

    width:100%;

    height:48px;

    margin:18px 0 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border:none;

    border-radius:999px;

    background:linear-gradient(90deg,#5865F2,#7289DA);

    color:white;

    font-family:'Orbitron';

    font-size:13px;

    letter-spacing:1px;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 0 18px rgba(88,101,242,.35);

}

.discord-banner:hover{

    transform:translateY(-2px);

    box-shadow:0 0 28px rgba(88,101,242,.6);

}

.discord-banner svg{

    width:18px;

    height:18px;

}
/* ===========================
      SERVER STATUS BUBBLE
=========================== */

.server-status{

    position:absolute;

    top:15px;

    left:15px;

    display:none;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    background:rgba(15,15,25,.85);

    backdrop-filter:blur(12px);

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

    border-radius:999px;

    z-index:20;

    animation:popup .3s ease;

}

.server-status img{

    width:28px;

    height:28px;

    border-radius:50%;

    object-fit:cover;

}

.server-status span{

    color:#fff;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}
@keyframes popup{

    from{

        opacity:0;

        transform:translateY(-10px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}
/* ===========================
      TOP NOTIFICATION
=========================== */

.toast{

    position:fixed;

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    background:rgba(20,20,30,.95);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

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

    z-index:9999;

    transition:.45s ease;

}

.toast.show{

    top:20px;

}

.toast img{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

.toast h4{

    font-size:14px;

    margin-bottom:2px;

    color:#fff;

}

.toast p{

    font-size:12px;

    color:#d5d5d5;

}