/* =================================
   SARDEN PREMIUM UI
   MOBILE GAMING STYLE
================================= */


/* RESET */

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


html,
body {

    width:100%;
    min-height:100%;

}


body {

    background:#000;

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

    color:#fff;

}



a {

    text-decoration:none;

    color:inherit;

}



/* =================================
   MAIN CONTAINER
================================= */


.app-container {


    width:100%;

    max-width:430px;

    min-height:100vh;

    margin:auto;


    background:

    linear-gradient(
        rgba(0,0,0,.0),
        rgba(0,0,0,.5)
    ),

    url("../img/background/background.jpg");


    background-size:cover;

    background-position:center;


    padding-bottom:85px;


    overflow:hidden;


}






/* =================================
   DOWNLOAD BAR
================================= */


.download-bar {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:10px 12px;


    background:

    linear-gradient(
    90deg,
    #120d05,
    #050505
    );


    border-bottom:

    1px solid

    rgba(212,160,50,.4);


}





.download-info {


    display:flex;

    align-items:center;

    gap:10px;


}



.download-logo img {


    width:42px;

    height:42px;


    object-fit:contain;


}



.download-text h5 {


    font-size:13px;

    margin:0;

    color:#e8b84a;


    font-weight:800;


}



.download-text p {


    font-size:10px;

    margin:3px 0 0;


    color:#bbb;


}




.download-button {


    padding:

    10px 15px;


    border-radius:20px;


    background:

    linear-gradient(
    #ffd45a,
    #b77900
    );


    color:#111;


    font-size:11px;

    font-weight:bold;


    box-shadow:

    0 0 15px

    rgba(255,200,50,.35);


}






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


.main-header {


    height:50px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:0 18px;


    background:

    rgba(0,0,0,.75);


    border-bottom:

    1px solid

    rgba(255,190,50,.2);


}





.main-logo {


    width:145px;

    height:145px;


    object-fit:contain;


}



.menu-button {


    background:none;

    border:none;


    color:#e7b744;


    font-size:28px;


}






/* =================================
   BANNER
================================= */


.banner-section {


    padding:0;


}



.banner-wrapper {


    position:relative;


}



.banner-image {


    width:100%;


    display:block;


    object-fit:cover;


}





.slider-dot {


    position:absolute;


    bottom:15px;


    left:50%;


    transform:translateX(-50%);


    display:flex;


    gap:7px;


}



.slider-dot span {


    width:10px;

    height:10px;


    border-radius:50%;


    background:#aaa;


}



.slider-dot .active {


    background:#ffbf35;


    box-shadow:

    0 0 10px

    #ffbf35;


}






/* =================================
   INFO BAR
================================= */


.info-bar {


    display:flex;


    align-items:center;


    gap:10px;


    height:42px;

    padding:0 12px;


    background:#090909;


    border-top:

    1px solid

    rgba(255,200,60,.2);


    border-bottom:

    1px solid

    rgba(255,200,60,.2);


    font-size:12px;


}





.info-icon {


    color:#ffca3a;


}



.info-label {


    color:#ffca3a;


    font-weight:bold;


    white-space:nowrap;


}



.info-text {


    flex:1;


    color:#ddd;


    overflow:hidden;


    white-space:nowrap;


}







/* =================================
   LOGIN CARD
================================= */


.login-section {


    padding:15px 18px;


}



.login-card {


    background:

    rgba(10,10,10,.85);


    border:

    1px solid

    rgba(255,190,50,.5);


    border-radius:20px;


    padding:16px;


    box-shadow:


    0 0 20px

    rgba(255,170,0,.15);


}



.login-card h2 {


    text-align:center;


    font-family:Georgia,serif;


    font-size:22px;


}



.login-card p {


    text-align:center;


    color:#aaa;


    font-size:12px;


    letter-spacing:2px;


    margin-bottom:12px;


}



.input {


    display:flex;


    align-items:center;


    gap:12px;


    background:#111;


    border:

    1px solid

    #333;


    height:42px;


    padding:0 15px;


    border-radius:25px;


    margin-bottom:12px;


}



.input i {


    color:#aaa;


}



.input input {


    flex:1;


    background:none;


    border:none;


    outline:none;


    color:white;


}






.login-button {


    display:flex;


    gap:12px;


}




.login-button button {


    flex:1;


    border:none;


    height:42px;


    border-radius:25px;


    font-weight:bold;


}




.login {


    background:

    linear-gradient(
    #ff3939,
    #850000
    );


    color:white;


}





.register {


    background:

    linear-gradient(
    #ffd65a,
    #c98b00
    );


    color:white;


}







/* =================================
 GAME CATEGORY
================================= */


.category {


    padding:5px 12px;


}



.category-scroll {


    display:flex;


    gap:12px;


    overflow-x:auto;


}



.category-scroll::-webkit-scrollbar {


    display:none;


}




.category-item {


    min-width:90px;


    padding:12px 5px;


    text-align:center;


    background:


    rgba(20,20,20,.75);


    border-radius:15px;


    border:

    1px solid

    rgba(255,160,0,.3);


    box-shadow:none;


}





.category-item img {


    width:45px;

    height:42px;


    object-fit:contain;


}





.category-item span {


    display:block;


    margin-top:8px;


    font-size:11px;


    color:#fff;


}







/* =================================
 JACKPOT
================================= */


.jackpot-section {


    padding:25px 25px;


}



.jackpot-card {


    text-align:center;


    border-radius:20px;


    padding:60px;


    background:

    linear-gradient(
    180deg,
    #15100a,
    #050505
    );


    border:

    1px solid

    #a87820;


}





.jackpot-card h3 {


    color:#eab947;


    font-size:60px;


}



.jackpot-value {


    margin-top:60px;


    color:#ffd45a;


    font-size:30px;


    font-weight:bold;


    text-shadow:

    0 0 15px

    rgba(255,190,50,.6);


}







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


.bottom-navigation {


    position:fixed;


    bottom:0;


    left:50%;


    transform:translateX(-50%);


    width:100%;


    max-width:430px;


    height:75px;


    background:#070707;


    border-top:

    1px solid

    rgba(255,200,50,.25);


    display:flex;


    z-index:99;


}



.nav-item {


    flex:1;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    gap:5px;


    color:#888;


    font-size:11px;


}




.nav-item i {


    font-size:22px;


}




.nav-item.active {


    color:#ffc43b;


}





.login-circle {


    width:58px;


    height:58px;


    margin-top:-30px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    background:

    linear-gradient(
    #ffd65a,
    #b77700
    );


    color:#111;


    border:4px solid #000;


    box-shadow:

    0 0 20px

    rgba(255,190,0,.5);


}






/* DESKTOP PREVIEW */


@media(min-width:700px){


.app-container{

    border-left:
    1px solid #333;

    border-right:
    1px solid #333;

}


}

/* =================================
   FINAL UI POLISH PATCH
   LOGIN COMPACT + CATEGORY CLEAN
================================= */


/* LOGIN FORM FINAL */

.login-section{
    padding:10px 20px;
}

.login-card{
    border-radius:15px;
    padding:12px;
}

.login-card h2{
    font-size:20px;
    margin-bottom:5px;
}

.login-card p{
    margin-bottom:10px;
    letter-spacing:1.5px;
}

.input{
    height:38px;
    margin-bottom:8px;
}

.login-button button{
    height:38px;
    font-size:14px;
}


/* CATEGORY FINAL CLEAN */

.category-item{
    min-width:85px;
    padding:8px 5px;
    background:transparent;
    border:none;
    box-shadow:none;
}

.category-item img{
    width:48px;
    height:48px;
}


/* INFO BAR FINAL SLIM */

.info-bar{
    height:35px;
    padding:0 10px;
}

.info-label,
.info-text{
    font-size:11px;
}


/* RUNNING TEXT */

.info-text{
    animation:runningText 12s linear infinite;
}

@keyframes runningText{

    from{
        transform:translateX(100%);
    }

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

}


/* =================================
   FINAL CATEGORY + UI POLISH
================================= */


/* INFO BAR */

.info-bar{
    height:35px;
    padding:0 10px;
}

.info-label,
.info-text{
    font-size:11px;
}


/* RUNNING TEXT */

.info-text{
    animation:runningText 12s linear infinite;
    white-space:nowrap;
}


@keyframes runningText{

    from{
        transform:translateX(100%);
    }

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

}


/* LOGIN FINAL COMPACT */

.login-section{
    padding:10px 20px;
}

.login-card{
    padding:12px;
    border-radius:15px;
}

.login-card h2{
    font-size:20px;
    margin-bottom:5px;
}

.login-card p{
    margin-bottom:10px;
    letter-spacing:1.5px;
}

.input{
    height:38px;
    margin-bottom:8px;
}

.login-button button{
    height:38px;
    font-size:14px;
}


/* CATEGORY HORIZONTAL SLIDE */

.category{
    padding:8px 12px;
}


.category-scroll{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

}


.category-scroll::-webkit-scrollbar{
    display:none;
}


.category-item{

    flex:0 0 auto;

    min-width:85px;

    padding:8px 5px;

    text-align:center;

    background:transparent;

    border:none;

    box-shadow:none;

}


.category-item img{

    width:48px;

    height:48px;

    object-fit:contain;

}


.category-item span{

    margin-top:8px;

    font-size:11px;

}

/* =================================
   CATEGORY SPACING FINAL
================================= */


.category{
    padding:5px 8px;
}


.category-scroll{

    gap:5px;

    justify-content:flex-start;

}


.category-item{

    min-width:78px;

    padding:5px 0;

}


.category-item img{

    width:45px;

    height:45px;

}


.category-item span{

    margin-top:5px;

    font-size:11px;

}

/* =================================
   SARDEN PREMIUM FINAL OVERRIDE
   LAST UI TUNING
================================= */


/* INFO BAR - SINGLE LINE */

.info-bar{
    height:35px;
    padding:0 10px;
}

.info-text{
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    animation:runningText 12s linear infinite;
}

.info-label{
    font-size:11px;
}


@keyframes runningText{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}


/* LOGIN FINAL COMPACT */

.login-section{
    padding:10px 20px;
}

.login-card{
    padding:12px;
    border-radius:15px;
}

.login-card h2{
    font-size:20px;
    margin-bottom:5px;
}

.login-card p{
    margin-bottom:10px;
}

.input{
    height:38px;
    margin-bottom:8px;
}

