/* =========================================================
   RUNTIME TEMPLATE VARIABLES - NO DEFAULT PURPLE LOCK
========================================================= */
:root{
    --pe-bg:#050014;
    --pe-bg-2:#080018;
    --pe-panel:#090018;
    --pe-panel-2:#120026;
    --pe-primary:#a100ff;
    --pe-primary-2:#c000ff;
    --pe-secondary:#4cc9f0;
    --pe-accent:#ffd166;
    --pe-danger:#ff2bd6;
    --pe-success:#00ff9d;
    --pe-text:#ffffff;
    --pe-title:#ffffff;
    --pe-muted:#d8d8ff;
    --pe-soft:#b8bfd7;
    --pe-line:rgba(255,255,255,.16);
    --pe-shadow:rgba(160,0,255,.35);
    --pe-glow:rgba(192,0,255,.25);
    --pe-body-bg-color:#050014;
    --pe-body-bg-gradient:linear-gradient(rgba(5,0,20,.35),rgba(5,0,20,.65));
    --pe-body-bg-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe674i_OQJka2PFnIoeEWn98UTN6IzR6zCYwIUE1MfYZZaMQHPX1dp8FfF9aAtHNhUczwPUtxs9si1XX9ZzKx1MzpRnVoeCMrIykcr_CtcFG1ONOiyvjeEBH_g6uZs_zndHcPieixfkY5wuffoT8pOnvqb6koVfV86KS4PPw2K7u_7s-Pa_CN2rQzC1OMk/s1717/bg-desktop-pegasus.png');
    --bg:var(--pe-bg) !important;
    --line:var(--pe-line) !important;
    --text:var(--pe-text) !important;
    --muted:var(--pe-muted) !important;
    --pink:var(--pe-danger) !important;
    --purple:var(--pe-primary) !important;
    --blue:var(--pe-secondary) !important;
    --cyan:var(--pe-secondary) !important;
    --gold:var(--pe-accent) !important;
    --body-bg-url:var(--pe-body-bg-image) !important;
}

/* =========================================================
   ROOT VARIABLE
========================================================= */
:root{
    --bg:#050014;
    --line:rgba(255,255,255,.16);
    --text:#fff;
    --muted:#b8bfd7;
    --pink:var(--pe-danger);
    --purple:var(--pe-primary);
    --blue:var(--pe-secondary);
    --cyan:var(--pe-secondary);
    --gold:var(--pe-accent);

    /* BACKGROUND LUAR CONTAINER - URL LANGSUNG, JANGAN PAKAI base_url */
    --body-bg-url:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe674i_OQJka2PFnIoeEWn98UTN6IzR6zCYwIUE1MfYZZaMQHPX1dp8FfF9aAtHNhUczwPUtxs9si1XX9ZzKx1MzpRnVoeCMrIykcr_CtcFG1ONOiyvjeEBH_g6uZs_zndHcPieixfkY5wuffoT8pOnvqb6koVfV86KS4PPw2K7u_7s-Pa_CN2rQzC1OMk/s1717/bg-desktop-pegasus.png');

    --desktop-container:1150px;
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

html{
    background:
        linear-gradient(rgba(5,0,20,.35),rgba(5,0,20,.65)),
        var(--body-bg-url) center top/cover fixed no-repeat,
        #050014;
}

body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    color:var(--text);
    min-height:100vh;

    /* penting supaya background html terlihat */
    background:transparent !important;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 50% 0%, var(--pe-glow), transparent 36%),
        linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35));
    pointer-events:none;
    z-index:0;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input{
    font-family:inherit;
}

/* =========================================================
   DESKTOP CONTAINER
========================================================= */
.site-shell{
    width:min(var(--desktop-container),100%);
    min-height:100vh;
    margin:0 auto;
    background:#050014;
    position:relative;
    z-index:3;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 0 45px var(--pe-shadow),
        0 0 90px rgba(0,0,0,.85);
}

/* =========================================================
   TOP LOGIN DESKTOP CAPTCHA FULL FIX
========================================================= */
.top-login-bar{
    width:100%;
    min-height:44px;
    padding:6px 8px;
    background:#070008;
    display:flex;
    gap:8px;
    align-items:center;
    position:relative;
    z-index:1000;
    overflow:hidden;
    box-sizing:border-box;
}

.top-login-bar *{box-sizing:border-box;}

.lang-pill,
.login-input,
.captcha-pill,
.bell-pill{
    height:28px;
    border-radius:999px;
    border:1px solid var(--pe-primary-2);
    background:#050009;
    color:#fff;
    display:flex;
    align-items:center;
    padding:0 10px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:inset 0 0 12px var(--pe-glow);
    overflow:hidden;
}

.lang-pill{
    flex:0 0 145px;
    max-width:145px;
}

.quick-login{
    flex:1;
    min-width:0;
    display:flex;
    gap:6px;
    align-items:center;
}

.login-input{
    flex:1 1 145px;
    min-width:100px;
    max-width:185px;
}

.login-input.captcha-input{
    flex:0 0 110px;
    min-width:110px;
    max-width:110px;
    border-color:#00ff3c;
}

.login-input input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.login-input input::placeholder{color:#bdbdbd;}

.captcha-pill{
    flex:0 0 88px;
    max-width:88px;
    justify-content:center;
    background:#8d00ff;
    font-size:13px;
    padding:0 7px;
    letter-spacing:.5px;
}

.captcha-pill span{font-size:8px;margin-left:5px;}

.btn-login,
.btn-register{
    height:28px;
    border:0;
    border-radius:999px;
    color:#111;
    font-size:10px;
    font-weight:950;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-decoration:none;
}

.btn-login{flex:0 0 68px;background:linear-gradient(#ffe35c,#ff9f00);}
.btn-register{flex:0 0 70px;background:linear-gradient(#7dff69,#08c928);}
.bell-pill{flex:0 0 28px;width:28px;justify-content:center;padding:0;}

@media (max-width: 900px){
    .top-login-bar{display:none;}
}

/* =========================================================
   MENU BAR FIX 
========================================================= */
.main-menu-bar{
    min-height:48px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,0,200,.42), transparent 32%),
        radial-gradient(circle at 80% 100%, rgba(0,210,255,.30), transparent 35%),
        linear-gradient(180deg,var(--pe-primary-2) 0%,var(--pe-primary) 45%,#4a008b 100%);
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);
    align-items:center;
    position:relative;
    z-index:999;

    /* penting: shine tidak keluar */
    overflow:hidden;

    box-shadow:
        0 8px 28px rgba(170,0,255,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
}

/* shine dibuat aman di dalam menubar */
.main-menu-bar::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-35%;
    width:30%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.16),
        transparent
    );
    transform:skewX(-18deg);
    animation:menuShineSafe 4s linear infinite;
    pointer-events:none;
    z-index:1;
}

@keyframes menuShine{
    to{
        transform:translateX(120%);
    }
}

@keyframes menuShineSafe{
    0%{
        left:-35%;
    }

    100%{
        left:105%;
    }
}

/* pastikan isi menu tetap di atas shine */
.nav-links,
.center-logo{
    position:relative;
    z-index:5;
}

.nav-links{
    display:flex;
    align-items:center;
    min-width:0;
    height:100%;
    gap:3px;
    position:relative;
    z-index:5;
}

.menu-left{
    justify-content:flex-start;
    padding-left:5px;
}

.menu-right{
    justify-content:flex-end;
    padding-right:5px;
}

.front-nav-item{
    position:relative;
    display:flex;
    align-items:center;
    height:100%;
    z-index:20;
}

.nav-link{
    height:31px;
    padding:0 9px;
    border-radius:999px;
    color:#fff;
    font-size:9px;
    font-weight:950;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    transition:.22s ease;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
}

.nav-link:hover,
.nav-link.active{
    background:linear-gradient(135deg,#fff,#efe6ff);
    color:#6f00d9;
    box-shadow:
        0 0 18px rgba(255,255,255,.55),
        0 0 26px rgba(166,0,255,.35);
    transform:translateY(-1px);
}

/* =========================================================
   LOGO CENTER
========================================================= */
.center-logo{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:30;
    overflow:hidden;
    animation:logoGlow 4s ease-in-out infinite;
    clip-path:polygon(10% 0,90% 0,100% 100%,0% 100%);
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.25), transparent 60%),
        linear-gradient(180deg,var(--pe-panel-2) 0%,var(--pe-primary) 45%,var(--pe-panel) 100%);
    box-shadow:
        0 0 25px var(--pe-shadow),
        0 8px 30px rgba(0,0,0,.6),
        inset 0 0 18px rgba(255,255,255,.12),
        inset 0 -8px 20px rgba(0,0,0,.4);
}

@keyframes logoGlow{
    0%,100%{
        box-shadow:
            0 0 25px var(--pe-shadow),
            0 8px 30px rgba(0,0,0,.6),
            inset 0 0 18px rgba(255,255,255,.12),
            inset 0 -8px 20px rgba(0,0,0,.4);
    }

    50%{
        box-shadow:
            0 0 35px var(--pe-shadow),
            0 10px 40px rgba(0,0,0,.7),
            inset 0 0 22px rgba(255,255,255,.18),
            inset 0 -10px 25px rgba(0,0,0,.5);
    }
}

.center-logo::after{
    content:"";
    position:absolute;
    inset:0;
    clip-path:inherit;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
        0 0 20px var(--pe-shadow),
        0 0 40px var(--pe-glow);
    pointer-events:none;
}

.center-logo::before{
    content:"";
    position:absolute;
    inset:0;
    clip-path:inherit;
    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.08) 30%,
        rgba(255,255,255,.22) 48%,
        rgba(255,255,255,.08) 65%,
        transparent 100%
    );
    filter:blur(6px);
    transform:translateX(-140%);
    opacity:0;
    animation:logoShineSoft 5.5s ease-in-out infinite;
    pointer-events:none;
}

@keyframes logoShineSoft{
    0%{
        transform:translateX(-140%);
        opacity:0;
    }

    25%{
        opacity:.35;
    }

    50%{
        transform:translateX(0%);
        opacity:.6;
    }

    75%{
        opacity:.35;
    }

    100%{
        transform:translateX(140%);
        opacity:0;
    }
}

.center-logo img{
    max-width:125px;
    max-height:32px;
    width:auto;
    height:auto;
    object-fit:contain;
    position:relative;
    z-index:2;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.4))
        drop-shadow(0 0 18px var(--pe-shadow));
}

.center-logo:hover{
    transform:scale(1.03);
    transition:.25s ease;
}

/* =========================================================
   SUBMENU / DROPDOWN FIX
========================================================= */
.front-dropdown{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    min-width:190px;
    padding:9px;
    border-radius:14px;
    background:
        linear-gradient(180deg,rgba(24,0,52,.98),rgba(7,0,22,.98));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
        0 22px 55px rgba(0,0,0,.58),
        0 0 30px rgba(155,0,255,.35);
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px) scale(.98);
    pointer-events:none;
    transition:.2s ease;
}

.menu-right .front-dropdown{
    left:auto;
    right:0;
}

.front-dropdown::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-12px;
    height:12px;
}

.front-nav-item:hover{
    z-index:99999;
}

.front-nav-item:hover .front-dropdown,
.front-nav-item:focus-within .front-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.front-dropdown .nav-link{
    width:100%;
    height:34px;
    justify-content:flex-start;
    border-radius:10px;
    padding:0 12px;
    margin:4px 0;
    background:rgba(255,255,255,.05);
    font-size:10px;
}

.front-dropdown .nav-link:hover,
.front-dropdown .nav-link.active{
    background:linear-gradient(135deg,var(--pe-danger),#7b2cff);
    color:#fff;
}

/* =========================================================
   CONTENT
========================================================= */
.wrap{
    width:100%;
    min-height:calc(100vh - 92px);
    padding:0 8px 70px;
    background:#050014;
    position:relative;
    z-index:2;
}

/* =========================================================
   PROMO SLIDER - PREMIUM FOLD + CORNER DROP FIT
========================================================= */
.home-promo-wrap{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,.92fr);
    gap:4px;
    width:100%;
    margin:0 0 10px;
    overflow:hidden;
    background:#090013;
}

.home-promo-main{
    position:relative;
    height:285px;
    overflow:hidden;
    background:#140522;
    isolation:isolate;
}

.promo-slider{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    perspective:1800px;
    transform-style:preserve-3d;
    background:#12001f;
}

.promo-slide{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    transform:translateX(0) scale(1);
    transform-origin:left center;
    backface-visibility:hidden;
    z-index:1;
    will-change:transform,opacity,clip-path,filter;
}

.promo-slide.is-leaving{
    opacity:1;
    z-index:2;
    pointer-events:none;
}

.promo-slide.active{
    opacity:1;
    pointer-events:auto;
    z-index:5;
}

.promo-slide img,
.promo-slide .promo-empty{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    object-fit:fill;
    display:block;
}

/* Effect 1: lipat seperti buku dari kiri ke kanan */
.promo-slide.fx-fold-in{
    opacity:0;
    transform:perspective(1800px) rotateY(-88deg) translateX(-7%) scale(.985);
    filter:brightness(.82) saturate(.9);
    transform-origin:left center;
}

.promo-slide.fx-fold-in.active{
    animation:promoFoldIn 1050ms cubic-bezier(.18,.86,.24,1) forwards;
}

.promo-slide.fx-fold-out.is-leaving{
    animation:promoFoldOut 850ms cubic-bezier(.45,0,.55,1) forwards;
    transform-origin:right center;
}

@keyframes promoFoldIn{
    0%{
        opacity:.15;
        transform:perspective(1800px) rotateY(-88deg) translateX(-7%) scale(.985);
        filter:brightness(.75) saturate(.88);
    }
    58%{
        opacity:1;
        transform:perspective(1800px) rotateY(6deg) translateX(0) scale(1.01);
        filter:brightness(1.08) saturate(1.04);
    }
    100%{
        opacity:1;
        transform:perspective(1800px) rotateY(0deg) translateX(0) scale(1);
        filter:brightness(1) saturate(1);
    }
}

@keyframes promoFoldOut{
    0%{
        opacity:1;
        transform:perspective(1800px) rotateY(0deg) translateX(0) scale(1);
        filter:brightness(1);
    }
    100%{
        opacity:0;
        transform:perspective(1800px) rotateY(82deg) translateX(8%) scale(.985);
        filter:brightness(.7);
    }
}

/* Effect 2: banner baru jatuh dari sudut kanan atas lalu bounce halus */
.promo-slide.fx-corner-drop{
    opacity:0;
    transform:translate(46%,-126%) rotate(16deg) scale(.94);
    transform-origin:right top;
    filter:brightness(.85) saturate(.9);
}

.promo-slide.fx-corner-drop.active{
    animation:promoCornerDrop 1150ms cubic-bezier(.18,.86,.24,1) forwards;
}

.promo-slide.fx-corner-fall.is-leaving{
    animation:promoCornerFall 850ms cubic-bezier(.55,0,.65,.2) forwards;
    transform-origin:right top;
}

@keyframes promoCornerDrop{
    0%{
        opacity:.2;
        transform:translate(46%,-126%) rotate(16deg) scale(.94);
        filter:brightness(.78) saturate(.9);
    }
    52%{
        opacity:1;
        transform:translate(-1.5%,7%) rotate(-2deg) scale(1.018);
        filter:brightness(1.06) saturate(1.04);
    }
    75%{
        opacity:1;
        transform:translate(.8%,-2.2%) rotate(.8deg) scale(.997);
        filter:brightness(1.02) saturate(1.02);
    }
    100%{
        opacity:1;
        transform:translate(0,0) rotate(0deg) scale(1);
        filter:brightness(1) saturate(1);
    }
}

@keyframes promoCornerFall{
    0%{
        opacity:1;
        transform:translate(0,0) rotate(0deg) scale(1);
        filter:brightness(1);
    }
    100%{
        opacity:0;
        transform:translate(-52%,118%) rotate(-18deg) scale(.96);
        filter:brightness(.65);
    }
}

/* Effect 3: geser halus cadangan agar tidak monoton */
.promo-slide.fx-soft-slide{
    opacity:0;
    transform:translateX(100%) scale(1.01);
    filter:brightness(.86);
}

.promo-slide.fx-soft-slide.active{
    animation:promoSoftSlide 900ms cubic-bezier(.22,1,.36,1) forwards;
}

.promo-slide.fx-soft-leave.is-leaving{
    animation:promoSoftLeave 780ms cubic-bezier(.45,0,.55,1) forwards;
}

@keyframes promoSoftSlide{
    0%{
        opacity:.35;
        transform:translateX(100%) scale(1.01);
    }
    100%{
        opacity:1;
        transform:translateX(0) scale(1);
    }
}

@keyframes promoSoftLeave{
    0%{
        opacity:1;
        transform:translateX(0) scale(1);
    }
    100%{
        opacity:0;
        transform:translateX(-26%) scale(.99);
    }
}

.home-promo-side{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:4px;
    height:285px;
    overflow:hidden;
    background:#090013;
}

.side-banner-item{
    display:block;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:linear-gradient(135deg,var(--pe-danger),var(--pe-secondary));
}

.side-banner-item img{
    width:100%;
    height:100%;
    object-fit:fill;
    display:block;
}

.side-banner-item.empty,
.promo-empty{
    display:grid;
    place-items:center;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.promo-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:48px;
    border:0;
    border-radius:0 999px 999px 0;
    background:rgba(0,0,0,.58);
    color:#fff;
    font-size:28px;
    font-weight:900;
    cursor:pointer;
    z-index:20;
    backdrop-filter:blur(8px);
}

.promo-nav.prev{
    left:0;
}

.promo-nav.next{
    right:0;
    border-radius:999px 0 0 999px;
}

.promo-dots{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:21;
}

.promo-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    cursor:pointer;
    transition:.25s ease;
}

.promo-dots button.active{
    width:20px;
    background:#fff;
}

/* Desktop: bentuk seperti contoh, banner utama besar + side 2 kotak kanan */
@media(min-width:769px){
    .home-promo-wrap{
        grid-template-columns:minmax(0,2.05fr) minmax(260px,.9fr);
        gap:4px;
    }

    .home-promo-main,
    .home-promo-side{
        height:380px;
    }
}

@media(max-width:768px){
    .home-promo-wrap{
        grid-template-columns:1fr;
    }

    .home-promo-main{
        height:190px;
    }

    .home-promo-side{
        height:auto;
        grid-template-columns:1fr 1fr;
        grid-template-rows:none;
    }

    .side-banner-item{
        height:95px;
    }
}

@media(max-width:520px){
    .home-promo-side{
        display:none !important;
    }

    .home-promo-main{
        height:185px;
    }
}

/* =========================================================
   CARD / HERO / SECTION
========================================================= */
.glass{
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border:1px solid var(--line);
    box-shadow:0 20px 55px rgba(0,0,0,.34);
}

.hero{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:10px 0 18px;
}

.hero-main{
    padding:24px;
}

.hero-side{
    padding:14px;
}

.eyebrow{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(247,37,133,.22);
    border:1px solid rgba(247,37,133,.35);
    font-size:10px;
    font-weight:900;
}

.hero h1{
    font-size:clamp(30px,5vw,46px);
    line-height:.95;
    letter-spacing:-.06em;
    margin:14px 0;
}

