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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:url('assets/img/Background/Saber99-Backround.png');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    overflow-x:hidden;
    color:#fff;
}

a{
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.overlay{
    min-height:100vh;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:15px;
}

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

.top-header{
    width:100%;
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.08);

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    padding:12px 20px;
}

.header-logo img{
    width:260px;
}

.header-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
}

.header-top-menu{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:14px;
}

.header-top-menu a{
    color:#fff;
    transition:.3s;
}

.header-top-menu a:hover{
    color:#ffcc00;
}

.header-top-menu span{
    color:#666;
}

.header-login-area{
    display:flex;
    gap:10px;
}

.header-btn{
    min-width:115px;
    height:42px;

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

    border-radius:8px;

    font-size:14px;
    font-weight:900;

    transition:.3s;
}

.login-btn{
    background:linear-gradient(to bottom,#ffd84d,#c89b00);
    color:#fff;
}

.register-btn{
    background:linear-gradient(to bottom,#ff2a2a,#b30000);
    color:#fff;
}

.header-btn:hover{
    transform:translateY(-2px);
}

/* ===================================
RUNNING TEXT
=================================== */

.running-text{
    width:100%;
    height:40px;

    background:#d50000;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.running-logo{
    width:50px;
    height:40px;

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

    flex-shrink:0;
}

.running-logo img{
    width:22px;
    height:22px;

    filter:brightness(0) invert(1);
}

.running-content{
    width:calc(100% - 50px);
    overflow:hidden;
}

.running-content marquee{
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:40px;
    text-transform:uppercase;
}

/* ===================================
SLIDER
=================================== */

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    border-radius:18px;
}

.slides{
    display:flex;
    transition:.5s;
}

.slide{
    min-width:100%;
}

.slider-nav{
    position:absolute;
    top:50%;
    left:0;

    width:100%;

    display:flex;
    justify-content:space-between;

    transform:translateY(-50%);

    padding:0 10px;
}

.slider-nav button{
    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.7);
    color:#fff;

    font-size:20px;
    cursor:pointer;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ===================================
CLOCK
=================================== */

.clock-box{
    margin-top:18px;
    padding:15px;

    background:#111;
    border-radius:12px;

    text-align:center;

    color:#ffd700;
    font-size:22px;
    font-weight:900;
}

/* ===================================
LIVE STATUS
=================================== */

.live-status{
    display:flex;
    gap:12px;
    flex-wrap:wrap;

    margin:20px 0;
}

.live-box{
    flex:1;
    min-width:220px;

    background:linear-gradient(135deg,#101010,#1a1a1a);

    border:1px solid rgba(255,215,0,.15);
    border-radius:16px;

    padding:18px;

    position:relative;
    overflow:hidden;
}

.live-box::before{
    content:'';

    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );

    animation:shimmer 2.5s linear infinite;
}

@keyframes shimmer{
    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(100%);
    }
}

.live-title{
    font-size:13px;
    font-weight:700;
    color:#999;

    margin-bottom:8px;
}

.live-value{
    font-size:28px;
    font-weight:900;
    color:#ffd700;
}

.jackpot{
    animation:jackpotAnim 1s infinite alternate;
}

@keyframes jackpotAnim{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.05);
        text-shadow:
        0 0 25px #ffd700,
        0 0 45px #ffae00;
    }
}

/* ===================================
LAYOUT
=================================== */

.rtp-layout{
    display:flex;
    gap:18px;

    margin-top:35px;

    align-items:flex-start;
}

/* ===================================
SIDEBAR
=================================== */

.provider-sidebar{
    width:260px;
    flex-shrink:0;

    background:#0a0a0a;

    border:1px solid rgba(255,215,0,.18);
    border-radius:18px;

    padding:16px;

    position:sticky;
    top:15px;

    max-height:95vh;
    overflow:auto;
}

.provider-sidebar::-webkit-scrollbar{
    width:5px;
}

.provider-sidebar::-webkit-scrollbar-thumb{
    background:#ffd700;
    border-radius:999px;
}

.sidebar-title{
    font-size:24px;
    font-weight:900;
    color:#ffd700;

    text-align:center;

    margin-bottom:18px;
}

