:root{
    --gold:#ffd700;
    --gold2:#ffb800;
    --bg1:#07111d;
    --bg2:#0d1d33;
    --red:#ff3434;
}

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

body{
    font-family:'Poppins',sans-serif;
    background:#07111d;
    overflow-x:hidden;
}

.lucky-section{

    max-width:center;
    width:100%;

    margin:40px auto;

    padding:40px;
   

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;
    justify-items:center;

    gap:60px;

    background:#07111d;

}

/* ========================= */

.wheel-side{

    width:100%;

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

}

/* ========================= */

.wheel-wrapper{

    position:relative;

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

}

/* ========================= */

.wheel-container{

    position:relative;

    width:650px;
    height:650px;

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

}

/* ========================= */

.wheel-glow{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,215,0,.35),
    transparent 70%);

    filter:blur(45px);

}

/* ========================= */

#wheel{

    width:650px;
    height:650px;

    border-radius:50%;

    overflow:hidden;

    border:12px solid #fff;

    box-shadow:
    0 0 40px rgba(255,215,0,.45),
    inset 0 0 25px rgba(255,255,255,.25);

    animation:idleSpin 25s linear infinite;

    transform-origin:center;

}

/* ========================= */

.center-cap{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:120px;
    height:120px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    #fff6a5,
    #ffd700,
    #b97d00);
    border:7px solid #fff;
    z-index:5;
}
.pointer{
    position:absolute;
    right:-25px;
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-right:55px solid #ff2b2b;
    z-index:20;
}
.content{
    width:100%;
    max-width:430px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
}
.content h1{
    font-size:60px;
    line-height:1.05;
    margin-bottom:20px;
    font-weight:800;
}
.content p{
    font-size:17px;
    line-height:1.8;
    color:#d8d8d8;
    margin-bottom:30px;
}
.spin-btn{
    width:220px;
    height:58px;
    border:none;
    border-radius:50px;
    background:
    linear-gradient(135deg,#fff4a2,#ffd700,#ffb300);
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.spin-btn:hover{
    transform:translateY(-4px);
}
@keyframes idleSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@media(max-width:1100px){
.lucky-section{
grid-template-columns:1fr;
text-align:center;
}
.content{
align-items:center;
}
.wheel-container{
width:550px;
height:550px;
}
#wheel{
width:550px;
height:550px;
}
.wheel-glow{
width:600px;
height:600px;
}
}
@media(max-width:768px){
.lucky-section{
padding:30px 15px;
}
.wheel-container{
width:90vw;
height:90vw;
max-width:450px;
max-height:450px;
}
#wheel{
width:100%;
height:100%;
}
.wheel-glow{
width:100%;
height:100%;
}
.content h1{
font-size:44px;
}
.content p{
font-size:16px;
}
.spin-btn{
width:200px;
}
}
.footer{
     margin-top:0;
    background:
    linear-gradient(
    90deg,
    #111,
    #1a1a1a,
    #111
    );
    border-top:
    1px solid rgba(255,215,0,.2);
    border-radius:20px 20px 0 0;
    padding:50px 40px 20px;
}
.footer-grid{
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:40px;
}
.footer-column h3{
    color:#ffd700;
    font-size:20px;
    margin-bottom:20px;
    font-weight:800;
}
.footer-column ul{
    list-style:none;
}
.footer-column li{
    margin-bottom:12px;
}
.footer-column a{
    text-decoration:none;
    color:#f5f5f5;
    transition:.3s;
}
.footer-column a:hover{
    color:#00ffff;
    padding-left:5px;
}
.footer-brand{
    text-align:right;
}

.footer-brand img{
    width:180px;
    margin-bottom:15px;
    filter:
    drop-shadow(0 0 15px rgba(255,215,0,.3));
}

.footer-brand p{
    color:#ddd;
    line-height:1.8;
    font-size:14px;
    margin-bottom:25px;
}