.hero h1 span{
    background:linear-gradient(90deg,#fff,var(--cyan),var(--pink));
    -webkit-background-clip:text;
    color:transparent;
}

.hero p{
    color:var(--muted);
    line-height:1.65;
}

.cta-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.btn-premium,
.btn-soft{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    padding:11px 14px;
    font-size:12px;
    font-weight:900;
}

.btn-premium{
    background:linear-gradient(135deg,var(--pink),var(--blue));
    color:#fff;
}

.btn-soft{
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
    color:#fff;
}

.float-card{
    padding:14px;
    margin:8px 0;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
}

.label{
    font-weight:900;
    color:#e7edff;
}

.jackpot{
    font-size:30px;
    font-weight:900;
    color:var(--gold);
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:22px 0 10px;
}

.section-head h2{
    margin:0;
    font-size:20px;
}

/* =========================================================
   PROVIDER / GAME / PROMO
========================================================= */
.provider-row{
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom:7px;
}

.provider-chip{
    white-space:nowrap;
    padding:9px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
    font-size:12px;
    font-weight:900;
}

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

.game-card{
    overflow:hidden;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
}

.game-img{
    height:115px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2b1055,#7597de);
    font-size:36px;
}

.game-body{
    padding:10px;
}

.game-title{
    font-size:12px;
    font-weight:900;
}

.tag{
    display:inline-flex;
    margin-top:7px;
    padding:4px 7px;
    border-radius:999px;
    background:var(--cyan);
    color:#07111f;
    font-size:10px;
    font-weight:900;
}

.promo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.promo{
    padding:16px;
    min-height:130px;
}

/* =========================================================
   FORM
========================================================= */
.form-card{
    max-width:520px;
    margin:30px auto;
    padding:24px;
}

.input{
    width:100%;
    padding:13px 15px;
    margin:8px 0 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.08);
    color:#fff;
    outline:none;
}

.alert{
    padding:12px 14px;
    border-radius:12px;
    margin:10px 0;
    background:rgba(247,37,133,.18);
    border:1px solid rgba(247,37,133,.28);
}

/* =========================================================
   DESKTOP BESAR
========================================================= */
@media(min-width:1200px){
    :root{
        --desktop-container:1150px;
    }

    .site-shell{
        margin-top:0;
        margin-bottom:0;
    }
}

/* =========================================================
   TABLET
========================================================= */
@media(max-width:820px){
    :root{
        --desktop-container:100%;
    }

    body{
        background:
            linear-gradient(rgba(5,0,20,.72),rgba(5,0,20,.88)),
            var(--body-bg-url) center top/cover fixed no-repeat,
            #050014;
    }

    .site-shell{
        width:100%;
        min-height:100vh;
    }

    .top-login-bar{
        grid-template-columns:1fr;
        height:auto;
    }

    .quick-login{
        grid-template-columns:1fr 1fr 90px 76px 76px 30px;
    }

    .main-menu-bar{
        grid-template-columns:1fr;
        gap:0;
        overflow:visible;
    }

    .center-logo{
        order:-1;
        margin-top:0;
        height:52px;
    }

    .menu-left,
    .menu-right{
        justify-content:center;
        flex-wrap:wrap;
        padding:3px 4px;
    }

    .front-nav-item{
        height:36px;
    }

    .front-dropdown{
        top:100%;
        left:50%;
        right:auto;
        transform:translate(-50%,10px) scale(.98);
    }

    .front-nav-item:hover .front-dropdown,
    .front-nav-item:focus-within .front-dropdown{
        transform:translate(-50%,0) scale(1);
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:520px){
    .top-login-bar{
        padding:6px;
    }

    .quick-login{
        grid-template-columns:1fr 1fr;
    }

    .captcha-pill,
    .btn-login,
    .btn-register,
    .bell-pill{
        width:100%;
    }

    .main-menu-bar{
        min-height:auto;
    }

    .nav-link{
        font-size:9px;
        padding:0 8px;
    }

    .home-promo-wrap{
        grid-template-columns:1fr;
    }

    .home-promo-main{
        height:170px;
    }

    .home-promo-side{
        height:auto;
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .side-banner-item{
        height:130px;
    }

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

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


/* =========================================================
   NOTICE BAR ULTRA PREMIUM
========================================================= */

.notice-section{
    margin:12px 0;
    min-height:54px;
    border-radius:12px;
    overflow:hidden;
    display:grid;
    grid-template-columns:170px 1fr 245px;
    align-items:center;
    position:relative;
    isolation:isolate;
    background:
        radial-gradient(circle at 0% 50%,rgba(255,230,0,.18),transparent 22%),
        radial-gradient(circle at 100% 50%,rgba(0,255,180,.12),transparent 24%),
        linear-gradient(90deg,var(--pe-panel-2),var(--pe-primary),var(--pe-panel));
    border:1px solid var(--pe-glow);
    box-shadow:
        0 0 22px var(--pe-shadow),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.35);
}

.notice-section::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(circle,rgba(255,255,255,.10),transparent 38%);
    filter:blur(28px);
    opacity:.45;
    animation:noticeSoftGlow 7s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
}

@keyframes noticeSoftGlow{
    0%,100%{transform:translateX(-18%);opacity:.28}
    50%{transform:translateX(18%);opacity:.55}
}

/* LEFT */
.notice-label{
    height:100%;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
    background:linear-gradient(90deg,rgba(0,0,0,.22),transparent);
}

.notice-icon{
    width:31px;
    height:31px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    background:radial-gradient(circle,#ffe600,#b5ff00);
    box-shadow:
        0 0 16px rgba(255,230,0,.6),
        inset 0 1px 0 rgba(255,255,255,.35);
    animation:noticeBell 1.8s ease-in-out infinite;
}

@keyframes noticeBell{
    0%,100%{transform:rotate(0) scale(1)}
    25%{transform:rotate(-9deg) scale(1.04)}
    50%{transform:rotate(9deg) scale(1)}
    75%{transform:rotate(-5deg) scale(1.04)}
}

/* MARQUEE */
.notice-marquee{
    height:32px;
    overflow:hidden;
    border-radius:8px;
    background:
        radial-gradient(circle at center,rgba(255,230,0,.07),transparent 60%),
        linear-gradient(180deg,#160018,#29002e);
    border:1px solid rgba(255,255,255,.09);
    display:flex;
    align-items:center;
    position:relative;
    box-shadow:inset 0 0 14px rgba(0,0,0,.45);
}

.notice-marquee::before,
.notice-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:55px;
    z-index:2;
    pointer-events:none;
}

.notice-marquee::before{
    left:0;
    background:linear-gradient(90deg,#160018,transparent);
}

.notice-marquee::after{
    right:0;
    background:linear-gradient(270deg,#160018,transparent);
}

.notice-marquee-text{
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    color:#fff200;
    font-size:12px;
    font-weight:950;
    letter-spacing:.2px;
    text-shadow:
        0 0 8px rgba(255,242,0,.7),
        0 0 18px rgba(255,242,0,.28);
    animation:noticeMove 24s linear infinite;
}

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

/* DATE + CLOCK */
.notice-time-wrap{
    height:100%;
    padding:0 13px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.notice-date{
    color:#fff;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    opacity:.95;
    text-shadow:0 0 10px rgba(255,255,255,.22);
}

.notice-clock{
    min-width:94px;
    height:34px;
    padding:0 12px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top,rgba(0,255,157,.15),transparent 55%),
        linear-gradient(180deg,#061a13,#03100c);
    border:1px solid rgba(0,255,157,.38);
    color:#00ff9d;
    font-size:15px;
    font-weight:950;
    letter-spacing:1px;
    font-family:monospace;
    text-shadow:
        0 0 10px rgba(0,255,157,.85),
        0 0 20px rgba(0,255,157,.28);
    box-shadow:
        inset 0 0 12px rgba(0,255,157,.10),
        0 0 16px rgba(0,255,157,.18);
    animation:clockPulse 2s ease-in-out infinite;
}

@keyframes clockPulse{
    0%,100%{box-shadow:inset 0 0 12px rgba(0,255,157,.10),0 0 14px rgba(0,255,157,.14)}
    50%{box-shadow:inset 0 0 16px rgba(0,255,157,.18),0 0 22px rgba(0,255,157,.28)}
}

/* MOBILE */
@media(max-width:520px){
    .notice-section{
        grid-template-columns:1fr;
        border-radius:10px;
    }

    .notice-label{
        justify-content:center;
        height:36px;
    }

    .notice-marquee{
        height:32px;
        margin:0 8px;
    }

    .notice-time-wrap{
        justify-content:center;
        padding:8px;
    }

    .notice-date{
        font-size:10px;
    }

    .notice-clock{
        height:30px;
        font-size:13px;
        min-width:78px;
    }
}

/* =========================================================
   PEGASUS ENGINE PROGRESSIVE JACKPOT - FULL DESKTOP FIT
========================================================= */

.pegasus-jackpot-section{
    width:100%;
    margin:16px 0;
    padding:8px;
    border-radius:16px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 50%,rgba(0,213,255,.18),transparent 28%),
        radial-gradient(circle at 90% 50%,var(--pe-danger),transparent 30%),
        linear-gradient(180deg,#160021,#030006);
    border:1px solid rgba(184,0,255,.5);
    box-shadow:
        0 0 28px var(--pe-shadow),
        inset 0 0 24px rgba(255,255,255,.04);
}

.pegasus-jackpot-section::before{
    content:"";
    position:absolute;
    inset:-70%;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 36%);
    filter:blur(36px);
    opacity:.45;
    animation:jackpotSoftGlow 8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes jackpotSoftGlow{
    0%,100%{
        transform:translateX(-12%);
        opacity:.25;
    }

    50%{
        transform:translateX(12%);
        opacity:.55;
    }
}

.pegasus-jackpot-inner{
    min-height:66px;
    padding:7px;
    border-radius:14px;
    display:grid;
    grid-template-columns:145px minmax(0,1fr);
    gap:8px;
    align-items:center;
    position:relative;
    z-index:2;
    background:
        radial-gradient(circle at center,rgba(151,0,255,.16),transparent 60%),
        linear-gradient(180deg,#050007,#000);
    border:3px solid #060006;
    box-shadow:
        0 0 0 1px rgba(151,0,255,.9),
        inset 0 0 0 1px rgba(151,0,255,.45),
        inset 0 0 22px rgba(151,0,255,.22);
}

/* BRAND */
.jackpot-brand{
    height:48px;
    min-width:0;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:0 8px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.09),transparent 60%),
        linear-gradient(180deg,#16001f,#060008);
    border:1px solid rgba(151,0,255,.9);
    box-shadow:
        inset 0 0 18px rgba(151,0,255,.24),
        0 0 14px rgba(151,0,255,.24);
}

.jackpot-wing{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff7b00,var(--pe-accent));
    color:#210024;
    font-size:16px;
    font-weight:950;
    box-shadow:
        0 0 16px rgba(255,123,0,.48),
        inset 0 1px 0 rgba(255,255,255,.45);
    animation:jackpotIconPulse 2s ease-in-out infinite;
}

@keyframes jackpotIconPulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }
}

.jackpot-small{
    color:#d8c8ff;
    font-size:7px;
    line-height:1;
    font-weight:900;
    letter-spacing:.3px;
    white-space:nowrap;
}

.jackpot-title{
    margin-top:2px;
    color:#ff7b00;
    font-size:12px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.3px;
    white-space:nowrap;
}

.jackpot-title span{
    color:var(--pe-secondary);
    font-size:12px;
    text-shadow:0 0 12px rgba(0,213,255,.65);
}

/* DISPLAY */
.jackpot-display{
    height:48px;
    min-width:0;
    padding:4px;
    border-radius:999px;
    background:
        linear-gradient(180deg,#5a00ad,#21003e);
    box-shadow:
        0 0 18px rgba(151,0,255,.55),
        inset 0 0 14px rgba(255,255,255,.08);
}

.jackpot-led{
    width:100%;
    height:100%;
    min-width:0;
    padding:0 8px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at center,rgba(151,0,255,.20),transparent 55%),
        linear-gradient(180deg,#010101,#000);
    border:2px dotted rgba(151,0,255,.95);
    color:#fff;
    font-family:monospace;
    font-size:clamp(18px,2.6vw,26px);
    font-weight:950;
    letter-spacing:.9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    text-shadow:
        0 0 8px rgba(255,255,255,.85),
        0 0 16px rgba(151,0,255,.7),
        0 0 24px rgba(0,213,255,.36);
    box-shadow:
        inset 0 0 18px rgba(151,0,255,.35),
        0 0 18px rgba(151,0,255,.35);
    animation:jackpotLedPulse 1.8s ease-in-out infinite;
}

@keyframes jackpotLedPulse{
    0%,100%{
        filter:brightness(1);
    }

    50%{
        filter:brightness(1.2);
    }
}

/* TABLET */
@media(max-width:820px){
    .pegasus-jackpot-inner{
        grid-template-columns:130px minmax(0,1fr);
        gap:6px;
    }

    .jackpot-brand,
    .jackpot-display{
        height:46px;
    }

    .jackpot-title,
    .jackpot-title span{
        font-size:11px;
    }

    .jackpot-led{
        font-size:clamp(15px,4vw,22px);
        letter-spacing:.6px;
    }
}

/* MOBILE */
@media(max-width:520px){
    .pegasus-jackpot-section{
        padding:7px;
        border-radius:15px;
    }

    .pegasus-jackpot-inner{
        grid-template-columns:1fr;
        padding:7px;
        border-radius:13px;
        gap:7px;
    }

    .jackpot-brand{
        height:44px;
        justify-content:center;
    }

    .jackpot-display{
        height:48px;
    }

    .jackpot-wing{
        width:30px;
        height:30px;
        flex-basis:30px;
        font-size:17px;
    }

    .jackpot-title,
    .jackpot-title span{
        font-size:15px;
    }

    .jackpot-led{
        font-size:17px;
        letter-spacing:.5px;
    }
}

/* DESKTOP*/
@media(min-width:821px){

    .pegasus-jackpot-inner{
        grid-template-columns:125px minmax(0,1fr);
    }

    .jackpot-brand{
        height:54px;
        align-items:center;
        justify-content:flex-start;
        gap:6px;
        padding:6px 7px;
    }

    .jackpot-brand > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .jackpot-small{
        font-size:7px;
        line-height:1;
        margin-bottom:3px;
    }

    .jackpot-title{
        font-size:10px;
        line-height:1.05;
        white-space:normal;
        max-width:70px;
    }

    .jackpot-title span{
        display:block;
        font-size:10px;
        line-height:1.05;
    }

    .jackpot-wing{
        width:28px;
        height:28px;
        flex:0 0 28px;
    }
}

/* =========================================================
   TRANSACTION ULTRA PREMIUM
========================================================= */

.transaction-latest-section{
    margin:20px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.transaction-card{
    position:relative;
    overflow:hidden;
    border-radius:14px;

    background:
        radial-gradient(circle at top left,var(--pe-glow),transparent 34%),
        radial-gradient(circle at bottom right,rgba(0,210,255,.10),transparent 32%),
        linear-gradient(180deg,#0e0015,#030303);

    border:1px solid var(--pe-glow);

    box-shadow:
        0 0 24px var(--pe-shadow),
        inset 0 0 22px rgba(255,255,255,.035);
}

.transaction-card::before{
    content:"";
    position:absolute;
    inset:-60%;

    background:
        radial-gradient(circle,rgba(255,255,255,.10),transparent 38%);

    filter:blur(36px);

    opacity:.45;

    animation:transactionGlow 9s ease-in-out infinite;

    pointer-events:none;
}

@keyframes transactionGlow{

    0%,100%{
        transform:translateX(-12%);
        opacity:.25;
    }

    50%{
        transform:translateX(12%);
        opacity:.55;
    }
}

/* =========================================================
   TITLE
========================================================= */

.transaction-title{
    height:42px;
    width:72%;

    padding:0 18px;

    display:flex;
    align-items:center;

    position:relative;
    z-index:2;

    background:
        linear-gradient(90deg,var(--pe-primary),var(--pe-primary),var(--pe-danger));

    color:#fff;

    font-size:17px;
    font-weight:950;

    text-transform:uppercase;

    border-radius:0 0 36px 0;

    text-shadow:
        0 0 14px rgba(255,255,255,.55);

    box-shadow:
        0 0 18px var(--pe-glow),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.transaction-title::after{
    content:"";
    position:absolute;
    inset:0;

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

    transform:translateX(-120%);

    animation:titleSoftShine 5s ease-in-out infinite;

    pointer-events:none;
}

@keyframes titleSoftShine{

    0%{
        transform:translateX(-120%);
        opacity:0;
    }

    35%{
        opacity:.45;
    }

    70%{
        opacity:.2;
    }

    100%{
        transform:translateX(120%);
        opacity:0;
    }
}

/* =========================================================
   LIST WRAP
========================================================= */

.transaction-list-wrap{
    height:178px;

    overflow:hidden;

    position:relative;

    padding:8px;
}

.transaction-list-wrap::before,
.transaction-list-wrap::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    height:32px;

    z-index:4;

    pointer-events:none;
}

.transaction-list-wrap::before{
    top:0;

    background:
        linear-gradient(
            180deg,
            #08000d,
            transparent
        );
}

.transaction-list-wrap::after{
    bottom:0;

    background:
        linear-gradient(
            0deg,
            #050505,
            transparent
        );
}

.transaction-list{
    width:100%;
    position:relative;
    will-change:transform;
}

/* =========================================================
   SUPER SLOW PREMIUM SCROLL
========================================================= */

#depositList{
    animation:
        transactionScrollUp 320s
        linear
        infinite;

    will-change:transform;

    transform:translate3d(0,0,0);
}

#withdrawList{
    animation:
        transactionScrollDown 320s
        linear
        infinite;

    will-change:transform;

    transform:translate3d(0,0,0);
}

@keyframes transactionScrollUp{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-50%);
    }
}

@keyframes transactionScrollDown{

    0%{
        transform:translateY(-50%);
    }

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

.transaction-card:hover .transaction-list{
    animation-play-state:paused;
}

/* =========================================================
   ROW
========================================================= */

.transaction-row{
    min-height:34px;

    margin-bottom:4px;

    padding:0 10px;

    display:grid;

    grid-template-columns:1fr 95px 76px;

    align-items:center;

    position:relative;
    z-index:2;

    color:#fff;

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

    border-radius:8px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 5px 10px rgba(0,0,0,.25);

    transition:.25s ease;
}

.transaction-row:nth-child(even){
    background:
        linear-gradient(
            90deg,
            var(--pe-glow),
            rgba(255,255,255,.04)
        );
}

.transaction-row:hover{
    transform:translateX(3px);

    border-color:var(--pe-glow);

    background:
        linear-gradient(
            90deg,
            var(--pe-glow),
            rgba(0,210,255,.08)
        );

    box-shadow:
        0 0 14px var(--pe-glow),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.transaction-row span{
    color:#fff;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.transaction-row strong{
    color:#ffe600;

    font-weight:950;

    text-shadow:
        0 0 8px rgba(255,230,0,.35),
        0 0 16px rgba(255,230,0,.18);
}

.transaction-row em{
    text-align:right;

    font-style:normal;
    font-weight:950;
}

.transaction-row em.approved{
    color:#4dff91;

    text-shadow:
        0 0 8px rgba(77,255,145,.45),
        0 0 16px rgba(77,255,145,.18);
}

.transaction-row em.approved::before{
    content:"● ";

    color:#4dff91;

    animation:approvedPulse 1.3s ease-in-out infinite;
}

@keyframes approvedPulse{

    0%,100%{
        opacity:.45;
    }

    50%{
        opacity:1;
    }
}

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

@media(max-width:520px){

    .transaction-latest-section{
        grid-template-columns:1fr;
        gap:12px;
    }

    .transaction-title{
        width:76%;
        height:38px;
        font-size:15px;
    }

    .transaction-list-wrap{
        height:165px;
        padding:7px;
    }

    .transaction-row{
        grid-template-columns:1fr 78px 68px;

        min-height:31px;

        font-size:9px;

        padding:0 8px;
    }
}

/* =========================================================
   GAME POPULAR PREMIUM
========================================================= */

.game-popular-section{
    margin:20px 0;
    background:
        radial-gradient(circle at 10% 0%, var(--pe-glow), transparent 34%),
        radial-gradient(circle at 90% 100%, rgba(0,190,255,.14), transparent 35%),
        linear-gradient(180deg,#0b0014,#030303);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--pe-glow);
    box-shadow:
        0 0 24px var(--pe-shadow),
        inset 0 0 22px rgba(255,255,255,.04);
}

.popular-title{
    position:relative;
    padding:10px 14px;
    background:linear-gradient(90deg,#7100b8,var(--pe-primary),var(--pe-primary));
    color:#fff;
    font-size:18px;
    font-weight:950;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.4px;
    text-shadow:0 0 14px rgba(255,255,255,.65);
    overflow:hidden;
}

.popular-title::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-40%;
    width:35%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg);
    animation:popularTitleShine 4s linear infinite;
}

@keyframes popularTitleShine{
    to{
        left:120%;
    }
}

.popular-provider-tabs{
    height:48px;
    display:grid;
    grid-template-columns:38px 1fr 38px;
    align-items:center;
    background:
        linear-gradient(180deg,#222,#111);
    border-bottom:1px solid var(--pe-glow);
}

.provider-tabs-scroll{
    height:100%;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
}

.provider-tabs-scroll::-webkit-scrollbar{
    display:none;
}

.provider-tab{
    min-width:132px;
    height:48px;
    padding:0 14px;
    border-left:1px solid rgba(255,255,255,.08);
    border-right:1px solid rgba(0,0,0,.55);
    color:#a9a9a9;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 55%),
        linear-gradient(180deg,#242424,#141414);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:950;
    text-align:center;
    white-space:nowrap;
    opacity:.78;
    position:relative;
    overflow:hidden;
    transition:.25s ease;
}

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

.provider-tab:hover,
.provider-tab.active{
    color:#fff;
    opacity:1;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 58%),
        linear-gradient(180deg,#3b0065,#1a001f);
    box-shadow:inset 0 -2px 0 var(--pe-primary);
}

.provider-tab:hover::before,
.provider-tab.active::before{
    transform:translateX(120%);
}

.provider-tab-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:96px;
    max-height:30px;
    object-fit:contain;
    object-position:center;
    margin:auto;
}

.provider-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.provider-tab-fallback{
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.popular-game-card{
    transition:.25s ease;
}

.popular-game-img span{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

@media(max-width:520px){
    .provider-tab-logo{
        max-width:82px;
        max-height:26px;
    }
}

.provider-arrow{
    width:38px;
    height:48px;
    border:0;
    background:
        radial-gradient(circle at center,var(--pe-glow),transparent 60%),
        linear-gradient(180deg,#191919,#0c0c0c);
    color:var(--pe-primary);
    font-size:32px;
    line-height:1;
    cursor:pointer;
    text-shadow:0 0 12px var(--pe-glow);
    transition:.2s ease;
}

.provider-arrow:hover{
    color:#fff;
    background:
        radial-gradient(circle at center,var(--pe-glow),transparent 65%),
        linear-gradient(180deg,#2a003f,#111);
}

.popular-game-slider{
    width:100%;
    overflow:hidden;
    background:
        radial-gradient(circle at top,rgba(255,255,255,.05),transparent 45%),
        #050505;
    padding:11px;
}

.popular-game-track{
    display:flex;
    gap:9px;
    transition:transform .45s ease;
    will-change:transform;
}

.popular-game-card{
    flex:0 0 calc((100% - 45px) / 6);
    display:block;
    color:#fff;
    min-width:0;
    position:relative;
    border-radius:10px;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
        #080808;
    border:1px solid var(--pe-glow);
    box-shadow:
        0 0 12px var(--pe-shadow),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:.25s ease;
}

.popular-game-card:hover{
    transform:translateY(-3px);
    border-color:#ff4dff;
    box-shadow:
        0 0 20px var(--pe-glow),
        0 10px 22px rgba(0,0,0,.65);
}

.popular-game-img{
    width:100%;
    aspect-ratio:1 / 1;
    background:
        radial-gradient(circle at 50% 20%,rgba(255,255,255,.18),transparent 55%),
        linear-gradient(135deg,#3c1a80,#6e83d6);
    overflow:hidden;
    display:grid;
    place-items:center;
    position:relative;
}

.popular-game-img::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
    transform:translateX(-130%);
    transition:.55s ease;
    pointer-events:none;
}

.popular-game-card:hover .popular-game-img::after{
    transform:translateX(130%);
}

.popular-game-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.35s ease;
}

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

.popular-game-img span{
    font-size:34px;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.45));
}

.popular-game-name{
    min-height:34px;
    padding:8px 5px;
    color:#fff;
    font-size:10px;
    font-weight:950;
    line-height:1.25;
    text-align:center;
    background:
        linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    text-shadow:0 0 8px rgba(0,0,0,.8);
}

/* TABLET */
@media(max-width:820px){
    .popular-game-card{
        flex-basis:calc((100% - 27px) / 4);
    }

    .provider-tab{
        min-width:120px;
    }
}

/* MOBILE */
@media(max-width:520px){
    .popular-title{
        font-size:16px;
        padding:9px 11px;
    }

    .popular-provider-tabs{
        height:44px;
        grid-template-columns:32px 1fr 32px;
    }

    .provider-arrow{
        width:32px;
        height:44px;
    }

    .provider-tab{
        height:44px;
        min-width:108px;
        font-size:10px;
    }

    .popular-game-slider{
        padding:7px;
    }

    .popular-game-track{
        gap:6px;
    }

    .popular-game-card{
        flex-basis:calc((100% - 12px) / 3);
        border-radius:8px;
    }

    .popular-game-name{
        font-size:9px;
        min-height:32px;
        padding:7px 4px;
    }
}



/* =========================================================
   PROMO PREMIUM SECTION - ULTRA PREMIUM
========================================================= */

.promo-premium-section{
    margin:20px 0;
    padding:15px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 12% 0%,var(--pe-danger),transparent 34%),
        radial-gradient(circle at 95% 100%,rgba(0,210,255,.16),transparent 34%),
        linear-gradient(180deg,#140020,#030006);
    border:1px solid var(--pe-danger);
    box-shadow:
        0 0 34px var(--pe-shadow),
        inset 0 0 30px rgba(255,255,255,.035);
}

/* SECTION SHINE */
.promo-premium-section::before{
    content:"";
    position:absolute;

    top:-60%;
    left:-35%;

    width:45%;
    height:220%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.015) 20%,
            rgba(255,255,255,.06) 50%,
            rgba(255,255,255,.015) 80%,
            rgba(255,255,255,0) 100%
        );

    filter:blur(38px);

    transform:rotate(18deg) translateX(-160%);

    animation:smoothSectionShine 9s ease-in-out infinite;

    pointer-events:none;
    z-index:0;
}

@keyframes smoothSectionShine{

    0%{
        transform:rotate(18deg) translateX(-160%);
        opacity:0;
    }

    15%{
        opacity:.45;
    }

    50%{
        opacity:.7;
    }

    85%{
        opacity:.45;
    }

    100%{
        transform:rotate(18deg) translateX(340%);
        opacity:0;
    }
}

/* CARD SHINE */
.promo-premium-card::after{
    content:"";
    position:absolute;

    top:-70%;
    left:-30%;

    width:32%;
    height:240%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.02) 25%,
            rgba(255,255,255,.10) 50%,
            rgba(255,255,255,.02) 75%,
            rgba(255,255,255,0) 100%
        );

    filter:blur(28px);

    transform:rotate(16deg) translateX(-220%);

    animation:smoothCardShine 7s ease-in-out infinite;

    pointer-events:none;
}

@keyframes smoothCardShine{

    0%{
        transform:rotate(16deg) translateX(-220%);
        opacity:0;
    }

    20%{
        opacity:.25;
    }

    50%{
        opacity:.55;
    }

    80%{
        opacity:.25;
    }

    100%{
        transform:rotate(16deg) translateX(420%);
        opacity:0;
    }
}

.promo-premium-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.promo-premium-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--pe-primary),var(--pe-danger));
    color:#fff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.3px;
    text-transform:uppercase;
    box-shadow:0 0 18px var(--pe-glow);
}

