*{box-sizing:border-box}

/* ===================== BLUE PALETTE ===================== */
:root{
  --bg-deep:#927838  ;          /* latar paling gelap (biru navy) */
  --violet-900:#0a0a0a ;      /* header/nav */
  --violet-800:#0a0a0a;      /* gradien atas */
  --violet-700:#ab954c ;      /* biru utama */
  --violet-600:#927838 ;      /* biru terang */
  --violet-500:#fbf4a0 ;      /* highlight */
  --lavender:#E3F2FD;        /* panel terang */
  --lavender-2:#F1F8FF;      /* putih kebiruan */
  --magenta:#00B0FF;         /* aksen cyan (pengganti pink) */
  --text-light:#FFFFFF;
  --text-dark:#0B1B2B;
  --shadow:#ffffff;
}

/* ===================== BASE ===================== */
body{
  margin:0;
  background-color:var(--bg-deep);
  font-family:Arial, sans-serif;
  color:var(--text-light);
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}

/* ===================== POPUP ===================== */
.popup{
  position:fixed; inset:0;
  background:#1f1f1fe0;
  display:flex; justify-content:center; align-items:center;
  z-index:100000;
}
.popup-content{
  background:linear-gradient(180deg, #927838);
  color:#ffffff;
  padding:30px; text-align:center;
  border-radius:14px;
  box-shadow:0 5px 35px var(--shadow), 0 0 22px #00000059;
  max-width:320px;
}
.popup-content h2{margin-bottom:15px}
.popup-content button{
  background:linear-gradient(180deg,#b1b0af, #ffffff , #b1b0af);
  color:#000000; border:none;
  padding:12px 20px; border-radius:50px;
  font-size:16px; font-weight:bold; cursor:pointer; transition:.3s;
  box-shadow:0 2px 0 var(--violet-800), 0 0 12px #00000073;
}
.popup-content button:hover{filter:brightness(1.06)}
.popup-content button:active{transform:translateY(1px)}

/* ===================== HEADER / NAV ===================== */
header{
  background:linear-gradient(180deg, var(--violet-900), var(--violet-800));
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; width:100%; position:relative; z-index:10; flex-wrap:wrap;
}
.logo img{height:50px}

nav.desktop-nav{display:flex; gap:20px}
nav.desktop-nav a{
  color:#fff; text-decoration:none; font-size:14px; font-weight:600; transition:.3s;
}
nav.desktop-nav a:hover{color:var(--lavender)}

.actions{display:flex; align-items:center; gap:10px}

.register{
  background:linear-gradient(180deg,#b1b0af, #ffffff , #b1b0af);
  color:#080808; text-decoration:none; font-weight:bold; font-size:14px;
  padding:10px 15px; border:1px solid var(--lavender); border-radius:6px;
  display:flex; align-items:center; justify-content:center; transition:.3s;
  backdrop-filter:saturate(140%);
}
.register:hover{color:var(--violet-600); border-color:var(--violet-600)}

.login{
  background:linear-gradient(180deg, var(--violet-600), var(--violet-700));
  color:#fff; text-decoration:none; font-weight:bold;
  padding:10px 15px; border-radius:6px; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:.3s;
  box-shadow:0 0 12px #0a0a0a;
}
.login:hover{box-shadow:0 0 18px #0a0a0a; filter:brightness(1.05)}

/* ===================== MOBILE BAR ===================== */
.right-mobile{display:none; align-items:center; gap:10px}

.hamburger{display:none; flex-direction:column; cursor:pointer; gap:6px;
  background:none; border:none; padding:0; z-index:10000}
.hamburger .bar{width:30px; height:3px; background:#fff; transition:all .3s ease; border-radius:2px}
.hamburger.active .bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-register, .mobile-login{
  font-size:12px; padding:6px 10px; border-radius:4px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center
}
.mobile-register{color:#fff; border:1px solid var(--lavender); text-decoration:none; font-weight:bold}
.mobile-login{
  background:linear-gradient(180deg, var(--violet-600), var(--violet-700));
  color:#fff; text-decoration:none; font-weight:bold
}

.mobile-nav{
  display:none; flex-direction:column; position:absolute; top:70px; right:0; width:100%;
  background:linear-gradient(180deg, var(--violet-900), var(--violet-800));
  box-shadow:0 12px 22px rgba(0,0,0,.6); z-index:9999;
  border-top:1px solid rgba(233,216,253,.15);
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  overflow:hidden; animation:dropdownFade .3s ease
}
.mobile-nav.active{display:flex}
.mobile-nav a{
  padding:15px 20px; color:#fff; text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(233,216,253,.12);
  background:transparent; transition:background-color .3s, color .3s
}
.mobile-nav a:hover{background-color:rgba(168,85,247,.12); color:var(--lavender)}

@keyframes dropdownFade{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)}}

@media (max-width:992px){
  nav.desktop-nav, .actions{display:none}
  .right-mobile{display:flex}
  .hamburger{display:flex}
  .logo img{height:40px}
}
@media (max-width:480px){
  .mobile-register,.mobile-login{padding:5px 8px; font-size:11px}
  .right-mobile{gap:5px}
}

/* ===================== MARQUEE ===================== */
.marquee-container{
  background:linear-gradient(180deg,#b1b0af, #ffffff , #b1b0af);
  color:#000000; padding:5px 0; font-size:13px; white-space:nowrap; overflow:hidden; font-weight: bold; font-family: 'Playfair Display', serif;
}
.marquee-text{display:inline-block; padding-left:100%; animation:scroll-left 15s linear infinite}
@keyframes scroll-left{0%{transform:translateX(0)} 100%{transform:translateX(-100%)}}

/* ===================== CAROUSEL ===================== */
.carousel-container{position:relative; max-width:100%; margin:20px auto; overflow:hidden; border-radius:5px}
.carousel-slide{display:none}
.carousel-slide img{width:100%; display:block}

.prev,.next{
  cursor:pointer; position:absolute; top:50%; width:auto; padding:10px; margin-top:-22px;
  color:#fff; font-weight:bold; font-size:20px; user-select:none;
  background:rgba(27, 15, 46, .6); border-radius:50%; z-index:10
}
.prev:hover,.next:hover{background:rgba(27, 15, 46, .9)}
.prev{left:15px} .next{right:15px}
body.nav-open .carousel-container .prev,
body.nav-open .carousel-container .next{display:none}

.dot-container{text-align:center; position:absolute; width:100%; bottom:15px; z-index:5}
.dot{
  cursor:pointer; height:12px; width:12px; margin:0 4px;
  background-color:rgba(255,255,255,.7); border-radius:50%; display:inline-block; transition:background-color .3s ease
}
.dot.active,.dot:hover{background-color:var(--violet-600)}

.fade{animation-name:fade; animation-duration:1.5s}
@keyframes fade{from{opacity:.4} to{opacity:1}}

/* ===================== CTA / BUTTON GROUP ===================== */
.live-score{background:#0c0c0c; padding:30px 15px; margin:20px 0; width:100%; text-align:center}
.live-score .buttons{display:flex; justify-content:center; gap:15px; flex-wrap:wrap; margin-bottom:25px}
.live-score .buttons a{
  padding:12px 20px; border-radius:50px; text-decoration:none; font-weight:bold;
  display:flex; align-items:center; transition:.3s
}

.masuk{
  background:linear-gradient(180deg,#b1b0af, #ffffff , #b1b0af);
  color:#000000; box-shadow:0 0 15px #927838
}
.daftar{
  background:linear-gradient(180deg, var(--violet-600), var(--violet-700));
  color:#fff; box-shadow:0 0 15px #b1b0af
}

.cta-button{
  margin-top:25px;
  background:linear-gradient(90deg, var(--violet-600), var(--violet-600));
  color:#ffffff; padding:15px 30px; border-radius:50px; text-decoration:none; font-size:16px; display:inline-block; transition:.3s; font-weight: bold;
  box-shadow:0 0 16px #b1b0af
}
.cta-button:hover{transform:scale(1.08)}

/* ===================== FOOTER ===================== */
footer{
  background:#000000; color:#ffffff;
  text-align:center; padding:15px; font-size:14px; width:100%
}

/* ===================== MONEY FALL ===================== */
.money-container{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999
}
.money{
  position:absolute; top:-50px; width:40px; height:40px;
  background-image:url('CAHAYA.png'); background-size:cover; opacity:.5; animation:fall linear infinite
}
@keyframes fall{
  0%{transform:translateY(0) rotate(0deg); opacity:1}
  100%{transform:translateY(100vh) rotate(360deg); opacity:0}
}

/* ===================== BUTTON KICK ANIMATION ===================== */
@keyframes tendangButton{
  0%{transform:translate(0,0) scale(1); opacity:1}
  20%{transform:translate(-10px,-10px) scale(1.1)}
  40%{transform:translate(0,0) scale(1)}
  60%{transform:translate(100px,-30px) scale(1.2)}
  80%{transform:translate(300px,-80px) scale(.5); opacity:.8}
  100%{transform:translate(600px,-150px) scale(.3); opacity:0}
}
#enterButton.tendang{animation:tendangButton 1s forwards ease-in}

/* OVERLAY */
.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

/* POPUP BOX */
.popup-box{
    position:relative;
    width:90%;
    max-width:500px;
    animation:zoomIn 0.4s ease;
}

/* IMAGE */
.popup-box img{
    width:100%;
    border-radius:12px;
    display:block;
}

/* CLOSE BUTTON */
.close-btn{
    position:absolute;
    top:-15px;
    right:-15px;
    background:#ff0055;
    color:#fff;
    font-size:20px;
    width:35px;
    height:35px;
    border-radius:50%;
    text-align:center;
    line-height:35px;
    cursor:pointer;
    font-weight:bold;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

/* BUTTON MAIN SEKARANG */
.popup-btn{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    background:#ff0000;
    color:#fff;
    padding:12px 30px;
    font-weight:bold;
    border-radius:8px;
    text-decoration:none;
    font-size:18px;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.popup-btn:hover{
    background:#cc0000;
}

/* ANIMATION */
@keyframes zoomIn{
    from{transform:scale(0.7); opacity:0;}
    to{transform:scale(1); opacity:1;}
}

/* BERHASIL WD */
#snackbar {
                visibility: hidden;
                min-width: 250px;
                margin-left: -143px;
                background-color: #000000;
                color: #f2c24f;
                text-align: center;
                border-radius: 10px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 0px;
                position: fixed;
                z-index: 1;
                left: 50%;
                top: 100px;
                font-size: 14px;
                font-weight: bold;
            }
        
            #snackbar.show {
                visibility: visible;
                -webkit-animation: fadein 0.8s, fadeout 0.8s 4.5s;
                animation: fadein 0.8s, fadeout 0.8s 4.5s;
            }
        
            @-webkit-keyframes fadein {
                from {top: 0; opacity: 0;} 
                to {top: 100px; opacity: 2;}
            }
        
            @keyframes fadein {
                from {top: 0; opacity: 0;}
                to {top: 100px; opacity: 2;}
            }
        
            @-webkit-keyframes fadeout {
                from {top: 100px; opacity: 2;} 
                to {top: 0; opacity: 0;}
            }
        
            @keyframes fadeout {
                from {top: 100px; opacity: 2;}
                to {top: 0; opacity: 0;}
            }