.login-button button{
    height:38px;
}


/* CATEGORY FINAL
   Horizontal + closer spacing
*/

.category{
    padding:5px 8px;
}


.category-scroll{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
}


.category-scroll::-webkit-scrollbar{
    display:none;
}


.category-item{
    flex:0 0 auto;
    min-width:82px;
    padding:8px 0;
    background:transparent;
    
    
}


.category-item img{
    width:80px;
    height:80px;
    object-fit:contain;
}


.category-item span{
    margin-top:5px;
    font-size:11px;
}



/* =================================
   MENU DRAWER FINAL
   SIDE MENU ANIMATION
================================= */


/* OVERLAY */

.menu-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

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

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:998;

}


.menu-overlay.active{

    opacity:1;

    visibility:visible;

}



/* DRAWER */

.menu-drawer{

    position:fixed;

    top:0;
    right:0;

    width:56%;

    height:95vh;

    background:

    linear-gradient(
        180deg,
        #151515,
        #050505
    );

    border-left:1px solid rgba(255,190,50,.35);

    transform:translateX(100%);

    transition:.35s ease;

    z-index:999;

    padding:20px 12px;

    overflow-y:auto;

}


.menu-drawer.active{

    transform:translateX(0);

}



/* DRAWER HEADER */

.drawer-header{

    text-align:center;

    margin-bottom:20px;

}


.drawer-header img{

    width:155px;

    height:auto;

    object-fit:contain;

}


.drawer-header h3{

    font-size:13px;

    color:#ffd45a;

    margin-top:15px;

}



/* DRAWER LOGIN */

.drawer-input{

    display:flex;

    align-items:center;

    gap:15px;

    height:40px;

    background:#111;

    border:1px solid #333;

    border-radius:40px;

    padding:0 10px;

    margin-bottom:8px;

}


.drawer-input i{

    color:#aaa;

    font-size:15px;

}


.drawer-input input{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:11px;

}



.drawer-button{

    display:flex;

    gap:5px;

}


.drawer-button button{

    flex:1;

    border:none;

    border-radius:20px;

    height:32px;

    font-size:11px;

    font-weight:bold;

}


.drawer-button button:first-child{

    background:linear-gradient(#ff3939,#850000);

    color:white;

}


.drawer-button button:last-child{

    background:linear-gradient(#ffd65a,#b77700);

    color:#111;

}



/* DRAWER MENU */

.drawer-menu{

    margin-top:20px;

}


.drawer-menu a{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

    font-size:11px;

    padding:12px 5px;

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

}


.drawer-menu i{

    color:#ffd45a;

    width:15px;

}

.banner-image{

transition:.3s ease;

}
/* ======================
FOOTER IMAGE ICON FINAL
====================== */


.footer-icon{

width:42px;
height:42px;

object-fit:contain;

display:block;

margin:auto;

}



.login-circle img{

width:75px;
height:75px;

object-fit:contain;

}



/* ======================
JACKPOT ANIMATION FINAL
====================== */


.jackpot-currency{

font-size:18px;

color:#ffd84d;

letter-spacing:3px;

margin-bottom:5px;

}


.jackpot-value{

font-size:45px;

font-weight:900;

color:#ffd84d;

text-shadow:
0 0 10px #ffcc33,
0 0 20px #ff9900;

animation:
jackpotGlow 1.5s infinite alternate;

}


@keyframes jackpotGlow{


from{

text-shadow:
0 0 10px #ffcc33;

}


to{

text-shadow:
0 0 25px #fff000,
0 0 40px #ff9900;

}


}

/* =================================
   SARDEN11 JACKPOT FINAL UPGRADE
   PNG BACKGROUND + ANIMATION
================================= */

.jackpot-card{

    background-image:url("../img/jackpot/jackpot.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    position:relative;

}


.jackpot-card::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,215,80,.18),
        transparent
    );

    transform:translateX(-100%);
    animation:jackpotShine 3s infinite;

}


.jackpot-card > *{
    position:relative;
    z-index:1;
}


.jackpot-value{

    animation:
    jackpotGlow 1.5s infinite alternate,
    jackpotPulse 1s infinite;

}


@keyframes jackpotGlow{

    from{
        text-shadow:0 0 10px #ffcc33;
    }

    to{
        text-shadow:
        0 0 25px #fff000,
        0 0 40px #ff9900;
    }

}


@keyframes jackpotPulse{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.04);
    }

}


@keyframes jackpotShine{

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

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

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

}



/* ==========================================
   SARDEN11 JACKPOT FINAL FIX
   - remove frame/stroke
   - animated looping number
   - IDR format support
   - better position
========================================== */

.jackpot-card{
    border:none !important;
    box-shadow:none !important;
    position:relative;
    overflow:hidden;
}


.jackpot-card::before{
    display:none !important;
}


.jackpot-value{
    position:relative;
    top:-15px;

    font-size:45px !important;
    font-weight:900;

    color:#ffd84d;

    text-shadow:
    0 0 10px #ffcc33,
    0 0 25px #ff9900;

    animation:
    jackpotGlow 1.5s infinite alternate;
}


.jackpot-currency{
    position:relative;
    top:-10px;

    color:#ffd84d;
    font-size:18px;
    letter-spacing:3px;
}


@keyframes jackpotGlow{

    from{
        text-shadow:
        0 0 10px #ffcc33;
    }

    to{
        text-shadow:
        0 0 30px #fff000,
        0 0 50px #ff9900;
    }

}




/* ==========================================
   SARDEN11 FINAL PATCH UPGRADE
   KEEP ORIGINAL STYLE + FIX INDEX FINAL
========================================== */


/* FIX NEW INDEX BUTTON CLASS */

.btn-login,
.btn-register{

    flex:1;
    height:38px;
    border-radius:25px;

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

    font-weight:bold;

}


.btn-login{

    background:
    linear-gradient(
    #ff3939,
    #850000
    );

    color:white;

}



.btn-register{

    background:
    linear-gradient(
    #ffd65a,
    #c98b00
    );

    color:#111;

}



/* HEADER LOGO BALANCE */

.main-logo{

    width:150px;
    height:70px;

    object-fit:contain;

}




/* JACKPOT POSITION FIX */

.jackpot-card{

    position:relative;

    overflow:hidden;

}



.jackpot-value{

    position:relative;

    top:-15px;

    z-index:2;

}



/* CATEGORY ICON BALANCE */

.category-item img{

    object-fit:contain;

}



/* IMAGE FOOTER ICON SUPPORT */

.footer-icon{

    display:block;

    width:42px;

    height:42px;

    object-fit:contain;

}


/* KEEP MOBILE */

@media(max-width:430px){

    .main-logo{

        width:130px;

        height:65px;

    }


}



/* ==========================================
   SARDEN11 BANNER FINAL UPGRADE
   MINIMAL CLEAN - IMAGE ONLY
========================================== */

.banner-section{
    padding:10px 10px 0;
}

.banner-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:16px;
    background:#000;
    box-shadow:0 0 18px rgba(255,190,50,.18);
}

.banner-slide{
    display:none;
    opacity:0;
}

.banner-slide.active{
    display:block;
    animation:bannerFade .8s ease forwards;
}

.banner-image{
    width:100%;
    height:auto;
    aspect-ratio:3 / 1;
    display:block;
    object-fit:cover;
}