.promo-premium-title{
    margin:10px 0 6px;
    color:#fff;
    font-size:25px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.8px;
    text-shadow:0 0 18px rgba(255,255,255,.18);
}

.promo-premium-subtitle{
    margin:0;
    color:#c7c3d8;
    font-size:12px;
    line-height:1.55;
}

.promo-premium-button{
    min-width:108px;
    height:38px;
    padding:0 15px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--pe-primary),var(--pe-danger));
    color:#fff;
    font-size:10px;
    font-weight:950;
    text-transform:uppercase;
    box-shadow:
        0 0 18px var(--pe-glow),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition:.25s ease;
}

.promo-premium-button:hover{
    transform:translateY(-2px);
    box-shadow:0 0 24px var(--pe-glow);
}

/* SLIDER */
.promo-premium-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.promo-premium-track{
    display:flex;
    gap:14px;
    transition:transform .6s cubic-bezier(.22,.8,.25,1);
    will-change:transform;
}

/* CARD */
.promo-premium-card{
    flex:0 0 100%;
    min-height:178px;
    display:flex;
    align-items:stretch;
    position:relative;
    border-radius:16px;
    overflow:hidden;
    background:
        radial-gradient(circle at 0% 0%,var(--pe-danger),transparent 32%),
        linear-gradient(135deg,#180022,#09000f 48%,#030004);
    border:1px solid var(--pe-danger);
    box-shadow:
        0 0 22px var(--pe-shadow),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:.35s ease;
}


.promo-premium-card:hover{
    transform:translateY(-3px);
    border-color:#ff5cff;
    box-shadow:
        0 0 30px var(--pe-glow),
        0 16px 34px rgba(0,0,0,.55);
}

.promo-premium-card:hover::after{
    transform:translateX(130%);
}

/* CONTENT LEFT */
.promo-premium-content{
    width:40%;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    z-index:2;
    background:
        linear-gradient(90deg,rgba(40,0,55,.75),rgba(40,0,55,.15),transparent);
}

.promo-premium-content h3{
    margin:0 0 9px;
    color:#fff;
    font-size:27px;
    line-height:.98;
    font-weight:950;
    letter-spacing:-1px;
    text-shadow:0 0 12px rgba(255,255,255,.15);
}

.promo-premium-content p{
    margin:0;
    color:#c9c4d9;
    font-size:12.5px;
    line-height:1.55;
}

/* IMAGE RIGHT */
.promo-premium-image{
    width:60%;
    min-height:178px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 36%),
        linear-gradient(135deg,#792aff,#172254);
}

.promo-premium-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.35) 78%),
        linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);
    z-index:1;
    pointer-events:none;
}

.promo-premium-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s ease;
}

.promo-premium-card:hover .promo-premium-image img{
    transform:scale(1.08);
}

.promo-premium-placeholder{
    width:100%;
    height:100%;
    min-height:178px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:56px;
    filter:drop-shadow(0 0 24px rgba(255,255,255,.28));
    animation:promoGiftFloat 2.7s ease-in-out infinite;
}

@keyframes promoGiftFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.05)}
}

.promo-premium-label{
    position:absolute;
    top:12px;
    left:12px;
    height:28px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg,#ff007a,#ff6b00);
    color:#fff;
    font-size:9px;
    font-weight:950;
    letter-spacing:.3px;
    box-shadow:0 0 16px rgba(255,80,0,.48);
    z-index:3;
}

.promo-premium-floating{
    position:absolute;
    left:12px;
    bottom:12px;
    height:28px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--pe-danger),var(--pe-primary));
    color:#fff;
    font-size:9px;
    font-weight:950;
    letter-spacing:.3px;
    box-shadow:0 0 18px var(--pe-glow);
    animation:promoFloat 2.4s ease-in-out infinite;
    z-index:3;
}

@keyframes promoFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}

.promo-premium-footer{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.promo-premium-tag{
    height:34px;
    padding:0 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg,var(--pe-primary),var(--pe-danger));
    color:#fff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.3px;
    box-shadow:0 0 15px var(--pe-glow);
}

.promo-premium-arrow{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at center,var(--pe-glow),rgba(255,255,255,.05));
    color:#fff;
    font-size:15px;
    font-weight:900;
    transition:.3s ease;
}

.promo-premium-card:hover .promo-premium-arrow{
    transform:translateX(4px);
}

/* TABLET */
@media(max-width:820px){
    .promo-premium-card{
        min-height:165px;
    }

    .promo-premium-content{
        width:42%;
        padding:15px;
    }

    .promo-premium-image{
        width:58%;
        min-height:165px;
    }

    .promo-premium-content h3{
        font-size:22px;
    }

    .promo-premium-content p{
        font-size:12px;
    }

    .promo-premium-placeholder{
        min-height:165px;
        font-size:46px;
    }
}

/* MOBILE */
@media(max-width:520px){
    .promo-premium-section{
        padding:10px;
        border-radius:14px;
    }

    .promo-premium-head{
        margin-bottom:10px;
    }

    .promo-premium-title{
        font-size:20px;
    }

    .promo-premium-subtitle{
        font-size:11px;
    }

    .promo-premium-button{
        min-width:92px;
        height:32px;
        font-size:9px;
    }

    .promo-premium-track{
        gap:10px;
    }

    .promo-premium-card{
        min-height:145px;
        border-radius:12px;
    }

    .promo-premium-content{
        width:45%;
        padding:11px;
    }

    .promo-premium-image{
        width:55%;
        min-height:145px;
    }

    .promo-premium-content h3{
        font-size:18px;
        letter-spacing:-.7px;
    }

    .promo-premium-content p{
        font-size:10px;
        line-height:1.45;
    }

    .promo-premium-placeholder{
        min-height:145px;
        font-size:38px;
    }

    .promo-premium-label{
        top:8px;
        left:8px;
        height:24px;
        padding:0 9px;
        font-size:7px;
    }

    .promo-premium-floating{
        left:8px;
        bottom:8px;
        height:24px;
        padding:0 9px;
        font-size:7px;
    }

    .promo-premium-footer{
        margin-top:10px;
    }

    .promo-premium-tag{
        height:30px;
        padding:0 11px;
        font-size:8px;
    }

    .promo-premium-arrow{
        width:30px;
        height:30px;
        font-size:14px;
    }
}


/* =========================================================
   PAYMENT AND PROVIDERS
========================================================= */
.payment-provider-section{
    margin:20px 0;
    background:
        radial-gradient(circle at top left,var(--pe-glow),transparent 35%),
        radial-gradient(circle at bottom right,rgba(0,200,255,.14),transparent 32%),
        linear-gradient(180deg,#09000f,#030303);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--pe-glow);
    box-shadow:
        0 0 25px var(--pe-shadow),
        inset 0 0 20px rgba(255,255,255,.04);
}

.block-title{
    position:relative;
    padding:10px 14px;
    background:
        linear-gradient(90deg,#7100b8,var(--pe-primary),var(--pe-primary));
    color:#fff;
    font-size:18px;
    font-weight:950;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.3px;
    text-shadow:0 0 12px rgba(255,255,255,.55);
    overflow:hidden;
}

.block-title::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-40%;
    width:35%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg);
    animation:titleShine 4s linear infinite;
}

@keyframes titleShine{
    to{left:120%}
}

/* =========================================================
   PAYMENT GRID PREMIUM
========================================================= */

.payment-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    padding:13px;
}

/* =========================================================
   PAYMENT CARD PREMIUM
========================================================= */

.payment-card{
    position:relative;
    height:72px;
    border-radius:13px;
    overflow:hidden;
    border:1px solid rgba(255,0,255,.48);

    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.11),transparent 45%),
        radial-gradient(circle at 50% 100%,rgba(190,0,255,.22),transparent 55%),
        linear-gradient(180deg,#17001f 0%,#07000b 58%,#020003 100%);

    box-shadow:
        0 0 16px rgba(191,0,255,.32),
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(255,0,255,.18);

    transition:.28s ease;
}

/* shine card */
.payment-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 35%,
            rgba(255,255,255,.18) 48%,
            rgba(255,255,255,.35) 52%,
            rgba(255,255,255,.14) 56%,
            transparent 70%,
            transparent 100%
        );

    transform:translateX(-130%) skewX(-18deg);
    animation:paymentCardShine 5s ease-in-out infinite;
    pointer-events:none;
    z-index:3;
}

.payment-card::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:0;
    height:1px;

    background:linear-gradient(90deg,transparent,#ff7cff,transparent);
    opacity:.75;
    z-index:2;
}

.payment-card:hover{
    transform:translateY(-2px);
    border-color:#ff6dff;

    box-shadow:
        0 0 22px rgba(255,0,255,.55),
        0 9px 18px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.12);
}

@keyframes paymentCardShine{
    0%{
        transform:translateX(-130%) skewX(-18deg);
        opacity:0;
    }
    18%{
        opacity:.75;
    }
    38%{
        transform:translateX(135%) skewX(-18deg);
        opacity:0;
    }
    100%{
        transform:translateX(135%) skewX(-18deg);
        opacity:0;
    }
}

/* =========================================================
   LOGO AREA PREMIUM
========================================================= */

.payment-logo{
    position:relative;
    height:48px;
    padding:5px 8px 2px;

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

    text-align:center;
    overflow:hidden;
    z-index:1;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));
}

.payment-logo::before{
    content:"";
    position:absolute;
    width:70%;
    height:18px;
    border-radius:999px;

    background:rgba(255,0,255,.12);
    filter:blur(10px);
    opacity:.9;
    z-index:-1;
}

/* WRAP */

.payment-logo-wrap{
    width:100%;
    height:100%;

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

/* IMAGE */

.payment-logo img,
.payment-logo-img{
    display:block;

    margin:auto;

    width:auto;
    height:auto;

    max-width:82%;
    max-height:25px;

    object-fit:contain;
    object-position:center center;

    vertical-align:middle;
    image-rendering:auto;

    transition:.28s ease;

    filter:
        brightness(1.16)
        contrast(1.1)
        saturate(1.08)
        drop-shadow(0 0 7px rgba(255,255,255,.15))
        drop-shadow(0 0 10px rgba(204,0,255,.14));
}

.payment-card:hover .payment-logo img,
.payment-card:hover .payment-logo-img{
    transform:scale(1.05);

    filter:
        brightness(1.25)
        contrast(1.16)
        saturate(1.14)
        drop-shadow(0 0 10px rgba(255,255,255,.22))
        drop-shadow(0 0 14px rgba(255,0,255,.24));
}

/* TEXT FALLBACK */

.payment-logo-text{
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-align:center;
    line-height:1.1;

    text-shadow:
        0 0 8px rgba(255,255,255,.22),
        0 0 12px rgba(255,0,255,.22);
}

/* =========================================================
   STATUS PREMIUM
========================================================= */

.payment-status{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    color:#fff;
    font-size:10px;
    font-weight:950;

    letter-spacing:.25px;
    text-transform:capitalize;

    border-top:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    z-index:4;
}

/* shine status */

.payment-status::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 38%,
            rgba(255,255,255,.22) 50%,
            transparent 63%,
            transparent 100%
        );

    transform:translateX(-120%);
    animation:paymentStatusShine 3.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes paymentStatusShine{
    0%{
        transform:translateX(-120%);
        opacity:0;
    }
    22%{
        opacity:.7;
    }
    48%{
        transform:translateX(120%);
        opacity:0;
    }
    100%{
        transform:translateX(120%);
        opacity:0;
    }
}

/* ONLINE */