.sidebar-provider{
    display:flex;
    align-items:center;
    gap:12px;

    height:62px;

    background:#141414;

    border:1px solid rgba(255,255,255,.05);
    border-radius:12px;

    padding:10px 12px;
    margin-bottom:10px;

    cursor:pointer;

    transition:.25s;
}

.sidebar-provider:hover{
    transform:translateX(4px);

    background:#1d1d1d;
    border-color:#ffd700;
}

.sidebar-provider.active{
    background:linear-gradient(90deg,#6e0000,#c00000);
    border-color:#ffcf40;
}

.sidebar-provider img{
    width:58px;
    object-fit:contain;
    flex-shrink:0;
}

.sidebar-provider span{
    font-size:13px;
    font-weight:800;
    line-height:1.3;
}

/* ===================================
GAME CONTENT
=================================== */

.game-content{
    flex:1;
}

.game-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;

    margin-bottom:22px;

    background:linear-gradient(90deg,#790000,#cf0000);

    padding:18px;
    border-radius:16px;
}

.game-top-left h2{
    font-size:30px;
    font-weight:900;
}

.game-subtitle{
    margin-top:5px;

    color:#ffd54f;
    font-size:13px;
    font-weight:700;
}

.game-search{
    width:220px;
    height:48px;

    border:none;
    border-radius:12px;

    padding:0 16px;

    outline:none;

    font-size:15px;
}

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

.provider-filter{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin:15px 0 20px;
}

.filter-btn{
    background:#111;
    border:1px solid #3a3a3a;
    color:#fff;

    padding:10px 18px;

    border-radius:8px;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.filter-btn:hover{
    background:#1f1f1f;
}

.filter-btn.active{
    background:#fff;
    color:#000;
    border-color:#fff;
}

/* ===================================
GAME GRID
=================================== */

.game-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}

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

.game-card{
    position:relative;

    background:#151515;

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

    overflow:hidden;

    transition:.3s;
}

.game-card:hover{
    transform:translateY(-4px);

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

.game-img-wrap{
    position:relative;
    overflow:hidden;
}

.game-img{
    width:100%;
    height:190px;

    object-fit:cover;

    transition:.35s ease;
}

.game-card:hover .game-img{
    transform:scale(1.08);
    filter:brightness(.35);
}

.game-hover{
    position:absolute;
    inset:0;

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

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

    backdrop-filter:blur(2px);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;
}

.game-card:hover .game-hover{
    opacity:1;
    visibility:visible;
}

.play-btn{
    width:82%;
    height:52px;

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

    border-radius:999px;

    background:linear-gradient(
        to bottom,
        #fff,
        #ffd54a
    );

    color:#7a3b00;

    font-size:18px;
    font-weight:900;

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

    transform:translateY(15px);

    transition:.25s;
}

.game-card:hover .play-btn{
    transform:translateY(0);
}

.game-title{
    min-height:56px;

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

    text-align:center;

    font-size:16px;
    font-weight:700;
    line-height:1.3;

    padding:6px 4px;
}

/* ===================================
HOT BADGE
=================================== */

.hot-badge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:20;

    padding:6px 12px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ff0000,
        #ff7300
    );

    font-size:11px;
    font-weight:900;

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

    animation:hotAnim .8s infinite alternate;
}

@keyframes hotAnim{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.05);
    }
}

/* ===================================
RTP BAR
=================================== */

.rtp-bar{
    position:relative;

    width:100%;
    height:22px;

    background:#2a2a2a;

    border-radius:999px;

    overflow:hidden;

    margin-bottom:12px;
}

.rtp-fill{
    position:absolute;
    top:0;
    left:0;

    height:100%;

    border-radius:999px;

    overflow:hidden;

    transition:width .6s ease;
}