@keyframes bannerFade{

    from{
        opacity:.35;
        transform:scale(1.03);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}


.slider-dot{
    bottom:10px;
    gap:6px;
}


.slider-dot span{

    width:7px;
    height:7px;

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

    transition:.3s ease;

}


.slider-dot .active{

    width:22px;

    border-radius:10px;

    background:#ffd45a;

    box-shadow:0 0 10px #ffd45a;

}


@media(max-width:430px){

    .banner-section{
        padding:8px 8px 0;
    }

    .banner-wrapper{
        border-radius:14px;
    }

}


/* ==========================================
   SARDEN11 FINAL LAYOUT FIX
   BANNER FULL + JACKPOT COMPRESS
========================================== */


/* ==========================
   BANNER FULL WIDTH
========================== */

.banner-section{
    padding:0 !important;
    margin:0 !important;
}


.banner-wrapper{

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:hidden;

}


.banner-slide{

    width:100%;

}


.banner-image{

    width:100% !important;

    height:auto;

    aspect-ratio:3 / 1;

    object-fit:cover;

    display:block;

}



/* ==========================
   PROGRESSIVE JACKPOT FINAL
========================== */

.jackpot-section{

    padding:10px 15px 5px !important;

}


.jackpot-card{

    height:155px !important;

    background-size:100% 100% !important;

    background-position:center !important;

    padding:0 !important;

    border:none !important;

    box-shadow:none !important;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



/* TITLE */

.jackpot-card h3{

    margin-top:-5px !important;

    margin-bottom:3px !important;

    font-size:16px !important;

}



/* IDR */

.jackpot-currency{

    margin-top:2px !important;

    font-size:16px !important;

}



/* NUMBER */

.jackpot-value{

    margin-top:0 !important;

    font-size:34px !important;

    line-height:1 !important;

}



@media(max-width:430px){

    .jackpot-card{

        height:145px !important;

    }


    .jackpot-card h3{

        font-size:15px !important;

    }


    .jackpot-value{

        font-size:32px !important;

    }

}


/* ==========================================
   SARDEN11 JACKPOT FINAL
   SIMPLE NUMBER ONLY
========================================== */

.jackpot-section{
    padding:5px 15px 0 !important;
}


.jackpot-card{

    height:130px !important;

    background-size:100% 130px !important;

    background-position:center center !important;

    padding:0 !important;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none !important;

    box-shadow:none !important;

}


/* Hide unused elements if exist */

.jackpot-card h3,
.jackpot-currency{

    display:none !important;

}



/* Jackpot number */

.jackpot-value{

    margin:0 !important;

    top:0 !important;

    transform:translateY(5px);

    font-size:38px !important;

    line-height:1 !important;

    font-weight:900;

    color:#ffd84d;

    text-align:center;

    text-shadow:
    0 0 10px #ffcc33,
    0 0 25px #ff9900;

}



@media(max-width:430px){

    .jackpot-card{

        height:120px !important;

        background-size:100% 120px !important;

    }


    .jackpot-value{

        font-size:34px !important;

    }

}



/* ==========================================
 SARDEN11 HEADER SPACE FINAL PATCH V13.4
 ========================================== */

.main-header{
    height:70px !important;
    min-height:70px !important;
    overflow:hidden !important;
}

.main-logo{
    width:130px !important;
    height:65px !important;
    object-fit:contain !important;
    display:block;
}

/* prevent drawer from affecting page flow */
.menu-drawer,
.menu-overlay{
    position:fixed !important;
}

/* keep banner directly below header */
.banner-section{
    margin-top:0 !important;
    padding-top:0 !important;
}

.banner-wrapper{
    margin-top:0 !important;
}

/* remove accidental vertical gaps */
.main-header + .banner-section{
    margin-top:0 !important;
}


/* ==========================================
   SARDEN11 V13.6 FULL FINAL FIX
   HEADER / LAYOUT CLEAN OVERRIDE
   Keep all original components
========================================== */


/* MAIN RESET */
html,body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}


/* HEADER FINAL */
.main-header{
    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 18px !important;
    overflow:hidden !important;
}


.main-logo{
    width:130px !important;
    height:65px !important;
    object-fit:contain !important;
    display:block !important;
}


/* BALANCE HEADER */
.member-header-balance{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffd45a;
    font-size:13px;
    font-weight:bold;
}


/* DRAWER MUST NOT PUSH CONTENT */
.menu-overlay{
    position:fixed !important;
    inset:0;
    z-index:998 !important;
}


.menu-drawer{
    position:fixed !important;
    top:0;
    right:0;
    height:100vh !important;
    z-index:999 !important;
}


/* BANNER DIRECTLY AFTER HEADER */
.banner-section{
    margin:0 !important;
    padding:0 !important;
}


.banner-wrapper{
    margin:0 !important;
    padding:0 !important;
}


/* REMOVE UNWANTED GAP */
.main-header,
.download-bar,
.banner-section{
    flex-shrink:0;
}


/* MOBILE */
@media(max-width:430px){

    .main-header{
        height:65px !important;
        min-height:65px !important;
    }

    .main-logo{
        width:125px !important;
        height:60px !important;
    }

}


/* ==========================================
   SARDEN11 STYLE V14 CLEAN FINAL FIX
   Keep original UI + remove layout conflicts
========================================== */

/* GLOBAL */
html,body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

/* MAIN WRAPPER */
.app-container{
    overflow-x:hidden !important;
    overflow-y:visible !important;
}

/* HEADER FINAL */
.main-header{
    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 18px !important;
    overflow:hidden !important;
}

.main-logo{
    width:130px !important;
    height:65px !important;
    object-fit:contain !important;
}

/* BALANCE */
.member-header-balance{
    display:flex;
    align-items:center;
    color:#ffd45a;
    font-weight:bold;
    font-size:13px;
}

/* DRAWER */
.menu-overlay{
    position:fixed !important;
    inset:0;
    z-index:998 !important;
}

.menu-drawer{
    position:fixed !important;
    top:0;
    right:0;
    height:100vh !important;
    z-index:999 !important;
}

/* CONTENT AFTER HEADER */
.banner-section,
.banner-wrapper{
    margin:0 !important;
}

.banner-section{
    padding:0 !important;
}

/* FOOTER */
.bottom-navigation{
    position:fixed !important;
    bottom:0;
    z-index:1000 !important;
}


/* =================================
   FINAL UPGRADE PATCH
   QUICK ACTION + DRAWER HISTORY
================================= */

.quick-action-section{
    padding:12px 18px 10px;
}

.quick-action-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(18,14,8,.92), rgba(3,3,3,.92));
    border:1px solid rgba(255,190,50,.55);
    box-shadow:0 0 22px rgba(255,170,0,.18), inset 0 0 18px rgba(255,255,255,.03);
}

.quick-action-btn{
    min-height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:15px;
    font-weight:900;
    letter-spacing:.4px;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.quick-action-btn i{
    font-size:20px;
}

.quick-action-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
    transform:translateX(-120%);
    transition:.45s ease;
}

.quick-action-btn:hover::before,
.quick-action-btn:active::before{
    transform:translateX(120%);
}