.payment-status.online{
    background:
        linear-gradient(180deg,#d800ff 0%,#b400ff 48%,#8500d2 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -6px 14px rgba(80,0,120,.28);
}

/* OFFLINE */

.payment-status.offline{
    background:
        linear-gradient(180deg,#5f006e 0%,#41004b 48%,#26002f 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -6px 14px rgba(0,0,0,.28);
}

/* DOT */

.payment-status span{
    position:relative;
    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
    z-index:2;
}

/* ONLINE DOT */

.payment-status.online span{
    background:#68ff00;

    box-shadow:
        0 0 6px #68ff00,
        0 0 12px rgba(104,255,0,.9),
        0 0 20px rgba(104,255,0,.5);

    animation:paymentOnlineBreath 1.35s ease-in-out infinite;
}

.payment-status.online span::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid rgba(104,255,0,.55);
    animation:paymentOnlineRing 1.35s ease-out infinite;
}

/* OFFLINE DOT */

.payment-status.offline span{
    background:#ff3434;

    box-shadow:
        0 0 6px #ff3434,
        0 0 12px rgba(255,52,52,.85);

    animation:paymentOfflineSoftBlink 1.55s ease-in-out infinite;
}

.payment-status.offline span::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(255,52,52,.16);
    animation:paymentOfflineHalo 1.55s ease-in-out infinite;
}

/* =========================================================
   ANIMATION ONLINE / OFFLINE
========================================================= */

@keyframes paymentOnlineBreath{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.22);
        opacity:.88;
    }
}

@keyframes paymentOnlineRing{
    0%{
        transform:scale(.45);
        opacity:.9;
    }
    100%{
        transform:scale(1.9);
        opacity:0;
    }
}

@keyframes paymentOfflineSoftBlink{
    0%,100%{
        transform:scale(.95);
        opacity:.55;
    }
    45%{
        transform:scale(1.12);
        opacity:1;
    }
}

@keyframes paymentOfflineHalo{
    0%,100%{
        transform:scale(.8);
        opacity:.15;
    }
    50%{
        transform:scale(1.45);
        opacity:.4;
    }
}

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

@media(max-width:820px){

    .payment-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:8px;
        padding:9px;
    }

}

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

@media(max-width:520px){

    .payment-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        padding:8px !important;
    }

    .payment-card{
        height:74px !important;
        min-height:74px !important;
        border-radius:12px !important;
    }

    .payment-logo{
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        padding:6px 8px 1px !important;
    }

    .payment-logo img,
    .payment-logo-img{
        max-width:90% !important;
        max-height:31px !important;
        transform:none !important;
    }

    .payment-status{
        height:22px !important;
        min-height:22px !important;
        font-size:8px !important;
        gap:5px !important;
    }

    .payment-status span{
        width:6px !important;
        height:6px !important;
    }

}

/* =========================================
   E-WALLET GRID PREMIUM
========================================= */

.ewallet-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:9px;
}

/* =========================================
   WALLET CARD PREMIUM
========================================= */

.wallet-card{
    position:relative;
    height:74px;
    min-height:74px;
    border-radius:12px;
    overflow:hidden;
    display:block;

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

    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 42%),
        radial-gradient(circle at 50% 100%,rgba(190,0,255,.25),transparent 55%),
        linear-gradient(180deg,#17001f 0%,#07000b 58%,#020003 100%);

    box-shadow:
        0 0 16px rgba(191,0,255,.28),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,0,255,.18);

    transition:.28s ease;
}

/* garis glow atas */
.wallet-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 35%,
            rgba(255,255,255,.18) 48%,
            rgba(255,255,255,.35) 52%,
            rgba(255,255,255,.14) 56%,
            transparent 70%,
            transparent 100%
        );
    transform:translateX(-130%) skewX(-18deg);
    animation:walletCardShine 5s ease-in-out infinite;
    pointer-events:none;
    z-index:3;
}

.wallet-card::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,#ff7cff,transparent);
    opacity:.75;
    z-index:2;
}

.wallet-card:hover{
    transform:translateY(-2px);
    border-color:#ff6dff;
    box-shadow:
        0 0 22px rgba(255,0,255,.55),
        0 9px 18px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.12);
}

@keyframes walletCardShine{
    0%{
        transform:translateX(-130%) skewX(-18deg);
        opacity:0;
    }
    18%{
        opacity:.75;
    }
    38%{
        transform:translateX(135%) skewX(-18deg);
        opacity:0;
    }
    100%{
        transform:translateX(135%) skewX(-18deg);
        opacity:0;
    }
}

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

.wallet-logo{
    position:relative;
    height:52px;
    min-height:52px;
    max-height:52px;

    padding:6px 8px 1px;

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

    overflow:hidden;
    z-index:1;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));
}

.wallet-logo::before{
    content:"";
    position:absolute;
    width:70%;
    height:18px;
    border-radius:999px;
    background:rgba(255,0,255,.12);
    filter:blur(10px);
    opacity:.9;
    z-index:-1;
}

/* IMAGE */

.wallet-logo-img{
    display:block;

    width:auto;
    height:auto;

    max-width:90%;
    max-height:31px;

    margin:auto;

    object-fit:contain;
    object-position:center center;

    image-rendering:auto;
    vertical-align:middle;

    transition:.28s ease;

    filter:
        brightness(1.18)
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 0 7px rgba(255,255,255,.16))
        drop-shadow(0 0 10px rgba(204,0,255,.15));
}

.wallet-card:hover .wallet-logo-img{
    transform:scale(1.05);
    filter:
        brightness(1.28)
        contrast(1.18)
        saturate(1.15)
        drop-shadow(0 0 10px rgba(255,255,255,.22))
        drop-shadow(0 0 14px rgba(255,0,255,.24));
}

/* TEXT FALLBACK */

.wallet-logo span{
    color:#fff;
    font-size:10px;
    font-weight:900;
    text-align:center;
    line-height:1.1;
    text-shadow:
        0 0 8px rgba(255,255,255,.22),
        0 0 12px rgba(255,0,255,.22);
}

/* =========================================
   STATUS PREMIUM
========================================= */

.wallet-status{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:22px;
    min-height:22px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    color:#fff;
    font-size:8px;
    font-weight:950;
    line-height:1;

    letter-spacing:.25px;
    text-transform:capitalize;

    border-top:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    z-index:4;
}

.wallet-status::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 38%,
            rgba(255,255,255,.22) 50%,
            transparent 63%,
            transparent 100%
        );
    transform:translateX(-120%);
    animation:walletStatusShine 3.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes walletStatusShine{
    0%{
        transform:translateX(-120%);
        opacity:0;
    }
    22%{
        opacity:.7;
    }
    48%{
        transform:translateX(120%);
        opacity:0;
    }
    100%{
        transform:translateX(120%);
        opacity:0;
    }
}

.wallet-status.online{
    background:
        linear-gradient(180deg,#d800ff 0%,#b400ff 48%,#8500d2 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -6px 14px rgba(80,0,120,.28);
}

.wallet-status.offline{
    background:
        linear-gradient(180deg,#5f006e 0%,#41004b 48%,#26002f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -6px 14px rgba(0,0,0,.28);
}

/* DOT */

.wallet-status .dot{
    position:relative;
    width:6px;
    height:6px;
    border-radius:50%;
    flex-shrink:0;
    z-index:2;
}

.wallet-status.online .dot{
    background:#68ff00;
    box-shadow:
        0 0 6px #68ff00,
        0 0 12px rgba(104,255,0,.9),
        0 0 20px rgba(104,255,0,.5);
    animation:walletOnlineBreath 1.35s ease-in-out infinite;
}

.wallet-status.online .dot::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid rgba(104,255,0,.55);
    animation:walletOnlineRing 1.35s ease-out infinite;
}

.wallet-status.offline .dot{
    background:#ff3434;
    box-shadow:
        0 0 6px #ff3434,
        0 0 12px rgba(255,52,52,.85);
    animation:walletOfflineSoftBlink 1.55s ease-in-out infinite;
}

.wallet-status.offline .dot::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(255,52,52,.16);
    animation:walletOfflineHalo 1.55s ease-in-out infinite;
}

/* =========================================
   ANIMATION ONLINE / OFFLINE
========================================= */

@keyframes walletOnlineBreath{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.22);
        opacity:.88;
    }
}

@keyframes walletOnlineRing{
    0%{
        transform:scale(.45);
        opacity:.9;
    }
    100%{
        transform:scale(1.9);
        opacity:0;
    }
}

@keyframes walletOfflineSoftBlink{
    0%,100%{
        transform:scale(.95);
        opacity:.55;
    }
    45%{
        transform:scale(1.12);
        opacity:1;
    }
}

@keyframes walletOfflineHalo{
    0%,100%{
        transform:scale(.8);
        opacity:.15;
    }
    50%{
        transform:scale(1.45);
        opacity:.4;
    }
}

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

@media(max-width:820px){
    .ewallet-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        padding:9px;
    }
}

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

@media(max-width:520px){

    .ewallet-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        padding:8px !important;
    }

    .wallet-card{
        height:74px !important;
        min-height:74px !important;
        border-radius:12px !important;
        display:block !important;
    }

    .wallet-logo{
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        padding:6px 8px 1px !important;
    }

    .wallet-logo-img{
        max-width:90% !important;
        max-height:31px !important;
        transform:none !important;
    }

    .wallet-status{
        height:22px !important;
        min-height:22px !important;
        font-size:8px !important;
        gap:5px !important;
    }

    .wallet-status .dot{
        width:6px !important;
        height:6px !important;
    }

}

/* =========================================
   PROVIDER PREMIUM ULTRA
========================================= */

.provider-title{
    margin-top:10px;
}

/* WRAP */
.provider-service-wrap{
    padding:14px;
    position:relative;
}

/* ROW */
.provider-row-service{
    display:grid;
    grid-template-columns:68px 1fr;
    gap:12px;
    margin-bottom:12px;
    align-items:start;
}

/* CATEGORY */
.provider-category{
    min-height:52px;

    display:flex;
    align-items:center;

    color:#fff;
    font-size:11px;
    font-weight:1000;
    line-height:1.1;

    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(255,255,255,.25),
        0 0 18px rgba(208,0,255,.35);
}

/* GRID */
.provider-logo-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
}

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

.provider-logo-card{
    position:relative;

    height:52px;
    min-height:52px;

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

    overflow:hidden;

    border-radius:14px;

    border:1px solid rgba(217,0,255,.55);

    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 48%),
        radial-gradient(circle at 50% 100%,rgba(195,0,255,.18),transparent 65%),
        linear-gradient(180deg,#17001f 0%,#08000d 58%,#020003 100%);

    box-shadow:
        0 0 14px rgba(179,0,255,.22),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,0,255,.14);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

/* SHINE */
.provider-logo-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 36%,
            rgba(255,255,255,.10) 45%,
            rgba(255,255,255,.28) 50%,
            rgba(255,255,255,.10) 55%,
            transparent 70%,
            transparent 100%
        );

    transform:translateX(-140%) skewX(-18deg);

    animation:providerShine 5.8s ease-in-out infinite;

    pointer-events:none;
    z-index:2;
}

/* GLOW TOP */
.provider-logo-card::after{
    content:"";

    position:absolute;
    left:10%;
    right:10%;
    top:0;

    height:1px;

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

    opacity:.75;
}

/* HOVER */
.provider-logo-card:hover,
.provider-logo-card:focus,
.provider-logo-card:active{
    transform:translateY(-3px);

    border-color:#ff6cff;

    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.15),transparent 45%),
        radial-gradient(circle at 50% 100%,rgba(255,0,255,.22),transparent 70%),
        linear-gradient(180deg,#1f0029 0%,#0a0011 58%,#030004 100%);

    box-shadow:
        0 0 22px rgba(230,0,255,.45),
        0 10px 20px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.12);
}

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

.provider-logo-card img{
    position:relative;
    z-index:3;

    display:block;

    width:auto;
    height:auto;

    max-width:86%;
    max-height:31px;

    object-fit:contain;

    filter:
        grayscale(1)
        brightness(.68)
        contrast(1.15);

    opacity:.86;

    transition:
        filter .28s ease,
        transform .28s ease,
        opacity .28s ease;
}

/* HOVER LOGO */
.provider-logo-card:hover img,
.provider-logo-card:focus img,
.provider-logo-card:active img{
    filter:
        grayscale(0)
        brightness(1.12)
        contrast(1.06)
        saturate(1.08)
        drop-shadow(0 0 7px rgba(255,255,255,.15))
        drop-shadow(0 0 10px rgba(210,0,255,.18));

    opacity:1;

    transform:scale(1.05);
}

/* TEXT */
.provider-logo-card span{
    position:relative;
    z-index:3;

    color:#a7a7a7;

    font-size:10px;
    font-weight:950;
    line-height:1.1;

    text-align:center;

    filter:grayscale(1);

    transition:.28s ease;
}

.provider-logo-card:hover span{
    color:#fff;

    filter:none;

    text-shadow:
        0 0 8px rgba(255,255,255,.18),
        0 0 12px rgba(255,0,255,.18);
}

/* =========================================
   SHINE ANIMATION
========================================= */

@keyframes providerShine{
    0%{
        transform:translateX(-140%) skewX(-18deg);
        opacity:0;
    }

    18%{
        opacity:.7;
    }

    36%{
        transform:translateX(140%) skewX(-18deg);
        opacity:0;
    }

    100%{
        transform:translateX(140%) skewX(-18deg);
        opacity:0;
    }
}

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

@media(max-width:820px){

    .provider-logo-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:8px;
    }
}

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

@media(max-width:520px){

    .provider-service-wrap{
        padding:8px;
    }

    .provider-row-service{
        grid-template-columns:48px 1fr;
        gap:8px;
        margin-bottom:10px;
    }

    .provider-category{
        min-height:42px;
        font-size:8px;
    }

    .provider-logo-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }

    .provider-logo-card{
        height:42px;
        min-height:42px;
        border-radius:11px;
    }

    .provider-logo-card img{
        max-width:82%;
        max-height:24px;
    }

    .provider-logo-card span{
        font-size:8px;
    }
}

/* =========================================================
   FOOTER ARTICLE DAN FAQ
========================================================= */

.footer-article-section{
    margin:22px 0 0;
    padding:26px 30px;
    background:#111;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-article-section h2{
    margin:0 0 18px;
    font-size:25px;
    line-height:1.25;
    font-weight:800;
}

.footer-article-section p{
    margin:0 0 14px;
    color:#f1f1f1;
    font-size:12px;
    line-height:1.55;
    font-weight:700;
}

.footer-article-section ul{
    margin:10px 0 12px 18px;
    padding:0;
}

.footer-article-section li{
    font-size:12px;
    font-weight:900;
    color:#fff;
}