.footer-badges{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.badge{
    padding:10px 15px;
    border-radius:10px;
    background:
    rgba(255,215,0,.08);
    border:
    1px solid rgba(255,215,0,.3);
    color:#ffd700;
    font-weight:700;
    font-size:13px;
}
.footer-bottom{

    margin-top:35px;
    padding-top:20px;
    border-top:
    1px solid rgba(255,255,255,.08);
    text-align:center;
    color:#aaa;
    font-size:14px;
}
@media(max-width:768px){
    .footer{
        padding:30px 20px;
    }
    .footer-grid{
        grid-template-columns:
        repeat(2,1fr);
        gap:30px;
    }
    .footer-brand{
        text-align:left;
    }
    .footer-badges{
        justify-content:flex-start;
    }
    .footer-brand img{
        width:140px;
    }
}
.lucky-section,
.about-wrapper,
.footer{
    margin-top:0 !important;
    margin-bottom:0 !important;
}
body{
    margin:0;
    padding:0;
    background:#07111d;
}
.lucky-section{
    margin:0;
}
.about-wrapper{
    border-radius:0;
}
.footer{
    border-radius:0;
}
.about-wrapper{
    width:100%;
    margin-top:0;
    background:
    rgba(8,12,22,.95);
    border:
    1px solid rgba(255,215,0,.25);
    border-radius:20px;
    padding:35px;
    display:flex;
    align-items:center;
    gap:40px;
    box-shadow:
    0 0 25px rgba(255,215,0,.08);
}

.about-logo{
    flex:0 0 260px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.about-logo img{
    width:220px;
    max-width:100%;
    height:auto;
    filter:
    drop-shadow(0 0 20px rgba(255,215,0,.4));
}

.about-content{

    flex:1;
}

.about-content h2{
    color:#ffd700;
    font-size:32px;
    margin-bottom:20px;
    font-weight:800;
    letter-spacing:2px;
    text-shadow:
    0 0 10px rgba(255,215,0,.5);
}

.about-content p{

    color:#e6e6e6;

    font-size:15px;

    line-height:1.9;

    text-align:justify;

    margin-bottom:15px;
}

.about-content p:last-child{
    margin-bottom:0;
}

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

@media(max-width:991px){

    .wrapper{
        grid-template-columns:1fr;
    }

    .about-wrapper{

        flex-direction:column;

        text-align:center;
    }

    .about-content h2{
        text-align:center;
    }

    .about-content p{
        text-align:justify;
    }
}
/* ===========================
   MAX WIDTH CONTAINER
=========================== */

.section-container{
    width:100%;
    max-width:1400px;   /* ubah sesuai kebutuhan */
    margin:0 auto;
    padding:0 20px;
}

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


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


body{

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

    background:#081321;

    padding-top:110px;

}



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


.floating-header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);


    width:90%;

    max-width:1200px;

    height:82px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 35px;


    z-index:99999;


    border-radius:60px;


    background:rgba(8,18,35,.75);

    backdrop-filter:blur(18px);

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


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


    box-shadow:

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

    0 0 18px rgba(255,190,0,.12);


    overflow:hidden;


    transition:.35s;

}




/* ==========================
   BORDER GOLD ANIMATION
========================== */


.floating-header::before{


    content:"";


    position:absolute;


    inset:0;


    border-radius:60px;


    padding:1px;


    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,210,70,.9),

        rgba(255,255,180,.95),

        rgba(255,210,70,.9),

        transparent

    );


    background-size:250% 100%;


    animation:borderMove 5s linear infinite;


    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);


    -webkit-mask-composite:xor;

    mask-composite:exclude;


    pointer-events:none;

}




@keyframes borderMove{


    0%{

        background-position:0% 50%;

    }


    100%{

        background-position:250% 50%;

    }

}





.floating-header:hover{


    box-shadow:


    0 18px 45px rgba(0,0,0,.55),


    0 0 30px rgba(255,210,70,.20);


}





/* ==========================
   LOGO
========================== */


.logo{

    display:flex;

    align-items:center;

    z-index:2;

}



.logo img{


    width:185px;


    transition:.35s;


    filter:

    drop-shadow(0 0 12px rgba(255,210,70,.45));


}



.logo:hover img{


    transform:scale(1.05);

}





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


nav{


    display:flex;

    align-items:center;

    gap:18px;

    z-index:2;


}




nav a{


    color:#fff;


    text-decoration:none;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


    padding:13px 24px;


    border-radius:40px;


    position:relative;


    overflow:hidden;


    transition:.35s;


    white-space:nowrap;


}




nav a::before{


    content:"";


    position:absolute;


    inset:0;


    background:linear-gradient(

        90deg,

        #ffd54a,

        #ffb300

    );


    transform:scaleX(0);


    transform-origin:left;


    transition:.35s;


    z-index:-1;


    border-radius:40px;


}




nav a:hover{


    color:#081321;


}