.rtp-fill.red{
    background:linear-gradient(90deg,#ff1a1a,#ff6a00);
}

.rtp-fill.medium{
    background:linear-gradient(90deg,#ffd000,#fff066);
}

.rtp-fill.high{
    background:linear-gradient(90deg,#00d84f,#7dff5d);
}

.rtp-fill::before{
    content:'';

    position:absolute;
    top:0;
    left:-40%;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    animation:shine 2.8s linear infinite;
}

@keyframes shine{
    100%{
        left:140%;
    }
}

.rtp-percent{
    position:absolute;
    inset:0;

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

    z-index:5;

    font-size:13px;
    font-weight:900;

    text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 6px rgba(255,255,255,.3);
}

/* ===================================
GACOR BOX
=================================== */

.gacor-box{
    background:#2d2d2d;
    border-radius:12px;

    padding:14px;

    text-align:center;
}

.gacor-title{
    font-size:14px;
    font-weight:900;

    margin-bottom:8px;
}

.gacor-time{
    font-size:20px;
    font-weight:900;

    margin-bottom:14px;
}

.pola-wrapper{
    background:#242424;
    border-radius:12px;

    overflow:hidden;

    margin-top:10px;
}

.pola-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;

    background:#242424;

    padding:10px;

    border-bottom:1px solid rgba(255,255,255,.06);

    font-size:13px;
    font-weight:800;
}

.pola-item:last-child{
    border-bottom:none;
}

.pola-icons{
    font-size:18px;
    letter-spacing:3px;
}

/* ===================================
RTP RENDAH
=================================== */

.rtp-rendah{
    margin-top:10px;
    padding:20px;

    min-height:180px;

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

    text-align:center;

    background:linear-gradient(
        180deg,
        #b30000,
        #650000
    );

    border-radius:14px;
}

.rtp-rendah .top{
    width:100%;

    padding-bottom:12px;
    margin-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.2);

    font-size:18px;
    font-weight:900;
}

.rtp-rendah .bottom{
    font-size:28px;
    font-weight:900;
}

/* ===================================
LIVE FEED
=================================== */

.live-feed{
    margin-top:35px;

    background:#0f0f0f;

    border:1px solid rgba(255,215,0,.12);
    border-radius:18px;

    padding:18px;
}

.feed-title{
    margin-bottom:18px;

    text-align:center;

    color:#ffd700;

    font-size:24px;
    font-weight:900;
}

.feed-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.feed-item{
    background:linear-gradient(
        135deg,
        #171717,
        #202020
    );

    border-left:4px solid #ffd700;
    border-radius:14px;

    padding:14px 16px;

    font-size:14px;
    font-weight:700;
    line-height:1.5;

    animation:fadeFeed .4s ease;
}

@keyframes fadeFeed{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.footer{
    margin-top:35px;

    background:linear-gradient(
        180deg,
        #111,
        #090909
    );

    border:1px solid rgba(255,215,0,.12);
    border-radius:18px;

    padding:30px 25px;

    text-align:center;
}

.footer h2{
    margin-bottom:18px;

    color:#ffd700;

    font-size:30px;
    font-weight:900;
}

.footer p{
    margin-bottom:14px;

    color:#cfcfcf;

    font-size:15px;
    line-height:1.8;
}

.copyright{
    margin-top:18px;
    padding:16px;

    text-align:center;

    color:#999;

    font-size:14px;
    font-weight:700;
}

/* ===================================
TABLET
=================================== */

@media(max-width:1200px){

    .game-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

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

@media(max-width:992px){

    .game-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

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

.provider-sidebar{
    display:block;
}

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

@media(max-width:768px){

    .container{
        padding:10px;
    }

    /* HIDE DESKTOP */

    .top-header,
    .provider-sidebar,
    .clock-box,
    .live-status{
        display:none;
    }

    /* GRID */

    .game-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    /* TOPBAR */

    .game-topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .game-top-left h2{
        font-size:24px;
    }

    .game-search{
        width:100%;
    }

    /* CARD */

    .game-img{
        height:160px;
    }

    .game-title{
        font-size:13px;
        min-height:50px;
    }

    .play-btn{
        height:44px;
        font-size:16px;
    }

    /* FEED */

    .feed-title{
        font-size:20px;
    }

    .feed-item{
        font-size:12px;
        padding:12px;
    }

    /* FOOTER */

    .footer{
        padding:22px 18px;
    }

    .footer h2{
        font-size:24px;
    }

    .footer p{
        font-size:13px;
        line-height:1.7;
    }

}

.rtp-title{
    text-align:center;
    padding:12px 0;
    margin:0;

    color:#fff;
    font-size:34px;
    font-weight:900;
    text-transform:uppercase;

    background:#1a0000;
    border-bottom:3px solid #ff0000;
}