/* FAQ PREMIUM */
.faq-premium-section{
    margin:22px 0;
    padding:22px 16px 14px;
    border-radius:16px;
    background:
        radial-gradient(circle at top left,var(--pe-glow),transparent 32%),
        radial-gradient(circle at bottom right,rgba(255,170,0,.08),transparent 34%),
        linear-gradient(180deg,#1a0025,#050005);
    border:1px solid #b000ff;
    box-shadow:
        0 0 25px var(--pe-shadow),
        inset 0 0 22px rgba(255,255,255,.03);
}

.faq-premium-section h2{
    margin:0 0 18px;
    text-align:center;
    color:#d8c8ff;
    font-size:14px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.faq-list{
    display:grid;
    gap:10px;
}

.faq-item{
    border-radius:10px;
    overflow:hidden;
    background:#060006;
    border:1px solid var(--pe-glow);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.faq-item summary{
    min-height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    cursor:pointer;
    color:#fff;
    font-size:14px;
    font-weight:950;
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    margin-left:auto;
    color:var(--pe-primary);
    font-size:20px;
    font-weight:950;
}

.faq-item[open] summary::after{
    content:"−";
}

.faq-item p{
    margin:0;
    padding:0 14px 14px;
    color:#cfc7dd;
    font-size:12px;
    line-height:1.65;
}

@media(max-width:520px){
    .footer-article-section{
        padding:20px 14px;
    }

    .footer-article-section h2{
        font-size:20px;
    }

    .faq-premium-section{
        padding:16px 10px 10px;
    }

    .faq-item summary{
        font-size:12px;
    }
}

/* =========================================================
   FOOTER COPYRIGHT AND TRADEMARK
========================================================= */
.footer-copyright-section{
    margin-top:0;
    padding:16px 12px 22px;

    background:
        linear-gradient(
            180deg,
            #080008,
            #000
        );

    border-top:1px solid var(--pe-shadow);

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

    position:relative;
    overflow:hidden;
}

.footer-copyright-section::before{
    content:"";
    position:absolute;
    inset:-60%;

    background:
        radial-gradient(
            circle,
            var(--pe-shadow),
            transparent 40%
        );

    filter:blur(35px);

    animation:footerGlow 8s ease-in-out infinite;

    pointer-events:none;
}

@keyframes footerGlow{

    0%,100%{
        transform:translateX(-10%);
        opacity:.3;
    }

    50%{
        transform:translateX(10%);
        opacity:.6;
    }
}

.footer-powered{
    position:relative;
    z-index:2;

    color:#8f8f8f;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
    text-transform:uppercase;
}

.footer-powered span{
    color:var(--pe-primary);

    font-weight:950;

    text-shadow:
        0 0 10px rgba(216,0,255,.55);
}

.footer-trademark{
    position:relative;
    z-index:2;

    color:#787878;

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

    letter-spacing:.8px;

    text-transform:uppercase;
}

.footer-copy{
    position:relative;
    z-index:2;

    color:#9c9c9c;

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

    letter-spacing:.4px;
    text-transform:uppercase;

    text-shadow:
        0 0 8px rgba(255,255,255,.08);
}

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

    .footer-copyright-section{
        padding:14px 10px 18px;
        gap:5px;
    }

    .footer-copy{
        font-size:10px;
        text-align:center;
    }
}


/* =========================================================
   MOBILE LOGIN PREMIUM STYLE
========================================================= */
.mobile-login-card{
    display:none;
}

@media(max-width:520px){

    .top-login-bar{
        display:none !important;
    }

    .home-promo-wrap{
        display:grid;
        grid-template-columns:1fr;
        gap:0;
        margin:0;
    }

    .home-promo-main{
        height:185px;
        order:1;
    }

    .home-promo-side{
        display:none !important;
    }

    .mobile-login-card{
        display:block;
        order:3;
        margin:12px 10px 18px;
        border-radius:18px;
        overflow:hidden;
        position:relative;
        background:
            radial-gradient(circle at top left,rgba(216,0,255,.28),transparent 32%),
            radial-gradient(circle at bottom right,rgba(0,200,255,.12),transparent 35%),
            linear-gradient(180deg,#180022,#070009);
        border:1px solid rgba(216,0,255,.45);
        box-shadow:
            0 0 28px var(--pe-shadow),
            0 12px 32px rgba(0,0,0,.55),
            inset 0 1px 0 rgba(255,255,255,.12);
    }

    .mobile-login-card::before{
        content:"";
        position:absolute;
        inset:-60%;
        background:radial-gradient(circle,rgba(255,255,255,.12),transparent 40%);
        filter:blur(34px);
        animation:mobileLoginGlow 7s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes mobileLoginGlow{
        0%,100%{transform:translateX(-12%);opacity:.28}
        50%{transform:translateX(12%);opacity:.58}
    }

    .mobile-login-title{
        height:42px;
        padding:0 16px;
        display:flex;
        align-items:center;
        position:relative;
        z-index:2;
        background:linear-gradient(90deg,var(--pe-primary),var(--pe-primary),var(--pe-danger));
        color:#fff;
        font-size:20px;
        font-weight:950;
        text-transform:uppercase;
        text-shadow:0 0 14px rgba(255,255,255,.55);
        box-shadow:
            0 0 18px rgba(216,0,255,.35),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .mobile-login-body{
        position:relative;
        z-index:2;
        padding:15px 14px 18px;
    }

    .mobile-field-label{
        display:block;
        margin:0 0 7px;
        color:#fff;
        font-size:12px;
        font-weight:950;
        text-transform:uppercase;
        letter-spacing:.4px;
    }

    .mobile-input{
        height:39px;
        margin-bottom:13px;
        border-radius:999px;
        background:
            radial-gradient(circle at top,rgba(255,255,255,.08),transparent 60%),
            #050005;
        border:1px solid rgba(216,0,255,.35);
        display:flex;
        align-items:center;
        padding:0 13px;
        color:#fff;
        box-shadow:
            inset 0 0 14px rgba(216,0,255,.18),
            0 0 12px rgba(0,0,0,.35);
    }

    .mobile-input:focus-within{
        border-color:#ff4dff;
        box-shadow:
            0 0 16px rgba(216,0,255,.45),
            inset 0 0 14px rgba(216,0,255,.22);
    }

    .mobile-input input{
        width:100%;
        border:0;
        outline:0;
        background:transparent;
        color:#fff;
        font-size:12px;
        font-weight:850;
    }

    .mobile-input input::placeholder{
        color:#cfc3d8;
    }

    .mobile-icon{
        margin-right:8px;
        color:var(--pe-primary);
        font-size:17px;
        filter:drop-shadow(0 0 8px rgba(216,0,255,.65));
    }

    .mobile-eye{
        margin-left:8px;
        color:#fff;
        opacity:.9;
    }

    .mobile-forgot{
        display:block;
        margin:-6px 0 11px;
        color:#ff4f86;
        font-size:11px;
        font-weight:950;
    }

    .mobile-captcha-row{
        display:grid;
        grid-template-columns:92px 1fr;
        margin-bottom:15px;
    }

    .mobile-captcha-code{
        height:39px;
        border-radius:999px 0 0 999px;
        background:linear-gradient(180deg,#fff06a,#ffb300);
        color:#000000;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        font-weight:1000;
        text-shadow:0 2px 8px rgba(0,0,0,.22);
        box-shadow:inset 0 2px 0 rgba(255,255,255,.48);
    }

    .mobile-captcha-input{
        height:39px;
        border-radius:0 999px 999px 0;
        background:#050005;
        border:1px solid rgba(216,0,255,.35);
        border-left:0;
        display:flex;
        align-items:center;
        padding:0 11px;
        box-shadow:inset 0 0 14px rgba(216,0,255,.18);
    }

    .mobile-captcha-input input{
        width:100%;
        border:0;
        outline:0;
        background:transparent;
        color:#fff;
        font-size:12px;
        font-weight:850;
    }

    .mobile-login-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
        padding:0 4px;
    }

    .mobile-btn-login,
    .mobile-btn-register{
        height:39px;
        border:0;
        border-radius:999px;
        color:#111;
        font-size:12px;
        font-weight:950;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:.25s ease;
    }

    .mobile-btn-login{
        background:linear-gradient(180deg,#fff06a,#ffb300);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,.55),
            0 8px 18px rgba(255,179,0,.22);
    }

    .mobile-btn-register{
        background:linear-gradient(180deg,#71ff74,#0fd638);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,.45),
            0 8px 18px rgba(15,214,56,.22);
    }

    .mobile-btn-login:hover,
    .mobile-btn-register:hover{
        transform:translateY(-2px);
    }
}

.mobile-alert{
    position:relative;
    z-index:2;
    margin:10px 12px 0;
    padding:10px 12px;
    border-radius:10px;
    font-size:11px;
    font-weight:850;
    color:#fff;
}

.mobile-alert.error{
    background:linear-gradient(90deg,#78001f,#d80043);
}

.mobile-alert.success{
    background:linear-gradient(90deg,#006d2f,#00c95a);
}

/* =========================================================
   MEMBER CARD MOBILE PURPLE LUXURY
========================================================= */

.member-balance-card{
    position:relative;
    margin:12px 10px 16px;
    padding:18px 15px 16px;
    border-radius:22px;
    overflow:hidden;

    background:
        radial-gradient(circle at top left,
        rgba(255,255,255,.18),
        transparent 26%),

        radial-gradient(circle at bottom right,
        rgba(255,0,255,.18),
        transparent 32%),

        linear-gradient(
            135deg,
            #23003d 0%,
            #4b0082 32%,
            var(--pe-primary) 68%,
            var(--pe-primary-2) 100%
        );

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

    box-shadow:
        0 14px 34px var(--pe-glow),
        0 0 26px var(--pe-glow),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.25);
}

/* =========================================================
   SMOOTH SHINE
========================================================= */

.member-balance-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.05) 35%,
            rgba(255,255,255,.18) 50%,
            rgba(255,255,255,.05) 65%,
            transparent 100%
        );

    transform:translateX(-160%);
    animation:memberCardShine 6.5s ease-in-out infinite;

    pointer-events:none;
}

@keyframes memberCardShine{

    0%{
        transform:translateX(-160%);
        opacity:0;
    }

    25%{
        opacity:.25;
    }

    50%{
        opacity:.55;
    }

    75%{
        opacity:.2;
    }

    100%{
        transform:translateX(160%);
        opacity:0;
    }
}

/* =========================================================
   GLOW
========================================================= */

.member-balance-glow{
    position:absolute;
    inset:-50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.14),
        transparent 42%);

    filter:blur(35px);

    animation:memberGlow 8s ease-in-out infinite;

    pointer-events:none;
}

@keyframes memberGlow{

    0%,100%{
        transform:translateX(-15%);
        opacity:.25;
    }

    50%{
        transform:translateX(15%);
        opacity:.7;
    }
}

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

.member-greeting{
    position:relative;
    z-index:2;

    color:#fff;

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

    text-align:center;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35);
}

.member-greeting span{
    color:#ffd6ff;
}

.member-balance-wrap{
    position:relative;
    z-index:2;

    margin-top:9px;

    text-align:center;
}

.member-balance-label{
    color:rgba(255,255,255,.82);

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

    letter-spacing:1.5px;
}

.member-balance{
    margin-top:4px;

    color:#fff;

    font-size:34px;
    font-weight:1000;

    line-height:1;

    text-shadow:
        0 0 16px rgba(255,255,255,.35),
        0 0 24px rgba(212,0,255,.45),
        0 3px 12px rgba(0,0,0,.22);
}

/* =========================================================
   BUTTONS
========================================================= */

.member-balance-actions{
    position:relative;
    z-index:2;

    margin-top:16px;

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

    gap:10px;
}

.member-btn{
    height:40px;

    border-radius:999px;

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

    text-decoration:none;

    font-size:12px;
    font-weight:950;

    transition:.28s ease;
}

/* DEPOSIT */

.member-btn.deposit{
    background:
        linear-gradient(
            180deg,
            #ff4dff,
            #b700ff
        );

    color:#fff;

    box-shadow:
        0 8px 18px rgba(183,0,255,.35),
        inset 0 1px 0 rgba(255,255,255,.25);
}

/* WITHDRAW */

.member-btn.withdraw{
    background:
        linear-gradient(
            180deg,
            #1f0033,
            #09000f
        );

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

    color:#fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(0,0,0,.22);
}

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

/* =========================================================
   MOBILE HIDE SIDE BANNER
========================================================= */
@media(max-width:520px){

    .home-promo-side{
        display:none !important;
    }

    .home-promo-wrap{
        grid-template-columns:1fr !important;
    }

    .home-promo-main{
        height:185px;
        margin-bottom:10px;
    }
}

/* DESKTOP */
.mobile-menu-bar{
    display:none;
}

/* =========================================================
   MOBILE MENU ICON
========================================================= */
@media(max-width:520px){

    .main-menu-bar .nav-links{
        display:none !important;
    }

    .main-menu-bar{
        display:block !important;
        min-height:auto !important;
        overflow:visible !important;
    }

    .center-logo{
        display:flex !important;
        width:100%;
    }

    .mobile-menu-bar{
        display:block;
        position:relative;
        z-index:9999;
        overflow:visible;
        background:
            radial-gradient(circle at 10% 0%,rgba(255,255,255,.16),transparent 28%),
            radial-gradient(circle at 90% 100%,rgba(0,210,255,.16),transparent 32%),
            linear-gradient(135deg,#25003d,#6c00c9,var(--pe-primary));
        border-top:1px solid rgba(255,255,255,.18);
        border-bottom:1px solid rgba(216,0,255,.55);
        box-shadow:
            0 0 22px var(--pe-shadow),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .mobile-menu-bar::before{
        content:"";
        position:absolute;
        top:-60%;
        left:-35%;
        width:45%;
        height:220%;
        background:linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
        filter:blur(18px);
        transform:rotate(18deg);
        animation:mobileMenuShine 7s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes mobileMenuShine{
        0%{left:-45%;opacity:0}
        30%{opacity:.35}
        60%{opacity:.55}
        100%{left:120%;opacity:0}
    }

    .mobile-menu-scroll{
        position:relative;
        z-index:2;
        display:flex;
        justify-content:space-between;
        gap:8px;
        overflow-x:auto;
		scroll-behavior:smooth;
        overflow-y:visible;
        scrollbar-width:none;
        padding:9px 8px 7px;
    }

    .mobile-menu-scroll::-webkit-scrollbar{
        display:none;
    }

    .mobile-menu-item{
        position:relative;
        flex:1 0 auto;
        min-width:72px;
        text-align:center;
        animation:mobileMenuFloat 4.5s ease-in-out infinite;
    }

    .mobile-menu-item:nth-child(1){animation-delay:0s}
    .mobile-menu-item:nth-child(2){animation-delay:.45s}
    .mobile-menu-item:nth-child(3){animation-delay:.9s}
    .mobile-menu-item:nth-child(4){animation-delay:1.35s}
    .mobile-menu-item:nth-child(5){animation-delay:1.8s}
    .mobile-menu-item:nth-child(6){animation-delay:2.25s}
    .mobile-menu-item:nth-child(7){animation-delay:2.7s}

    @keyframes mobileMenuFloat{
        0%,100%{
            transform:translateY(0);
        }
        50%{
            transform:translateY(-3px);
        }
    }

    .mobile-menu-link{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:10px;
        font-weight:950;
        text-transform:uppercase;
        gap:5px;
        text-shadow:0 0 10px rgba(255,255,255,.28);
    }

    .mobile-menu-icon{
        width:34px;
        height:34px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:
            radial-gradient(circle at top,rgba(255,255,255,.25),transparent 55%),
            linear-gradient(180deg,var(--pe-primary),#260044);
        border:1px solid rgba(255,255,255,.18);
        box-shadow:
            0 0 16px rgba(216,0,255,.45),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .mobile-menu-icon img{
        width:26px;
        height:26px;
        object-fit:contain;
        display:block;
        filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
    }

    .mobile-menu-link span{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
        display:block;
        font-size:10px;
    }

    .mobile-submenu{
        position:absolute;
        top:62px;
        left:50%;
        transform:translateX(-50%) translateY(8px);
        min-width:150px;
        padding:8px;
        border-radius:12px;
        background:
            radial-gradient(circle at top,rgba(216,0,255,.18),transparent 45%),
            linear-gradient(180deg,#260038,#070007);
        border:1px solid rgba(216,0,255,.65);
        box-shadow:
            0 14px 38px rgba(0,0,0,.7),
            0 0 22px rgba(216,0,255,.35);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.22s ease;
        z-index:99999;
    }

    .mobile-menu-item:hover .mobile-submenu,
    .mobile-menu-item:focus-within .mobile-submenu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateX(-50%) translateY(0);
    }

    .mobile-submenu a{
        height:34px;
        display:flex;
        align-items:center;
        gap:7px;
        padding:0 10px;
        border-radius:9px;
        color:#fff;
        font-size:10px;
        font-weight:900;
        background:rgba(255,255,255,.06);
        margin-bottom:5px;
        transition:.2s ease;
    }

    .mobile-submenu a:hover{
        background:linear-gradient(90deg,#8b00ff,var(--pe-danger));
    }

    .mobile-submenu a:last-child{
        margin-bottom:0;
    }

    .mobile-submenu a img{
        width:18px;
        height:18px;
        object-fit:contain;
    }
}

/* =========================================================
   MOBILE SIDEBAR ULTRA PREMIUM
========================================================= */

@media(max-width:520px){

    body.sidebar-open{
        overflow:hidden;
    }

    .mobile-sidebar-toggle{
        position:absolute;
        top:8px;
        right:10px;
        z-index:10000;
        width:38px;
        height:36px;
        border:1px solid rgba(255,255,255,.18);
        border-radius:10px;
        background:
            radial-gradient(circle at top,rgba(255,255,255,.20),transparent 55%),
            linear-gradient(135deg,#8b00ff,var(--pe-primary));
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        box-shadow:
            0 0 18px rgba(216,0,255,.45),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .mobile-sidebar-toggle span{
        width:20px;
        height:2px;
        border-radius:999px;
        background:#fff;
        box-shadow:0 0 8px rgba(255,255,255,.55);
    }

    .mobile-sidebar-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.68);
        backdrop-filter:blur(4px);
        z-index:99998;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.28s ease;
    }

    .mobile-sidebar-overlay.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .mobile-sidebar{
        position:fixed;
        top:0;
        right:0;
        width:330px;
        max-width:88%;
        height:100vh;
        z-index:99999;
        overflow-y:auto;
        overflow-x:hidden;
        transform:translate3d(110%,0,0);
        transition:transform .34s cubic-bezier(.22,.61,.36,1);
        background:
            radial-gradient(circle at top right,rgba(216,0,255,.22),transparent 32%),
            radial-gradient(circle at bottom left,rgba(0,210,255,.12),transparent 34%),
            linear-gradient(180deg,#160020,#070007 45%,#030003);
        color:#fff;
        box-shadow:
            -20px 0 45px rgba(0,0,0,.65),
            inset 1px 0 0 rgba(255,255,255,.08);
        padding-bottom:34px;
        will-change:transform;
    }

    .mobile-sidebar.active{
        transform:translate3d(0,0,0);
    }

    .mobile-sidebar::before{
        content:"";
        position:absolute;
        inset:-55%;
        background:radial-gradient(circle,rgba(255,255,255,.12),transparent 40%);
        filter:blur(38px);
        animation:sidebarSoftGlow 8s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes sidebarSoftGlow{
        0%,100%{transform:translateX(-10%);opacity:.25}
        50%{transform:translateX(10%);opacity:.55}
    }

    .mobile-sidebar-close{
        position:fixed;
        top:12px;
        right:12px;
        width:34px;
        height:34px;
        border:0;
        border-radius:50%;
        background:linear-gradient(180deg,#fff,#dcdcdc);
        color:#2b2b2b;
        font-size:30px;
        line-height:30px;
        z-index:100001;
        box-shadow:
            0 4px 14px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.85);
    }

    .sidebar-guest-head,
    .sidebar-member-box{
        position:relative;
        z-index:2;
        padding:56px 14px 16px;
        text-align:center;
        background:
            radial-gradient(circle at top left,rgba(255,255,255,.12),transparent 35%),
            linear-gradient(180deg,#17001f,#09000d);
        border-bottom:1px solid rgba(216,0,255,.35);
        box-shadow:0 8px 20px rgba(0,0,0,.35);
    }

    .sidebar-welcome{
        font-size:15px;
        font-weight:950;
        text-align:left;
        margin-bottom:18px;
        color:#fff;
    }

    .sidebar-subtitle{
        font-size:13px;
        font-weight:800;
        color:#d9c8e8;
        margin-bottom:14px;
    }

    .sidebar-guest-actions,
    .sidebar-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
        padding-right:42px;
    }

    .sidebar-login,
    .sidebar-register,
    .sidebar-deposit,
    .sidebar-withdraw{
        height:36px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:13px;
        font-weight:950;
        text-transform:uppercase;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
    }

    .sidebar-login{
        background:linear-gradient(180deg,#ff473d,#e11212);
        color:#fff;
    }

    .sidebar-register{
        background:linear-gradient(180deg,#fff35d,#ffc400);
        color:#111;
    }

    .sidebar-deposit{
        background:linear-gradient(180deg,#36ff5a,#08b82c);
        color:#031006;
        border:1px solid rgba(95,255,125,.7);
    }

    .sidebar-withdraw{
        background:linear-gradient(180deg,#2a0014,#080006);
        color:#ff4d7d;
        border:1px solid rgba(255,55,105,.75);
    }

    .sidebar-user{
        margin:10px 0;
        font-size:14px;
        font-weight:950;
        color:#fff;
    }

    .sidebar-balance{
        height:38px;
        display:grid;
        grid-template-columns:42px 1fr 38px;
        align-items:center;
        background:
            radial-gradient(circle at top,rgba(255,255,255,.18),transparent 55%),
            linear-gradient(180deg,#fff,#d7d7d7);
        color:#333;
        border-radius:10px;
        font-size:18px;
        overflow:hidden;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.85),
            0 6px 16px rgba(0,0,0,.35);
    }

	.sidebar-balance strong{
		letter-spacing:1px;
	}

	.sidebar-balance.is-loading{
		opacity:.75;
		box-shadow:
			0 0 0 1px rgba(0,255,180,.35),
			0 0 18px rgba(0,255,180,.28);
	}

	.sidebar-balance em{
		cursor:pointer;
		font-style:normal;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		transition:.25s ease;
	}

	.sidebar-balance em.is-spinning{
		animation:spinBalance .65s linear infinite;
	}

	@keyframes spinBalance{
		from{ transform:rotate(0deg); }
		to{ transform:rotate(360deg); }
	}

    .sidebar-menu-list{
        position:relative;
        z-index:2;
        padding:12px 14px 6px;
    }

    .sidebar-menu-list a{
        min-height:40px;
        display:flex;
        align-items:center;
        gap:13px;
        padding:0 8px;
        border-bottom:1px solid rgba(255,255,255,.10);
        color:#e9e3f2;
        font-size:14px;
        font-weight:850;
        background:linear-gradient(90deg,rgba(255,255,255,.04),transparent);
        transition:.2s ease;
    }

    .sidebar-menu-list a:hover{
        color:#fff;
        background:linear-gradient(90deg,rgba(216,0,255,.24),transparent);
        transform:translateX(-3px);
    }

    .sidebar-menu-list span{
        width:28px;
        text-align:center;
        font-size:21px;
        color:#ffffff;
        filter:drop-shadow(0 0 8px rgba(216,0,255,.45));
    }

    .sidebar-language{
        position:relative;
        z-index:2;
        padding:8px 14px 22px;
        display:grid;
        grid-template-columns:42px 1fr;
        align-items:center;
    }

    .sidebar-language span{
        font-size:23px;
        text-align:center;
    }

    .sidebar-language select{
        height:34px;
        border-radius:8px;
        border:1px solid rgba(216,0,255,.45);
        background:#120018;
        color:#fff;
        padding:0 10px;
        font-size:13px;
        outline:0;
        box-shadow:inset 0 0 12px rgba(216,0,255,.18);
    }

    .sidebar-category-title{
        position:relative;
        z-index:2;
        padding:0 14px 12px;
        font-size:17px;
        font-weight:900;
        color:#fff;
    }

    .sidebar-category-grid{
        position:relative;
        z-index:2;
        padding:0 14px 22px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .sidebar-category-grid a{
        min-height:39px;
        border-radius:10px;
        background:
            radial-gradient(circle at top,rgba(255,255,255,.12),transparent 55%),
            linear-gradient(180deg,#230033,#0c0011);
        border:1px solid rgba(216,0,255,.35);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:12px;
        font-weight:900;
        white-space:nowrap;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.09),
            0 5px 13px rgba(0,0,0,.28);
    }

    .sidebar-category-grid a:hover{
        background:linear-gradient(135deg,#8b00ff,var(--pe-danger));
    }
}

@media(max-width:520px){

    .sidebar-member-box{
        padding:52px 12px 14px !important;
    }

    .sidebar-mini-banner{
        display:block;
        width:100%;
        height:58px;
        margin:0 0 12px;
        border-radius:10px;
        overflow:hidden;
        background:#070015;
        border:1px solid rgba(0,210,255,.28);
        box-shadow:
            0 0 18px rgba(0,210,255,.22),
            inset 0 1px 0 rgba(255,255,255,.16);
    }

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

    .sidebar-user{
        margin:8px 0 10px !important;
        font-size:14px;
        font-weight:950;
        color:#fff;
        text-align:center;
        text-shadow:0 0 12px rgba(255,255,255,.35);
    }

    /* SALDO PREMIUM */
    .sidebar-balance{
        position:relative;
        height:48px !important;
        margin:0 0 12px;
        padding:0 8px;
        display:grid !important;
        grid-template-columns:46px 1fr 38px !important;
        align-items:center;
        overflow:hidden;

        background:
            radial-gradient(circle at 18% 50%,rgba(0,255,157,.22),transparent 28%),
            radial-gradient(circle at 82% 50%,rgba(216,0,255,.20),transparent 30%),
            linear-gradient(180deg,#08001a,#02040f) !important;

        border:1px solid rgba(0,255,157,.38);
        border-radius:12px !important;

        color:#fff !important;

        box-shadow:
            0 0 22px rgba(0,255,157,.16),
            0 0 18px rgba(216,0,255,.18),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 0 18px rgba(0,255,157,.08) !important;
    }

    .sidebar-balance::before{
        content:"";
        position:absolute;
        inset:0;
        background:
            linear-gradient(
                120deg,
                transparent 0%,
                rgba(255,255,255,.06) 35%,
                rgba(255,255,255,.22) 50%,
                rgba(255,255,255,.06) 65%,
                transparent 100%
            );
        transform:translateX(-130%);
        animation:sidebarBalanceShine 5.8s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes sidebarBalanceShine{
        0%{transform:translateX(-130%);opacity:0}
        35%{opacity:.4}
        65%{opacity:.55}
        100%{transform:translateX(130%);opacity:0}
    }

    .sidebar-balance span{
        position:relative;
        z-index:2;
        color:#fff;
        font-size:12px;
        font-weight:950;
        text-align:left;
        padding-left:0;
        letter-spacing:.5px;
    }

    .sidebar-balance strong{
        position:relative;
        z-index:2;
        color:#00ff9d !important;
        font-size:18px !important;
        font-weight:1000 !important;
        text-align:left;
        font-family:monospace;
        letter-spacing:1px;
        text-shadow:
            0 0 10px rgba(0,255,157,.85),
            0 0 20px rgba(0,255,157,.32);
    }

    .sidebar-balance em{
        position:relative;
        z-index:2;
        color:#fff !important;
        font-size:24px !important;
        font-style:normal;
        text-align:center;
        text-shadow:0 0 12px rgba(255,255,255,.45);
    }

    /* ACTION BUTTON PREMIUM */
    .sidebar-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:0 !important;
        padding:0 !important;
        overflow:hidden;
        border-radius:10px;
        background:
            linear-gradient(135deg,#9b006a,var(--pe-primary),var(--pe-primary)) !important;
        border:1px solid rgba(255,255,255,.16);
        box-shadow:
            0 0 20px rgba(216,0,255,.28),
            inset 0 1px 0 rgba(255,255,255,.16);
    }

    .sidebar-deposit,
    .sidebar-withdraw{
        height:70px !important;
        border-radius:0 !important;
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:7px;
        background:transparent !important;
        border:0 !important;
        color:#fff !important;
        box-shadow:none !important;
        font-size:10px !important;
        font-weight:950;
        position:relative;
        overflow:hidden;
    }

    .sidebar-deposit::before,
    .sidebar-withdraw::before{
        content:"";
        position:absolute;
        inset:0;
        background:radial-gradient(circle at top,rgba(255,255,255,.20),transparent 55%);
        opacity:.45;
        pointer-events:none;
    }

    .sidebar-deposit{
        border-right:1px solid rgba(255,255,255,.18) !important;
    }

    .sidebar-deposit span,
    .sidebar-withdraw span{
        position:relative;
        z-index:2;
        width:28px;
        height:28px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:8px;
        color:#fff;
        font-size:20px;
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.18);
        box-shadow:
            0 0 12px rgba(255,255,255,.22),
            inset 0 1px 0 rgba(255,255,255,.18);
        filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
    }

    .sidebar-deposit small,
    .sidebar-withdraw small{
        position:relative;
        z-index:2;
        font-size:10px;
        font-weight:950;
        letter-spacing:.3px;
        text-shadow:0 0 10px rgba(255,255,255,.35);
    }
}

@media(max-width:520px){

    .sidebar-guest-head{
        position:relative;
        overflow:hidden;

        padding:58px 14px 18px !important;

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

        background:
            radial-gradient(circle at top left,
                rgba(255,255,255,.12),
                transparent 30%),

            radial-gradient(circle at bottom right,
                rgba(0,210,255,.12),
                transparent 35%),

            linear-gradient(
                180deg,
                #1d0028 0%,
                #120018 45%,
                #07000c 100%
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 12px 25px rgba(0,0,0,.35);
    }

    .sidebar-guest-glow{
        position:absolute;
        inset:-45%;

        background:
            radial-gradient(circle,
                rgba(255,255,255,.16),
                transparent 42%);

        filter:blur(38px);

        animation:guestGlowMove 8s ease-in-out infinite;

        pointer-events:none;
    }

    @keyframes guestGlowMove{

        0%,100%{
            transform:translateX(-10%);
            opacity:.25;
        }

        50%{
            transform:translateX(10%);
            opacity:.55;
        }
    }

    .sidebar-guest-logo{
        position:relative;
        z-index:2;

        width:140px;
        margin:0 auto 14px;
    }

    .sidebar-guest-logo img{
        width:100%;
        display:block;

        filter:
            drop-shadow(0 0 16px rgba(0,210,255,.45));
    }

    .sidebar-welcome{
        position:relative;
        z-index:2;

        text-align:center !important;

        color:#fff;

        font-size:20px !important;
        font-weight:1000 !important;

        letter-spacing:.3px;

        margin-bottom:8px !important;

        text-shadow:
            0 0 18px rgba(255,255,255,.18);
    }

    .sidebar-subtitle{
        position:relative;
        z-index:2;

        text-align:center;

        color:#d7c7ef;

        font-size:12px;
        line-height:1.6;

        margin-bottom:16px !important;

        padding:0 8px;
    }

    .sidebar-guest-actions{
        position:relative;
        z-index:2;

        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:12px;

        padding:0 !important;
    }

    .sidebar-login,
    .sidebar-register{
        position:relative;

        height:44px !important;

        border-radius:14px !important;

        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:7px;

        overflow:hidden;

        font-size:13px !important;
        font-weight:950 !important;

        text-transform:uppercase;

        transition:.25s ease;
    }

    .sidebar-login::before,
    .sidebar-register::before{
        content:"";

        position:absolute;
        inset:0;

        background:
            linear-gradient(
                120deg,
                transparent 0%,
                rgba(255,255,255,.22) 50%,
                transparent 100%
            );

        transform:translateX(-130%);
    }

    .sidebar-login:hover::before,
    .sidebar-register:hover::before{
        animation:guestBtnShine 1.2s ease;
    }

    @keyframes guestBtnShine{

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

    .sidebar-login{
        background:
            linear-gradient(
                135deg,
                #ff4d4d,
                #ff003c
            ) !important;

        color:#fff !important;

        box-shadow:
            0 0 18px rgba(255,0,60,.35),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .sidebar-register{
        background:
            linear-gradient(
                135deg,
                #ffe44d,
                #ffb300
            ) !important;

        color:#111 !important;

        box-shadow:
            0 0 18px rgba(255,200,0,.30),
            inset 0 1px 0 rgba(255,255,255,.35);
    }

    .sidebar-login span,
    .sidebar-register span{
        font-size:15px;
    }

    .sidebar-login:hover,
    .sidebar-register:hover{
        transform:translateY(-2px);
    }
}

/* =========================================================
   FIX MOBILE SHAKE / AUTO MOVE / SIDEBAR BUG
========================================================= */

@media(max-width:520px){

    html,
    body{
        overflow-x:hidden !important;
        width:100%;
        max-width:100%;
        position:relative;
        touch-action:pan-y;
        -webkit-overflow-scrolling:touch;
    }

    /* FIX BACKGROUND MOBILE */
    html{
        background:
            linear-gradient(rgba(5,0,20,.82),rgba(5,0,20,.92)),
            var(--body-bg-url) center top/cover no-repeat !important;

        background-attachment:scroll !important;
    }

    body{
        background:transparent !important;
        overflow-x:hidden !important;
    }

    /* HILANGKAN EFEK YANG BIKIN GOYANG */
    body::before{
        animation:none !important;
        transform:none !important;
        background:
            radial-gradient(circle at 50% 0%, var(--pe-glow), transparent 36%);
        opacity:.6;
    }

    /* WRAPPER */
    .site-shell{
        width:100%;
        overflow:hidden;
        position:relative;
        isolation:isolate;
    }

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

    .main-menu-bar{
        position:relative;
        overflow:hidden !important;
        z-index:100;
    }

    .main-menu-bar::before{
        animation:menuShineMobile 7s linear infinite;
        opacity:.35;
    }

    @keyframes menuShineMobile{
        0%{
            left:-45%;
        }

        100%{
            left:130%;
        }
    }

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

    .home-promo-main{
        overflow:hidden;
        border-radius:0;
        transform:translateZ(0);
        will-change:auto;
    }

    .promo-slider,
    .promo-slide{
        transform:translateZ(0);
        backface-visibility:hidden;
    }

    .promo-slide img{
        object-fit:cover;
        transform:scale(1);
    }

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

    .mobile-login-card{
        position:relative;
        z-index:5;
        overflow:hidden;
        transform:translateZ(0);

        background:
            radial-gradient(circle at top left,var(--pe-danger),transparent 35%),
            radial-gradient(circle at bottom right,rgba(0,210,255,.12),transparent 35%),
            linear-gradient(180deg,#18001f,#050007);

        border:1px solid var(--pe-danger);

        box-shadow:
            0 0 25px var(--pe-shadow),
            inset 0 0 22px rgba(255,255,255,.03);
    }

    .mobile-login-card::before{
        content:"";
        position:absolute;
        inset:-60%;
        background:
            radial-gradient(circle,rgba(255,255,255,.08),transparent 38%);
        filter:blur(35px);
        opacity:.4;
        animation:mobileCardGlow 8s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes mobileCardGlow{
        0%,100%{
            transform:translateX(-10%);
        }

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

    /* =====================================================
       NOTICE SECTION FIX
    ====================================================== */

    .notice-section{
        overflow:hidden;
        transform:translateZ(0);
        will-change:auto;
    }

    .notice-marquee-text{
        will-change:transform;
    }

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

    .pegasus-jackpot-section{
        overflow:hidden;
        transform:translateZ(0);
    }

    .jackpot-led{
        transform:translateZ(0);
        backface-visibility:hidden;
    }

    /* =====================================================
       SIDEBAR FIX TOTAL
    ====================================================== */

    .mobile-sidebar-overlay{
        position:fixed;
        inset:0;
        width:100%;
        height:100%;
        overflow:hidden;
        touch-action:none;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        transform:translateZ(0);
    }

    .mobile-sidebar{
        position:fixed;
        top:0;
        right:0;

        width:320px;
        max-width:88%;

        height:100dvh;

        overflow-y:auto;
        overflow-x:hidden;

        overscroll-behavior:contain;

        transform:translate3d(110%,0,0);
        transition:transform .34s cubic-bezier(.22,.61,.36,1);

        will-change:transform;

        backface-visibility:hidden;

        contain:layout style paint;
    }

    .mobile-sidebar.active{
        transform:translate3d(0,0,0);
    }

    /* HILANGKAN GLOW YANG BERAT */
    .mobile-sidebar::before{
        opacity:.16 !important;
        filter:blur(20px);
        animation:none !important;
    }

    /* CLOSE BUTTON */
    .mobile-sidebar-close{
        position:fixed !important;
        top:12px;
        right:12px;
        z-index:999999;

        transform:translateZ(0);
    }

    /* ISI SIDEBAR */
    .sidebar-menu-list,
    .sidebar-category-grid,
    .sidebar-language{
        position:relative;
        z-index:3;
    }

    /* FIX BUTTON */
    .sidebar-guest-actions,
    .sidebar-actions{
        padding-right:50px;
    }

    /* =====================================================
       HILANGKAN SEMUA EFEK PENYEBAB SHAKE
    ====================================================== */

    *{
        -webkit-tap-highlight-color:transparent;
    }

    .transaction-list,
    .notice-marquee-text,
    .mobile-menu-scroll{
        transform:translateZ(0);
        backface-visibility:hidden;
    }

    /* FIX SCROLL ANIMATION */
    #depositList,
    #withdrawList{
        animation-duration:500s !important;
    }

    /* FIX MENU AUTO SCROLL */
    .mobile-menu-scroll{
        scroll-behavior:smooth;
        overscroll-behavior-x:contain;
    }
}

/* =========================================================
   HIDE MOBILE SIDEBAR ON DESKTOP
========================================================= */

/* DESKTOP */
@media(min-width:521px){

    .mobile-sidebar-toggle,
    .mobile-sidebar,
    .mobile-sidebar-overlay{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }
}

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

    .mobile-sidebar-toggle{
        display:flex !important;
    }

    .mobile-sidebar{
        display:block !important;
    }

    .mobile-sidebar-overlay{
        display:block !important;
    }
}

/* =========================================================
   MOBILE BOTTOM NAV ULTRA LUXURY FIX
========================================================= */

.mobile-bottom-nav{
    display:none;
}

@media(max-width:520px){

    body{
        padding-bottom:88px !important;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:7px;
        right:7px;
        bottom:6px;
        z-index:999999;

        height:70px;

        display:grid;
        grid-template-columns:repeat(5,1fr);

        border-radius:22px;
        overflow:visible;

        background:
            radial-gradient(circle at top,rgba(255,255,255,.12),transparent 38%),
            radial-gradient(circle at 50% 120%,rgba(0,213,255,.16),transparent 34%),
            linear-gradient(180deg,#7d00d8 0%,#5200a5 30%,#2b004d 72%,#160024 100%);

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

        box-shadow:
            0 0 30px rgba(162,0,255,.42),
            0 0 18px rgba(0,213,255,.16),
            0 -8px 28px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.16);
    }

    .mobile-bottom-nav::after{
        content:"";
        position:absolute;
        inset:0;
        border-radius:22px;
        pointer-events:none;
        box-shadow:inset 0 0 18px rgba(255,255,255,.06);
    }

    .mobile-bottom-glow{
        position:absolute;
        inset:-35%;
        background:radial-gradient(circle,rgba(255,255,255,.15),transparent 42%);
        filter:blur(38px);
        opacity:.55;
        animation:mobileBottomGlow 8s ease-in-out infinite;
        pointer-events:none;
    }

    @keyframes mobileBottomGlow{
        0%,100%{
            transform:translateX(-12%);
        }

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

    .bottom-nav-item{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;

        color:#f6e7ff;
        text-decoration:none;
        transition:.25s ease;
        overflow:visible;
        min-width:0;
    }

    .bottom-nav-item::before{
        content:"";
        position:absolute;
        inset:0;
        background:
            linear-gradient(
                120deg,
                transparent,
                rgba(255,255,255,.20),
                transparent
            );
        transform:translateX(-140%);
        pointer-events:none;
    }

    .bottom-nav-item:active::before{
        animation:bottomNavShine .9s ease;
    }

    @keyframes bottomNavShine{
        100%{
            transform:translateX(140%);
        }
    }

    .bottom-icon-wrap{
        position:relative;
        z-index:2;

        width:34px;
        height:34px;

        border-radius:13px;

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

        background:
            linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));

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

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 0 14px var(--pe-danger);
    }

    .bottom-icon{
        font-size:18px;
        filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
    }

    .bottom-nav-item small{
        position:relative;
        z-index:2;

        font-size:8px;
        font-weight:950;
        line-height:1;
        letter-spacing:.15px;
        white-space:nowrap;

        text-shadow:0 0 8px rgba(255,255,255,.22);
    }

    .bottom-nav-item.active .bottom-icon-wrap{
        background:
            radial-gradient(circle at 35% 20%,rgba(255,255,255,.28),transparent 35%),
            linear-gradient(180deg,var(--pe-danger),var(--pe-primary));

        border-color:rgba(255,255,255,.22);

        box-shadow:
            0 0 18px var(--pe-danger),
            0 0 28px rgba(132,0,255,.35),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .bottom-nav-item.active small{
        color:#fff;
        text-shadow:0 0 10px var(--pe-danger);
    }

    .bottom-nav-item.active::after{
        content:"";
        position:absolute;
        left:20%;
        right:20%;
        bottom:0;
        height:4px;
        border-radius:999px;
        background:linear-gradient(90deg,var(--pe-danger),var(--pe-secondary));
        box-shadow:0 0 12px var(--pe-danger);
    }

    /* CENTER DEPO/WD FIX */
    .center-nav{
        transform:translateY(-7px) !important;
        z-index:5;
    }

    .center-nav-ring{
        position:absolute;
        width:52px;
        height:52px;
        border-radius:50%;
        background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);
        animation:centerPulse 2.6s ease-in-out infinite;
        z-index:1;
    }

    @keyframes centerPulse{
        0%,100%{
            transform:scale(1);
            opacity:.55;
        }

        50%{
            transform:scale(1.08);
            opacity:1;
        }
    }

    .center-nav .bottom-icon-wrap{
        width:46px !important;
        height:46px !important;
        border-radius:16px !important;

        background:
            radial-gradient(circle at 35% 20%,rgba(255,255,255,.30),transparent 34%),
            linear-gradient(180deg,var(--pe-secondary),var(--pe-primary) 55%,var(--pe-danger)) !important;

        border:2px solid rgba(255,255,255,.22);

        box-shadow:
            0 0 20px rgba(0,213,255,.55),
            0 0 24px var(--pe-danger),
            inset 0 1px 0 rgba(255,255,255,.28) !important;
    }

    .center-nav .bottom-icon{
        font-size:21px !important;
    }

    .center-nav small{
        margin-top:0 !important;
        font-size:8px !important;
        color:#fff;
        text-shadow:
            0 0 10px rgba(0,213,255,.65),
            0 0 12px var(--pe-danger) !important;
    }

    .center-nav.active::after{
        bottom:-7px !important;
        left:12% !important;
        right:12% !important;
        height:4px !important;
    }

    .bottom-nav-item:active{
        transform:translateY(-2px);
    }

    .center-nav:active{
        transform:translateY(-9px) scale(.98) !important;
    }
}

@media(max-width:520px){

    /* =========================================
       GLASSMORPH PREMIUM BOTTOM NAV
    ========================================= */

    .mobile-bottom-nav{
        background:
            linear-gradient(
                180deg,
                rgba(88,0,145,.42),
                rgba(28,0,52,.68)
            ) !important;

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

        border:1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            0 8px 35px rgba(0,0,0,.45),
            0 0 25px rgba(183,0,255,.18),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .mobile-bottom-nav::before{
        content:"";

        position:absolute;
        inset:0;

        border-radius:22px;

        background:
            linear-gradient(
                120deg,
                rgba(255,255,255,.12),
                transparent 30%,
                transparent 70%,
                rgba(255,255,255,.06)
            );

        pointer-events:none;
    }

    /* ITEM */
    .bottom-nav-item{
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    .bottom-nav-item::before{
        display:none !important;
    }

    /* ICON GLASS */
    .bottom-icon-wrap{

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.14),
                rgba(255,255,255,.04)
            ) !important;

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

        border:1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 4px 12px rgba(0,0,0,.28),
            0 0 12px rgba(170,0,255,.12) !important;
    }

    .bottom-icon{
        color:#f7f1ff;

        text-shadow:
            0 0 8px rgba(255,255,255,.25);
    }

    .bottom-nav-item small{
        color:#f4eaff;

        text-shadow:
            0 0 8px rgba(255,255,255,.15);
    }

    /* ACTIVE */
    .bottom-nav-item.active .bottom-icon-wrap{

        background:
            linear-gradient(
                180deg,
                rgba(0,213,255,.30),
                var(--pe-danger)
            ) !important;

        border:1px solid rgba(255,255,255,.18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 0 16px rgba(0,213,255,.42),
            0 0 24px var(--pe-danger),
            0 8px 18px rgba(0,0,0,.28) !important;
    }

    .bottom-nav-item.active .bottom-icon{
        color:#fff;

        text-shadow:
            0 0 10px rgba(0,213,255,.75),
            0 0 14px var(--pe-danger);
    }

    .bottom-nav-item.active small{
        color:#fff;

        text-shadow:
            0 0 10px var(--pe-danger);
    }

    .bottom-nav-item.active::after{
        content:"";

        position:absolute;

        left:22%;
        right:22%;
        bottom:0;

        height:3px;

        border-radius:999px;

        background:
            linear-gradient(
                90deg,
                var(--pe-secondary),
                var(--pe-danger)
            );

        box-shadow:
            0 0 10px var(--pe-danger);
    }

    /* CENTER NAV */
    .center-nav{
        transform:translateY(-7px) !important;
    }

    .center-nav .bottom-icon-wrap{

        background:
            linear-gradient(
                180deg,
                rgba(0,213,255,.38),
                var(--pe-glow),
                var(--pe-danger)
            ) !important;

        border:1px solid rgba(255,255,255,.22) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            0 0 18px rgba(0,213,255,.55),
            0 0 28px var(--pe-danger),
            0 10px 25px rgba(0,0,0,.30) !important;
    }

    .center-nav .bottom-icon{
        color:#fff;

        text-shadow:
            0 0 12px rgba(0,213,255,.85),
            0 0 16px var(--pe-danger);
    }

    .center-nav-ring{
        opacity:.55;
        filter:blur(2px);
    }
}


/* =========================================================
   TOP LOGIN DESKTOP - FULL FIT + HIDE WHEN MEMBER LOGIN
   Added fix: removes right empty space and stretches fields evenly.
========================================================= */
.top-login-bar{
    width:100% !important;
    max-width:100% !important;
    min-height:46px;
    padding:6px 8px !important;
    display:grid !important;
    grid-template-columns:160px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
    overflow:hidden !important;
}

.top-login-bar .lang-pill{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
    justify-content:center;
}

.top-login-bar .quick-login{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:none !important;
    display:grid !important;
    grid-template-columns:
        minmax(130px,1.25fr)
        minmax(150px,1.25fr)
        88px
        minmax(120px,.95fr)
        70px
        76px
        30px !important;
    gap:6px !important;
    align-items:center !important;
}

.top-login-bar .login-input,
.top-login-bar .captcha-pill,
.top-login-bar .btn-login,
.top-login-bar .btn-register,
.top-login-bar .bell-pill{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
}

.top-login-bar .login-input{
    padding:0 10px !important;
}

.top-login-bar .login-input.captcha-input{
    max-width:none !important;
    min-width:0 !important;
}

.top-login-bar .captcha-pill{
    padding:0 7px !important;
}

.top-login-bar .btn-login,
.top-login-bar .btn-register{
    padding:0 10px !important;
    white-space:nowrap;
}

.top-login-bar .bell-pill{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:0 !important;
}

@media (min-width:901px) and (max-width:1180px){
    .top-login-bar{
        grid-template-columns:150px minmax(0,1fr) !important;
        gap:6px !important;
        padding:6px !important;
    }

    .top-login-bar .quick-login{
        grid-template-columns:
            minmax(105px,1fr)
            minmax(120px,1fr)
            82px
            minmax(100px,.9fr)
            62px
            68px
            28px !important;
        gap:5px !important;
    }

    .top-login-bar .lang-pill,
    .top-login-bar .login-input,
    .top-login-bar .captcha-pill,
    .top-login-bar .btn-login,
    .top-login-bar .btn-register{
        font-size:9px !important;
    }

    .top-login-bar .captcha-pill{
        font-size:12px !important;
    }
}

@media (max-width:900px){
    .top-login-bar{
        display:none !important;
    }
}


/* =========================================================
   MOBILE FRONT ZOOM-IN INPUT FIX
   Prevents iOS/Android browser auto zoom when focusing inputs.
   Keeps front pages fit width and easy to scroll.
========================================================= */
html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    touch-action:pan-x pan-y;
}

/* iOS Safari auto-zooms inputs under 16px.
   Force minimum 16px only on mobile screens. */
@media (max-width:900px){
    input,
    select,
    textarea,
    button{
        font-size:16px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    textarea,
    select{
        font-size:16px !important;
        line-height:1.25 !important;
        transform:translateZ(0);
        -webkit-transform:translateZ(0);
    }

    .login-input input,
    .mobile-login-card input,
    .mobile-captcha-input input,
    .form-control,
    .premium-input,
    .promo-input,
    .promo-select{
        font-size:16px !important;
    }

    .site-shell,
    .front-page,
    .front-content,
    .container,
    .container-fluid{
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    img,
    video,
    canvas,
    iframe{
        max-width:100%;
    }
}

/* Keep desktop compact styling intact */
@media (min-width:901px){
    .top-login-bar input{
        font-size:10px !important;
    }
}

.premium-info-section{
    width:100%;
    display:grid;
    grid-template-columns:1.35fr .95fr .9fr;
    gap:16px;
    padding:22px 20px;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,0,255,.22),transparent 28%),
        radial-gradient(circle at 90% 20%,rgba(102,0,255,.22),transparent 32%),
        linear-gradient(135deg,#14001f,#29004b 45%,#4b008c);
    border-radius:22px;
    box-shadow:
        0 18px 45px rgba(82,0,160,.35),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.premium-info-col{
    position:relative;
    overflow:hidden;
    padding:16px;
    border-radius:18px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),
        rgba(8,0,20,.55);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 0 25px rgba(255,255,255,.03);
}

.premium-info-col:before{
    content:"";
    position:absolute;
    inset:-140%;
    background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
    animation:premiumInfoShine 8s linear infinite;
}

@keyframes premiumInfoShine{
    from{transform:translateX(-80%)}
    to{transform:translateX(80%)}
}

.premium-info-col > *{
    position:relative;
    z-index:2;
}

.premium-info-col h3{
    margin:0 0 18px;
    color:#fff;
    font-size:18px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(255,0,255,.45);
}

.service-card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:16px;
}

.service-mini-card{
    min-height:118px;
    display:flex;
    gap:12px;
    padding:16px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.10);
}

.service-icon,
.stat-icon,
.contact-icon{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#12001f,#090012);
    color:#a855f7;
    font-size:24px;
    box-shadow:
        0 0 0 1px rgba(168,85,247,.35),
        0 0 20px rgba(168,85,247,.35);
}

.service-mini-card h4{
    margin:4px 0 0;
    color:#fff;
    font-size:15px;
    font-weight:950;
}

.service-mini-card p,
.stat-premium-box p,
.service-contact-list p{
    margin:2px 0;
    color:#d8b4fe;
    font-size:13px;
}

.service-mini-card b{
    display:block;
    color:#fff;
    text-align:right;
    font-size:15px;
    margin:10px 0;
}

.bar{
    display:block;
    height:10px;
    border-radius:999px;
    background:#06000d;
    overflow:hidden;
}

.bar i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#3b82f6,#a855f7,#ec4899);
}

.stat-premium-box{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.10);
    text-align:center;
}

.stat-premium-box .stat-icon{
    margin:0 auto 8px;
}

.stat-premium-box b{
    color:#fff;
    font-size:13px;
}

.info-list a{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:15px;
    font-weight:850;
}

.info-list a b{
    padding:8px 14px;
    border-radius:8px;
    border:1px solid rgba(59,130,246,.7);
    color:#fff;
    font-size:11px;
    background:rgba(37,99,235,.15);
}

.service-contact-list a{
    display:flex;
    gap:16px;
    align-items:center;
    min-height:86px;
    color:#fff;
    text-decoration:none;
}

.service-contact-list small{
    display:block;
    color:#a78bfa;
    font-size:13px;
}

.service-contact-list b{
    display:block;
    color:#fff;
    font-size:15px;
    margin-top:2px;
}

@media(max-width:900px){
    .premium-info-section{
        grid-template-columns:1fr;
        padding:16px;
    }

    .service-card-grid{
        grid-template-columns:1fr;
    }

    .stat-premium-box{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ULTRA PREMIUM INFO SECTION
========================================================= */

.ultra-premium-info{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    display:grid;
    grid-template-columns:1.25fr .9fr;
    gap:18px;

    width:100%;
    margin:22px 0;
    padding:20px;

    border-radius:28px;
    border:1px solid rgba(255,255,255,.14);

    background:
        radial-gradient(circle at 8% 8%,rgba(255,0,255,.32),transparent 28%),
        radial-gradient(circle at 92% 10%,rgba(0,255,209,.16),transparent 30%),
        radial-gradient(circle at 50% 115%,rgba(122,0,255,.32),transparent 42%),
        linear-gradient(135deg,#09000d 0%,#210030 48%,#040006 100%);

    box-shadow:
        0 24px 60px rgba(110,0,160,.42),
        0 0 34px rgba(255,0,255,.20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.ultra-premium-info::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 38%,
            rgba(255,255,255,.12) 47%,
            rgba(255,255,255,.32) 51%,
            rgba(255,255,255,.10) 56%,
            transparent 68%
        );

    transform:translateX(-140%) skewX(-18deg);
    animation:ultraSectionShine 7s ease-in-out infinite;
}

.ultra-premium-info::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:27px;
    pointer-events:none;
    z-index:0;

    background:
        linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 13px
        );
    opacity:.72;
}

@keyframes ultraSectionShine{
    0%{transform:translateX(-140%) skewX(-18deg);opacity:0}
    18%{opacity:.7}
    42%{transform:translateX(140%) skewX(-18deg);opacity:0}
    100%{transform:translateX(140%) skewX(-18deg);opacity:0}
}

/* ORB */

.premium-orb{
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    filter:blur(28px);
    opacity:.38;
    z-index:0;
    pointer-events:none;
    animation:premiumOrbFloat 7s ease-in-out infinite;
}

.orb-one{
    left:-55px;
    top:-55px;
    background:#ff00ff;
}

.orb-two{
    right:-65px;
    bottom:-65px;
    background:#00ffd5;
    animation-delay:-2.5s;
}

@keyframes premiumOrbFloat{
    0%,100%{
        transform:translate3d(0,0,0) scale(1);
    }
    50%{
        transform:translate3d(12px,-10px,0) scale(1.08);
    }
}

/* =========================================================
   COLUMN
========================================================= */

.premium-info-col{
    position:relative;
    z-index:2;
    overflow:hidden;

    padding:18px;
    border-radius:23px;

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

    background:
        radial-gradient(circle at 90% 0%,rgba(255,0,255,.18),transparent 36%),
        linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 16px 34px rgba(0,0,0,.30);
}

.premium-info-col::before{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    top:0;
    height:1px;

    background:linear-gradient(90deg,transparent,#ff8dff,#00ffe0,transparent);
    opacity:.95;
}

/* TITLE */

.premium-title-row{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:16px;
}

.premium-title-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    color:#fff;
    font-size:15px;

    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 30%),
        linear-gradient(180deg,#ff4dff,#7800ff);

    box-shadow:
        0 0 16px rgba(255,0,255,.55),
        inset 0 1px 0 rgba(255,255,255,.30);

    animation:titleIconPulse 2.4s ease-in-out infinite;
}

@keyframes titleIconPulse{
    0%,100%{
        transform:scale(1);
        filter:brightness(1);
    }
    50%{
        transform:scale(1.08);
        filter:brightness(1.22);
    }
}

.premium-info-col h3{
    margin:0;

    color:#fff;
    font-size:16px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(255,255,255,.45),
        0 0 22px rgba(255,0,255,.42);
}

/* =========================================================
   SERVICE CARD
========================================================= */

.service-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.service-mini-card{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;
    gap:13px;

    min-height:112px;
    padding:15px;

    border-radius:22px;
    border:1px solid rgba(255,0,255,.32);

    background:
        radial-gradient(circle at top right,rgba(255,0,255,.24),transparent 42%),
        radial-gradient(circle at bottom left,rgba(0,255,213,.13),transparent 42%),
        linear-gradient(180deg,rgba(20,0,30,.98),rgba(4,0,8,.98));

    box-shadow:
        0 0 20px rgba(190,0,255,.22),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition:.28s ease;
}

.service-mini-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,145,255,.70);

    box-shadow:
        0 14px 32px rgba(0,0,0,.38),
        0 0 28px rgba(255,0,255,.34);
}

.service-mini-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 36%,
            rgba(255,255,255,.14) 48%,
            rgba(255,255,255,.30) 52%,
            transparent 66%
        );
    transform:translateX(-130%) skewX(-18deg);
    animation:serviceCardShine 5.2s ease-in-out infinite;
    pointer-events:none;
}

@keyframes serviceCardShine{
    0%{transform:translateX(-130%) skewX(-18deg);opacity:0}
    20%{opacity:.62}
    45%{transform:translateX(130%) skewX(-18deg);opacity:0}
    100%{transform:translateX(130%) skewX(-18deg);opacity:0}
}

.service-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

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

    border-radius:18px;

    color:#fff;
    font-size:23px;

    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 30%),
        linear-gradient(180deg,#ff56ff,#8200ff);

    box-shadow:
        0 0 20px rgba(255,0,255,.55),
        inset 0 1px 0 rgba(255,255,255,.30);

    animation:serviceIconGlow 2.8s ease-in-out infinite;
}

@keyframes serviceIconGlow{
    0%,100%{
        box-shadow:
            0 0 18px rgba(255,0,255,.45),
            inset 0 1px 0 rgba(255,255,255,.30);
    }
    50%{
        box-shadow:
            0 0 26px rgba(255,0,255,.72),
            0 0 18px rgba(0,255,213,.26),
            inset 0 1px 0 rgba(255,255,255,.30);
    }
}

.service-content{
    min-width:0;
    flex:1;
}

.service-badge{
    display:inline-flex;
    align-items:center;

    margin-bottom:6px;
    padding:4px 8px;

    border-radius:999px;

    color:#0dffb2;
    font-size:9px;
    font-weight:950;
    letter-spacing:.35px;
    text-transform:uppercase;

    background:rgba(0,255,168,.08);
    border:1px solid rgba(0,255,168,.22);

    box-shadow:0 0 12px rgba(0,255,168,.12);
}

.service-mini-card h4{
    margin:0 0 3px;
    color:#fff;
    font-size:13px;
    font-weight:950;
}

.service-mini-card p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:10px;
    font-weight:750;
}

.service-mini-card b{
    display:block;
    margin-top:4px;

    color:#fff;
    font-size:18px;
    font-weight:950;

    text-shadow:
        0 0 12px rgba(255,255,255,.25),
        0 0 16px rgba(0,255,168,.35);
}

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

.bar{
    position:relative;
    display:block;

    width:100%;
    height:9px;
    margin-top:9px;

    border-radius:999px;
    overflow:hidden;

    background:
        linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));

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

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.55),
        0 0 10px rgba(0,255,128,.10);
}

.bar i{
    position:relative;
    display:block;

    height:100%;
    min-width:14px;
    border-radius:999px;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.22) 0,
            rgba(255,255,255,.22) 6px,
            transparent 6px,
            transparent 12px
        ),
        linear-gradient(90deg,#00ff75 0%,#00e060 45%,#b6ff00 100%);

    background-size:
        24px 24px,
        100% 100%;

    box-shadow:
        0 0 10px rgba(0,255,117,.75),
        0 0 18px rgba(0,255,117,.38);

    animation:
        rtpGreenMove 1.1s linear infinite,
        rtpGreenGlow 1.8s ease-in-out infinite;
}

.bar i::before{
    content:"";
    position:absolute;
    inset:0;

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

    transform:translateX(-120%);
    animation:rtpGreenShine 2s ease-in-out infinite;
}

.bar i::after{
    content:"";
    position:absolute;
    top:50%;
    right:-4px;

    width:10px;
    height:10px;

    border-radius:50%;
    background:#c6ff00;

    transform:translateY(-50%);

    box-shadow:
        0 0 10px #c6ff00,
        0 0 20px rgba(198,255,0,.75);
}

@keyframes rtpGreenMove{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:24px 0,0 0;
    }
}

@keyframes rtpGreenGlow{
    0%,100%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.22);
    }
}

@keyframes rtpGreenShine{
    0%{
        transform:translateX(-120%);
        opacity:0;
    }
    40%{
        opacity:1;
    }
    100%{
        transform:translateX(120%);
        opacity:0;
    }
}

/* =========================================================
   STAT BOX - SUPER PREMIUM SOLID
========================================================= */

.stat-premium-box{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:18px;
}

.stat-premium-box > div{
    position:relative;
    overflow:hidden;

    min-height:122px;
    padding:20px 16px;

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

    text-align:center;

    border-radius:24px;
    border:1px solid rgba(255,80,255,.55);

    background:
        radial-gradient(circle at 22% 0%,rgba(255,255,255,.13),transparent 28%),
        radial-gradient(circle at 80% 16%,rgba(255,0,255,.38),transparent 36%),
        linear-gradient(145deg,#31083f 0%,#720082 52%,#26002f 100%);

    box-shadow:
        0 18px 38px rgba(0,0,0,.42),
        0 0 30px rgba(255,0,255,.26),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -16px 32px rgba(25,0,35,.50);

    transition:.28s ease;
}

.stat-premium-box > div::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            transparent 36%,
            rgba(255,255,255,.11) 48%,
            rgba(255,255,255,.30) 52%,
            transparent 68%
        );

    transform:translateX(-130%) skewX(-18deg);
    animation:statSolidShine 5.4s ease-in-out infinite;
    pointer-events:none;
}

.stat-premium-box > div::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:0;

    height:2px;
    border-radius:999px;

    background:linear-gradient(90deg,transparent,#ff9dff,#00ffd5,transparent);

    box-shadow:
        0 0 12px rgba(255,0,255,.55),
        0 0 18px rgba(0,255,213,.30);
}

.stat-premium-box > div:hover{
    transform:translateY(-3px);
    border-color:rgba(255,170,255,.85);

    box-shadow:
        0 22px 46px rgba(0,0,0,.46),
        0 0 38px rgba(255,0,255,.40),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -16px 32px rgba(25,0,35,.50);
}

@keyframes statSolidShine{
    0%{
        transform:translateX(-130%) skewX(-18deg);
        opacity:0;
    }

    20%{
        opacity:.55;
    }

    45%{
        transform:translateX(130%) skewX(-18deg);
        opacity:0;
    }

    100%{
        transform:translateX(130%) skewX(-18deg);
        opacity:0;
    }
}

/* =========================================================
   STAT ICON BASE
========================================================= */

.stat-icon{
    position:relative;
    z-index:2;

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

    width:56px;
    height:56px;

    margin:0 auto 10px;

    border-radius:18px;

    font-size:22px;

    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.42),transparent 30%),
        linear-gradient(180deg,#8b2fa8,#4b0b70);

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

    box-shadow:
        0 0 20px rgba(255,0,255,.42),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -8px 18px rgba(30,0,45,.42);
}

.stat-icon::after{
    content:"";
    position:absolute;
    inset:-9px;
    border-radius:22px;

    background:radial-gradient(circle,rgba(255,0,255,.28),transparent 65%);

    z-index:-1;
    animation:statIconSolidAura 2.5s ease-in-out infinite;
}

@keyframes statIconSolidAura{
    0%,100%{
        opacity:.45;
        transform:scale(.92);
    }

    50%{
        opacity:.9;
        transform:scale(1.08);
    }
}

/* =========================================================
   ONLINE ICON - REAL ONLINE DOT
========================================================= */

.online-stat{
    color:transparent;
    font-size:0;

    background:
        radial-gradient(circle at 50% 50%,rgba(0,255,117,.18),transparent 32%),
        linear-gradient(180deg,#102c25,#071a15);

    border:1px solid rgba(0,255,140,.30);

    box-shadow:
        0 0 20px rgba(0,255,117,.34),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -8px 18px rgba(0,35,18,.48);

    animation:none;
}

/* titik hijaunya yang bergerak */
.online-stat::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;

    width:11px;
    height:11px;

    border-radius:50%;
    background:#00ff75;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 8px #00ff75,
        0 0 16px rgba(0,255,117,.95),
        0 0 26px rgba(0,255,117,.65);

    animation:realOnlineDot 1.35s ease-in-out infinite;
}

/* ring bergerak dari titik */
.online-stat::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;

    width:11px;
    height:11px;

    border-radius:50%;
    border:1px solid rgba(0,255,117,.70);

    transform:translate(-50%,-50%) scale(.5);

    background:transparent;
    z-index:1;

    animation:realOnlineRing 1.35s ease-out infinite;
}

@keyframes realOnlineDot{
    0%,100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:1;
        filter:brightness(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.28);
        opacity:.82;
        filter:brightness(1.35);
    }
}

@keyframes realOnlineRing{
    0%{
        transform:translate(-50%,-50%) scale(.5);
        opacity:.85;
    }

    80%{
        opacity:.18;
    }

    100%{
        transform:translate(-50%,-50%) scale(4.2);
        opacity:0;
    }
}

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

.stat-premium-box b{
    position:relative;
    z-index:2;

    display:block;

    color:rgba(255,255,255,.82);
    font-size:11px;
    font-weight:950;

    letter-spacing:.2px;

    text-shadow:0 0 8px rgba(0,0,0,.42);
}

.stat-premium-box p{
    position:relative;
    z-index:2;

    margin:5px 0 0;

    color:#fff;
    font-size:20px;
    font-weight:950;

    letter-spacing:.3px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.38),
        0 0 14px rgba(255,255,255,.25),
        0 0 20px rgba(255,0,255,.48);
}

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