nav a:hover::before{


    transform:scaleX(1);


}






nav a.active{


    background:linear-gradient(
      90deg,
        #ffd54a,
        #ffb300
    );
    color:#081321;
    box-shadow:
    0 0 20px rgba(255,210,70,.35);

}

@media(max-width:900px){


    .floating-header{


        width:94%;

        height:72px;

        padding:0 25px;

    }



    .logo img{


        width:150px;

    }



    nav{


        gap:10px;

    }



    nav a{


        font-size:12px;

        padding:10px 15px;

    }


}


@media(max-width:768px){
    body{


        padding-top:90px;


    }

  .floating-header{
      width:95%;
    height:62px;
        padding:0 15px;
        border-radius:50px;
       flex-direction:row;

    }
    .logo img{
        width:110px;
    }
    nav{
        gap:5px;
        flex-wrap:nowrap;
    }

    nav a{
        font-size:10px;
        letter-spacing:.5px;
        padding:8px 10px;
        border-radius:30px;
    }
}
@media(max-width:420px){
    .floating-header{
    width:96%;
    height:56px;
    padding:0 10px;
}
.logo img{
  width:95px;
    }
    nav{
        gap:2px;
    }
 nav a{
 font-size:9px;
 padding:7px 7px;
    }
}


.promo-banner-section{

    width:100%;
    padding:70px 0;
    text-align:center;

    position:relative;

}

.promo-banner{

    width:100%;
    max-width:1250px;

    display:block;

    margin:auto;

    user-select:none;

    pointer-events:none;



}

/* efek melayang */

@keyframes bannerFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}


/* tombol */

.promo-button-group{

    display:flex;

    justify-content:center;

    gap:28px;

    margin-top:35px;

    flex-wrap:wrap;

}

.promo-button-group a{

    width:230px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-weight:800;

    letter-spacing:2px;

    border-radius:50px;

    transition:.35s;

    font-size:18px;

}


/* LOGIN */

.promo-login{

    background:linear-gradient(180deg,#ffe680,#ffbe00);

    color:#111;

    box-shadow:
    0 0 15px #ffcc00,
    0 0 35px rgba(255,208,0,.5);

}

.promo-login:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:
    0 0 20px #ffd500,
    0 0 45px #ffd500;

}


/* REGISTER */

.promo-register{

    border:2px solid #ffc400;

    color:#fff;

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

    backdrop-filter:blur(5px);

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

}

.promo-register:hover{

    background:#ffc400;

    color:#111;

    transform:translateY(-5px) scale(1.05);

    box-shadow:
    0 0 20px #ffd500,
    0 0 45px #ffd500;

}


/* Mobile */

@media(max-width:768px){

.promo-banner{

    width:95%;

}

.promo-button-group{

    gap:15px;

}

.promo-button-group a{

    width:90%;

    max-width:320px;

}

}

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

.menu-premium{
    width:100%;
    background:#050b14;
    padding:20px;
    display:flex;
    justify-content:center;
}

