/* =====================================
           RESET
        ===================================== */
        
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        
        html{
            scroll-behavior:smooth;
        }
        
        body{
            font-family:'Poppins',sans-serif;
            background:#121212;
            color:#ffffff;
            overflow-x:hidden;
        }
        
        /* =====================================
           SCROLLBAR
        ===================================== */
        
        ::-webkit-scrollbar{
            width:10px;
        }
        
        ::-webkit-scrollbar-track{
            background:#171717;
        }
        
        ::-webkit-scrollbar-thumb{
            background:#444;
            border-radius:20px;
        }
        
        ::-webkit-scrollbar-thumb:hover{
            background:#666;
        }
        
        /* =====================================
           HEADER
        ===================================== */
        
        header{
        
            position:fixed;
            top:0;
            left:0;
            right:0;
        
            height:72px;
        
            display:flex;
            justify-content:space-between;
            align-items:center;
        
            padding:0 50px;
        
            background:rgba(15,15,15,.90);
        
            backdrop-filter:blur(14px);
        
            z-index:9999;
        
            border-bottom:1px solid rgba(255,255,255,.06);
        
        }
        
        .logo{
            display:flex;
            align-items:center;
        }
        
        .logo img{
            height:48px;
            width:auto;
            display:block;
            transition:.3s ease;
        }
        
        .logo img:hover{
            transform:scale(1.05);
        }
        
        nav{
        
            display:flex;
            gap:35px;
        
        }
        
        nav a{
        
            color:#d6d6d6;
        
            text-decoration:none;
        
            transition:.3s;
        
            font-size:15px;
        
        }
        
        nav a:hover{
        
            color:#ffffff;
        
        }
        
        .login-btn{
        
            text-decoration:none;
        
            background:#ffe600;
        
            color:black;
        
            padding:12px 24px;
        
            border-radius:30px;
        
            transition:.3s;
        
        }
        
        .login-btn:hover{
        
            background:#ff5200;
            
            color:white;
        
        }
        
        /* =====================================
           LAYOUT
        ===================================== */
        
        .container{
        
            display:grid;
        
            grid-template-columns:240px 1fr;
        
            gap:40px;
        
            width:min(1500px,95%);
        
            margin:100px auto 80px;
        
        }
        
        /* =====================================
           SIDEBAR
        ===================================== */
        
        aside{
        
            position:sticky;
        
            top:90px;
        
            height:max-content;
        
            background:#1b1b1b;
        
            border-radius:15px;
        
            padding:25px;
        
            border:1px solid rgba(255,255,255,.05);
        
        }
        
        aside h3{
        
            margin-bottom:25px;
        
            font-size:22px;
        
        }
        
        aside ul{
        
            list-style:none;
        
        }
        
        aside li{
        
            margin-bottom:8px;
        
        }
        
        aside a{
        
            display:block;
        
            text-decoration:none;
        
            color:#ddd;
        
            padding:13px 18px;
        
            border-radius:10px;
        
            transition:.25s;
        
        }
        
        aside a:hover{
        
            background:#ff5200;
        
            color:black;
        
            transform:translateX(6px);
        
        }
        
        /* =====================================
           MAIN
        ===================================== */
        
        main{
        
            display:flex;
        
            flex-direction:column;
        
            gap:45px;
        
        }
        
        /* =====================================
           HERO
        ===================================== */
        
        .hero{
        
            position:relative;
        
            overflow:hidden;
        
            border-radius:18px;
        
            min-height:600px;
        
            box-shadow:0 20px 60px rgba(0,0,0,.45);
        
        }
        
        .hero img{
        
            width:100%;
        
            height:600px;
        
            object-fit:cover;
        
            display:block;
        
        }
        
        .hero::after{
        
            content:"";
        
            position:absolute;
        
            inset:0;
        
            background:linear-gradient(
        
                to right,
        
                rgba(0,0,0,.80),
        
                rgba(0,0,0,.35),
        
                rgba(0,0,0,.10)
        
            );
        
        }
        
        .hero-content{
        
            position:absolute;
        
            z-index:5;
        
            left:70px;
        
            bottom:70px;
        
            width:560px;
        
        }
        
        .hero-content span{
        
            color:#ffe600;
        
            font-weight:700;
        
            letter-spacing:3px;
        
            text-transform:uppercase;
        
        }
        
        .hero-content h1{
        
            font-size:55px;
        
            line-height:1.1;
        
            margin:20px 0;
        
        }
        
        .hero-content p{
        
            color:#ddd;
        
            line-height:1.8;
        
            margin-bottom:35px;
        
        }
        
        .hero-buttons{
        
            display:flex;
        
            gap:15px;
        
        }
        
        .hero-buttons a{
        
            text-decoration:none;
        
            padding:16px 32px;
        
            border-radius:10px;
        
            font-weight:600;
        
            transition:.3s;
        
        }
        
        .hero-buttons a:first-child{
        
            background:#ffe600;
        
            color:black;
        
        }
        
        .hero-buttons a:last-child{
        
            background:#ff5200;
        
            color:white;
        
        }
        
        .hero-buttons a:hover{
        
            transform:translateY(-4px);
        
        }
        
        /* =====================================
           SECTION
        ===================================== */
        
        .section-title{
        
            margin-bottom:30px;
        
        }
        
        .section-title h2{
        
            font-size:34px;
        
        }
        
        .section-title p{
        
            color:#999;
        
            margin-top:10px;
        
        }
        
        /* =====================================
           GAME CARD
        ===================================== */
        
        .cards{
        
            display:grid;
        
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        
            gap:25px;
        
        }
        
        .card{
        
            background:#1b1b1b;
        
            border-radius:15px;
        
            padding:35px;
        
            transition:.35s;
        
            border:1px solid rgba(255,255,255,.05);
        
        }
        
        .card:hover{
        
            transform:translateY(-8px);
        
            border-color:#ffe600;
        
            box-shadow:0 15px 40px rgba(0,0,0,.40);
        
        }
        
        .card h3{
        
            margin-bottom:15px;
        
        }
        
        .card p{
        
            color:#b8b8b8;
        
            line-height:1.8;
        
        }
        
        /* =====================================
           ABOUT
        ===================================== */
        
        #about{
        
            background:#1b1b1b;
        
            border-radius:15px;
        
            padding:40px;
        
            line-height:2;
        
            color:#cfcfcf;
        
        }
        
        /* =====================================
           FAQ
        ===================================== */
        
        .faq{
        
            display:flex;
        
            flex-direction:column;
        
            gap:18px;
        
        }
        
        .faq-item{
        
            background:#1b1b1b;
        
            border-radius:12px;
        
            overflow:hidden;
        
        }
        
        .faq-item button{
        
            width:100%;
        
            background:none;
        
            color:white;
        
            border:none;
        
            padding:20px;
        
            text-align:left;
        
            font-size:16px;
        
            cursor:pointer;
        
        }
        
        .faq-content{
        
            display:none;
        
            padding:0 20px 20px;
        
            color:#bdbdbd;
        
        }
        
        /* =====================================
           FOOTER
        ===================================== */
        
        footer{
            background:#0d0d0d;
            border-top:1px solid rgba(255,255,255,.06);
            padding:70px 8% 25px;
            margin-top:80px;
        }
        
        .footer-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:40px;
        }
        
        .footer-grid h3{
            margin-bottom:20px;
            color:#fff;
            font-size:18px;
        }
        
        .footer-grid p{
            color:#999;
            line-height:1.8;
        }
        
        .footer-grid a{
            display:block;
            color:#999;
            text-decoration:none;
            margin-bottom:12px;
            transition:.3s;
        }
        
        .footer-grid a:hover{
            color:#ffe600;
            transform:translateX(5px);
        }
        
        .copyright{
            text-align:center;
            color:#777;
            margin-top:50px;
            padding-top:30px;
            border-top:1px solid rgba(255,255,255,.05);
        }
        
        /* =====================================
           BUTTON TOP
        ===================================== */
        
        #topButton{
            position:fixed;
            right:30px;
            bottom:30px;
            width:55px;
            height:55px;
            border:none;
            border-radius:50%;
            background:#ffe600;
            color:#000;
            cursor:pointer;
            font-size:20px;
            display:none;
            transition:.3s;
            z-index:999;
            box-shadow:0 10px 25px rgba(0,0,0,.4);
        }
        
        #topButton:hover{
            transform:translateY(-5px);
        }
        
        /* =====================================
           HOVER EFFECT
        ===================================== */
        
        .card,
        .hero,
        aside,
        #about,
        .faq-item{
            transition:.35s;
        }
        
        .hero:hover{
            transform:translateY(-3px);
        }
        
        /* =====================================
           GLASS EFFECT
        ===================================== */
        
        .glass{
            background:rgba(255,255,255,.05);
            backdrop-filter:blur(18px);
            border:1px solid rgba(255,255,255,.08);
        }
        
        /* =====================================
           FADE ANIMATION
        ===================================== */
        
        .fade{
            opacity:0;
            transform:translateY(40px);
            transition:1s;
        }
        
        .fade.show{
            opacity:1;
            transform:translateY(0);
        }
        
        /* =====================================
           RESPONSIVE
        ===================================== */
        
        @media(max-width:1200px){
        
        .container{
            grid-template-columns:220px 1fr;
        }
        
        .hero-content{
            width:470px;
        }
        
        .hero-content h1{
            font-size:44px;
        }
        
        }
        
        @media(max-width:991px){
        
        header{
            padding:0 25px;
        }
        
        .container{
            grid-template-columns:1fr;
        }
        
        aside{
            position:relative;
            top:0;
        }
        
        .hero{
            min-height:auto;
        }
        
        .hero img{
            height:420px;
        }
        
        .hero-content{
            left:35px;
            bottom:35px;
            width:85%;
        }
        
        .hero-content h1{
            font-size:36px;
        }
        
        .cards{
            grid-template-columns:repeat(2,1fr);
        }
        
        }
        
        @media(max-width:768px){
        
        header{
            flex-wrap:wrap;
            height:auto;
            padding:20px;
            gap:15px;
        }
        
        nav{
            width:100%;
            justify-content:center;
            flex-wrap:wrap;
            gap:15px;
        }
        
        .hero img{
            height:320px;
        }
        
        .hero-content{
            position:absolute;
            left:25px;
            bottom:25px;
            width:90%;
        }
        
        .hero-content h1{
            font-size:28px;
        }
        
        .hero-content p{
            font-size:14px;
        }
        
        .hero-buttons{
            flex-wrap:wrap;
        }
        
        .cards{
            grid-template-columns:1fr;
        }
        
        footer{
            padding:50px 25px;
        }
        
        }
        
        @media(max-width:480px){
        
        .logo{
            font-size:22px;
        }
        
        .hero img{
            height:260px;
        }
        
        .hero-content span{
            font-size:12px;
        }
        
        .hero-content h1{
            font-size:24px;
        }
        
        .hero-buttons a{
            width:100%;
            text-align:center;
        }
        
        aside{
            padding:18px;
        }
        
        .card{
            padding:25px;
        }
        
        #about{
            padding:25px;
        }
        
        }
        
        /* =====================================
           UTILITIES
        ===================================== */
        
        .text-center{
            text-align:center;
        }
        
        .mt-20{
            margin-top:20px;
        }
        
        .mt-40{
            margin-top:40px;
        }
        
        .mb-40{
            margin-bottom:40px;
        }
        
        .rounded{
            border-radius:15px;
        }
        
        .shadow{
            box-shadow:0 15px 40px rgba(0,0,0,.4);
        }
        
        .burger{
            display:none;
            font-size:30px;
            background:none;
            border:none;
            color:white;
            cursor:pointer;
        }
        
        .burger span{
            display:block;
            width:28px;
            height:3px;
            margin:5px 0;
            background:white;
            border-radius:3px;
        }
                
        .mobile-menu{
            position:fixed;
            top:0;
            right:-100%;
            width:260px;
            height:100vh;
            background:#1b1b1b;
            padding:80px 20px;
            display:flex;
            flex-direction:column;
            gap:10px;
            transition:.3s ease;
            z-index:9999;
        }
        
        .mobile-menu a{
            color:white;
            text-decoration:none;
            padding:12px;
            background:#222;
            border-radius:8px;
        }
        
        .mobile-menu.active{
            right:0;
        }
        
        @media(max-width:768px){
        
        /* sembunyikan login di mobile */
        .login-btn{
            display:none;
        }
        
        /* burger muncul */
        .burger{
            display:block;
        }
        
        /* sidebar genre hilang di mobile */
        aside{
            display:none;
        }
        
        /* nav desktop juga hilang */
        nav{
            display:none;
        }
        
        }
        
        .game-name,
        .rtp-percent,
        .rtp-bar,
        .badge{
            transition:0.3s ease;
        } 
        
        .rtp-wrapper{
            margin-top:30px;
            display:flex;
            justify-content:center;
        }
        
        /* CARD UTAMA */
        .rtp-box{
            width:100%;
            max-width:900px;
        
            background:linear-gradient(145deg,#161616,#1c1c1c);
            border:1px solid rgba(255,255,255,.06);
        
            border-radius:18px;
            padding:25px;
        
            box-shadow:0 20px 60px rgba(0,0,0,.6);
        
            position:relative;
            overflow:hidden;
        }
        
        /* GLOW EFFECT */
        .rtp-box::before{
            content:"";
            position:absolute;
            top:-50%;
            left:-50%;
            width:200%;
            height:200%;
            background:radial-gradient(circle,#1da1ff22,transparent 60%);
            transform:rotate(25deg);
        }
        
        /* HEADER */
        .rtp-header{
            font-size:18px;
            font-weight:700;
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:20px;
        }
        
        /* LIVE DOT */
        .live-dot{
            width:10px;
            height:10px;
            background:#00ff88;
            border-radius:50%;
            box-shadow:0 0 12px #00ff88;
            animation:pulse 1.5s infinite;
        }
        
        /* ROW */
        .rtp-row{
            display:grid;
            grid-template-columns:1.2fr 2fr .6fr .5fr;
            align-items:center;
            gap:15px;
        
            padding:15px;
            border-radius:12px;
        
            background:#111;
            border:1px solid rgba(255,255,255,.05);
        }
        
        /* GAME NAME */
        .game-name{
            font-weight:500;
        }
        
        /* BAR */
        .rtp-bar{
            background:#2a2a2a;
            height:10px;
            border-radius:20px;
            overflow:hidden;
        }
        
        .fill{
            height:100%;
            width:0%;
            background:linear-gradient(90deg,#ff416c,#ff4b2b);
            border-radius:20px;
            transition:width 1s ease;
        }
        
        /* COLORS */
        .fill.hot{
            background:linear-gradient(90deg,#ff416c,#ff4b2b);
        }
        
        .fill.stable{
            background:linear-gradient(90deg,#1fa2ff,#12d8fa);
        }
        
        .fill.low{
            background:linear-gradient(90deg,#f7971e,#ffd200);
        }
        
        /* TEXT */
        .rtp-percent{
            text-align:right;
            font-weight:600;
        }
        
        /* BADGE */
        .badge{
            text-align:center;
            font-size:12px;
            padding:5px 10px;
            border-radius:20px;
            font-weight:700;
        }
        
        .badge.hot{background:#ff2d55;color:#fff;}
        .badge.stable{background:#00c6ff;color:#fff;}
        .badge.low{background:#ffb300;color:#111;}
        
        /* ANIMATION */
        @keyframes pulse{
            0%{transform:scale(1);opacity:1;}
            50%{transform:scale(1.4);opacity:.6;}
            100%{transform:scale(1);opacity:1;}
        }
        
        /* MOBILE */
        @media(max-width:768px){
        .rtp-row{
            grid-template-columns:1fr;
            gap:8px;
        }
        .rtp-percent{
            text-align:left;
        }
        }   
        
        .footer-logo{
            width:140px;
            height:auto;
            margin-bottom:10px;
            opacity:0.9;
            transition:.3s;
        }
        
        .footer-logo:hover{
            opacity:1;
            transform:scale(1.05);
        } 
        
        .legal-page{
            max-width:900px;
            margin:120px auto;
            padding:30px;
            color:#ddd;
            line-height:1.8;
        }
        
        .legal-page h1{
            font-size:32px;
            margin-bottom:20px;
        }
        
        .legal-page h2{
            margin-top:25px;
            font-size:20px;
            color:#fff;
        }