@media(max-width:520px){

    .stat-premium-box{
        gap:12px;
    }

    .stat-premium-box > div{
        min-height:104px;
        padding:16px 12px;
        border-radius:20px;
    }

    .stat-icon{
        width:48px;
        height:48px;
        border-radius:16px;
        font-size:20px;
        margin-bottom:8px;
    }

    .online-stat::before{
        width:9px;
        height:9px;
    }

    .online-stat::after{
        width:9px;
        height:9px;
    }

    .stat-premium-box p{
        font-size:17px;
    }

}

/* =========================================================
   CONTACT LIST
========================================================= */

.service-contact-list{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.service-contact-list a{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:13px;

    min-height:76px;
    padding:13px;

    text-decoration:none;

    border-radius:22px;
    border:1px solid rgba(255,0,255,.30);

    background:
        radial-gradient(circle at top right,rgba(0,255,213,.16),transparent 44%),
        radial-gradient(circle at bottom left,rgba(255,0,255,.15),transparent 38%),
        linear-gradient(180deg,rgba(18,0,26,.98),rgba(5,0,10,.98));

    box-shadow:
        0 0 17px rgba(190,0,255,.18),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition:.28s ease;
}

.service-contact-list a::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transform:translateX(-130%) skewX(-18deg);
    animation:contactPremiumShine 5s ease-in-out infinite;
    pointer-events:none;
}