.deposit-action{
    background:linear-gradient(180deg, #ff3b3b, #8b0000);
    box-shadow:0 8px 18px rgba(255,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
}

.withdraw-action{
    background:linear-gradient(180deg, #ffdc61, #b87800);
    color:#161006;
    box-shadow:0 8px 18px rgba(255,191,0,.24), inset 0 1px 0 rgba(255,255,255,.32);
}

.history-menu{
    border-bottom:1px solid rgba(255,255,255,.10);
}

.history-toggle{
    width:100%;
    min-height:52px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:transparent;
    border:0;
    color:#fff;
    font:inherit;
    cursor:pointer;
}

.history-toggle span{
    display:flex;
    align-items:center;
    gap:18px;
}

.history-toggle i:first-child{
    width:20px;
    text-align:center;
    color:#ffd05c;
}

.history-arrow{
    color:#ffd05c;
    font-size:13px;
    transition:transform .25s ease;
}

.history-menu.active .history-arrow{
    transform:rotate(180deg);
}

.history-child{
    display:none;
    padding:0 0 8px 38px;
}

.history-menu.active .history-child{
    display:block;
}

.drawer-menu .history-child a{
    min-height:38px;
    padding:0;
    font-size:13px;
    color:#d8d8d8;
    border-bottom:0;
}

.member-header-balance{
    padding:7px 12px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,210,82,.18), rgba(0,0,0,.25));
    border:1px solid rgba(255,203,72,.35);
    color:#ffd45a;
    font-size:13px;
    font-weight:800;
    box-shadow:0 0 12px rgba(255,190,50,.14);
}

@media(max-width:360px){
    .quick-action-card{
        gap:8px;
        padding:10px;
    }

    .quick-action-btn{
        min-height:52px;
        font-size:13px;
    }

    .quick-action-btn i{
        font-size:18px;
    }
}

/* CRITICAL QUICK ACTION CSS V2 DUPLICATE */


/* CRITICAL QUICK ACTION CSS V2 */
.quick-action-section{
    padding:12px 18px 10px !important;
}
.quick-action-card{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    padding:14px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(18,14,8,.92), rgba(3,3,3,.92)) !important;
    border:1px solid rgba(255,190,50,.55) !important;
    box-shadow:0 0 22px rgba(255,170,0,.18), inset 0 0 18px rgba(255,255,255,.03) !important;
}
.quick-action-btn{
    min-height:58px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.4px !important;
    color:#fff !important;
    text-decoration:none !important;
    overflow:hidden !important;
}
.quick-action-btn i{
    font-size:20px !important;
}
.deposit-action{
    background:linear-gradient(180deg, #ff3b3b, #8b0000) !important;
    box-shadow:0 8px 18px rgba(255,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.withdraw-action{
    background:linear-gradient(180deg, #ffdc61, #b87800) !important;
    color:#161006 !important;
    box-shadow:0 8px 18px rgba(255,191,0,.24), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.history-toggle{
    width:100% !important;
    min-height:52px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:transparent !important;
    border:0 !important;
    color:#fff !important;
    font:inherit !important;
    text-align:left !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}
.history-toggle span{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
}
.history-toggle i:first-child{
    width:20px !important;
    text-align:center !important;
    color:#ffd05c !important;
}
.history-arrow{
    color:#ffd05c !important;
    font-size:13px !important;
    transition:transform .25s ease !important;
}
.history-child{
    display:none !important;
    padding:0 0 8px 38px !important;
}
.history-menu.active .history-child{
    display:block !important;
}
.history-menu.active .history-arrow{
    transform:rotate(180deg) !important;
}
.drawer-menu .history-child a{
    min-height:38px !important;
    padding:0 !important;
    font-size:13px !important;
    color:#d8d8d8 !important;
    border-bottom:0 !important;
}
@media(max-width:360px){
    .quick-action-card{gap:8px !important;padding:10px !important;}
    .quick-action-btn{min-height:52px !important;font-size:13px !important;}
}


/* CRITICAL UI CSS V3 DUPLICATE */


/* CRITICAL UI CSS V3 */
.download-button{
    box-shadow:0 0 8px rgba(255,200,50,.24) !important;
}
.download-bar,
.main-header{
    box-shadow:none !important;
}
.main-header{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    padding:0 18px !important;
}
.main-logo{
    width:128px !important;
    height:60px !important;
    object-fit:contain !important;
}
.member-header-balance{
    min-width:104px !important;
    height:36px !important;
    padding:0 9px 0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    border-radius:14px !important;
    background:linear-gradient(180deg, rgba(27,22,12,.92), rgba(4,4,4,.94)) !important;
    border:1px solid rgba(255,197,67,.55) !important;
    color:#ffd45a !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    box-shadow:inset 0 0 12px rgba(255,190,50,.08) !important;
}
.member-header-balance .balance-currency{
    color:#ffd45a !important;
}
.member-header-balance .balance-amount{
    color:#fff3ba !important;
}
.balance-refresh{
    width:24px !important;
    height:24px !important;
    border:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,204,76,.16) !important;
    color:#ffd45a !important;
    font-size:12px !important;
    padding:0 !important;
}
.balance-refresh.is-spinning i{
    animation:balanceSpin .55s linear;
}
@keyframes balanceSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
.quick-action-section{
    padding:10px 20px 8px !important;
}
.quick-action-card{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:10px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(17,12,6,.88), rgba(2,2,2,.90)) !important;
    border:1px solid rgba(255,190,50,.48) !important;
    box-shadow:inset 0 0 18px rgba(255,183,35,.06) !important;
}
.quick-action-btn{
    min-height:50px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.35px !important;
    text-decoration:none !important;
    overflow:hidden !important;
    position:relative !important;
}
.quick-action-btn i{
    width:28px !important;
    height:28px !important;
    border-radius:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:16px !important;
}
.deposit-action{
    background:linear-gradient(180deg, #ff3a3f 0%, #b90011 52%, #780006 100%) !important;
    color:#fff !important;
    box-shadow:0 5px 12px rgba(255,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.deposit-action i{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
}
.withdraw-action{
    background:linear-gradient(180deg, #ffe370 0%, #e2aa15 52%, #a46b00 100%) !important;
    color:#161006 !important;
    box-shadow:0 5px 12px rgba(255,191,0,.18), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.withdraw-action i{
    background:rgba(0,0,0,.14) !important;
    color:#211400 !important;
}
.history-menu{
    border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.history-toggle{
    width:100% !important;
    min-height:52px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:transparent !important;
    border:0 !important;
    color:#fff !important;
    font:inherit !important;
    text-align:left !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}
.history-toggle span{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
}
.history-toggle i:first-child{
    width:20px !important;
    text-align:center !important;
    color:#ffd05c !important;
}
.history-arrow{
    color:#ffd05c !important;
    font-size:13px !important;
    transition:transform .25s ease !important;
}
.history-child{
    display:block !important;
    max-height:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    padding:0 0 0 38px !important;
    transition:max-height .28s ease, opacity .22s ease, padding .28s ease !important;
}
.history-menu.active .history-child{
    max-height:150px !important;
    opacity:1 !important;
    padding:0 0 8px 38px !important;
}
.history-menu.active .history-arrow{
    transform:rotate(180deg) !important;
}
.drawer-menu .history-child a{
    min-height:36px !important;
    padding:0 !important;
    font-size:13px !important;
    color:#d8d8d8 !important;
    border-bottom:0 !important;
}
.jackpot-section{
    padding:8px 15px 0 !important;
}
.jackpot-card{
    height:132px !important;
    background-size:100% 132px !important;
    background-position:center center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
}
.jackpot-value{
    width:100% !important;
    margin:0 !important;
    top:0 !important;
    transform:translateY(-8px) !important;
    text-align:center !important;
    font-size:34px !important;
    line-height:1 !important;
}
@media(max-width:360px){
    .quick-action-section{padding-left:14px !important;padding-right:14px !important;}
    .quick-action-card{gap:8px !important;padding:9px !important;}
    .quick-action-btn{min-height:46px !important;font-size:13px !important;}
    .quick-action-btn i{width:26px !important;height:26px !important;font-size:15px !important;}
    .member-header-balance{min-width:96px !important;font-size:12px !important;}
    .jackpot-value{font-size:31px !important;}
}

/* =================================
   V4 SMALL POLISH
   BALANCE POSITION + BUTTON SHADOW
================================= */

.main-header{
    justify-content:flex-start !important;
    gap:8px !important;
}

.member-header-balance{
    margin-left:auto !important;
    margin-right:6px !important;
    flex:0 0 auto !important;
}

.menu-button{
    margin-left:0 !important;
    flex:0 0 auto !important;
}

.deposit-action,
.withdraw-action{
    box-shadow:none !important;
}

/* =================================
   HEADER GUEST MENU POSITION FIX
================================= */

.main-logo + .menu-button{
    margin-left:auto !important;
}

.member-header-balance + .menu-button{
    margin-left:0 !important;
}

/* ======================
SARDEN11 PROVIDER HOME PREMIUM
====================== */

.provider-home-section{

    padding:15px 12px 10px;

}


.provider-home-title{

    color:#ffd45a;

    font-size:16px;

    font-weight:900;

    text-shadow:
    0 2px 5px #000;

    margin-bottom:12px;

}



.provider-home-scroll{

    display:flex;

    gap:10px;

    overflow-x:auto;

    scroll-behavior:smooth;

}


.provider-home-scroll::-webkit-scrollbar{

    display:none;

}



.provider-home-item{

    flex:0 0 auto;

    width:105px;

    height:135px;

    border-radius:16px;

    padding:3px;


    background:

    linear-gradient(
        160deg,
        #ff3b3b,
        #8b0000,
        #111
    );


    border:

    1px solid rgba(255,215,100,.7);


    box-shadow:

    0 0 12px rgba(255,0,0,.45),
    inset 0 0 15px rgba(0,0,0,.8);


    overflow:hidden;

}



.provider-home-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:13px;

}


/* =========================================================
   SARDEN11 - FIXED BACKGROUND FINAL STABLE MOBILE
   Background diam; hanya konten yang scroll.
   100svh dipakai agar ukuran background tidak berubah saat
   address bar / toolbar Chrome Android muncul atau menghilang.
========================================================= */

html{
    background:#000 !important;
}

body{
    background:#000 !important;
}

/* Background lama pada wrapper dimatikan agar tidak ikut tinggi konten */
.app-container{
    position:relative !important;
    isolation:isolate !important;
    background:none !important;
}

/* Layer background independen dari panjang halaman */
.app-container::before{
    content:"";
    position:fixed !important;

    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    width:100% !important;
    max-width:430px !important;

    /* fallback lama */
    height:100vh !important;

    background-image:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,.50)
        ),
        url("../img/background/background.jpg") !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;

    z-index:-1 !important;
    pointer-events:none !important;
    will-change:auto !important;
}

/*
  Modern mobile browsers:
  svh = small/stable viewport.
  Berbeda dari dvh, nilainya tidak berubah saat toolbar browser bergerak.
*/
@supports (height:100svh){
    .app-container::before{
        height:100svh !important;
    }
}

/* Konten tetap berada di atas layer background */
.app-container > *{
    position:relative;
}

/* Preview desktop tetap selebar layout mobile */
@media(min-width:700px){
    .app-container::before{
        width:430px !important;
    }
}

/* =========================================================
   DESKTOP RESPONSIVE LAYOUT
   One PHP source for every device.  Mobile keeps the original
   application-style interface; desktop expands the same content.
========================================================= */
@media (min-width: 900px){
    html,
    body{
        min-width: 100%;
        background:
            radial-gradient(circle at 50% -20%, rgba(128,26,0,.34), transparent 45%),
            #050505 !important;
    }

    .app-container{
        width: min(100%, 1440px) !important;
        max-width: 1440px !important;
        min-height: 100vh;
        margin: 0 auto !important;
        padding: 0 0 48px !important;
        overflow: visible !important;
        border-left: 1px solid rgba(255,193,68,.12);
        border-right: 1px solid rgba(255,193,68,.12);
        background: linear-gradient(180deg, rgba(16,10,7,.94), rgba(4,4,4,.98)) !important;
    }

    .app-container::before{
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        opacity: .18;
        background-image:
            linear-gradient(90deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,.72) 42%, rgba(3,3,3,.80) 100%),
            linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.72)),
            url("../img/background/background-desktop.jpg") !important;
        background-position: center top !important;
    }

    .download-bar{
        padding: 7px 42px !important;
        border-bottom-color: rgba(255,199,82,.22) !important;
    }

    .download-logo img{
        width: 32px !important;
        height: 32px !important;
    }

    .download-text h5{
        font-size: 12px !important;
    }

    .download-text p{
        font-size: 9px !important;
    }

    .main-header{
        position: sticky !important;
        top: 0;
        z-index: 80;
        width: 100%;
        max-width: 1440px;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 0 42px !important;
        background: rgba(10,8,7,.94) !important;
        border-bottom: 1px solid rgba(255,199,82,.16);
        backdrop-filter: blur(16px);
    }

    .main-logo{
        width: 156px !important;
        height: 66px !important;
    }

    .member-header-balance{
        min-width: 160px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    .menu-button{
        width: 42px !important;
        height: 42px !important;
        font-size: 17px !important;
    }

    .banner-section{
        padding: 26px 42px 0 !important;
    }

    .banner-wrapper{
        max-width: 1356px;
        margin: 0 auto;
        border-radius: 20px !important;
        box-shadow: 0 22px 46px rgba(0,0,0,.46);
    }

    .banner-image{
        aspect-ratio: 3 / 1;
        object-fit: cover;
    }

    .info-bar{
        max-width: 1356px;
        height: 42px !important;
        margin: 14px auto 0;
        padding: 0 16px !important;
        border-radius: 12px;
        border: 1px solid rgba(255,199,82,.16);
    }

    .category{
        padding: 22px 42px 8px !important;
    }

    .category-scroll{
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px !important;
        max-width: 1356px;
        margin: 0 auto;
        overflow: visible !important;
    }

    .category-scroll > a{
        min-width: 0 !important;
    }

    .category-item{
        width: 100% !important;
        min-width: 0 !important;
        min-height: 96px;
        padding: 12px !important;
        border-radius: 16px !important;
        background: linear-gradient(145deg, rgba(47,30,14,.86), rgba(9,9,9,.93)) !important;
        border: 1px solid rgba(255,193,68,.2) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.22) !important;
        transition: transform .2s ease, border-color .2s ease;
    }

    .category-item:hover{
        transform: translateY(-4px);
        border-color: rgba(255,205,91,.62) !important;
    }

    .category-item img{
        width: 68px !important;
        height: 68px !important;
    }

    .login-section{
        padding: 16px 42px 4px !important;
    }

    .login-card{
        display: grid;
        grid-template-columns: minmax(205px, .8fr) minmax(0, 2.2fr);
        align-items: center;
        column-gap: 32px;
        max-width: 1356px;
        margin: 0 auto;
        padding: 20px 26px !important;
    }

    .login-card h2,
    .login-card p{
        grid-column: 1;
    }

    .login-card p{
        margin-bottom: 0 !important;
    }

    .login-card form{
        grid-column: 2;
        grid-row: 1 / span 2;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .login-card .input,
    .login-card .login-button{
        margin: 0 !important;
    }

    .login-card .login-button{
        display: contents;
    }

    .login-card .login-button button,
    .login-card .login-button a{
        min-width: 104px;
    }

    .jackpot-section,
    .home-togel,
    .provider-home-section{
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .jackpot-section{
        padding-top: 18px !important;
    }

    .jackpot-card{
        max-width: 1356px;
        margin: 0 auto;
        min-height: 112px !important;
    }

    .jackpot-value{
        font-size: clamp(38px, 4vw, 62px) !important;
    }

    .home-togel-head,
    .provider-lobby-heading{
        max-width: 1356px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-togel-track{
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 1356px;
        margin: 0 auto;
        gap: 14px !important;
        overflow: visible !important;
    }

    .home-togel-card{
        height: auto !important;
        min-height: 174px !important;
        padding: 14px !important;
        border-radius: 18px 18px 24px 14px !important;
    }

    .home-togel-status,
    .home-togel-prize{
        padding: 4px 6px !important;
        font-size: 7px !important;
    }

    .home-togel-card h4{
        min-height: 32px !important;
        max-height: none !important;
        margin: 10px 0 7px !important;
        font-size: 15px !important;
    }

    .home-togel-meta{
        font-size: 8px !important;
    }

    .home-togel-meta b{
        font-size: 9px !important;
    }

    .home-togel-result{
        margin-top: 9px !important;
        padding-top: 8px !important;
    }

    .home-togel-result small{
        display: block !important;
        font-size: 7px !important;
    }

    .home-togel-result b{
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .home-togel-play{
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        margin: 0 !important;
        font-size: 8px !important;
    }

    .provider-home-scroll{
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: 1356px;
        margin: 0 auto;
        gap: 16px !important;
        overflow: visible !important;
    }

    .provider-home-item{
        width: 100% !important;
        height: 172px !important;
    }

    .bottom-navigation{
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1180px){
    .category-scroll{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-togel-track{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .provider-home-scroll{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .login-card form{ grid-template-columns: 1fr 1fr; }
    .login-card .login-button button,
    .login-card .login-button a{ min-width: 0; }
}

/* Desktop-only partner footer. The mobile bottom navigation remains unchanged. */
.desktop-site-footer{
    display:none;
}

@media (min-width:900px){
    .desktop-site-footer{
        display:block;
        width:100%;
        margin-top:52px;
        padding:0 42px;
        color:rgba(255,255,255,.76);
        border-top:1px solid rgba(255,205,92,.20);
        background:linear-gradient(180deg,rgba(20,12,9,.94),rgba(5,5,5,.98));
    }

    .desktop-footer-main,
    .desktop-partner-section,
    .desktop-footer-bottom{
        max-width:1356px;
        margin-left:auto;
        margin-right:auto;
    }

    .desktop-footer-main{
        display:flex;
        justify-content:space-between;
        gap:64px;
        padding:34px 0 28px;
    }

    .desktop-footer-brand{
        max-width:360px;
    }

    .desktop-footer-brand img{
        display:block;
        width:158px;
        height:66px;
        object-fit:contain;
        object-position:left center;
        margin-bottom:9px;
    }

    .desktop-footer-brand p{
        margin:0;
        color:rgba(255,255,255,.52);
        font-size:12px;
        line-height:1.65;
    }

    .desktop-footer-menu{
        display:flex;
        gap:74px;
        padding-top:8px;
    }

    .desktop-footer-menu div{
        display:grid;
        align-content:start;
        gap:9px;
        min-width:110px;
    }

    .desktop-footer-menu h4,
    .desktop-partner-section h3{
        margin:0;
        color:#f4c65b;
        font-size:10px;
        font-weight:900;
        letter-spacing:1px;
    }

    .desktop-footer-menu a{
        color:rgba(255,255,255,.68);
        font-size:12px;
        transition:color .18s ease;
    }

    .desktop-footer-menu a:hover{
        color:#ffd56b;
    }

    .desktop-partner-section{
        padding:21px 0 20px;
        border-top:1px solid rgba(255,255,255,.07);
    }

    .desktop-partner-section h3{
        margin-bottom:14px;
        text-align:center;
    }

    .desktop-logo-grid{
        display:grid;
        justify-content:center;
        gap:9px;
    }

    .provider-logo-grid{
        grid-template-columns:repeat(9, minmax(82px, 1fr));
    }

    .bank-logo-grid{
        grid-template-columns:repeat(10, minmax(82px, 1fr));
    }

    .desktop-partner-logo{
        display:flex;
        align-items:center;
        justify-content:center;
        height:43px;
        padding:7px 10px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.055);
        border-radius:8px;
        background:rgba(255,255,255,.025);
        transition:border-color .18s ease, background .18s ease;
    }

    .desktop-partner-logo:hover{
        border-color:rgba(255,204,85,.34);
        background:rgba(255,202,73,.06);
    }

    .desktop-partner-logo img{
        display:block;
        max-width:100%;
        max-height:26px;
        object-fit:contain;
        filter:grayscale(1) brightness(1.35);
        opacity:.82;
        transition:filter .18s ease, opacity .18s ease;
    }

    .desktop-partner-logo:hover img{
        filter:none;
        opacity:1;
    }

    .desktop-bank-section{
        padding-top:20px;
    }

    .desktop-footer-bottom{
        display:flex;
        justify-content:space-between;
        gap:18px;
        padding:17px 0 22px;
        color:rgba(255,255,255,.38);
        font-size:10px;
        border-top:1px solid rgba(255,255,255,.07);
    }
}

@media (min-width:900px) and (max-width:1180px){
    .provider-logo-grid{ grid-template-columns:repeat(7, minmax(75px, 1fr)); }
    .bank-logo-grid{ grid-template-columns:repeat(8, minmax(75px, 1fr)); }
}

/* =========================================================
   DESKTOP & MOBILE UPGRADE – final responsive overrides
========================================================= */
.desktop-main-nav{ display:none; }

@media (min-width:900px){
    /* Let the landscape artwork be visible behind the desktop layout. */
    .app-container{
        background:transparent !important;
    }
    .app-container::before{
        opacity:.48 !important;
        background-position:center center !important;
    }

    .main-header{
        gap:22px !important;
    }
    .desktop-main-nav{
        display:flex;
        align-items:center;
        gap:21px;
        margin-left:18px;
    }
    .desktop-main-nav a{
        color:rgba(255,255,255,.76);
        font-size:11px;
        font-weight:900;
        letter-spacing:.45px;
        transition:color .18s ease;
    }
    .desktop-main-nav a:hover{ color:#ffd65f; }
    .main-header .menu-button{ margin-left:0 !important; }

    /* Provider pages use their own inline CSS, so override them explicitly. */
    .slot-page,
    .casino-page{
        width:min(100%, 1356px) !important;
        margin:0 auto !important;
        padding:28px 42px 58px !important;
    }
    .slot-title,
    .casino-title{
        margin:0 0 22px !important;
        font-size:22px !important;
    }
    .slot-grid,
    .casino-grid{
        display:grid !important;
        grid-template-columns:repeat(5, 168px) !important;
        justify-content:start !important;
        gap:16px !important;
        perspective:none !important;
    }
    .slot-card,
    .casino-card{
        width:168px !important;
        min-width:0 !important;
        aspect-ratio:3 / 4.35 !important;
        border-radius:15px !important;
    }
    .slot-card::after,
    .casino-card::after{ font-size:15px !important; }
    .slot-card:hover,
    .casino-card:hover{
        transform:translateY(-6px) scale(1.02) !important;
    }

    /* Login form: title on the left, controls in one clean row. */
    .login-card{
        grid-template-columns:250px minmax(0, 1fr) !important;
        column-gap:26px !important;
    }
    .login-card form{
        grid-template-columns:minmax(150px, 1fr) minmax(150px, 1fr) 104px 128px !important;
        grid-row:1 / span 2 !important;
    }
    .login-card .login-button button,
    .login-card .login-button a{
        min-width:0 !important;
        height:42px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    .login-card .btn-login{ order:1; }
    .login-card .btn-register{ order:2; }

    /* Premium desktop jackpot: larger without stretching the old mobile frame. */
    .jackpot-section{
        padding-top:16px !important;
    }
    .jackpot-card{
        width:min(100%, 1100px) !important;
        height:172px !important;
        min-height:172px !important;
        margin:0 auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        background-color:rgba(10,6,4,.62) !important;
        background-size:contain !important;
        background-position:center !important;
    }
    .jackpot-card::after{
        content:"PROGRESSIVE JACKPOT";
        position:absolute;
        top:42px;
        left:0;
        right:0;
        z-index:2;
        color:#ffe59b;
        font-size:14px;
        font-weight:900;
        letter-spacing:4px;
        text-align:center;
        text-shadow:0 2px 8px #000;
    }
    .jackpot-value{
        z-index:3 !important;
        top:18px !important;
        transform:none !important;
        font-size:clamp(42px, 4.1vw, 58px) !important;
        letter-spacing:2px;
    }

    .home-togel-card{
        min-height:152px !important;
    }
}

@media (min-width:900px) and (max-width:1180px){
    .desktop-main-nav{ gap:13px; margin-left:6px; }
    .desktop-main-nav a{ font-size:10px; }
    .slot-grid,
    .casino-grid{ grid-template-columns:repeat(4, 160px) !important; }
    .slot-card,
    .casino-card{ width:160px !important; }
    .login-card form{ grid-template-columns:1fr 1fr !important; }
}

@media (max-width:899px){
    /* Mobile keeps its bottom navigation and gets compact partner logos above it. */
    .desktop-site-footer{
        display:block;
        margin:28px 12px 86px;
        padding:16px 10px 12px;
        border:1px solid rgba(255,201,74,.18);
        border-radius:16px;
        background:rgba(8,7,7,.78);
    }
    .desktop-footer-main,
    .desktop-footer-bottom{ display:none; }
    .desktop-partner-section{
        padding:0 0 15px;
    }
    .desktop-partner-section + .desktop-partner-section{
        padding-top:14px;
        border-top:1px solid rgba(255,255,255,.08);
    }
    .desktop-partner-section h3{
        margin:0 0 10px;
        color:#f4c65b;
        font-size:8px;
        font-weight:900;
        letter-spacing:.7px;
        text-align:center;
    }
    .desktop-logo-grid{
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:6px;
    }
    .desktop-partner-logo{
        display:flex;
        align-items:center;
        justify-content:center;
        height:30px;
        padding:4px;
        overflow:hidden;
        border-radius:6px;
        background:rgba(255,255,255,.035);
    }
    .desktop-partner-logo img{
        display:block;
        max-width:100%;
        max-height:19px;
        object-fit:contain;
        filter:grayscale(1) brightness(1.35);
        opacity:.86;
    }
}

/* Final visual polish: desktop navigation, richer background and action glow. */
@media (min-width:900px){
    .main-header .menu-button{
        display:none !important;
    }
    .desktop-main-nav{
        order:2;
        margin-left:auto !important;
        margin-right:18px;
    }
    .member-header-balance{
        order:3;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .main-logo{
        order:1;
    }
    .app-container::before{
        opacity:.72 !important;
        background-image:
            linear-gradient(90deg, rgba(3,3,3,.54) 0%, rgba(3,3,3,.20) 48%, rgba(3,3,3,.50) 100%),
            linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42)),
            url("../img/background/background-desktop.jpg") !important;
    }
}

/* Partner logos are vivid by default and mute only on hover/focus. */
.desktop-partner-logo img{
    filter:none !important;
    opacity:1 !important;
}
.desktop-partner-logo:hover img,
.desktop-partner-logo:focus-within img{
    filter:grayscale(1) brightness(1.25) !important;
    opacity:.68 !important;
}

/* Shared glow for account and transaction actions on every device. */
.btn-login,
.btn-register,
.deposit-action,
.withdraw-action,
.login-nav .login-circle{
    animation:actionButtonGlow 1.9s ease-in-out infinite;
}

.btn-login,
.btn-register,
.deposit-action,
.withdraw-action{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.btn-login::after,
.btn-register::after,
.deposit-action::after,
.withdraw-action::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(112deg, transparent 26%, rgba(255,255,255,.38) 48%, transparent 70%);
    transform:translateX(-130%);
    animation:actionButtonSweep 2.8s ease-in-out infinite;
}

@keyframes actionButtonGlow{
    0%,100%{ filter:brightness(1); box-shadow:0 0 8px rgba(255,177,28,.25); }
    50%{ filter:brightness(1.12); box-shadow:0 0 19px rgba(255,186,47,.72), 0 0 34px rgba(255,70,18,.28); }
}

@keyframes actionButtonSweep{
    0%,24%{ transform:translateX(-130%); }
    58%,100%{ transform:translateX(130%); }
}

@media (prefers-reduced-motion:reduce){
    .btn-login,.btn-register,.deposit-action,.withdraw-action,.login-nav .login-circle{ animation:none; }
    .btn-login::after,.btn-register::after,.deposit-action::after,.withdraw-action::after{ animation:none; }
}

/* Upgrade batch: compact category icons, richer togel balls and progressive partner shine. */
.category-scroll{
    gap:4px !important;
}
.category-scroll > a{
    text-decoration:none;
}
.category-item{
    position:relative;
    min-width:66px !important;
    min-height:0 !important;
    padding:3px 2px !important;
    overflow:hidden;
    background:transparent !important;
    border:0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
    isolation:isolate;
}
.category-item::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:5px -70%;
    opacity:.7;
    transform:translateX(-115%) skewX(-22deg);
    background:linear-gradient(90deg,transparent,rgba(255,232,154,.58),transparent);
    animation:categoryIconShine 4.8s ease-in-out infinite;
}
.category-item img{
    width:62px !important;
    height:62px !important;
    display:block;
    margin:0 auto;
    object-fit:contain;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.42));
    transition:transform .25s ease, filter .25s ease;
}
.category-item:hover img{
    transform:translateY(-2px) scale(1.045);
    filter:drop-shadow(0 0 9px rgba(255,190,62,.5));
}
@keyframes categoryIconShine{
    0%,18%{transform:translateX(-125%) skewX(-22deg);opacity:0}
    30%{opacity:.65}
    52%,100%{transform:translateX(125%) skewX(-22deg);opacity:0}
}

/* Lottery result balls: more dimensional, with a calm travelling highlight. */
.result-balls span{
    position:relative;
    overflow:hidden;
    border-color:rgba(255,231,151,.78) !important;
    background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.96) 0 5%,rgba(255,218,185,.72) 7%,transparent 20%),
        radial-gradient(circle at 36% 31%,#ff9889 0,#e32120 34%,#8d0509 61%,#260002 100%) !important;
    text-shadow:0 1px 1px rgba(48,0,0,.9);
    box-shadow:inset -4px -5px 7px rgba(45,0,0,.5),inset 3px 3px 5px rgba(255,242,209,.45),0 3px 7px rgba(0,0,0,.38),0 0 12px rgba(255,107,35,.28) !important;
}
.result-balls span::after{
    content:"";
    position:absolute;
    inset:-15% -75%;
    background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.64) 50%,transparent 66%);
    transform:translateX(-110%);
    animation:togelBallShine 4.3s ease-in-out infinite;
}
@keyframes togelBallShine{
    0%,24%{transform:translateX(-110%)}
    58%,100%{transform:translateX(110%)}
}

/* On wide screens the sixth provider completes the row without enlarging cards. */
@media (min-width:1200px){
    .slot-grid,
    .casino-grid{
        grid-template-columns:repeat(6, 168px) !important;
        justify-content:space-between !important;
        column-gap:12px !important;
        row-gap:16px !important;
        width:100% !important;
    }
}

/* Let the temple artwork stay visible, while retaining light text contrast. */
@media (min-width:900px){
    .app-container::before{
        opacity:.88 !important;
        background-image:
            linear-gradient(90deg,rgba(3,3,3,.25) 0%,rgba(3,3,3,.08) 48%,rgba(3,3,3,.22) 100%),
            linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18)),
            url("../img/background/background-desktop.jpg") !important;
    }
}

/* Balance receives a restrained moving reflection rather than a blinking effect. */
.member-header-balance{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-shadow:inset 0 0 12px rgba(255,190,50,.13),0 0 12px rgba(255,191,47,.16) !important;
    animation:balanceAmbientGlow 3.4s ease-in-out infinite;
}
.member-header-balance > *{position:relative;z-index:1}
.member-header-balance::before{
    content:"";
    position:absolute;
    inset:-35% -55%;
    z-index:0;
    background:linear-gradient(105deg,transparent 37%,rgba(255,245,196,.5) 50%,transparent 63%);
    transform:translateX(-115%);
    animation:balanceReflection 4.6s ease-in-out infinite;
}
@keyframes balanceAmbientGlow{
    0%,100%{box-shadow:inset 0 0 12px rgba(255,190,50,.12),0 0 9px rgba(255,191,47,.12)}
    50%{box-shadow:inset 0 0 16px rgba(255,222,130,.24),0 0 17px rgba(255,191,47,.3)}
}
@keyframes balanceReflection{
    0%,26%{transform:translateX(-115%)}
    61%,100%{transform:translateX(115%)}
}

/* Each footer logo catches the light in sequence: left-to-right, row-by-row. */
.desktop-partner-logo{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.desktop-partner-logo::after{
    content:"";
    position:absolute;
    inset:-25% -75%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 37%,rgba(255,255,255,.75) 50%,transparent 63%);
    transform:translateX(-120%);
    animation:partnerLogoShine 5.2s ease-in-out infinite;
    animation-delay:var(--shine-delay, 0s);
}
@keyframes partnerLogoShine{
    0%,16%{transform:translateX(-120%);opacity:0}
    23%{opacity:.82}
    41%,100%{transform:translateX(120%);opacity:0}
}

@media (prefers-reduced-motion:reduce){
    .category-item::after,.result-balls span::after,.member-header-balance,.member-header-balance::before,.desktop-partner-logo::after{animation:none}
}

/* Correction: category artwork itself is larger and carries the light. */
.category-item::after{display:none !important}
.category-item{
    min-width:76px !important;
    padding:2px 1px !important;
}
.category-item img{
    width:74px !important;
    height:74px !important;
    animation:categoryImageShine 4.8s ease-in-out infinite;
}
@keyframes categoryImageShine{
    0%,100%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.42)) brightness(1)}
    42%{filter:drop-shadow(0 0 4px rgba(255,179,30,.42)) drop-shadow(0 0 12px rgba(255,226,132,.38)) brightness(1.15)}
    58%{filter:drop-shadow(0 0 7px rgba(255,191,45,.62)) drop-shadow(0 0 15px rgba(255,230,147,.5)) brightness(1.22)}
}
@media (min-width:900px){
    .category-scroll{gap:6px !important}
    .category-item{min-width:0 !important}
    .category-item img{
        width:88px !important;
        height:88px !important;
    }
}