.menu-container{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.menu-card{
    position:relative;
    height:95px;
    background:linear-gradient(180deg,#0c1627,#08111d);
    border:1px solid rgba(255,215,120,.35);
    border-radius:16px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:
        inset 0 0 18px rgba(255,215,120,.06),
        0 0 18px rgba(0,0,0,.45);
}

.menu-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:
    linear-gradient(130deg,
    transparent 20%,
    rgba(255,215,120,.12) 50%,
    transparent 80%);
    transform:translateX(-120%);
    transition:.8s;
}

.menu-card:hover::before{
    transform:translateX(120%);
}

.menu-card:hover{
    border-color:#ffd56d;
    transform:translateY(-6px);
    box-shadow:
    0 0 18px rgba(255,210,110,.35),
    inset 0 0 25px rgba(255,215,120,.10);
}

.icon-box{
    width:48px;
    height:48px;
    border-radius:12px;
    border:1px dashed rgba(255,215,120,.55);
    background:rgba(255,215,120,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.icon-box img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.menu-card span{
    color:#ffd978;
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
    font-family:Segoe UI,sans-serif;
    text-transform:uppercase;
    text-shadow:
        0 0 8px rgba(255,215,120,.45);
}

/* Responsive */
@media(max-width:1024px){
    .menu-container{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:640px){
    .menu-container{
        grid-template-columns:repeat(2,1fr);
    }

    .menu-card{
        height:85px;
    }

    .icon-box{
        width:42px;
        height:42px;
    }

    .menu-card span{
        font-size:13px;
    }
}


.testimoni-area{

background:#050b14;
padding:45px 0;
overflow:hidden;
font-family:Poppins,sans-serif;
}
.testimoni-wrapper{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
}

.testimoni-area h2{

text-align:center;
font-size:30px;
font-weight:800;
color:#ffd400;
margin:0;

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

}


.testimoni-area>p{

text-align:center;
color:#aaa;
font-size:13px;
margin-bottom:30px;

}



.testimoni-box{

width:100%;
overflow:hidden;

}



.testimoni-track{

display:flex;
gap:20px;
width:max-content;

animation:
slideKanan 100s linear infinite;

}



.testimoni-card{

width:300px;
min-height:190px;

background:
linear-gradient(
145deg,
#111827,
#050b14
);

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

border-radius:15px;

padding:20px;

box-shadow:

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

flex-shrink:0;

transition:.4s;

}


.testimoni-card:hover{

transform:translateY(-8px);

box-shadow:

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

}



.testimoni-card h3{

color:white;
font-size:17px;
margin:0 0 5px;

}


.star{

color:#ffd400;
font-size:20px;
letter-spacing:2px;

}



.testimoni-card span{

font-size:12px;
color:#bbb;

}



.testimoni-card p{

font-size:13px;
line-height:1.6;
color:#ddd;
}
@keyframes slideKanan{
0%{
transform:translateX(-50%);
}
100%{
transform:translateX(0);
}
}


@media(max-width:600px){

.testimoni-card{

width:260px;

}


.testimoni-area h2{

font-size:23px;

}
}

:root{
    --gold:#ffd54a;
    --gold2:#ffb300;
    --bg:#081321;
    --card:#111111;
    --text:#ffffff;
    --muted:#d0d0d0;
}
.keunggulan-section{
    width:100%;
    padding:70px 20px;
    background:#081321;
}
.keunggulan-wrap{
    max-width:1250px;
    margin:auto;
}

.keunggulan-title{
    text-align:center;
    margin-bottom:45px;
}
.keunggulan-title span{
    display:block;
    color:var(--gold);
    letter-spacing:5px;
    font-size:14px;
    font-weight:700;
    margin-bottom:10px;
}
.keunggulan-title h2{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin:0;
    line-height:1.1;
    text-shadow:0 0 20px rgba(255,215,0,.25);
}
.keunggulan-title p{
    margin-top:15px;
    color:#cfcfcf;
    font-size:15px;
}
.keunggulan-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}
.keunggulan-card{
    position:relative;
    background:linear-gradient(180deg,#161616,#101010);
    border:1px solid rgba(255,212,0,.55);
    border-radius:18px;
    overflow:hidden;
    padding:35px 22px;
    text-align:center;
    transition:.35s;
}
.keunggulan-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top,rgba(255,215,0,.09),transparent 65%);
    pointer-events:none;
}
.keunggulan-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 0 35px rgba(255,215,0,.22),
    inset 0 0 25px rgba(255,215,0,.05);
}
.icon-box{
    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    color:var(--gold);
    background:
    radial-gradient(circle,#2b2100,#0f0f0f);
    border:2px solid rgba(255,215,0,.45);
    box-shadow:
    0 0 25px rgba(255,215,0,.28);
}
.keunggulan-card h3{
    margin:25px 0 12px;
    color:#fff;
    font-size:25px;
    font-weight:800;
}
.line{
    width:42px;
    height:4px;
    background:var(--gold);
    border-radius:20px;
    margin:0 auto 18px;
}
.keunggulan-card p{
    color:#d5d5d5;
    line-height:1.7;
    font-size:15px;
}

@media(max-width:1000px){
.keunggulan-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.keunggulan-title h2{
font-size:30px;
}

.keunggulan-grid{
grid-template-columns:1fr 1fr;
gap:15px;
}
.keunggulan-card{
padding:25px 15px;
}
.icon-box{
width:65px;
height:65px;
font-size:32px;
}
.keunggulan-card h3{
font-size:18px;
}
.keunggulan-card p{
font-size:13px;
}

}
.brand-link {
    color: #FFC107;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.35);
    transition: all 0.3s ease;
}

.brand-link:hover {
    color: #FFD54F;
    text-shadow: 0 0 12px rgba(255, 213, 79, 0.6);
}