@keyframes contactPremiumShine{
    0%{transform:translateX(-130%) skewX(-18deg);opacity:0}
    25%{opacity:.55}
    52%{transform:translateX(130%) skewX(-18deg);opacity:0}
    100%{transform:translateX(130%) skewX(-18deg);opacity:0}
}

.service-contact-list a:hover{
    transform:translateY(-3px);
    border-color:rgba(255,145,255,.70);

    box-shadow:
        0 0 26px rgba(255,0,255,.36),
        0 11px 26px rgba(0,0,0,.34);
}

.contact-icon{
    width:48px;
    height:48px;

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

    border-radius:18px;

    color:#fff;
    font-size:22px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30);
}

.whatsapp-icon{
    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.40),transparent 30%),
        linear-gradient(180deg,#00ff8a,#008f4d);
    box-shadow:
        0 0 18px rgba(0,255,138,.38),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.telegram-icon{
    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.40),transparent 30%),
        linear-gradient(180deg,#00d9ff,#005eff);
    box-shadow:
        0 0 18px rgba(0,217,255,.38),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.search-icon{
    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.40),transparent 30%),
        linear-gradient(180deg,#ff4dff,#7300ff);
    box-shadow:
        0 0 18px rgba(255,0,255,.42),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.service-contact-list small{
    display:block;

    color:#e87aff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.45px;
}

.service-contact-list b{
    display:block;
    margin-top:3px;

    color:#fff;
    font-size:14px;
    font-weight:950;
}

.service-contact-list p{
    margin:3px 0 0;

    color:rgba(255,255,255,.64);
    font-size:10px;
    font-weight:700;
}

.service-contact-list em{
    position:relative;

    padding:5px 8px;

    border-radius:999px;

    color:#00ff9c;
    font-size:9px;
    font-style:normal;
    font-weight:950;

    background:rgba(0,255,156,.09);
    border:1px solid rgba(0,255,156,.25);

    box-shadow:0 0 12px rgba(0,255,156,.15);
}

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

@media(max-width:768px){

    .ultra-premium-info{
        grid-template-columns:1fr;
        gap:14px;
        padding:13px;
        border-radius:22px;
    }

    .premium-info-col{
        padding:14px;
        border-radius:18px;
    }

    .service-card-grid{
        grid-template-columns:1fr;
    }

    .service-mini-card{
        min-height:104px;
    }

    .stat-premium-box{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }
}

@media(max-width:420px){

    .ultra-premium-info{
        padding:11px;
        border-radius:20px;
    }

    .premium-info-col h3{
        font-size:14px;
    }

    .premium-title-icon{
        width:28px;
        height:28px;
    }

    .service-contact-list a{
        grid-template-columns:44px 1fr;
    }

    .service-contact-list em{
        grid-column:2;
        width:max-content;
    }

    .stat-premium-box{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   SINKRON FIX DINAMIS INFO SECTION
========================================================= */

.service-card-grid,
.stat-premium-box,
.service-contact-list{
    position:relative;
    z-index:3;
}

.stat-item{
    position:relative;
}

.info-empty-box{
    grid-column:1 / -1;
    width:100%;

    padding:14px 16px;
    border-radius:16px;

    color:#fff;
    font-size:12px;
    font-weight:900;
    text-align:center;

    background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(0,0,0,.22);

    text-shadow:0 0 10px rgba(255,255,255,.25);
}

/* supaya stat dinamis tetap ikut style lama */
.stat-premium-box .stat-item{
    position:relative;
    overflow:hidden;

    min-height:122px;
    padding:20px 16px;

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

    text-align:center;

    border-radius:24px;
    border:1px solid rgba(255,80,255,.55);

    background:
        radial-gradient(circle at 22% 0%,rgba(255,255,255,.13),transparent 28%),
        radial-gradient(circle at 80% 16%,rgba(255,0,255,.38),transparent 36%),
        linear-gradient(145deg,#31083f 0%,#720082 52%,#26002f 100%);

    box-shadow:
        0 18px 38px rgba(0,0,0,.42),
        0 0 30px rgba(255,0,255,.26),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -16px 32px rgba(25,0,35,.50);

    transition:.28s ease;
}

.stat-premium-box .stat-item::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            transparent 36%,
            rgba(255,255,255,.11) 48%,
            rgba(255,255,255,.30) 52%,
            transparent 68%
        );

    transform:translateX(-130%) skewX(-18deg);
    animation:statSolidShine 5.4s ease-in-out infinite;
    pointer-events:none;
}

.stat-premium-box .stat-item::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:0;

    height:2px;
    border-radius:999px;

    background:linear-gradient(90deg,transparent,#ff9dff,#00ffd5,transparent);

    box-shadow:
        0 0 12px rgba(255,0,255,.55),
        0 0 18px rgba(0,255,213,.30);
}

.stat-premium-box .stat-item:hover{
    transform:translateY(-3px);
    border-color:rgba(255,170,255,.85);

    box-shadow:
        0 22px 46px rgba(0,0,0,.46),
        0 0 38px rgba(255,0,255,.40),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -16px 32px rgba(25,0,35,.50);
}

/* fallback kalau masih memakai div langsung */
.stat-premium-box > div:not(.info-empty-box){
    position:relative;
}

/* counter */
.stat-counter{
    position:relative;
    z-index:2;
}

/* link contact aman untuk data dinamis */
.service-contact-list a{
    color:#fff;
}

.service-contact-list a:hover,
.service-contact-list a:focus{
    text-decoration:none;
}

/* badge contact jika kosong tidak bikin ruang aneh */
.service-contact-list em:empty{
    display:none;
}

/* badge service jika kosong */
.service-badge:empty{
    display:none;
}

/* =========================================================
   RESPONSIVE SYNC
========================================================= */

@media(max-width:768px){

    .stat-premium-box{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .stat-premium-box .stat-item{
        min-height:104px;
        padding:16px 10px;
        border-radius:20px;
    }

}

@media(max-width:520px){

    .stat-premium-box{
        grid-template-columns:1fr;
        gap:12px;
    }

    .stat-premium-box .stat-item{
        min-height:104px;
        padding:16px 12px;
        border-radius:20px;
    }

}

@media(max-width:420px){

    .service-card-grid,
    .stat-premium-box{
        grid-template-columns:1fr;
    }

    .service-contact-list a{
        grid-template-columns:44px 1fr;
    }

    .service-contact-list em{
        grid-column:2;
        width:max-content;
    }

}

/* =========================================================
   INFO SECTION DYNAMIC ICON IMAGE + LOCAL STORAGE COUNTER SYNC
========================================================= */
.info-dynamic-icon-img{
    display:block;
    width:auto;
    height:auto;
    max-width:78%;
    max-height:78%;
    object-fit:contain;
    object-position:center;
    margin:auto;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
}

.premium-title-icon .info-dynamic-icon-img{
    max-width:20px;
    max-height:20px;
}

.service-icon .info-dynamic-icon-img,
.contact-icon .info-dynamic-icon-img,
.stat-icon .info-dynamic-icon-img{
    max-width:72%;
    max-height:72%;
}

.online-stat .info-dynamic-icon-img{
    display:none;
}

.info-empty-box{
    grid-column:1 / -1;
    width:100%;
    padding:14px 16px;
    border-radius:16px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.22);
    text-shadow:0 0 10px rgba(255,255,255,.25);
}


/* =========================================================
   SLOT PROVIDER LOGO FIX - SUPPORT WEBP SVG GIF PNG JPG URL/PATH
========================================================= */

.provider-tabs-scroll .provider-tab,
.slot-provider-strip .slot-provider-tab{
    min-width:108px;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}

.provider-tab-logo,
.slot-provider-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:94px;
    max-height:30px;
    object-fit:contain;
    object-position:center center;
    margin:auto;
    image-rendering:auto;
    filter:
        brightness(1.15)
        contrast(1.08)
        drop-shadow(0 0 6px rgba(255,255,255,.16));
}

.provider-tab-fallback,
.slot-provider-text{
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    font-weight:900;
    line-height:1.1;
    text-align:center;
    white-space:normal;
}

.provider-tab.active .provider-tab-logo,
.slot-provider-tab.active .slot-provider-logo{
    filter:
        brightness(1.28)
        contrast(1.15)
        drop-shadow(0 0 8px rgba(255,255,255,.22))
        drop-shadow(0 0 12px rgba(255,214,0,.22));
}

/* =========================================================
   SLOT SELECTION VIEW - USED BY HOME AND PROVIDER INDEX
========================================================= */

.slot-lobby-section{
    position:relative;
    overflow:hidden;
    margin:18px 0;
    border-radius:18px;
    background:
        radial-gradient(circle at 15% 0%,rgba(255,0,255,.18),transparent 34%),
        radial-gradient(circle at 100% 100%,rgba(255,214,0,.12),transparent 35%),
        linear-gradient(180deg,#1b001f,#08000b);
    border:1px solid rgba(255,0,255,.28);
    box-shadow:
        0 0 26px rgba(255,0,255,.22),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.slot-lobby-banner{
    position:relative;
    width:100%;
    min-height:130px;
    overflow:hidden;
    border-radius:18px 18px 0 0;
    background:linear-gradient(135deg,#2a003b,#08000b);
}

.slot-banner-slide{
    display:none;
    width:100%;
}

.slot-banner-slide.active{
    display:block;
}

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

.slot-banner-empty{
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:950;
    letter-spacing:.7px;
    background:
        radial-gradient(circle at center,rgba(255,0,255,.22),transparent 50%),
        linear-gradient(135deg,#2a003b,#08000b);
}

.slot-lobby-head{
    padding:12px 14px 6px;
}

.slot-title-wrap{
    display:flex;
    align-items:center;
    gap:9px;
}

.slot-title-mark{
    width:6px;
    height:24px;
    border-radius:999px;
    background:linear-gradient(180deg,#ffe600,#ff00ff);
    box-shadow:0 0 12px rgba(255,230,0,.5);
}

.slot-title-wrap h2{
    margin:0;
    color:#fff;
    font-size:20px;
    font-weight:950;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(255,255,255,.22);
}

.slot-provider-strip{
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    padding:8px 10px 10px;
    scrollbar-width:none;
}

.slot-provider-strip::-webkit-scrollbar{
    display:none;
}

.slot-provider-tab{
    flex:0 0 auto;
    min-width:112px;
    height:44px;
    padding:6px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    color:#fff;
    cursor:pointer;
    background:
        radial-gradient(circle at top,rgba(255,255,255,.08),transparent 55%),
        linear-gradient(180deg,#2d2d2d,#151515);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 6px 14px rgba(0,0,0,.28);
    transition:.22s ease;
}

.slot-provider-tab.active,
.slot-provider-tab:hover{
    border-color:rgba(255,214,0,.55);
    background:
        radial-gradient(circle at top,rgba(255,214,0,.18),transparent 55%),
        linear-gradient(180deg,#3a321a,#181818);
    box-shadow:
        inset 0 -3px 0 #ffd600,
        0 0 18px rgba(255,214,0,.18);
}

.slot-category-tabs{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:0 10px 12px;
    scrollbar-width:none;
}

.slot-category-tabs::-webkit-scrollbar{
    display:none;
}

.slot-category-tab{
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    padding:7px 12px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.slot-category-tab.active,
.slot-category-tab:hover{
    background:linear-gradient(180deg,#ffdd00,#b78400);
    color:#111;
}

.slot-game-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:11px;
    padding:0 12px 14px;
}

.slot-game-card{
    position:relative;
    overflow:hidden;
    border-radius:15px;
    text-decoration:none;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 22px rgba(0,0,0,.32);
    transition:.24s ease;
}

.slot-game-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,214,0,.45);
    box-shadow:0 14px 28px rgba(0,0,0,.42),0 0 20px rgba(255,214,0,.16);
}

.slot-game-img{
    position:relative;
    aspect-ratio:1 / 1;
    background:#1b1b1b;
    overflow:hidden;
}

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

.slot-game-img span{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.slot-game-info{
    padding:8px;
}

.slot-game-name{
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1.2;
    min-height:28px;
}

.slot-game-provider{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:5px;
    color:rgba(255,255,255,.65);
    font-size:9px;
    font-weight:800;
}

.slot-game-provider img{
    max-width:42px;
    max-height:16px;
    object-fit:contain;
}

@media(max-width:900px){
    .slot-game-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:520px){
    .provider-tab-logo,
    .slot-provider-logo{
        max-width:82px;
        max-height:26px;
    }

    .provider-tabs-scroll .provider-tab,
    .slot-provider-strip .slot-provider-tab{
        min-width:100px;
        min-height:40px;
    }

    .slot-banner-slide img{
        height:130px;
    }

    .slot-game-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        padding:0 8px 10px;
    }

    .slot-lobby-head{
        padding:10px 10px 6px;
    }
}


/* =========================================================
   SLOT SELECTION INTERNAL CARD SYNC
========================================================= */

.slot-game-thumb{
    position:relative;
    aspect-ratio:1 / 1;
    background:
        radial-gradient(circle at top,rgba(255,255,255,.08),transparent 45%),
        linear-gradient(180deg,#222,#101010);
    overflow:hidden;
}

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

.slot-game-thumb span{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.slot-game-body{
    padding:8px;
    background:linear-gradient(180deg,#171717,#0c0c0c);
}

.slot-card-badges{
    position:absolute;
    top:7px;
    left:7px;
    right:7px;
    z-index:4;
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}

.badge-hot,
.badge-new{
    padding:4px 6px;
    border-radius:999px;
    color:#111;
    font-size:8px;
    font-weight:950;
    line-height:1;
    box-shadow:0 0 10px rgba(0,0,0,.35);
}

.badge-hot{
    background:linear-gradient(180deg,#ffe600,#ff9d00);
}

.badge-new{
    margin-left:auto;
    background:linear-gradient(180deg,#00ffb3,#00a86b);
    color:#001b12;
}

.slot-rtp-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:5px;
    margin-bottom:6px;
}

.slot-rtp-row span,
.slot-rtp-row em{
    color:#00ff89;
    font-size:8px;
    font-style:normal;
    font-weight:950;
    text-shadow:0 0 8px rgba(0,255,137,.35);
}

.slot-rtp-bar{
    height:5px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
}

.slot-rtp-bar i{
    display:block;
    height:100%;
    border-radius:999px;
    background:
        repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 5px,transparent 5px,transparent 10px),
        linear-gradient(90deg,#00ff75,#b6ff00);
    background-size:20px 20px,100% 100%;
    animation:slotRtpMove 1.2s linear infinite;
    box-shadow:0 0 10px rgba(0,255,117,.55);
}

@keyframes slotRtpMove{
    from{background-position:0 0,0 0}
    to{background-position:20px 0,0 0}
}

.slot-provider-mini{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-top:6px;
}

.slot-provider-mini img{
    max-width:52px;
    max-height:18px;
    object-fit:contain;
    filter:brightness(1.15) contrast(1.08);
}

.slot-provider-mini span{
    color:rgba(255,255,255,.62);
    font-size:9px;
    font-weight:850;
}

.slot-provider-mini i{
    color:#ffd600;
    font-size:10px;
    font-style:normal;
    text-shadow:0 0 8px rgba(255,214,0,.45);
}

.skeleton-card{
    min-height:170px;
}

.skeleton-card .slot-game-body b{
    display:block;
    color:#fff;
    font-size:11px;
    text-align:center;
}

/* =========================================================
POPULAR GAME PREMIUM SLIDER
========================================================= */

.popular-game-slider{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    -ms-overflow-style:none;
    scrollbar-width:none;

    padding-bottom:2px;
}

.popular-game-slider::-webkit-scrollbar{
    display:none;
}

.popular-game-track{
    display:flex;
    align-items:stretch;
    gap:12px;

    width:max-content;
    min-width:100%;

    padding:4px 2px;
}

.popular-game-card{
    flex:0 0 auto;

    width:170px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

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

    box-shadow:
        0 10px 24px rgba(255,0,255,.28);
}

@media(max-width:768px){

    .popular-game-card{
        width:150px;
    }

}

@media(max-width:520px){

    .popular-game-track{
        gap:10px;
    }

    .popular-game-card{
        width:122px;
    }

}

.popular-game-card.is-hidden{
    display:none !important;
}