/* Use the same 3D ball treatment on the home-page market results. */
.home-togel-result b{
    position:relative !important;
    overflow:hidden !important;
    border-color:rgba(255,231,151,.78) !important;
    background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.96) 0 5%,rgba(255,218,185,.72) 7%,transparent 20%),
        radial-gradient(circle at 36% 31%,#ff9889 0,#e32120 34%,#8d0509 61%,#260002 100%) !important;
    text-shadow:0 1px 1px rgba(48,0,0,.9) !important;
    box-shadow:inset -4px -5px 7px rgba(45,0,0,.5),inset 3px 3px 5px rgba(255,242,209,.45),0 3px 7px rgba(0,0,0,.38),0 0 12px rgba(255,107,35,.28) !important;
}
.home-togel-result b::after{
    content:"";
    position:absolute;
    inset:-15% -75%;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.64) 50%,transparent 66%);
    transform:translateX(-110%);
    animation:togelBallShine 4.3s ease-in-out infinite;
}

/* Keep only the jackpot frame artwork, never a dark rectangular backdrop. */
.jackpot-card{
    background-color:transparent !important;
    box-shadow:none !important;
}
@media (prefers-reduced-motion:reduce){
    .category-item img,.home-togel-result b::after{animation:none}
}

/* Desktop jackpot artwork already contains its own title: keep it clean and taller. */
@media (min-width:900px){
    .jackpot-card{
        height:202px !important;
        min-height:202px !important;
        background-size:contain !important;
        background-repeat:no-repeat !important;
        background-position:center !important;
    }
    .jackpot-card::after{display:none !important}
    .jackpot-value{
        top:25px !important;
        font-size:clamp(44px,4.3vw,62px) !important;
    }
}

/* Desktop guest header: keep login controls in the header, not in a large content card. */
.desktop-header-login{display:none;}
.info-text-viewport{min-width:0;flex:1;overflow:hidden;white-space:nowrap;}
.info-text-viewport .info-text{display:inline-block;min-width:max-content;}

@media (min-width:900px){
    .download-bar{display:none !important;}
    .main-header{gap:16px !important;}
    .main-header .menu-button{display:none !important;}
    .desktop-header-login{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:9px;
        min-width:0;
        margin-left:auto;
    }
    .desktop-login-field{
        display:flex;
        align-items:center;
        gap:8px;
        width:clamp(132px,12vw,174px);
        height:38px;
        padding:0 11px;
        border:1px solid rgba(255,205,92,.28);
        border-radius:11px;
        background:rgba(5,5,6,.66);
        color:rgba(255,224,139,.84);
        box-shadow:inset 0 0 12px rgba(0,0,0,.26);
    }
    .desktop-login-field i{font-size:12px;color:#f2c65c;}
    .desktop-login-field input{
        width:100%;
        min-width:0;
        border:0;
        outline:0;
        background:transparent;
        color:#fff8df;
        font-size:12px;
    }
    .desktop-login-field input::placeholder{color:rgba(255,255,255,.42);}
    .desktop-login-submit,
    .desktop-register-link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        height:38px;
        padding:0 16px;
        border:0;
        border-radius:11px;
        font-size:11px;
        font-weight:900;
        letter-spacing:.3px;
        text-decoration:none;
        cursor:pointer;
    }
    .desktop-login-submit{background:linear-gradient(180deg,#ff7779,#c51e28);color:#fff;}
    .desktop-register-link{background:linear-gradient(180deg,#ffe685,#dca51d);color:#2b1700;}
    .login-section{display:none !important;}

    /* The marquee can move only inside this viewport, never across its border. */
    .info-bar{overflow:hidden !important;}
    .info-text-viewport{position:relative;overflow:hidden;}
    .info-text-viewport .info-text{
        display:inline-block;
        max-width:none;
        animation:desktopTicker 15s linear infinite !important;
        will-change:transform;
    }
    @keyframes desktopTicker{
        from{transform:translateX(100%);}
        to{transform:translateX(-100%);}
    }
}

@media (min-width:900px) and (max-width:1080px){
    .main-header{padding:0 22px !important;}
    .desktop-login-field{width:132px;}
    .desktop-login-submit,.desktop-register-link{padding:0 12px;}
}

/* Keep guest branding at the far left; old desktop nav ordering must not move it. */
@media (min-width:900px){
    .main-logo{order:1 !important;flex:0 0 auto !important;margin-right:0 !important;}
    .desktop-header-login{order:2 !important;margin-left:auto !important;}

    /* Padding creates one full viewport of lead-in, so the text enters at the right edge. */
    .info-text-viewport .info-text{
        box-sizing:content-box !important;
        padding-left:100% !important;
        animation:desktopTickerFromRight 15s linear infinite !important;
    }
    @keyframes desktopTickerFromRight{
        from{transform:translateX(0);}
        to{transform:translateX(-100%);}
    }
}

/* Dedicated authentication pages must keep their own vertical card, not the home-page quick-login grid. */
@media (min-width:900px){
    .login-v10 .login-card{
        display:block !important;
        width:min(520px,calc(100% - 40px)) !important;
        max-width:520px !important;
        margin:0 auto !important;
        padding:28px !important;
    }
    .login-v10 .login-card form{
        display:block !important;
        grid-template-columns:none !important;
        grid-row:auto !important;
    }
    .login-v10 .login-card .input-login{
        display:flex !important;
        height:52px !important;
        margin-bottom:0 !important;
    }
    .login-v10 .login-card .btn-login{
        display:block !important;
        width:100% !important;
        height:52px !important;
        min-width:0 !important;
        margin-top:30px !important;
        order:initial !important;
    }
}

/* Desktop only: prioritize the jackpot above the game-category artwork. */
@media (min-width:900px){
    .desktop-home-priority{display:flex;flex-direction:column;}
    .desktop-home-priority .jackpot-section{
        order:1;
        width:100% !important;
        max-width:none !important;
        align-self:stretch;
    }
    .desktop-home-priority .jackpot-card{
        width:min(980px,calc(100vw - 84px)) !important;
        height:238px !important;
        min-height:238px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        flex:0 0 238px;
    }
    .desktop-home-priority .category{order:2;margin-top:0 !important;padding-top:0 !important;}
}

/* Desktop category artwork gets a stronger visual weight; mobile remains unchanged. */
@media (min-width:900px){
    .category-item img{
        width:104px !important;
        height:104px !important;
    }
}

/* A contained light sweep sits exactly over each category image—never outside it. */
.category-item{overflow:hidden !important}
.category-item img{
    position:relative;
    z-index:1;
    animation:none !important;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.42)) !important;
}
.category-item::after{
    display:block !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:74px !important;
    height:74px !important;
    margin:-37px 0 0 -37px !important;
    padding:0 !important;
    border-radius:10px;
    z-index:2 !important;
    opacity:1 !important;
    background:linear-gradient(108deg,transparent 40%,rgba(255,246,198,.56) 50%,transparent 60%) !important;
    transform:translateX(-105%) !important;
    animation:categoryImageSweep 4.8s ease-in-out infinite !important;
    pointer-events:none;
}
@keyframes categoryImageSweep{
    0%,25%{transform:translateX(-105%)}
    60%,100%{transform:translateX(105%)}
}
@media (min-width:900px){
    .category-item::after{
        width:88px !important;
        height:88px !important;
        margin:-44px 0 0 -44px !important;
    }
}
@media (prefers-reduced-motion:reduce){.category-item::after{animation:none !important}}

/* Category icons stay clean: remove the shine layer that can render as white streaks. */
.category-item::after{
    display:none !important;
    content:none !important;
    animation:none !important;
}
.category-item img{
    animation:none !important;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.42)) !important;
}

/* Give the desktop jackpot frame real vertical presence instead of unused empty space. */
@media (min-width:900px){
    .jackpot-card{
        height:238px !important;
        min-height:238px !important;
        background-size:100% 100% !important;
    }
    .jackpot-value{
        top:31px !important;
        font-size:clamp(48px,4.5vw,66px) !important;
    }
}

/* =======================================================
   PATCH: clickable logo, desktop logout, guest game popup
   Do not change existing jackpot/category responsive rules.
======================================================= */
.main-logo-link{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    line-height:0;
    text-decoration:none;
}
.main-logo-link .main-logo{display:block;}
.download-logo a{display:inline-flex;line-height:0;}
.drawer-logo-link{display:inline-block;line-height:0;}
.desktop-footer-logo-link{display:inline-flex;line-height:0;}
@media (max-width:899px){
    /* Keep the menu button inside the viewport after wrapping the logo in a link. */
    .main-header{box-sizing:border-box !important;width:100% !important;}
    .main-logo-link + .menu-button,
    .main-logo-link ~ .menu-button{margin-left:auto !important;}
    .member-header-balance + .menu-button{margin-left:0 !important;}
}
@media (min-width:900px){
    .main-logo-link{order:1 !important;}
    .desktop-main-nav .desktop-nav-logout{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:9px 12px;
        border-radius:10px;
        background:linear-gradient(180deg,#a92728,#651112);
        border:1px solid rgba(255,179,106,.32);
        color:#fff !important;
        white-space:nowrap;
        text-decoration:none;
    }
    .desktop-main-nav .desktop-nav-logout:hover,
    .desktop-main-nav .desktop-nav-logout:focus-visible{
        color:#fff9e2 !important;
        background:linear-gradient(180deg,#c13537,#841517);
    }
}
@media (min-width:900px) and (max-width:1100px){
    .desktop-main-nav{gap:9px; margin-right:8px;}
    .desktop-main-nav .desktop-nav-logout{padding:8px 9px;}
}

/* ========================================================
   SARDEN11 HEADER / JACKPOT  -  DESKTOP ONLY (>= 900px)
   Mobile header, menu and jackpot are deliberately untouched.
======================================================== */
.desktop-header-logout{display:none !important;}
@media (min-width:900px){
    /* All desktop quick-navigation links were removed from the shared header. */
    .main-header > .main-logo-link{order:1 !important;}
    .main-header > .member-header-balance{
        order:3 !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }
    .main-header > .desktop-header-logout{
        order:4 !important;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        gap:8px;
        height:40px;
        min-width:102px;
        padding:0 15px;
        border-radius:12px;
        border:1px solid rgba(255,197,113,.40);
        background:linear-gradient(180deg,#b54046 0%,#92232a 52%,#6a121a 100%);
        color:#fff6ed;
        font-size:11px;
        font-weight:900;
        letter-spacing:.55px;
        white-space:nowrap;
        text-decoration:none;
        box-shadow:0 4px 14px rgba(145,23,33,.24),inset 0 1px rgba(255,255,255,.18);
        transition:background .2s ease,border-color .2s ease,transform .2s ease;
    }
    .main-header > .desktop-header-logout:hover{
        background:linear-gradient(180deg,#d65458 0%,#a52830 50%,#7c1520 100%);
        border-color:rgba(255,213,145,.7);
        transform:translateY(-1px);
    }
    .main-header > .desktop-header-logout:focus-visible{
        outline:2px solid #ffe08c;
        outline-offset:3px;
    }
    /* Hide only the authenticated desktop jackpot. Guest + all mobile views retain it. */
    body[data-member-logged-in="1"] .jackpot-section{display:none !important;}
}

/* ========================================================
   SARDEN11 PREMIUM LOGIN POPUP - DESKTOP AND MOBILE
======================================================== */
body.login-guard-open{overflow:hidden;}
.login-guard-overlay[hidden]{display:none !important;}
.login-guard-overlay{
    position:fixed;
    z-index:99999;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:20px;
    overflow-x:hidden;
    overflow-y:auto;
    background:rgba(3,2,5,.79);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    animation:loginGuardBackdrop .22s ease-out both;
}
.login-guard-dialog{
    --lg-gold:#f4c56b;
    position:relative;
    isolation:isolate;
    box-sizing:border-box;
    flex:0 0 auto;
    width:min(100%,440px);
    max-height:calc(100dvh - 40px);
    overflow-x:hidden;
    overflow-y:auto;
    margin:auto 0;
    padding:32px 33px 25px;
    border:1px solid rgba(243,191,104,.68);
    border-radius:24px;
    color:#fff4e2;
    text-align:center;
    background:
        radial-gradient(ellipse at 50% 0%,rgba(173,69,37,.28),transparent 58%),
        radial-gradient(circle at 90% 98%,rgba(132,15,22,.22),transparent 52%),
        linear-gradient(160deg,#291817 0%,#160f13 47%,#0b0a0d 100%);
    box-shadow:0 24px 80px rgba(0,0,0,.78),0 0 55px rgba(225,110,36,.16),inset 0 1px rgba(255,234,176,.10);
    animation:loginGuardReveal .3s cubic-bezier(.2,.8,.2,1) both;
}
.login-guard-dialog::before{
    content:"";
    position:absolute;
    inset:5px;
    z-index:-1;
    border:1px solid rgba(254,211,133,.095);
    border-radius:19px;
    pointer-events:none;
}
.login-guard-dialog::after{
    content:"";
    position:absolute;
    left:19%;
    right:19%;
    top:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#f4c56b,transparent);
    box-shadow:0 0 24px rgba(252,167,74,.48);
    pointer-events:none;
}
.login-guard-close{
    position:absolute;
    top:13px;
    right:14px;
    z-index:2;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid rgba(255,211,141,.20);
    border-radius:50%;
    color:#e9cfae;
    background:rgba(255,248,216,.055);
    font-size:25px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease,color .2s ease;
}
.login-guard-close:hover{color:#fff;background:rgba(255,224,171,.18);}
.login-guard-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 22px;
    margin:1px auto 18px;
    color:#f3c980;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.35px;
    white-space:nowrap;
}
.login-guard-brand-rule{
    width:16px;
    height:1px;
    flex:0 1 16px;
    background:linear-gradient(90deg,transparent,rgba(246,197,111,.65));
}
.login-guard-brand-rule:last-child{transform:rotate(180deg);}
.login-guard-icon-halo{
    display:grid;
    place-items:center;
    width:100px;
    height:100px;
    margin:0 auto 18px;
    border:1px solid rgba(244,186,89,.22);
    border-radius:50%;
    background:radial-gradient(circle,rgba(223,102,37,.17) 30%,rgba(123,55,23,.08) 60%,transparent 70%);
    box-shadow:0 0 34px rgba(211,93,35,.14);
}
.login-guard-symbol{
    display:grid;
    place-items:center;
    width:75px;
    height:75px;
    border:1px solid rgba(255,214,130,.67);
    border-radius:22px;
    color:#ffe1a2;
    background:linear-gradient(145deg,rgba(144,65,28,.8),rgba(60,29,24,.92) 58%,rgba(36,21,20,.96));
    box-shadow:inset 0 1px rgba(255,245,203,.28),0 12px 25px rgba(0,0,0,.33),0 0 24px rgba(253,159,64,.15);
    transform:rotate(-8deg);
}
.login-guard-symbol svg{transform:rotate(8deg);filter:drop-shadow(0 0 6px rgba(255,183,72,.23));}
.login-guard-dialog h2{
    margin:0 0 12px;
    color:#fff4de;
    font-size:clamp(20px,4.8vw,26px);
    line-height:1.25;
    font-weight:900;
    letter-spacing:.6px;
    text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.login-guard-dialog h2 span{
    color:#f7c879;
    text-shadow:0 0 24px rgba(244,174,62,.24);
}
.login-guard-dialog #loginGuardMessage{
    max-width:330px;
    margin:0 auto 17px;
    color:#cbbfb7;
    font-size:13px;
    font-weight:400;
    line-height:1.6;
}
.login-guard-separator{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 0 18px;
    color:#d29d5b;
}
.login-guard-separator span{
    width:58px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(224,165,83,.45));
}
.login-guard-separator span:last-child{transform:rotate(180deg);}
.login-guard-separator b{font-size:11px;line-height:1;}
.login-guard-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.login-guard-actions a,
.login-guard-actions button{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:100%;
    min-height:47px;
    border-radius:12px;
    font-family:inherit;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.0px;
    text-decoration:none;
    cursor:pointer;
    transition:filter .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;
}
.login-guard-login{
    position:relative;
    padding:10px 36px;
    border:1px solid rgba(255,232,165,.75);
    background:linear-gradient(180deg,#ffe6a1 0%,#eab956 50%,#c98928 100%);
    color:#341b0a !important;
    box-shadow:0 6px 20px rgba(198,106,20,.22),inset 0 1px rgba(255,255,255,.5);
}
.login-guard-login:hover{filter:brightness(1.1);transform:translateY(-1px);}
.login-guard-action-arrow{
    position:absolute;
    right:17px;
    font-size:19px;
    line-height:1;
}
.login-guard-cancel{
    padding:10px 15px;
    border:1px solid rgba(237,187,112,.36);
    color:#f3d6ae;
    background:rgba(255,238,189,.045);
}
.login-guard-cancel:hover{background:rgba(255,238,189,.10);border-color:rgba(246,205,136,.58);}
.login-guard-actions :focus-visible,
.login-guard-close:focus-visible{
    outline:2px solid #ffe69d;
    outline-offset:3px;
}
.login-guard-dialog .login-guard-footnote{
    margin:18px 0 0;
    color:rgba(218,180,135,.65);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.9px;
}
.login-guard-footnote span{color:#daac69;padding:0 4px;}
@keyframes loginGuardBackdrop{from{opacity:0;}to{opacity:1;}}
@keyframes loginGuardReveal{
    from{opacity:0;transform:translateY(14px) scale(.965);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width:480px){
    .login-guard-overlay{padding:16px;}
    .login-guard-dialog{max-height:calc(100dvh - 32px);padding:29px 22px 22px;border-radius:21px;}
    .login-guard-brand{font-size:8px;letter-spacing:1px;margin-bottom:16px;gap:7px;}
    .login-guard-brand-rule{width:11px;flex-basis:11px;}
    .login-guard-icon-halo{width:88px;height:88px;margin-bottom:15px;}
    .login-guard-symbol{width:67px;height:67px;border-radius:19px;}
    .login-guard-symbol svg{width:33px;height:33px;}
    .login-guard-dialog h2{font-size:clamp(20px,5.9vw,24px);}
    .login-guard-dialog #loginGuardMessage{font-size:12.5px;}
    .login-guard-dialog .login-guard-footnote{letter-spacing:1.2px;}
}
@media (max-width:350px){
    .login-guard-overlay{padding:11px;}
    .login-guard-dialog{padding:26px 15px 18px;}
    .login-guard-brand{font-size:7.5px;}
}
@media (prefers-reduced-motion:reduce){
    .login-guard-overlay,.login-guard-dialog{animation:none !important;}
    .login-guard-actions a,.login-guard-actions button,.login-guard-close{transition:none;}
}


/* ==============================================================
   SARDEN11 V6.1 - Homepage responsive gutters + ticker clipping
   Visual-only: keep market card design, game logic and animations.
   ============================================================== */
/* Both guest and member tickers need a dedicated clipping viewport.
   The text starts at the right border and leaves only through the left. */
.info-bar {
    min-width: 0;
    overflow: hidden !important;
    isolation: isolate;
}
.info-bar > .info-icon,
.info-bar > .info-label,
.info-bar > .fa-chevron-right {
    flex: 0 0 auto;
}
.info-bar .info-text-viewport {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    max-width: 100%;
    overflow: hidden !important;
    white-space: nowrap;
}
.info-bar .info-text-viewport > .info-text {
    display: inline-block;
    flex: none;
    width: max-content;
    min-width: max-content;
    max-width: none;
    overflow: visible !important;
    box-sizing: content-box !important;
    white-space: nowrap;
    padding-left: 100% !important;
    animation: sardenHomeTickerV61 16s linear infinite !important;
    will-change: transform;
}
@keyframes sardenHomeTickerV61 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

/* Remove the unused outer gap while retaining a small safe touch gutter.
   All sizes are relative to the existing app-container, never the full body. */
@media (max-width: 899px) {
    .banner-section,
    .quick-action-section,
    .category,
    .jackpot-section,
    .home-hot-games,
    .home-togel,
    .provider-home-section {
        width: 100%;
        max-width: 100%;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .info-bar {
        width: calc(100% - 12px);
        max-width: calc(100% - 12px);
        margin-left: 6px !important;
        margin-right: 6px !important;
    }
    .home-hot-shell {
        width: 100%;
        padding-left: 21px !important;
        padding-right: 21px !important;
    }
    .home-togel-head,
    .home-togel-track,
    .provider-lobby-heading,
    .provider-home-scroll {
        width: 100%;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Tablet and landscape phones must not inherit the old 430px-only canvas. */
@media (min-width: 600px) and (max-width: 899px) {
    .app-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .app-container::before {
        width: 100% !important;
        max-width: 100% !important;
    }
}
@media (min-width: 900px) {
    .banner-section,
    .quick-action-section,
    .category,
    .jackpot-section,
    .home-hot-games,
    .home-togel,
    .provider-home-section {
        width: 100%;
        max-width: 1440px;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .info-bar {
        width: calc(100% - 36px);
        max-width: 1404px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .home-hot-shell {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .home-hot-card {
        flex-basis: calc((min(100vw, 1440px) - 156px) / 5) !important;
        width: calc((min(100vw, 1440px) - 156px) / 5) !important;
    }
    .home-togel-head,
    .home-togel-track,
    .provider-lobby-heading,
    .provider-home-scroll {
        max-width: none !important;
        width: 100%;
    }
}
@media (min-width: 900px) and (max-width: 1180px) {
    .home-hot-card {
        flex-basis: calc((100vw - 144px) / 4) !important;
        width: calc((100vw - 144px) / 4) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .info-bar .info-text-viewport > .info-text {
        padding-left: 0 !important;
        animation: none !important;
    }
}


/* ==============================================================
   SARDEN11 V6.2 - Header logo upscale + softer banner/info frames
   Shared for guest and member homepage.
   ============================================================== */
.main-header{
    min-height:72px !important;
    height:72px !important;
    padding:0 14px !important;
}
.main-logo{
    width:clamp(142px,42vw,196px) !important;
    height:clamp(50px,8.6vw,64px) !important;
    max-width:58vw !important;
    object-fit:contain !important;
    object-position:left center !important;
    display:block !important;
}
.banner-section{
    padding-top:8px !important;
}
.banner-wrapper{
    border-radius:18px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,179,56,.34) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,230,167,.06) !important;
    background:rgba(16,8,4,.88) !important;
}
.banner-slide,
.banner-image{
    border-radius:18px !important;
}
.info-bar{
    border-radius:16px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,183,58,.28) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,230,167,.05) !important;
}
.info-bar > .info-icon,
.info-bar > .info-label,
.info-bar > .fa-chevron-right{
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
}
@media (max-width:899px){
    .main-header{
        min-height:74px !important;
        height:74px !important;
        padding:0 14px !important;
    }
    .main-logo{
        width:min(180px,46vw) !important;
        height:58px !important;
        max-width:62vw !important;
    }
    .banner-section{
        padding-top:6px !important;
    }
    .banner-wrapper,
    .banner-slide,
    .banner-image{
        border-radius:16px !important;
    }
    .info-bar{
        border-radius:14px !important;
    }
}
@media (min-width:900px){
    .main-header{
        min-height:82px !important;
        height:82px !important;
        padding:0 26px !important;
    }
    .main-logo{
        width:200px !important;
        height:70px !important;
        max-width:none !important;
    }
    .banner-wrapper,
    .banner-slide,
    .banner-image{
        border-radius:24px !important;
    }
    .info-bar{
        border-radius:18px !important;
    }
}
@media (max-width:360px){
    .main-logo{
        width:min(170px,48vw) !important;
        height:54px !important;
    }
}