/*
|--------------------------------------------------------------------------
| OMTOPUP - NEON PINK REFERENCE THEME
|--------------------------------------------------------------------------
| Palette:
| Rich Black      #0D0D0D
| Dark Gray       #1A1A1A
| Medium Gray     #2B2B2B
| Neon Pink       #00c8ff
| Neon Pink Light #00e5ff
| Soft Pink       #75eaff
|--------------------------------------------------------------------------
*/

:root{
    --cici-black:#0d0d0d;
    --cici-black-deep:#070707;
    --cici-gray-dark:#1a1a1a;
    --cici-gray:#2b2b2b;

    --cici-pink:#00c8ff;
    --cici-pink-light:#00e5ff;
    --cici-pink-soft:#75eaff;

    --cici-white:#ffffff;
    --cici-text:#f7f7f7;
    --cici-muted:#a7a7a7;

    --cici-border:rgba(255,255,255,.10);
    --cici-pink-border:rgba(0,200,255,.45);

    --cici-gradient:
        linear-gradient(
            90deg,
            #00c8ff 0%,
            #00e5ff 52%,
            #75eaff 100%
        );

    --cici-glow:
        0 0 5px rgba(0,200,255,.75),
        0 0 14px rgba(0,200,255,.42),
        0 0 30px rgba(0,200,255,.20);
}


/* =========================================================
   GLOBAL
========================================================= */

html{
    background:#0d0d0d !important;
}

body{
    background:
        radial-gradient(
            ellipse at 78% 18%,
            rgba(0,200,255,.055) 0%,
            transparent 31%
        ),
        radial-gradient(
            ellipse at 18% 76%,
            rgba(0,200,255,.035) 0%,
            transparent 28%
        ),
        #0d0d0d !important;

    color:#f7f7f7 !important;
    min-height:100vh;
}

::selection{
    background:#00c8ff;
    color:#fff;
}

a{
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


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

.site-header{
    background:
        rgba(8,8,8,.97) !important;

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

    box-shadow:
        0 8px 28px rgba(0,0,0,.48) !important;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.navbar{
    background:transparent !important;
}


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

.nav-menu a{
    color:#d9d9d9 !important;
    position:relative;
}

.nav-menu a:hover,
.nav-menu a.active{
    color:#00e5ff !important;
}

.nav-menu a.active::after{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    bottom:-8px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00c8ff,
            #75eaff,
            transparent
        );

    box-shadow:
        0 0 8px #00c8ff,
        0 0 16px rgba(0,200,255,.65);
}


/* =========================================================
   BRAND
========================================================= */

.site-header .brand,
.site-header .logo,
.site-header .navbar-brand{
    color:#fff !important;
}

.site-header .brand span,
.site-header .logo span,
.site-header .navbar-brand span{
    color:#00e5ff !important;

    text-shadow:
        0 0 5px rgba(0,200,255,.95),
        0 0 12px rgba(0,200,255,.65),
        0 0 25px rgba(0,200,255,.32);
}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
    color:#fff !important;
}

p{
    color:#b8b8b8;
}


/* =========================================================
   PINK TEXT ACCENT
========================================================= */

.text-primary,
.text-accent,
.highlight{
    color:#00e5ff !important;

    text-shadow:
        0 0 10px rgba(0,200,255,.30);
}


/* =========================================================
   CARDS
========================================================= */

.card,
.game-card,
.product-card,
.category-card,
.member-card,
.profile-card,
.wallet-card,
.deposit-card,
.order-card,
.auth-card,
.content-card,
.box,
.panel,
.content-box,
.checkout-box,
.account-box{
    background:
        linear-gradient(
            145deg,
            #151515 0%,
            #0f0f0f 100%
        ) !important;

    color:#f5f5f5 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.30) !important;
}


/* =========================================================
   CARD HOVER - NEON OUTLINE
========================================================= */

.game-card:hover,
.product-card:hover,
.category-card:hover,
.card:hover{
    border-color:
        rgba(0,200,255,.72) !important;

    box-shadow:
        0 0 5px rgba(0,200,255,.55),
        0 0 14px rgba(0,200,255,.22),
        0 16px 35px rgba(0,0,0,.45) !important;

    transform:translateY(-2px);
}

.game-card:hover h3,
.product-card:hover h3,
.category-card:hover h3{
    color:#75eaff !important;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary,
button.btn-primary,
a.btn-primary,
.primary-btn,
.btn-main{
    background:
        linear-gradient(
            90deg,
            #00c8ff 0%,
            #00e5ff 55%,
            #75eaff 100%
        ) !important;

    color:#fff !important;

    border:
        1px solid #75eaff !important;

    box-shadow:
        0 0 6px rgba(0,200,255,.85),
        0 0 16px rgba(0,200,255,.45),
        0 0 30px rgba(0,200,255,.18) !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.28);

    font-weight:700;
}


/* =========================================================
   PRIMARY BUTTON HOVER
========================================================= */

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.primary-btn:hover,
.btn-main:hover{
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #75eaff
        ) !important;

    box-shadow:
        0 0 8px rgba(0,200,255,.95),
        0 0 22px rgba(0,200,255,.58),
        0 0 40px rgba(0,200,255,.25) !important;

    transform:translateY(-1px);
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.btn-secondary,
.secondary-btn,
.btn-outline,
.btn-outline-primary{
    background:#0d0d0d !important;

    color:#75eaff !important;

    border:
        1px solid #00c8ff !important;

    box-shadow:
        inset 0 0 10px rgba(0,200,255,.04),
        0 0 8px rgba(0,200,255,.12);
}

.btn-secondary:hover,
.secondary-btn:hover,
.btn-outline:hover,
.btn-outline-primary:hover{
    background:
        rgba(0,200,255,.08) !important;

    color:#fff !important;

    box-shadow:
        0 0 8px rgba(0,200,255,.48),
        0 0 18px rgba(0,200,255,.18);
}


/* =========================================================
   INPUT
========================================================= */

input,
select,
textarea{
    background:#111 !important;

    color:#fff !important;

    border:
        1px solid #2b2b2b !important;

    box-shadow:none !important;
}

input::placeholder,
textarea::placeholder{
    color:#696969 !important;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;

    border-color:#00c8ff !important;

    box-shadow:
        0 0 0 1px rgba(0,200,255,.28),
        0 0 12px rgba(0,200,255,.20) !important;
}

label{
    color:#e5e5e5 !important;
}

select option{
    background:#111;
    color:#fff;
}


/* =========================================================
   PRICE / IMPORTANT NUMBERS
========================================================= */

.price,
.product-price,
.game-price,
.amount,
.wallet-balance{
    color:#00e5ff !important;

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


/* =========================================================
   BADGES
========================================================= */

.badge,
.badge-primary{
    background:#00c8ff !important;
    color:#fff !important;

    border:
        1px solid #75eaff !important;

    box-shadow:
        0 0 8px rgba(0,200,255,.38);
}


/* =========================================================
   TABLE
========================================================= */

table{
    color:#e8e8e8 !important;
}

table thead th{
    background:#171717 !important;
    color:#fff !important;

    border-color:
        rgba(255,255,255,.09) !important;
}

table tbody td{
    border-color:
        rgba(255,255,255,.07) !important;
}

table tbody tr:hover{
    background:
        rgba(0,200,255,.035) !important;
}


/* =========================================================
   MEMBER
========================================================= */

.member-sidebar,
.member-nav,
.member-menu{
    background:#111 !important;

    border:
        1px solid rgba(255,255,255,.09) !important;
}

.member-sidebar a,
.member-nav a,
.member-menu a{
    color:#c9c9c9 !important;
}

.member-sidebar a:hover,
.member-sidebar a.active,
.member-nav a:hover,
.member-nav a.active,
.member-menu a:hover,
.member-menu a.active{
    background:
        rgba(0,200,255,.08) !important;

    color:#75eaff !important;

    border-color:
        rgba(0,200,255,.45) !important;
}


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

.site-footer,
.site-footer-rich{
    background:#090909 !important;

    color:#909090 !important;

    border-top:
        1px solid rgba(255,255,255,.09) !important;

    box-shadow:
        0 -12px 35px rgba(0,0,0,.35);
}

.site-footer-rich .footer-brand span{
    color:#00e5ff !important;

    text-shadow:
        0 0 6px rgba(0,200,255,.70),
        0 0 16px rgba(0,200,255,.32);
}

.site-footer a,
.site-footer-rich a{
    color:#bdbdbd !important;
}

.site-footer a:hover,
.site-footer-rich a:hover{
    color:#75eaff !important;
}


/* =========================================================
   DIVIDERS
========================================================= */

hr{
    border-color:
        rgba(255,255,255,.09) !important;
}


/* =========================================================
   NEON DECORATIVE LINE
========================================================= */

.neon-line{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00c8ff,
            #75eaff,
            transparent
        );

    box-shadow:
        0 0 8px rgba(0,200,255,.65);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#0d0d0d;
}

::-webkit-scrollbar-thumb{
    background:#2b2b2b;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#00c8ff;

    box-shadow:
        0 0 8px #00c8ff;
}


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

@media(max-width:768px){

    body{
        background:
            radial-gradient(
                circle at 100% 0,
                rgba(0,200,255,.055),
                transparent 25%
            ),
            #0d0d0d !important;
    }

    .site-header{
        background:
            rgba(8,8,8,.98) !important;
    }

    .game-card:hover,
    .product-card:hover,
    .category-card:hover,
    .card:hover{
        transform:none;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }
}


/* =========================================================
   OMTOPUP HOMEPAGE - REFERENCE OVERRIDE
   Menghapus sisa warna biru dari app.css
========================================================= */


/* ===== BODY ===== */

body{
    background:#0d0d0d !important;
}


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

.site-header{
    background:#080808 !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;
}


/* ===== LOGIN BUTTON ===== */

.nav-menu .login-button,
.login-button{
    background:
        linear-gradient(
            90deg,
            #00c8ff 0%,
            #00e5ff 55%,
            #75eaff 100%
        ) !important;

    color:#fff !important;

    border:
        1px solid rgba(117,234,255,.80) !important;

    box-shadow:
        0 0 6px rgba(0,200,255,.72),
        0 0 18px rgba(0,200,255,.34) !important;
}

.nav-menu .login-button:hover,
.login-button:hover{
    box-shadow:
        0 0 8px rgba(0,200,255,.95),
        0 0 24px rgba(0,200,255,.55),
        0 0 40px rgba(0,200,255,.20) !important;

    transform:translateY(-1px);
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(0,200,255,.095) 0%,
            rgba(0,200,255,.025) 30%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #0d0d0d 0%,
            #0a0a0a 58%,
            #0d0d0d 100%
        ) !important;

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


/* subtle neon light */

.hero::before{
    content:"";
    position:absolute;

    width:460px;
    height:460px;

    left:50%;
    top:-340px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(0,200,255,.13);

    filter:blur(100px);

    pointer-events:none;
}


/* diagonal decorative light */

.hero::after{
    content:"";
    position:absolute;

    width:280px;
    height:1px;

    right:-70px;
    top:100px;

    transform:rotate(-42deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,200,255,.12),
            #00c8ff,
            rgba(117,234,255,.20),
            transparent
        );

    box-shadow:
        0 0 8px rgba(0,200,255,.60),
        0 0 20px rgba(0,200,255,.24);

    pointer-events:none;
}

.hero-inner{
    position:relative;
    z-index:2;
}


/* ===== EYEBROW ===== */

.hero .eyebrow,
.eyebrow,
.section-kicker{
    color:#00e5ff !important;

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


/* orange lightning/icon compatibility */

.hero .eyebrow::first-letter{
    color:#00e5ff;
}


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

.hero h1{
    color:#fff !important;
}


/* Highlight second line */

.hero h1 span{
    display:block;

    color:#00e5ff !important;

    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #00e5ff 52%,
            #75eaff
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    filter:
        drop-shadow(
            0 0 9px rgba(0,200,255,.18)
        );
}


/* ===== HERO DESCRIPTION ===== */

.hero p{
    color:#a9a9a9 !important;
}


/* ===== HERO BUTTON SECONDARY ===== */

.hero .btn-secondary{
    background:#0d0d0d !important;

    color:#75eaff !important;

    border:
        1px solid #00c8ff !important;

    box-shadow:
        inset 0 0 10px rgba(0,200,255,.025),
        0 0 7px rgba(0,200,255,.13) !important;
}

.hero .btn-secondary:hover{
    background:
        rgba(0,200,255,.07) !important;

    color:#fff !important;

    box-shadow:
        0 0 7px rgba(0,200,255,.55),
        0 0 18px rgba(0,200,255,.20) !important;
}


/* =========================================================
   MAIN SECTIONS
========================================================= */

.section{
    background:#0d0d0d !important;
}

.section-alt{
    background:#101010 !important;
}


/* subtle separation between sections */

.section + .section,
.section + .section-alt,
.section-alt + .section{
    border-top:
        1px solid rgba(255,255,255,.045);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-kicker{
    color:#00e5ff !important;
}

.section-head h2{
    color:#fff !important;
}

.section-head > a{
    color:#75eaff !important;
}

.section-head > a:hover{
    color:#fff !important;

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


/* =========================================================
   GAME CARDS
========================================================= */

.game-card{
    background:#151515 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.25) !important;
}


/* image area */

.game-cover{
    background:
        linear-gradient(
            145deg,
            #1a1a1a,
            #111
        ) !important;

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


/* placeholder icon */

.game-placeholder{
    filter:
        drop-shadow(
            0 0 8px rgba(0,200,255,.20)
        );
}


/* card text */

.game-body{
    background:#151515 !important;
}

.game-body strong{
    color:#fff !important;
}

.game-body span{
    color:#929292 !important;
}


/* card hover */

.game-card:hover{
    border-color:
        rgba(0,200,255,.72) !important;

    box-shadow:
        0 0 6px rgba(0,200,255,.45),
        0 0 18px rgba(0,200,255,.15),
        0 15px 30px rgba(0,0,0,.40) !important;

    transform:translateY(-3px);
}

.game-card:hover .game-body strong{
    color:#75eaff !important;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-card,
.panel,
.content-card,
.empty-state{
    background:
        linear-gradient(
            145deg,
            #191919,
            #111
        ) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    color:#fff !important;
}

.feature-card h3{
    color:#00e5ff !important;
}

.feature-card p,
.muted,
.content-card p,
.empty-state p{
    color:#999 !important;
}


/* =========================================================
   OTHER PAGE HERO
========================================================= */

.page-hero{
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0,200,255,.075),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #111 0%,
            #0d0d0d 100%
        ) !important;

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

.page-hero h1{
    color:#fff !important;
}

.page-hero p{
    color:#999 !important;
}


/* =========================================================
   TOPUP PAGE
========================================================= */

.topup-layout .panel,
.topup-layout .content-card{
    background:#151515 !important;

    border:
        1px solid rgba(255,255,255,.09) !important;
}


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

.product-card{
    background:#171717 !important;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.10) !important;
}

.product-card:hover{
    border-color:#00c8ff !important;

    box-shadow:
        0 0 7px rgba(0,200,255,.35),
        0 0 16px rgba(0,200,255,.12) !important;
}

.product-card span{
    color:#75eaff !important;
}


/* =========================================================
   FORMS
========================================================= */

.topup-layout input,
.topup-layout select,
.form-grid input,
.form-grid select{
    background:#0d0d0d !important;

    color:#fff !important;

    border:
        1px solid #2b2b2b !important;
}

.topup-layout input:focus,
.topup-layout select:focus,
.form-grid input:focus,
.form-grid select:focus{
    border-color:#00c8ff !important;

    box-shadow:
        0 0 0 1px rgba(0,200,255,.25),
        0 0 12px rgba(0,200,255,.15) !important;
}


/* =========================================================
   ORDER MESSAGE / MUTED
========================================================= */

.order-message{
    color:#999 !important;
}


/* =========================================================
   FOOTER DETAIL OVERRIDES
========================================================= */

.site-footer-rich{
    background:#090909 !important;
}

.footer-description,
.footer-col a,
.payment-safe,
.footer-bottom,
.footer-bottom-links a,
.store-badge small{
    color:#888 !important;
}

.footer-col h3{
    color:#fff !important;
}

.footer-socials a{
    border-color:
        rgba(255,255,255,.12) !important;

    color:#bbb !important;
}

.footer-socials a:hover{
    color:#75eaff !important;

    border-color:#00c8ff !important;

    box-shadow:
        0 0 10px rgba(0,200,255,.25);
}

.payment-badges span{
    background:#151515 !important;

    color:#aaa !important;

    border:
        1px solid rgba(255,255,255,.10) !important;
}


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

@media(max-width:768px){

    .hero{
        background:
            radial-gradient(
                ellipse at 50% 0,
                rgba(0,200,255,.08),
                transparent 45%
            ),
            #0d0d0d !important;
    }

    .hero::after{
        opacity:.5;
    }

    .game-card:hover{
        transform:none;
    }
}


/* =========================================================
   DYNAMIC BRAND LOGO
========================================================= */

.site-brand-image{
    display:block;
    width:auto;
    max-width:210px;
    height:42px;
    object-fit:contain;
}

.footer-brand-image{
    display:block;
    width:auto;
    max-width:220px;
    max-height:54px;
    object-fit:contain;
}

@media(max-width:768px){

    .site-brand-image{
        max-width:165px;
        height:36px;
    }

    .footer-brand-image{
        max-width:190px;
        max-height:48px;
    }
}


/* =========================================================
   OMTOPUP HOMEPAGE BANNER SLIDER
========================================================= */

.cici-banner-section{
    position:relative;
    padding:22px 0 8px;
    background:#050505;
    overflow:hidden;
}

.cici-banner-section:before{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    top:-40px;
    height:90px;
    pointer-events:none;
    background:rgba(0,200,255,.12);
    filter:blur(60px);
}

.cici-banner-slider{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#08080a;
    border:1px solid rgba(0,200,255,.38);
    box-shadow:
        0 0 18px rgba(0,200,255,.14),
        0 18px 48px rgba(0,0,0,.38);
}

.cici-banner-track{
    position:relative;
    width:100%;
    aspect-ratio:4 / 1;
}

.cici-banner-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.015);
    transition:
        opacity .55s ease,
        transform .75s ease,
        visibility .55s ease;
}

.cici-banner-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

.cici-banner-link{
    display:block;
    width:100%;
    height:100%;
}

.cici-banner-link picture{
    display:block;
    width:100%;
    height:100%;
}

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

.cici-banner-slider:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:
        inset 0 0 35px rgba(0,200,255,.08);
}

.cici-banner-nav{
    position:absolute;
    top:50%;
    z-index:5;
    width:44px;
    height:44px;
    padding:0;
    border-radius:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#fff;
    font-size:30px;
    line-height:1;
    background:rgba(5,5,5,.76);
    border:1px solid rgba(0,200,255,.62);
    box-shadow:
        0 0 14px rgba(0,200,255,.30);
    backdrop-filter:blur(8px);
    transition:.2s ease;
}

.cici-banner-nav:hover{
    background:rgba(0,200,255,.24);
    border-color:#75eaff;
    box-shadow:
        0 0 18px rgba(0,200,255,.55);
}

.cici-banner-prev{
    left:16px;
}

.cici-banner-next{
    right:16px;
}

.cici-banner-dots{
    position:absolute;
    left:50%;
    bottom:13px;
    z-index:6;
    display:flex;
    gap:7px;
    transform:translateX(-50%);
}

.cici-banner-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    cursor:pointer;
    background:rgba(255,255,255,.48);
    transition:.25s ease;
}

.cici-banner-dot.is-active{
    width:28px;
    background:#00e5ff;
    box-shadow:
        0 0 9px #00c8ff,
        0 0 16px rgba(0,200,255,.55);
}


@media(max-width:700px){

    .cici-banner-section{
        padding:12px 0 4px;
    }

    .cici-banner-slider{
        border-radius:13px;
    }

    .cici-banner-track{
        aspect-ratio:16 / 7;
    }

    .cici-banner-nav{
        width:34px;
        height:34px;
        font-size:23px;
    }

    .cici-banner-prev{
        left:9px;
    }

    .cici-banner-next{
        right:9px;
    }

    .cici-banner-dots{
        bottom:9px;
    }
}


/* ==========================================================


/* ==========================================================
   CICI-BANNER-CLEAN-FINAL
   Slider asli dipertahankan.
   Banner: 860 x 310 px = rasio 86 / 31.
   ========================================================== */

/*
 * Track menentukan tinggi slider.
 * Sebelumnya 4:1 sehingga banner 860x310 terpotong.
 */
.cici-banner-track{
    position:relative;
    width:100%;
    aspect-ratio:86 / 31 !important;
}


/*
 * Pertahankan sistem slider asli:
 * slide bertumpuk secara absolute,
 * JavaScript memilih .is-active.
 */
.cici-banner-slide{
    position:absolute;
    inset:0;
}


/*
 * Link dan picture memenuhi ukuran track.
 */
.cici-banner-link,
.cici-banner-link picture{
    display:block;
    width:100%;
    height:100%;
}


/*
 * Gambar tidak boleh dicrop.
 */
.cici-banner-link img{
    display:block;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}


/* TABLET */

@media (max-width:900px){

    .cici-banner-track{
        aspect-ratio:86 / 31 !important;
    }

}


/* MOBILE / ANDROID / HANDPHONE */

@media (max-width:700px){

    .cici-banner-section .container{
        padding-left:12px;
        padding-right:12px;
    }

    .cici-banner-slider{
        border-radius:12px;
    }

    .cici-banner-track{
        aspect-ratio:86 / 31 !important;
    }

    .cici-banner-link img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    .cici-banner-nav{
        width:30px;
        height:30px;
        font-size:20px;
    }

    .cici-banner-prev{
        left:7px;
    }

    .cici-banner-next{
        right:7px;
    }

    .cici-banner-dots{
        bottom:7px;
    }

}


/* HP KECIL */

@media (max-width:420px){

    .cici-banner-section .container{
        padding-left:10px;
        padding-right:10px;
    }

    .cici-banner-slider{
        border-radius:10px;
    }

    .cici-banner-track{
        aspect-ratio:86 / 31 !important;
    }

}

/* CICI-BANNER-CLEAN-FINAL-END */


/* ==========================================================
   CICI-HOME-FLASH-SALE-V1
   ========================================================== */

.cici-flash-section{
    position:relative;
    padding:28px 0 34px;
}

.cici-flash-section:before{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    top:0;
    height:90px;
    pointer-events:none;
    background:rgba(0,200,255,.08);
    filter:blur(70px);
}

.cici-flash-head{
    position:relative;
    z-index:1;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;

    margin-bottom:18px;
}

.cici-flash-title-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.cici-flash-kicker{
    color:#75eaff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
}

.cici-flash-title-wrap h2{
    margin:0;

    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
    font-size:26px;
    line-height:1.1;
    font-weight:900;
}

.cici-flash-bolt{
    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.8)
        );
}


.cici-flash-countdown{
    display:flex;
    align-items:center;
    gap:12px;
}

.cici-flash-countdown-label{
    color:#9b9ba5;
    font-size:11px;
    font-weight:700;
}

.cici-flash-time{
    display:flex;
    align-items:center;
    gap:5px;
}

.cici-flash-time > span{
    min-width:44px;
    padding:7px 7px 6px;

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

    border-radius:8px;

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

    background:
        linear-gradient(
            180deg,
            rgba(0,200,255,.13),
            rgba(0,200,255,.035)
        );

    box-shadow:
        inset 0 0 12px rgba(0,200,255,.05),
        0 0 10px rgba(0,200,255,.07);
}

.cici-flash-time b{
    color:#fff;
    font-size:15px;
    line-height:1;
}

.cici-flash-time small{
    margin-top:4px;

    color:#777783;
    font-size:8px;
    text-transform:uppercase;
}

.cici-flash-time i{
    color:#00e5ff;
    font-style:normal;
    font-weight:900;
}


.cici-flash-scroll{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:
        repeat(5, minmax(0,1fr));

    gap:12px;
}


.cici-flash-card{
    min-width:0;

    overflow:hidden;

    border-radius:14px;

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

    background:
        linear-gradient(
            180deg,
            #17171b,
            #0d0d10
        );

    box-shadow:
        0 10px 28px rgba(0,0,0,.24);

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

.cici-flash-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(0,200,255,.65);

    box-shadow:
        0 14px 34px rgba(0,0,0,.34),
        0 0 18px rgba(0,200,255,.10);
}

.cici-flash-card-link{
    display:block;
    color:inherit;
    text-decoration:none;
}


.cici-flash-visual{
    position:relative;

    height:112px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0,200,255,.19),
            rgba(0,200,255,.035) 42%,
            #0d0d10 72%
        );
}

.cici-flash-visual > img{
    display:block;
    width:100%;
    height:100%;

    object-fit:cover;
}

.cici-flash-placeholder{
    width:100%;
    height:100%;

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

    gap:4px;

    text-align:center;
}

.cici-flash-placeholder span{
    width:48px;
    height:48px;

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

    border-radius:13px;

    color:#fff;
    font-size:22px;
    font-weight:900;

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

    background:
        linear-gradient(
            135deg,
            #00c8ff,
            #00c8ff
        );

    box-shadow:
        0 0 18px rgba(0,200,255,.28);
}

.cici-flash-placeholder small{
    max-width:90%;

    color:#c8c8cf;
    font-size:10px;
    font-weight:700;
}


.cici-flash-badge{
    position:absolute;
    top:8px;
    right:8px;

    padding:5px 8px;

    border-radius:7px;

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

    background:
        linear-gradient(
            135deg,
            #00c8ff,
            #00e5ff
        );

    box-shadow:
        0 0 12px rgba(0,200,255,.34);
}


.cici-flash-body{
    padding:11px 12px 12px;
}

.cici-flash-game{
    display:block;

    margin-bottom:3px;

    color:#8e8e98;
    font-size:9px;
    font-weight:700;

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

.cici-flash-product{
    display:block;

    min-height:32px;

    color:#fff;
    font-size:12px;
    line-height:1.35;
    font-weight:800;
}


.cici-flash-price{
    margin-top:9px;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.cici-flash-price del{
    color:#676772;
    font-size:10px;
}

.cici-flash-price b{
    color:#00e5ff;
    font-size:17px;
    line-height:1.15;

    text-shadow:
        0 0 12px rgba(0,200,255,.16);
}


.cici-flash-meta{
    margin-top:10px;
    padding-top:9px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;

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

.cici-flash-meta > span:first-child{
    color:#757580;
    font-size:9px;
}

.cici-flash-buy{
    color:#00e5ff;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}


/* Tablet */

@media (max-width:980px){

    .cici-flash-scroll{
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}


/* Mobile */

@media (max-width:700px){

    .cici-flash-section{
        padding:22px 0 28px;
    }

    .cici-flash-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .cici-flash-title-wrap h2{
        font-size:22px;
    }

    .cici-flash-countdown{
        width:100%;

        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .cici-flash-time{
        width:100%;
        justify-content:flex-start;
    }

    .cici-flash-time > span{
        min-width:43px;
    }

    .cici-flash-scroll{
        display:flex;

        gap:10px;

        overflow-x:auto;
        overflow-y:hidden;

        padding:
            2px 3px 12px;

        margin:
            0 -3px;

        scroll-snap-type:x proximity;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    .cici-flash-scroll::-webkit-scrollbar{
        display:none;
    }

    .cici-flash-card{
        flex:
            0 0 158px;

        scroll-snap-align:start;
    }

    .cici-flash-visual{
        height:96px;
    }

    .cici-flash-product{
        min-height:31px;
    }

    .cici-flash-price b{
        font-size:16px;
    }

}


/* HP kecil */

@media (max-width:420px){

    .cici-flash-card{
        flex-basis:148px;
    }

    .cici-flash-time > span{
        min-width:39px;
        padding-left:5px;
        padding-right:5px;
    }

    .cici-flash-time b{
        font-size:14px;
    }

}

/* CICI-HOME-FLASH-SALE-V1-END */



/* =========================================================
   CICI-HEADER-V2
   ========================================================= */

.cici-header-v2{
    position:sticky;
    top:0;
    z-index:1000;

    background:
        rgba(5,5,5,.96) !important;

    border-bottom:
        1px solid rgba(0,200,255,.24) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.42) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.cici-navbar-v2{
    min-height:74px;

    display:grid;

    grid-template-columns:
        minmax(165px,220px)
        minmax(260px,470px)
        auto;

    align-items:center;

    gap:28px;
}


/* LOGO */

.cici-header-brand{
    min-width:0;

    display:flex;
    align-items:center;

    text-decoration:none;
}

.cici-header-v2 .site-brand-image{
    display:block;

    width:auto;
    height:auto;

    max-width:210px;
    max-height:48px;

    object-fit:contain;
}


/* SEARCH */

.cici-header-search{
    position:relative;

    width:100%;
    margin:0;
}

.cici-header-search input{
    width:100%;
    height:42px;

    margin:0;

    padding:
        0 48px
        0 16px;

    color:#fff;

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

    outline:none;

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

    border-radius:9px;

    background:
        rgba(10,10,12,.92);

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.28);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.cici-header-search input::placeholder{
    color:#bdbdc5;
    opacity:1;
}

.cici-header-search input:focus{
    border-color:#00e5ff;

    box-shadow:
        0 0 0 2px rgba(0,200,255,.09),
        0 0 16px rgba(0,200,255,.14);
}

.cici-header-search button{
    position:absolute;

    right:4px;
    top:50%;

    width:38px;
    height:34px;

    transform:
        translateY(-50%);

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

    padding:0;

    border:0;

    color:#00e5ff;

    background:transparent;

    cursor:pointer;
}

.cici-header-search button svg{
    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;
    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 0 5px
            rgba(0,200,255,.35)
        );
}


/* NAVIGATION */

.cici-nav-v2{
    display:flex;

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

    gap:27px;

    white-space:nowrap;
}

.cici-nav-v2 > a:not(.cici-login-v2){
    padding:9px 0;

    color:#f0f0f0 !important;

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

    text-decoration:none;
}

.cici-nav-v2 > a:not(.cici-login-v2):hover{
    color:#00e5ff !important;
}


/* LOGIN / MEMBER */

.cici-nav-v2 .cici-login-v2{
    min-height:40px;

    padding:
        9px 15px !important;

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

    gap:8px;

    border:
        1px solid rgba(0,200,255,.75) !important;

    border-radius:9px;

    color:#75eaff !important;

    background:
        rgba(0,200,255,.045) !important;

    box-shadow:
        0 0 10px rgba(0,200,255,.12) !important;

    text-decoration:none;

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

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

.cici-nav-v2 .cici-login-v2 svg{
    width:19px;
    height:19px;

    flex:0 0 19px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.cici-nav-v2 .cici-login-v2:hover{
    color:#fff !important;

    background:
        rgba(0,200,255,.14) !important;

    border-color:#00e5ff !important;

    box-shadow:
        0 0 16px rgba(0,200,255,.25) !important;

    transform:
        translateY(-1px);
}


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

@media(max-width:1100px){

    .cici-navbar-v2{
        grid-template-columns:
            minmax(145px,185px)
            minmax(220px,1fr)
            auto;

        gap:18px;
    }

    .cici-header-v2 .site-brand-image{
        max-width:180px;
        max-height:44px;
    }

    .cici-nav-v2{
        gap:16px;
    }

    .cici-nav-v2 > a:not(.cici-login-v2){
        font-size:12px;
    }

}


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

@media(max-width:850px){

    .cici-navbar-v2{
        min-height:auto;

        padding-top:11px;
        padding-bottom:11px;

        grid-template-columns:
            1fr auto;

        gap:10px 14px;
    }

    .cici-header-brand{
        grid-column:1;
        grid-row:1;
    }

    .cici-header-v2 .site-brand-image{
        max-width:175px;
        max-height:42px;
    }

    .cici-nav-v2{
        grid-column:2;
        grid-row:1;

        gap:0;
    }

    .cici-nav-v2 >
    a:not(.cici-login-v2){
        display:none !important;
    }

    .cici-header-search{
        grid-column:
            1 / -1;

        grid-row:2;
    }

    .cici-header-search input{
        height:40px;
    }

    .cici-nav-v2 .cici-login-v2{
        min-height:38px;

        padding:
            8px 12px !important;
    }

}


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

@media(max-width:420px){

    .cici-header-v2 .site-brand-image{
        max-width:150px;
        max-height:38px;
    }

    .cici-nav-v2 .cici-login-v2{
        padding:
            8px 10px !important;
    }

    .cici-nav-v2 .cici-login-v2 span{
        font-size:12px;
    }

}

/* CICI-HEADER-V2-END */


/* =========================================================
   CICI-HEADER-LOGO-SIZE-V2
   Logo OMTOPUP 630x126
   ========================================================= */

.cici-navbar-v2{
    min-height:82px;
    grid-template-columns:
        260px
        minmax(300px,470px)
        auto;
}

.cici-header-v2 .cici-header-brand{
    width:260px;
    height:64px;

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

.cici-header-v2 .site-brand-image{
    width:250px !important;
    max-width:250px !important;

    height:auto !important;
    max-height:58px !important;

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


/* Tablet */

@media(max-width:1100px){

    .cici-navbar-v2{
        min-height:76px;

        grid-template-columns:
            210px
            minmax(230px,1fr)
            auto;
    }

    .cici-header-v2 .cici-header-brand{
        width:210px;
        height:56px;
    }

    .cici-header-v2 .site-brand-image{
        width:205px !important;
        max-width:205px !important;
        max-height:50px !important;
    }

}


/* Mobile */

@media(max-width:850px){

    .cici-navbar-v2{
        grid-template-columns:
            1fr auto;
    }

    .cici-header-v2 .cici-header-brand{
        width:190px;
        height:48px;
    }

    .cici-header-v2 .site-brand-image{
        width:185px !important;
        max-width:185px !important;
        max-height:44px !important;
    }

}


/* HP kecil */

@media(max-width:420px){

    .cici-header-v2 .cici-header-brand{
        width:165px;
        height:44px;
    }

    .cici-header-v2 .site-brand-image{
        width:160px !important;
        max-width:160px !important;
        max-height:40px !important;
    }

}

/* CICI-HEADER-LOGO-SIZE-V2-END */



/* =========================================================
   CICI-GAME-SEARCH-LAYOUT-FIX-V1
   ========================================================= */

.cici-game-search{
    position:relative;
    width:100%;
    min-width:0;
    z-index:1200;
}


.cici-game-search-form{
    position:relative;

    width:100%;
    height:42px;

    margin:0 !important;
    padding:0 !important;

    display:block;
}


/* Input */

.cici-game-search-form input{
    display:block;

    width:100% !important;
    height:42px !important;

    margin:0 !important;

    padding:
        0 74px
        0 16px !important;

    border:
        1px solid rgba(0,200,255,.72) !important;

    border-radius:9px !important;

    outline:none;

    color:#fff !important;

    font-size:13px;

    background:
        rgba(10,10,12,.92) !important;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.28);

    appearance:none;
    -webkit-appearance:none;
}


.cici-game-search-form input::placeholder{
    color:#bdbdc5;
}


.cici-game-search-form input:focus{
    border-color:#00e5ff !important;

    box-shadow:
        0 0 0 2px rgba(0,200,255,.08),
        0 0 16px rgba(0,200,255,.14);
}


/* Jangan tampilkan ikon kiri dulu.
   Search sebelumnya memang hanya memakai ikon kanan. */

.cici-game-search-leading{
    display:none !important;
}


/* Semua SVG harus dibatasi.
   Ini yang mencegah ikon menjadi raksasa. */

.cici-game-search svg{
    display:block !important;

    width:20px !important;
    height:20px !important;

    min-width:20px !important;
    min-height:20px !important;

    max-width:20px !important;
    max-height:20px !important;

    fill:none !important;

    stroke:currentColor !important;
    stroke-width:2 !important;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* Tombol search kanan */

.cici-game-search-button{
    position:absolute !important;

    right:4px !important;
    top:50% !important;

    width:38px !important;
    height:34px !important;

    min-width:38px !important;

    transform:
        translateY(-50%) !important;

    margin:0 !important;
    padding:0 !important;

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

    border:0 !important;

    color:#00e5ff !important;

    background:transparent !important;

    cursor:pointer;
}


/* Tombol X */

.cici-game-search-clear{
    position:absolute !important;

    right:40px !important;
    top:50% !important;

    width:28px !important;
    height:32px !important;

    min-width:28px !important;

    transform:
        translateY(-50%) !important;

    margin:0 !important;
    padding:0 !important;

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

    border:0 !important;

    color:#90909b !important;

    background:transparent !important;

    font-size:18px !important;
    line-height:1 !important;

    cursor:pointer;
}


.cici-game-search-clear[hidden]{
    display:none !important;
}


/* Dropdown belum diaktifkan pada tahap ini */

.cici-game-search-results[hidden]{
    display:none !important;
}


/* JSON data tidak boleh memengaruhi layout */

.cici-game-search >
script[type="application/json"]{
    display:none !important;
}


/* Mobile */

@media(max-width:850px){

    .cici-game-search-form,
    .cici-game-search-form input{
        height:40px !important;
    }

}

/* CICI-GAME-SEARCH-LAYOUT-FIX-V1-END */



/* =========================================================
   CICI-GAME-AUTOCOMPLETE-V2
   ========================================================= */

.cici-game-search{
    overflow:visible !important;
}

.cici-game-search-results{
    position:absolute;

    top:calc(100% + 8px);
    left:0;
    right:0;

    z-index:9999;

    overflow:hidden;

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

    border-radius:12px;

    background:
        rgba(15,16,20,.985);

    box-shadow:
        0 18px 42px rgba(0,0,0,.58),
        0 0 22px rgba(0,200,255,.08);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.cici-game-search-results[hidden]{
    display:none !important;
}


/* RESULT */

.cici-game-result{
    width:100%;

    display:flex;
    align-items:center;

    gap:12px;

    min-height:62px;

    padding:9px 12px;

    color:#fff;

    text-decoration:none;

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

    background:transparent;

    transition:
        background .15s ease;
}

.cici-game-result:last-child{
    border-bottom:0;
}

.cici-game-result:hover,
.cici-game-result.is-active{
    background:
        rgba(0,200,255,.10);
}


/* IMAGE / FALLBACK */

.cici-game-result-thumb{
    width:42px;
    height:42px;

    flex:
        0 0 42px;

    overflow:hidden;

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

    border-radius:9px;

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

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.23),
            rgba(24,24,30,.98) 72%
        );
}

.cici-game-result-thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.cici-game-result-thumb span{
    color:#fff;

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

    text-shadow:
        0 0 9px rgba(0,200,255,.55);
}


/* COPY */

.cici-game-result-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}

.cici-game-result-copy strong{
    overflow:hidden;

    color:#fff;

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

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

.cici-game-result-copy small{
    overflow:hidden;

    color:#92929d;

    font-size:11px;

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


/* EMPTY */

.cici-game-search-empty{
    padding:18px 14px;

    text-align:center;

    color:#92929d;

    font-size:12px;
}

.cici-game-search-empty strong{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:13px;
}


/* Supaya dropdown tidak terpotong header */

.cici-header-v2,
.cici-navbar-v2{
    overflow:visible !important;
}


/* Mobile */

@media(max-width:850px){

    .cici-game-search-results{
        top:calc(100% + 6px);
    }

    .cici-game-result{
        min-height:58px;
    }

}

/* CICI-GAME-AUTOCOMPLETE-V2-END */



/* ==========================================================
   CICI-MOBILE-HOMEPAGE-V2
   Flash Sale compact + spacing + neon atmosphere
   ========================================================== */

@media (max-width:700px){

    /*
     * FLASH SALE
     * Header dibuat compact.
     */

    .cici-flash-section{
        padding:20px 0 18px !important;
        overflow:hidden;
    }

    .cici-flash-head{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:end !important;

        gap:8px 10px !important;

        margin-bottom:14px !important;
    }

    .cici-flash-title-wrap{
        min-width:0;
    }

    .cici-flash-kicker{
        font-size:9px !important;
        letter-spacing:.13em;
    }

    .cici-flash-title-wrap h2{
        font-size:20px !important;
        white-space:nowrap;
    }


    /*
     * Countdown berada SATU BARIS.
     */

    .cici-flash-countdown{
        width:auto !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-end !important;

        gap:4px !important;
    }

    .cici-flash-countdown-label{
        font-size:8px !important;
        white-space:nowrap;
    }

    .cici-flash-time{
        width:auto !important;

        display:flex !important;
        flex-wrap:nowrap !important;

        justify-content:flex-end !important;
        align-items:center !important;

        gap:3px !important;

        white-space:nowrap;
    }

    .cici-flash-time > span{
        min-width:34px !important;

        padding:
            5px 4px 4px !important;

        border-radius:7px !important;
    }

    .cici-flash-time b{
        font-size:12px !important;
        line-height:1 !important;
    }

    .cici-flash-time small{
        margin-top:3px;

        font-size:5px !important;
        line-height:1 !important;
    }

    .cici-flash-time i{
        font-size:10px !important;
    }


    /*
     * Card horizontal swipe tetap dipertahankan.
     */

    .cici-flash-scroll{
        gap:9px !important;

        padding:
            2px 0 7px !important;

        margin:
            0 !important;
    }

    .cici-flash-card{
        flex:
            0 0 148px !important;
    }


    /*
     * Hilangkan ruang kosong besar antara
     * Flash Sale dan Game Populer.
     *
     * #games hanya section Game Populer,
     * sehingga section lain tidak terpengaruh.
     */

    #games.section{
        padding-top:18px !important;
        padding-bottom:34px !important;
    }

    #games .section-head{
        margin-bottom:16px !important;
    }

    #games .section-kicker{
        font-size:10px !important;
    }

    #games .section-head h2{
        margin-top:4px !important;

        font-size:25px !important;
        line-height:1.1;
    }

    #games .section-head > a{
        font-size:12px !important;
        white-space:nowrap;
    }


    /*
     * ======================================================
     * BACKGROUND ATMOSPHERE
     *
     * Tidak memakai image/GIF.
     * Hanya CSS radial-gradient sehingga ringan.
     * ======================================================
     */

    body{
        background-color:#0d0d0d !important;

        background-image:

            radial-gradient(
                circle at 8% 18%,
                rgba(0,200,255,.075) 0,
                rgba(0,200,255,.035) 38px,
                transparent 92px
            ),

            radial-gradient(
                circle at 93% 30%,
                rgba(0,229,255,.065) 0,
                rgba(0,229,255,.025) 48px,
                transparent 105px
            ),

            radial-gradient(
                circle at 15% 58%,
                rgba(117,234,255,.055) 0,
                transparent 85px
            ),

            radial-gradient(
                circle at 92% 78%,
                rgba(0,200,255,.055) 0,
                transparent 105px
            ) !important;

        background-attachment:scroll !important;
    }


    /*
     * Bubble/glow tambahan pada Flash Sale.
     */

    .cici-flash-section::before{
        left:-35px !important;
        right:auto !important;

        top:55px !important;

        width:130px !important;
        height:130px !important;

        border-radius:50%;

        background:
            radial-gradient(
                circle,
                rgba(0,200,255,.12),
                rgba(0,200,255,.035) 45%,
                transparent 72%
            ) !important;

        filter:blur(4px) !important;
    }

}


/*
 * HP kecil
 */

@media (max-width:420px){

    .cici-flash-head{
        grid-template-columns:1fr !important;
        align-items:start !important;

        gap:7px !important;
    }

    /*
     * Pada layar sangat kecil title dan countdown
     * tetap rapi tetapi countdown sendiri tetap satu baris.
     */

    .cici-flash-countdown{
        width:100% !important;
        align-items:flex-start !important;
    }

    .cici-flash-countdown-label{
        display:none !important;
    }

    .cici-flash-time{
        justify-content:flex-start !important;
    }

    .cici-flash-time > span{
        min-width:39px !important;
    }

    .cici-flash-time b{
        font-size:13px !important;
    }

    .cici-flash-card{
        flex-basis:148px !important;
    }

    #games.section{
        padding-top:14px !important;
    }

}


/* ==========================================================
   LOVE NEON DECORATION

   Dibuat menggunakan karakter dekoratif CSS.
   Tidak memerlukan file gambar.
   ========================================================== */

@media (max-width:700px){

    #games{
        position:relative;
        overflow:hidden;
    }

    #games::before{
        content:"♡";

        position:absolute;

        right:5%;
        top:8px;

        z-index:0;

        color:rgba(0,229,255,.16);

        font-family:Arial,sans-serif;
        font-size:56px;
        font-weight:400;
        line-height:1;

        transform:rotate(13deg);

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

        pointer-events:none;
    }

    #games::after{
        content:"";

        position:absolute;

        left:-32px;
        bottom:10%;

        width:105px;
        height:105px;

        border-radius:50%;

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

        box-shadow:
            0 0 28px rgba(0,200,255,.08),
            inset 0 0 25px rgba(0,200,255,.035);

        pointer-events:none;
    }

    #games > .container{
        position:relative;
        z-index:1;
    }

}


/* CICI-MOBILE-HOMEPAGE-V2-END */



/* ==========================================================
   CICI-FOOTER-NEON-V2
   Footer hitam + neon pink
   ========================================================== */

.site-footer,
.footer-rich,
.footer-main,
footer{
    position:relative;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(0,200,255,.055),
            transparent 190px
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(0,229,255,.05),
            transparent 210px
        ),
        linear-gradient(
            180deg,
            #0b0b0d 0%,
            #08090b 55%,
            #07080a 100%
        ) !important;

    color:#fff !important;

    border-top:
        1px solid rgba(0,200,255,.20) !important;

    overflow:hidden;
}


/* Hilangkan warna biru dari blok footer lama */

.footer-rich{
    background:transparent !important;
}

.footer-bottom{
    background:
        rgba(5,5,7,.82) !important;

    border-top:
        1px solid rgba(255,255,255,.065) !important;

    color:#8f8f99 !important;
}


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

.footer-rich-grid{
    position:relative;
    z-index:2;
}


/* Headings */

.footer-rich h3,
.footer-rich h4,
.footer-column h3,
.footer-column h4{
    color:#fff !important;

    letter-spacing:.06em;
}


/* Text */

.footer-rich p,
.footer-column p,
.footer-bottom,
.footer-bottom span{
    color:#92929d !important;
}


/* Links */

.footer-rich a,
.footer-column a,
.footer-bottom a{
    color:#aaaab3 !important;

    text-decoration:none;

    transition:
        color .18s ease,
        text-shadow .18s ease;
}

.footer-rich a:hover,
.footer-column a:hover,
.footer-bottom a:hover{
    color:#00e5ff !important;

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


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

.footer-brand,
.footer-logo{
    position:relative;
    z-index:2;
}

.footer-brand-image{
    filter:
        drop-shadow(
            0 0 7px
            rgba(0,200,255,.16)
        );
}


/* ==========================================================
   SOCIAL ICON / BADGE
   ========================================================== */

.footer-socials a,
.social-links a{
    border:
        1px solid rgba(0,200,255,.18) !important;

    background:
        rgba(255,255,255,.025) !important;

    color:#ddd !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

.footer-socials a:hover,
.social-links a:hover{
    color:#00e5ff !important;

    border-color:
        rgba(0,200,255,.55) !important;

    box-shadow:
        0 0 13px rgba(0,200,255,.13);
}


/* ==========================================================
   PAYMENT BADGES
   ========================================================== */

.payment-badges span,
.footer-payment-badges span{
    color:#d2d2d7 !important;

    background:
        rgba(255,255,255,.028) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:none !important;
}


/* ==========================================================
   NEON BUBBLES
   ========================================================== */

.site-footer::before,
.footer-rich::before{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    left:-55px;
    bottom:-60px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(117,234,255,.08),
            rgba(0,200,255,.025) 40%,
            transparent 68%
        );

    box-shadow:
        0 0 32px rgba(0,200,255,.09),
        inset 0 0 35px rgba(0,200,255,.035);

    pointer-events:none;
}


/* LOVE kanan */

.site-footer::after,
.footer-rich::after{
    content:"♡";

    position:absolute;

    right:4%;
    bottom:18px;

    z-index:1;

    color:
        rgba(0,229,255,.13);

    font-family:
        Arial,
        sans-serif;

    font-size:82px;

    line-height:1;

    transform:
        rotate(-12deg);

    text-shadow:
        0 0 10px rgba(0,200,255,.18),
        0 0 28px rgba(0,200,255,.11);

    pointer-events:none;
}


/* ==========================================================
   DESKTOP SPACING
   ========================================================== */

.footer-rich{
    padding-top:42px !important;
    padding-bottom:34px !important;
}

.footer-bottom{
    padding-top:17px !important;
    padding-bottom:17px !important;
}


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

@media(max-width:768px){

    .footer-rich{
        padding-top:30px !important;
        padding-bottom:25px !important;
    }

    .footer-rich-grid{
        gap:25px !important;
    }

    .footer-bottom{
        padding-top:15px !important;
        padding-bottom:15px !important;
    }


    .site-footer::before,
    .footer-rich::before{
        width:105px;
        height:105px;

        left:-43px;
        bottom:-35px;
    }


    .site-footer::after,
    .footer-rich::after{
        right:-4px;
        bottom:48px;

        font-size:58px;

        opacity:.8;
    }

}


/* ==========================================================
   HP KECIL
   ========================================================== */

@media(max-width:420px){

    .footer-rich{
        padding-top:26px !important;
    }

    .footer-brand-image{
        max-width:180px !important;
    }

}


/* CICI-FOOTER-NEON-V2-END */



/* ==========================================================
   CICI-NEON-ATMOSPHERE-V3
   Bubble kaca + Love Neon + compact spacing
   ========================================================== */


/* ==========================================================
   RAPATKAN FLASH SALE -> GAME POPULER
   DESKTOP + MOBILE
   ========================================================== */

.cici-flash-section{
    position:relative;
    overflow:hidden;

    padding-bottom:14px !important;

    background:
        radial-gradient(
            circle at 92% 22%,
            rgba(0,200,255,.075),
            transparent 190px
        ),
        radial-gradient(
            circle at 7% 68%,
            rgba(0,229,255,.045),
            transparent 160px
        ),
        #0d0d0d;
}


#games.section{
    position:relative;
    overflow:hidden;

    padding-top:18px !important;
    padding-bottom:46px !important;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(0,200,255,.045),
            transparent 190px
        ),
        radial-gradient(
            circle at 6% 78%,
            rgba(0,229,255,.045),
            transparent 170px
        ),
        #0d0d0d !important;
}


#games .section-head{
    margin-bottom:20px !important;
}


/* Isi harus berada di atas dekorasi */

.cici-flash-section > .container,
#games > .container{
    position:relative;
    z-index:3;
}


/* ==========================================================
   BUBBLE KACA - FLASH SALE
   ========================================================== */

.cici-flash-section::before{
    content:"";

    position:absolute;
    inset:0;

    width:auto !important;
    height:auto !important;

    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;

    border-radius:0 !important;

    filter:none !important;

    pointer-events:none;

    background:

        /* bubble kanan besar */
        radial-gradient(
            circle at 92% 44%,
            rgba(255,190,245,.20) 0 3px,
            rgba(0,200,255,.16) 4px,
            rgba(0,200,255,.045) 17px,
            rgba(0,200,255,.018) 36px,
            transparent 38px
        ),

        /* bubble kanan bawah */
        radial-gradient(
            circle at 84% 78%,
            rgba(117,234,255,.22) 0 2px,
            rgba(0,200,255,.15) 3px,
            rgba(0,200,255,.04) 13px,
            rgba(0,200,255,.015) 28px,
            transparent 30px
        ),

        /* bubble kiri */
        radial-gradient(
            circle at 3% 42%,
            rgba(255,190,245,.18) 0 2px,
            rgba(0,200,255,.13) 3px,
            rgba(0,200,255,.035) 14px,
            transparent 32px
        ),

        /* bubble kecil */
        radial-gradient(
            circle at 76% 17%,
            rgba(255,220,250,.20) 0 1px,
            rgba(0,200,255,.14) 2px,
            rgba(0,200,255,.025) 8px,
            transparent 11px
        ),

        /* partikel */
        radial-gradient(
            circle at 73% 70%,
            rgba(0,200,255,.50) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 96% 72%,
            rgba(0,200,255,.38) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 88% 10%,
            rgba(117,234,255,.42) 0 1px,
            transparent 2px
        ),

        transparent !important;

    opacity:1 !important;
}


/* ==========================================================
   LOVE NEON - FLASH SALE
   Satu glyph + text-shadow menghasilkan banyak love
   ========================================================== */

.cici-flash-section::after{
    content:"♡";

    position:absolute;

    left:1%;
    top:24%;

    z-index:1;

    color:rgba(0,200,255,.38);

    font-family:Arial,sans-serif;

    font-size:46px;
    line-height:1;

    transform:rotate(-12deg);

    text-shadow:

        76vw 30px 0 rgba(0,200,255,.30),

        82vw 150px 0 rgba(0,200,255,.22),

        64vw 225px 0 rgba(0,200,255,.25),

        8vw 205px 0 rgba(0,200,255,.18),

        91vw 280px 0 rgba(0,200,255,.20),

        3vw 315px 0 rgba(0,200,255,.22),

        76vw 30px 12px rgba(0,200,255,.20),

        64vw 225px 18px rgba(0,200,255,.14);

    filter:
        drop-shadow(
            0 0 8px
            rgba(0,200,255,.28)
        );

    pointer-events:none;
}


/* ==========================================================
   GAME POPULER — BUBBLE
   ========================================================== */

#games::after{
    content:"";

    position:absolute;

    inset:0;

    width:auto;
    height:auto;

    left:0;
    right:0;
    top:0;
    bottom:0;

    border:0;

    border-radius:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 96% 38%,
            rgba(255,210,248,.22) 0 3px,
            rgba(0,200,255,.14) 4px,
            rgba(0,200,255,.04) 15px,
            transparent 34px
        ),

        radial-gradient(
            circle at 4% 76%,
            rgba(255,195,245,.18) 0 3px,
            rgba(0,200,255,.12) 4px,
            rgba(0,200,255,.035) 18px,
            transparent 40px
        ),

        radial-gradient(
            circle at 85% 88%,
            rgba(255,190,245,.18) 0 2px,
            rgba(0,200,255,.11) 3px,
            rgba(0,200,255,.025) 14px,
            transparent 30px
        ),

        radial-gradient(
            circle at 13% 14%,
            rgba(117,234,255,.35) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 72% 66%,
            rgba(0,200,255,.42) 0 1px,
            transparent 2px
        ),

        transparent;

    box-shadow:none;
}


/* LOVE GAME POPULER */

#games::before{
    content:"♡";

    position:absolute;

    right:4%;
    top:14%;

    z-index:1;

    color:
        rgba(0,200,255,.32);

    font-family:
        Arial,
        sans-serif;

    font-size:54px;
    line-height:1;

    transform:
        rotate(11deg);

    text-shadow:

        -82vw 170px 0 rgba(0,200,255,.18),

        -16vw 210px 0 rgba(0,200,255,.22),

        -70vw 310px 0 rgba(0,200,255,.16),

        -5vw 320px 0 rgba(0,200,255,.18),

        -16vw 210px 14px rgba(0,200,255,.12);

    filter:
        drop-shadow(
            0 0 9px
            rgba(0,200,255,.25)
        );

    pointer-events:none;
}


/* ==========================================================
   FOOTER - BUBBLE / LOVE LEBIH KAYA
   ========================================================== */

.site-footer,
.footer-rich,
footer{
    position:relative;
}


/* Bubble footer */

.site-footer::before,
.footer-rich::before{
    content:"";

    position:absolute;

    left:-35px;
    bottom:-30px;

    width:145px;
    height:145px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle at 32% 25%,
            rgba(255,225,250,.22) 0 3px,
            rgba(0,200,255,.13) 5px,
            rgba(0,200,255,.05) 27px,
            transparent 68%
        );

    box-shadow:
        0 0 18px rgba(0,200,255,.14),
        0 0 48px rgba(0,200,255,.08),
        inset 0 0 28px rgba(0,200,255,.08);

    pointer-events:none;
}


/* Love footer */

.site-footer::after,
.footer-rich::after{
    content:"♡";

    position:absolute;

    right:4%;
    bottom:20px;

    color:
        rgba(0,200,255,.30);

    font-family:
        Arial,
        sans-serif;

    font-size:76px;

    line-height:1;

    transform:
        rotate(-12deg);

    text-shadow:

        -120px -75px 0 rgba(0,200,255,.14),

        -280px 15px 0 rgba(0,200,255,.16),

        0 0 16px rgba(0,200,255,.22);

    pointer-events:none;
}


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

@media(max-width:700px){

    .cici-flash-section{
        padding-top:18px !important;
        padding-bottom:8px !important;
    }


    #games.section{
        padding-top:10px !important;
        padding-bottom:28px !important;
    }


    #games .section-head{
        margin-bottom:14px !important;
    }


    /*
     * Bubble mobile dibuat lebih terlihat,
     * tapi tetap berada di pinggir.
     */

    .cici-flash-section::before{
        background:

            radial-gradient(
                circle at 96% 38%,
                rgba(255,215,250,.25) 0 2px,
                rgba(0,200,255,.17) 3px,
                rgba(0,200,255,.045) 13px,
                transparent 28px
            ),

            radial-gradient(
                circle at 5% 74%,
                rgba(255,200,246,.20) 0 2px,
                rgba(0,200,255,.13) 3px,
                rgba(0,200,255,.035) 14px,
                transparent 30px
            ),

            radial-gradient(
                circle at 88% 85%,
                rgba(0,200,255,.12) 0 2px,
                transparent 17px
            ),

            radial-gradient(
                circle at 92% 17%,
                rgba(0,200,255,.48) 0 1px,
                transparent 2px
            ),

            radial-gradient(
                circle at 8% 30%,
                rgba(0,200,255,.35) 0 1px,
                transparent 2px
            ),

            transparent !important;
    }


    .cici-flash-section::after{
        left:2%;
        top:30%;

        font-size:30px;

        text-shadow:

            79vw 40px 0 rgba(0,200,255,.30),

            72vw 180px 0 rgba(0,200,255,.24),

            7vw 240px 0 rgba(0,200,255,.18),

            82vw 325px 0 rgba(0,200,255,.20);

        opacity:.9;
    }


    #games::before{
        right:3%;
        top:6%;

        font-size:36px;

        text-shadow:

            -78vw 115px 0 rgba(0,200,255,.16),

            -15vw 210px 0 rgba(0,200,255,.20);
    }


    #games::after{
        background:

            radial-gradient(
                circle at 96% 62%,
                rgba(255,210,248,.20) 0 2px,
                rgba(0,200,255,.12) 3px,
                rgba(0,200,255,.035) 14px,
                transparent 28px
            ),

            radial-gradient(
                circle at 3% 85%,
                rgba(255,200,246,.18) 0 2px,
                rgba(0,200,255,.10) 3px,
                transparent 25px
            ),

            radial-gradient(
                circle at 85% 25%,
                rgba(0,200,255,.42) 0 1px,
                transparent 2px
            ),

            transparent;
    }

}


/* ==========================================================
   HP KECIL
   ========================================================== */

@media(max-width:420px){

    .cici-flash-section{
        padding-bottom:6px !important;
    }

    #games.section{
        padding-top:8px !important;
    }

}


/* CICI-NEON-ATMOSPHERE-V3-END */



/* ==========================================================
   CICI-FOOTER-NEON-V3-FINAL
   Hilangkan navy lama dan satukan footer dengan tema OMTOPUP
   ========================================================== */

.site-footer.site-footer-rich,
.site-footer-rich,
footer.site-footer{
    position:relative;

    background:
        radial-gradient(
            circle at 92% 76%,
            rgba(0,200,255,.045),
            transparent 240px
        ),
        radial-gradient(
            circle at 5% 88%,
            rgba(0,229,255,.035),
            transparent 210px
        ),
        linear-gradient(
            180deg,
            #0b0b0d 0%,
            #08090b 48%,
            #07080a 100%
        ) !important;

    border-top:
        1px solid rgba(0,200,255,.14) !important;

    color:#9da3ad !important;

    overflow:hidden;
}


/* Grid utama footer harus transparan.
   Background berasal dari footer induk. */

.site-footer-rich > .footer-rich-grid,
.site-footer-rich .footer-rich-grid{
    position:relative;
    z-index:3;

    background:transparent !important;
}


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

.site-footer-rich > .footer-bottom,
.site-footer-rich .footer-bottom,
.site-footer .footer-bottom,
.footer-bottom{
    position:relative;
    z-index:3;

    background:
        linear-gradient(
            180deg,
            rgba(4,4,6,.72),
            rgba(4,4,6,.94)
        ) !important;

    border-top:
        1px solid rgba(255,255,255,.065) !important;

    color:#89919f !important;
}


/* Jangan sampai container membawa warna background sendiri */

.site-footer-rich > .container,
.site-footer > .container{
    background-color:transparent;
}


/* ==========================================================
   WARNA TEKS FOOTER
   ========================================================== */

.site-footer-rich .footer-description{
    color:#9299a6 !important;
}

.site-footer-rich .footer-col h3,
.site-footer-rich .footer-app-title{
    color:#f4f4f6 !important;
}

.site-footer-rich .footer-col a,
.site-footer-rich .footer-bottom a,
.site-footer-rich .footer-bottom-links a{
    color:#939aa7 !important;
}

.site-footer-rich .footer-col a:hover,
.site-footer-rich .footer-bottom a:hover,
.site-footer-rich .footer-bottom-links a:hover{
    color:#00e5ff !important;
}


/* ==========================================================
   BADGE / SOCIAL
   ========================================================== */

.site-footer-rich .footer-socials a{
    background:
        rgba(255,255,255,.018) !important;

    border-color:
        rgba(0,200,255,.22) !important;
}

.site-footer-rich .payment-badges span{
    background:
        rgba(255,255,255,.025) !important;

    border-color:
        rgba(255,255,255,.12) !important;

    color:#ececf0 !important;
}

.site-footer-rich .store-badge{
    background:
        rgba(255,255,255,.018) !important;

    border-color:
        rgba(255,255,255,.13) !important;
}


/* ==========================================================
   DEKORASI V3 TETAP DI BELAKANG ISI
   ========================================================== */

.site-footer-rich::before,
.site-footer-rich::after{
    z-index:1;
}

.site-footer-rich .footer-rich-grid,
.site-footer-rich .footer-bottom{
    position:relative;
    z-index:3;
}


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

@media(max-width:700px){

    .site-footer.site-footer-rich,
    .site-footer-rich{
        background:
            radial-gradient(
                circle at 92% 82%,
                rgba(0,200,255,.06),
                transparent 150px
            ),
            radial-gradient(
                circle at 2% 35%,
                rgba(0,229,255,.035),
                transparent 130px
            ),
            linear-gradient(
                180deg,
                #0b0b0d 0%,
                #08090b 52%,
                #07080a 100%
            ) !important;
    }


    .site-footer-rich .footer-bottom{
        background:
            rgba(4,4,6,.88) !important;
    }

}


/* CICI-FOOTER-NEON-V3-FINAL-END */




/* ==========================================================
   CICI-BANNER-ATMOSPHERE-V4
   Bubble Glass + Neon Love
   HANYA DEKORASI - TIDAK MENGUBAH RASIO BANNER
   ========================================================== */

.cici-banner-section{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/*
 * Glow atmosfer besar di belakang banner.
 */
.cici-banner-section::before{
    content:"";
    position:absolute;
    z-index:0;

    width:760px;
    height:330px;

    left:50%;
    top:48%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.115) 0%,
            rgba(0,200,255,.055) 35%,
            rgba(0,200,255,.018) 56%,
            transparent 74%
        );

    filter:blur(26px);
}


/*
 * Bubble kaca besar sisi kanan.
 */
.cici-banner-section::after{
    content:"";
    position:absolute;
    z-index:0;

    width:185px;
    height:185px;

    right:-54px;
    top:10%;

    pointer-events:none;

    border:
        1px solid rgba(117,234,255,.17);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 31% 27%,
            rgba(255,255,255,.13) 0 5%,
            rgba(117,234,255,.055) 17%,
            rgba(0,200,255,.018) 52%,
            transparent 72%
        );

    box-shadow:
        inset 16px 14px 35px rgba(255,255,255,.018),
        inset -16px -15px 36px rgba(0,200,255,.035),
        0 0 42px rgba(0,200,255,.065);

    filter:
        drop-shadow(
            0 0 18px rgba(0,200,255,.06)
        );
}


/*
 * Container banner menjadi layer dekoratif.
 */
.cici-banner-section > .container{
    position:relative;
    z-index:2;
}


/*
 * Kumpulan bubble kecil kiri.
 */
.cici-banner-section > .container::before{
    content:"";
    position:absolute;
    z-index:-1;

    left:-34px;
    top:7%;

    width:180px;
    height:250px;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 24px 39px,
            rgba(255,255,255,.08) 0 3px,
            rgba(0,200,255,.12) 4px,
            rgba(0,200,255,.035) 15px,
            transparent 17px
        ),
        radial-gradient(
            circle at 78px 112px,
            rgba(255,255,255,.07) 0 4px,
            rgba(0,229,255,.11) 5px,
            rgba(0,200,255,.025) 25px,
            transparent 27px
        ),
        radial-gradient(
            circle at 35px 202px,
            rgba(255,255,255,.05) 0 3px,
            rgba(117,234,255,.09) 4px,
            rgba(0,200,255,.018) 19px,
            transparent 21px
        ),
        radial-gradient(
            circle at 131px 49px,
            rgba(255,255,255,.06) 0 2px,
            rgba(0,200,255,.1) 3px,
            rgba(0,200,255,.02) 12px,
            transparent 14px
        );

    opacity:.9;

    filter:
        drop-shadow(
            0 0 10px rgba(0,200,255,.17)
        );
}


/*
 * Heart outline neon di sekitar banner.
 * Satu glyph + text-shadow = beberapa love,
 * sangat ringan dibanding memakai banyak gambar.
 */
.cici-banner-section > .container::after{
    content:"♡";
    position:absolute;
    z-index:-1;

    right:28px;
    top:-27px;

    pointer-events:none;

    color:rgba(0,229,255,.36);

    font-family:
        Arial,
        sans-serif;

    font-size:42px;
    font-weight:400;
    line-height:1;

    transform:
        rotate(10deg);

    text-shadow:
        -960px 118px 0 rgba(0,200,255,.19),
        -870px 260px 0 rgba(117,234,255,.14),
        -730px -3px 0 rgba(0,229,255,.18),
        -530px 287px 0 rgba(0,200,255,.13),
        -320px 18px 0 rgba(117,234,255,.17),
        -105px 304px 0 rgba(0,200,255,.14),
        36px 178px 0 rgba(0,229,255,.21);

    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.28)
        );
}


/*
 * Banner slider tetap di atas seluruh dekorasi.
 */
.cici-banner-slider{
    position:relative;
    z-index:3;
}


/*
 * Bubble highlight kecil di kanan atas banner.
 */
.cici-banner-slider::before{
    content:"";
    position:absolute;
    z-index:8;

    width:54px;
    height:54px;

    right:-22px;
    top:-19px;

    pointer-events:none;

    border:
        1px solid rgba(117,234,255,.2);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 26%,
            rgba(255,255,255,.17),
            rgba(117,234,255,.055) 30%,
            rgba(0,200,255,.018) 60%,
            transparent 72%
        );

    box-shadow:
        inset 5px 5px 12px rgba(255,255,255,.025),
        0 0 21px rgba(0,200,255,.09);
}


/*
 * Heart kecil menempel lembut di sisi kiri bawah.
 */
.cici-banner-slider::after{
    content:"♡";
    position:absolute;
    z-index:8;

    left:-25px;
    bottom:12%;

    pointer-events:none;

    color:rgba(0,229,255,.28);

    font-size:31px;
    line-height:1;

    transform:
        rotate(-13deg);

    text-shadow:
        8px 4px 12px rgba(0,200,255,.12);

    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.23)
        );
}


/*
 * Efek glass edge sangat tipis tanpa mengubah image/crop.
 */
.cici-banner-slider{
    box-shadow:
        0 18px 48px rgba(0,0,0,.28),
        0 0 0 1px rgba(0,200,255,.04),
        0 0 34px rgba(0,200,255,.045);
}


/*
 * Sedikit atmosfer menuju Flash Sale,
 * supaya banner tidak terasa berdiri sendiri.
 */
.cici-banner-section + .cici-flash-section{
    position:relative;
}

.cici-banner-section + .cici-flash-section::after{
    content:"";
    position:absolute;

    width:170px;
    height:170px;

    right:4%;
    top:-72px;

    pointer-events:none;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.045),
            rgba(0,200,255,.025) 32%,
            transparent 67%
        );

    opacity:.72;
}


/* ==========================================================
   DESKTOP BESAR
   ========================================================== */

@media(min-width:1200px){

    .cici-banner-section > .container::after{
        right:52px;

        text-shadow:
            -1090px 105px 0 rgba(0,200,255,.2),
            -985px 285px 0 rgba(117,234,255,.14),
            -810px -5px 0 rgba(0,229,255,.19),
            -610px 297px 0 rgba(0,200,255,.14),
            -375px 14px 0 rgba(117,234,255,.18),
            -128px 305px 0 rgba(0,200,255,.14),
            52px 184px 0 rgba(0,229,255,.2);
    }

}


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

@media(max-width:900px){

    .cici-banner-section::after{
        width:125px;
        height:125px;

        right:-53px;
    }

    .cici-banner-section > .container::before{
        left:-65px;

        opacity:.65;
    }

    .cici-banner-section > .container::after{
        right:20px;

        font-size:31px;

        opacity:.72;

        text-shadow:
            -620px 90px 0 rgba(0,200,255,.16),
            -420px 227px 0 rgba(117,234,255,.13),
            -190px 15px 0 rgba(0,229,255,.16),
            12px 170px 0 rgba(0,200,255,.15);
    }

}


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

@media(max-width:640px){

    .cici-banner-section{
        overflow:hidden;
    }

    .cici-banner-section::before{
        width:410px;
        height:200px;

        top:50%;

        opacity:.78;
    }

    .cici-banner-section::after{
        width:82px;
        height:82px;

        right:-42px;
        top:7%;

        opacity:.72;
    }

    .cici-banner-section > .container::before{
        width:105px;
        height:175px;

        left:-57px;
        top:5%;

        opacity:.56;

        background:
            radial-gradient(
                circle at 30px 38px,
                rgba(255,255,255,.07) 0 2px,
                rgba(0,200,255,.1) 3px,
                rgba(0,200,255,.025) 13px,
                transparent 15px
            ),
            radial-gradient(
                circle at 72px 123px,
                rgba(255,255,255,.05) 0 3px,
                rgba(0,229,255,.08) 4px,
                rgba(0,200,255,.02) 17px,
                transparent 19px
            );
    }

    .cici-banner-section > .container::after{
        right:16px;
        top:-16px;

        font-size:25px;

        opacity:.68;

        text-shadow:
            -290px 91px 0 rgba(0,200,255,.16),
            -146px 185px 0 rgba(117,234,255,.13),
            5px 140px 0 rgba(0,229,255,.17);
    }

    .cici-banner-slider::before{
        width:38px;
        height:38px;

        right:-16px;
        top:-14px;

        opacity:.8;
    }

    .cici-banner-slider::after{
        left:-14px;

        font-size:22px;

        opacity:.7;
    }

    .cici-banner-section
    + .cici-flash-section::after{
        width:105px;
        height:105px;

        right:-38px;
        top:-42px;
    }

}


/* ==========================================================
   REDUCED MOTION / PERFORMANCE
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    .cici-banner-section *,
    .cici-banner-section::before,
    .cici-banner-section::after{
        animation:none !important;
    }

}

/* CICI-BANNER-ATMOSPHERE-V4-END */




/* ==========================================================
   CICI-HOME-ATMOSPHERE-V5
   Flash Sale + Game Populer
   Visual only
   ========================================================== */


/* ==========================================================
   FLASH SALE ATMOSPHERE
   ========================================================== */

.cici-flash-section{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/*
 * Pink ambient glow di belakang Flash Sale.
 */
.cici-flash-section::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:620px !important;
    height:310px !important;

    left:-180px !important;
    top:12% !important;

    pointer-events:none !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.095) 0%,
            rgba(0,200,255,.04) 36%,
            rgba(0,200,255,.012) 58%,
            transparent 74%
        ) !important;

    filter:blur(28px) !important;
    opacity:1 !important;
}


/*
 * Bubble kaca besar kanan Flash Sale.
 */
.cici-flash-section::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:190px !important;
    height:190px !important;

    right:3.5% !important;
    top:19% !important;

    pointer-events:none !important;

    border:
        1px solid rgba(117,234,255,.13) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 31% 27%,
            rgba(255,255,255,.12) 0 4%,
            rgba(117,234,255,.045) 15%,
            rgba(0,200,255,.017) 46%,
            transparent 70%
        ) !important;

    box-shadow:
        inset 14px 12px 32px
            rgba(255,255,255,.018),
        inset -16px -15px 35px
            rgba(0,200,255,.025),
        0 0 44px
            rgba(0,200,255,.055) !important;

    filter:
        drop-shadow(
            0 0 18px rgba(0,200,255,.08)
        ) !important;

    opacity:.9 !important;
}


.cici-flash-section > .container{
    position:relative;
    z-index:2;
}


/*
 * Heart neon dekat judul Flash Sale.
 */
.cici-flash-head{
    position:relative;
    z-index:3;
}

.cici-flash-head::before{
    content:"♡";
    position:absolute;

    left:-47px;
    top:5px;

    pointer-events:none;

    color:rgba(0,229,255,.31);

    font-family:Arial,sans-serif;
    font-size:35px;
    font-weight:400;
    line-height:1;

    transform:rotate(-13deg);

    text-shadow:
        11px 5px 17px
            rgba(0,200,255,.16);

    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.25)
        );
}


/*
 * Bubble kecil tersebar di area kanan.
 */
.cici-flash-head::after{
    content:"";
    position:absolute;

    right:-28px;
    top:-15px;

    width:145px;
    height:100px;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 22px 25px,
            rgba(255,255,255,.08) 0 2px,
            rgba(0,200,255,.16) 3px,
            rgba(0,200,255,.035) 11px,
            transparent 13px
        ),
        radial-gradient(
            circle at 91px 66px,
            rgba(255,255,255,.055) 0 3px,
            rgba(117,234,255,.12) 4px,
            rgba(0,200,255,.025) 17px,
            transparent 19px
        ),
        radial-gradient(
            circle at 132px 19px,
            rgba(255,255,255,.07) 0 2px,
            rgba(0,229,255,.11) 3px,
            rgba(0,200,255,.02) 9px,
            transparent 11px
        );

    opacity:.8;

    filter:
        drop-shadow(
            0 0 8px rgba(0,200,255,.15)
        );
}


/*
 * Kartu Flash Sale mendapat edge glow lembut.
 * Tidak mengubah ukuran kartu.
 */
.cici-flash-card{
    position:relative;
    z-index:2;

    box-shadow:
        0 15px 34px rgba(0,0,0,.28),
        0 0 0 1px rgba(0,200,255,.025),
        0 0 20px rgba(0,200,255,.025) !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.cici-flash-card:hover{
    transform:translateY(-3px) !important;

    box-shadow:
        0 20px 42px rgba(0,0,0,.34),
        0 0 0 1px rgba(0,200,255,.11),
        0 0 27px rgba(0,200,255,.09) !important;
}


/*
 * Glow lembut pada visual produk.
 */
.cici-flash-visual{
    position:relative;
}

.cici-flash-visual::after{
    content:"";
    position:absolute;

    width:75px;
    height:75px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.11),
            rgba(0,200,255,.035) 42%,
            transparent 72%
        );

    filter:blur(9px);
}


/* ==========================================================
   GAME POPULER ATMOSPHERE
   ========================================================== */

#games{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/*
 * Glow besar kanan Game Populer.
 */
#games::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:540px !important;
    height:330px !important;

    right:-190px !important;
    top:8% !important;
    left:auto !important;

    pointer-events:none !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.09) 0%,
            rgba(0,200,255,.038) 37%,
            rgba(0,200,255,.012) 57%,
            transparent 74%
        ) !important;

    filter:blur(30px) !important;
    opacity:1 !important;
}


/*
 * Bubble kaca kiri bawah Game Populer.
 */
#games::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:155px !important;
    height:155px !important;

    left:2.5% !important;
    bottom:-35px !important;
    top:auto !important;
    right:auto !important;

    pointer-events:none !important;

    border:
        1px solid rgba(117,234,255,.12) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 30% 27%,
            rgba(255,255,255,.105) 0 4%,
            rgba(117,234,255,.04) 16%,
            rgba(0,200,255,.014) 49%,
            transparent 71%
        ) !important;

    box-shadow:
        inset 13px 11px 29px
            rgba(255,255,255,.015),
        0 0 39px
            rgba(0,200,255,.05) !important;

    opacity:.85 !important;
}


#games > .container{
    position:relative;
    z-index:2;
}


/*
 * Love + bubbles dekat heading Game Populer.
 */
#games .section-head{
    position:relative;
    z-index:3;
}


#games .section-head::before{
    content:"♡";
    position:absolute;

    left:13px;
    top:-35px;

    pointer-events:none;

    color:rgba(0,229,255,.27);

    font-family:Arial,sans-serif;
    font-size:34px;
    line-height:1;

    transform:rotate(12deg);

    text-shadow:
        820px 44px 0 rgba(0,200,255,.14),
        1010px -9px 0 rgba(117,234,255,.17);

    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.22)
        );
}


#games .section-head::after{
    content:"";
    position:absolute;

    right:15%;
    top:-31px;

    width:115px;
    height:72px;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 18px 19px,
            rgba(255,255,255,.07) 0 2px,
            rgba(0,200,255,.13) 3px,
            rgba(0,200,255,.025) 10px,
            transparent 12px
        ),
        radial-gradient(
            circle at 82px 51px,
            rgba(255,255,255,.05) 0 2px,
            rgba(117,234,255,.1) 3px,
            rgba(0,200,255,.02) 13px,
            transparent 15px
        );

    opacity:.78;
}


/*
 * Game cards dibuat lebih luminous tanpa mengubah layout.
 */
#games .game-card{
    position:relative;
    z-index:2;

    box-shadow:
        0 15px 34px rgba(0,0,0,.25),
        0 0 0 1px rgba(0,200,255,.02),
        0 0 18px rgba(0,200,255,.018);

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


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

    box-shadow:
        0 20px 42px rgba(0,0,0,.34),
        0 0 0 1px rgba(0,200,255,.1),
        0 0 27px rgba(0,200,255,.075);
}


/*
 * Subtle glow di cover game.
 */
#games .game-cover{
    position:relative;
    overflow:hidden;
}


#games .game-cover::after{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0,200,255,.045),
            transparent 65%
        );
}


/* ==========================================================
   JEMBATAN VISUAL FLASH SALE -> GAME POPULER
   ========================================================== */

.cici-flash-section + #games{
    margin-top:0 !important;
}


/*
 * Bubble mini di antara kedua section.
 */
.cici-flash-section + #games > .container::before{
    content:"";
    position:absolute;

    right:5%;
    top:-24px;

    width:42px;
    height:42px;

    pointer-events:none;

    border:
        1px solid rgba(117,234,255,.14);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 31% 28%,
            rgba(255,255,255,.12),
            rgba(0,200,255,.025) 45%,
            transparent 72%
        );

    box-shadow:
        0 0 20px rgba(0,200,255,.06);
}


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

@media(max-width:900px){

    .cici-flash-section::after{
        width:130px !important;
        height:130px !important;

        right:-45px !important;

        opacity:.68 !important;
    }


    .cici-flash-head::before{
        left:-18px;

        font-size:27px;

        opacity:.65;
    }


    .cici-flash-head::after{
        right:-45px;

        opacity:.55;
    }


    #games::after{
        width:110px !important;
        height:110px !important;

        left:-38px !important;

        opacity:.65 !important;
    }


    #games .section-head::before{
        font-size:27px;

        opacity:.62;

        text-shadow:
            510px 38px 0
                rgba(0,200,255,.13);
    }

}


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

@media(max-width:640px){

    .cici-flash-section::before{
        width:330px !important;
        height:220px !important;

        left:-165px !important;

        opacity:.75 !important;
    }


    .cici-flash-section::after{
        width:82px !important;
        height:82px !important;

        right:-37px !important;
        top:16% !important;

        opacity:.58 !important;
    }


    .cici-flash-head::before{
        left:-8px;
        top:-15px;

        font-size:23px;

        opacity:.58;
    }


    .cici-flash-head::after{
        display:none;
    }


    .cici-flash-card:hover{
        transform:none !important;
    }


    #games::before{
        width:310px !important;
        height:230px !important;

        right:-175px !important;

        opacity:.7 !important;
    }


    #games::after{
        width:72px !important;
        height:72px !important;

        left:-31px !important;
        bottom:5% !important;

        opacity:.55 !important;
    }


    #games .section-head::before{
        left:6px;
        top:-23px;

        font-size:21px;

        opacity:.55;

        text-shadow:
            270px 27px 0
                rgba(0,200,255,.12);
    }


    #games .section-head::after{
        display:none;
    }


    #games .game-card:hover{
        transform:none;
    }


    .cici-flash-section
    + #games > .container::before{
        width:28px;
        height:28px;

        right:4%;
        top:-13px;

        opacity:.6;
    }

}


/* ==========================================================
   PERFORMANCE
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    .cici-flash-card,
    #games .game-card{
        transition:none !important;
    }

}

/* CICI-HOME-ATMOSPHERE-V5-END */




/* ==========================================================
   CICI-HOME-ATMOSPHERE-V6
   Hero + Kenapa OMTOPUP
   FINAL HOMEPAGE ATMOSPHERE
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

.hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/*
 * Ambient neon di belakang headline.
 */
.hero::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:760px !important;
    height:390px !important;

    left:50% !important;
    top:48% !important;

    transform:
        translate(-50%,-50%) !important;

    pointer-events:none !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.105) 0%,
            rgba(0,200,255,.048) 32%,
            rgba(0,200,255,.014) 56%,
            transparent 73%
        ) !important;

    filter:blur(35px) !important;
    opacity:1 !important;
}


/*
 * Bubble kaca besar kanan Hero.
 */
.hero::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    width:210px !important;
    height:210px !important;

    right:-64px !important;
    top:13% !important;
    left:auto !important;
    bottom:auto !important;

    pointer-events:none !important;

    border:
        1px solid rgba(117,234,255,.13) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 30% 26%,
            rgba(255,255,255,.11) 0 4%,
            rgba(117,234,255,.04) 16%,
            rgba(0,200,255,.014) 48%,
            transparent 71%
        ) !important;

    box-shadow:
        inset 15px 13px 34px
            rgba(255,255,255,.016),
        inset -16px -16px 37px
            rgba(0,200,255,.025),
        0 0 48px
            rgba(0,200,255,.055) !important;

    filter:none !important;
    opacity:.85 !important;
}


.hero-inner{
    position:relative;
    z-index:2;
}


/*
 * Love kiri headline.
 */
.hero-inner::before{
    content:"♡";
    position:absolute;

    left:7%;
    top:11%;

    pointer-events:none;

    color:rgba(0,229,255,.24);

    font-family:Arial,sans-serif;
    font-size:45px;
    font-weight:400;
    line-height:1;

    transform:rotate(-14deg);

    text-shadow:
        820px 118px 0 rgba(0,200,255,.13);

    filter:
        drop-shadow(
            0 0 8px rgba(0,200,255,.2)
        );
}


/*
 * Bubble mini hero.
 */
.hero-inner::after{
    content:"";
    position:absolute;

    left:10%;
    bottom:4%;

    width:155px;
    height:100px;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 24px 29px,
            rgba(255,255,255,.075) 0 2px,
            rgba(0,200,255,.13) 3px,
            rgba(0,200,255,.025) 11px,
            transparent 13px
        ),
        radial-gradient(
            circle at 106px 67px,
            rgba(255,255,255,.055) 0 3px,
            rgba(117,234,255,.1) 4px,
            rgba(0,200,255,.018) 17px,
            transparent 19px
        );

    opacity:.68;

    filter:
        drop-shadow(
            0 0 8px rgba(0,200,255,.13)
        );
}


.hero-copy{
    position:relative;
    z-index:3;
}


/*
 * Headline pink sedikit lebih luminous.
 */
.hero h1 span{
    text-shadow:
        0 0 20px rgba(0,200,255,.12),
        0 0 42px rgba(0,200,255,.055);
}


/*
 * Tombol utama lebih menyatu dengan atmosphere.
 */
.hero .btn-primary{
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 7px 24px rgba(0,200,255,.2),
        0 0 28px rgba(0,200,255,.11);
}


/* ==========================================================
   KENAPA OMTOPUP
   ========================================================== */

.section-alt{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/*
 * Glow lembut dari kiri bawah.
 */
.section-alt::before{
    content:"";
    position:absolute;
    z-index:0;

    width:520px;
    height:310px;

    left:-210px;
    bottom:-115px;

    pointer-events:none;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.075),
            rgba(0,200,255,.025) 40%,
            transparent 72%
        );

    filter:blur(30px);
}


/*
 * Bubble kaca kecil kanan.
 */
.section-alt::after{
    content:"";
    position:absolute;
    z-index:0;

    width:135px;
    height:135px;

    right:3%;
    top:15%;

    pointer-events:none;

    border:
        1px solid rgba(117,234,255,.11);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 31% 28%,
            rgba(255,255,255,.09) 0 4%,
            rgba(117,234,255,.032) 18%,
            rgba(0,200,255,.012) 48%,
            transparent 70%
        );

    box-shadow:
        inset 11px 10px 25px
            rgba(255,255,255,.014),
        0 0 34px
            rgba(0,200,255,.045);

    opacity:.8;
}


.section-alt > .container{
    position:relative;
    z-index:2;
}


/*
 * Love dekoratif di heading.
 */
.section-alt .section-head{
    position:relative;
    z-index:3;
}


.section-alt .section-head::before{
    content:"♡";
    position:absolute;

    left:14%;
    top:-27px;

    pointer-events:none;

    color:rgba(0,229,255,.22);

    font-family:Arial,sans-serif;
    font-size:31px;
    line-height:1;

    transform:rotate(-10deg);

    text-shadow:
        760px 16px 0 rgba(117,234,255,.13);

    filter:
        drop-shadow(
            0 0 7px rgba(0,200,255,.18)
        );
}


/*
 * Tiga feature card.
 */
.feature-grid{
    position:relative;
    z-index:3;
}


.feature-card{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(23,23,26,.97),
            rgba(13,13,15,.99)
        ) !important;

    border:
        1px solid rgba(255,255,255,.095) !important;

    box-shadow:
        0 18px 38px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.015);

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


/*
 * Glass highlight kecil di sudut card.
 */
.feature-card::before{
    content:"";
    position:absolute;

    width:105px;
    height:105px;

    right:-43px;
    top:-47px;

    pointer-events:none;

    border-radius:50%;

    background:
        radial-gradient(
            circle at center,
            rgba(0,200,255,.075),
            rgba(0,200,255,.018) 45%,
            transparent 70%
        );
}


.feature-card::after{
    content:"";
    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:2px;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,200,255,.55),
            transparent
        );

    opacity:.45;
}


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

    border-color:
        rgba(0,200,255,.3) !important;

    box-shadow:
        0 22px 46px rgba(0,0,0,.32),
        0 0 25px rgba(0,200,255,.055),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.feature-card h3{
    color:#00e5ff !important;

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


/*
 * Bubble/love kecil di bawah feature grid.
 */
.feature-grid::after{
    content:"♡";
    position:absolute;

    right:-27px;
    bottom:-57px;

    pointer-events:none;

    color:rgba(0,229,255,.19);

    font-family:Arial,sans-serif;
    font-size:41px;
    line-height:1;

    transform:rotate(13deg);

    text-shadow:
        -980px -18px 0 rgba(0,200,255,.1);

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


/* ==========================================================
   TRANSISI MENUJU FOOTER
   ========================================================== */

.section-alt + .footer,
.section-alt + footer{
    position:relative;
}


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

@media(max-width:900px){

    .hero::after{
        width:140px !important;
        height:140px !important;

        right:-55px !important;

        opacity:.65 !important;
    }


    .hero-inner::before{
        left:3%;

        font-size:31px;

        opacity:.62;

        text-shadow:
            570px 105px 0
                rgba(0,200,255,.11);
    }


    .section-alt::after{
        width:95px;
        height:95px;

        right:-31px;

        opacity:.62;
    }


    .section-alt .section-head::before{
        left:5%;

        opacity:.6;

        text-shadow:
            520px 13px 0
                rgba(117,234,255,.11);
    }

}


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

@media(max-width:640px){

    .hero::before{
        width:390px !important;
        height:270px !important;

        opacity:.78 !important;
    }


    .hero::after{
        width:82px !important;
        height:82px !important;

        right:-37px !important;
        top:12% !important;

        opacity:.55 !important;
    }


    .hero-inner::before{
        left:2%;
        top:5%;

        font-size:23px;

        opacity:.5;

        text-shadow:
            285px 118px 0
                rgba(0,200,255,.1);
    }


    .hero-inner::after{
        width:90px;
        height:70px;

        left:-30px;

        opacity:.48;
    }


    .section-alt::before{
        width:310px;
        height:230px;

        left:-180px;

        opacity:.68;
    }


    .section-alt::after{
        width:68px;
        height:68px;

        right:-30px;
        top:8%;

        opacity:.5;
    }


    .section-alt .section-head::before{
        left:1%;

        font-size:22px;

        opacity:.5;

        text-shadow:
            280px 13px 0
                rgba(117,234,255,.1);
    }


    .feature-card:hover{
        transform:none;
    }


    .feature-grid::after{
        right:-8px;
        bottom:-37px;

        font-size:27px;

        opacity:.6;

        text-shadow:none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    .feature-card{
        transition:none !important;
    }

}

/* CICI-HOME-ATMOSPHERE-V6-END */




/* =========================================================
   CICI-MEMBER-THEME-V1
   Unified Member Area — Black + Neon Pink
   ========================================================= */

/* ---------- MEMBER PAGE BACKGROUND ---------- */

body:has(.member-dashboard),
body:has(.profile-grid),
body:has(.deposit-layout),
body:has(.deposit-list),
body:has(.orders-toolbar) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0,229,255,.035),
            transparent 28%
        ),
        #070708 !important;
}


/* ---------- GENERIC MEMBER HERO ---------- */

.page-hero {
    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(0,200,255,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #0c090d 0%,
            #09090a 100%
        ) !important;

    border-bottom:
        1px solid rgba(0,200,255,.16) !important;
}

.page-hero .hero-badge {
    color:#00e5ff !important;
}

.page-hero h1 {
    color:#fff !important;
}

.page-hero p {
    color:#aaa5af !important;
}


/* =========================================================
   MEMBER DASHBOARD
   ========================================================= */

.member-dashboard,
.member-area,
.member-page {
    background:transparent !important;
}

.member-dashboard .member-card,
.member-card,
.profile-card,
.wallet-card,
.deposit-card,
.account-box {
    background:
        linear-gradient(
            145deg,
            rgba(20,18,22,.96),
            rgba(10,10,11,.98)
        ) !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.member-card:hover,
.profile-card:hover,
.wallet-card:hover,
.deposit-card:hover {
    border-color:
        rgba(0,200,255,.48) !important;

    box-shadow:
        0 0 24px rgba(0,200,255,.08),
        0 20px 45px rgba(0,0,0,.30) !important;
}

.member-card h2,
.member-card h3,
.profile-card h2,
.profile-card h3,
.wallet-card h2,
.wallet-card h3,
.deposit-card h2,
.deposit-card h3 {
    color:#fff !important;
}

.member-card p,
.profile-card p,
.wallet-card p,
.deposit-card p {
    color:#aaa5af !important;
}


/* ---------- MEMBER BUTTONS ---------- */

.member-btn-primary,
.deposit-submit,
.orders-shop-btn {
    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #00e5ff,
            #75eaff
        ) !important;

    border-color:
        transparent !important;

    color:#fff !important;

    box-shadow:
        0 0 18px rgba(0,200,255,.18) !important;
}

.member-btn-primary:hover,
.deposit-submit:hover,
.orders-shop-btn:hover {
    filter:brightness(1.08);

    box-shadow:
        0 0 26px rgba(0,200,255,.30) !important;

    transform:translateY(-1px);
}

.member-btn-secondary,
.deposit-back,
.orders-back-btn {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.32) !important;

    color:#f6dff1 !important;
}

.member-btn-secondary:hover,
.deposit-back:hover,
.orders-back-btn:hover {
    background:
        rgba(0,200,255,.07) !important;

    border-color:#00c8ff !important;

    color:#fff !important;
}


/* =========================================================
   PROFILE MEMBER
   ========================================================= */

.profile-grid > *,
.profile-info-card {
    background:
        linear-gradient(
            145deg,
            #141216,
            #0d0d0f
        ) !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.22) !important;
}

.profile-grid h3,
.profile-grid strong,
.profile-info-card h3 {
    color:#00e5ff !important;
}

.profile-grid p,
.profile-grid span {
    color:#b6b0ba;
}


/* WhatsApp/profile information panel */

.profile-whatsapp,
.whatsapp-card,
.whatsapp-panel {
    background:
        linear-gradient(
            135deg,
            #151216,
            #0c0c0e
        ) !important;

    border:
        1px solid rgba(0,200,255,.24) !important;
}


/* =========================================================
   DEPOSIT MEMBER
   ========================================================= */

.deposit-layout {
    color:#fff;
}


/* Main deposit panels */

.deposit-panel {
    background:
        linear-gradient(
            145deg,
            #151216 0%,
            #0d0d0f 100%
        ) !important;

    border:
        1px solid rgba(0,200,255,.22) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.deposit-panel h2 {
    color:#fff !important;
}

.deposit-panel p {
    color:#aaa5af !important;
}


/* Step number */

.deposit-step {
    color:#00e5ff !important;

    text-shadow:
        0 0 15px rgba(0,200,255,.35);
}


/* Amount input */

.deposit-input {
    background:#09090a !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    color:#fff !important;
}

.deposit-input::placeholder {
    color:#6f6971 !important;
}

.deposit-input:focus {
    border-color:#00c8ff !important;

    box-shadow:
        0 0 0 3px rgba(0,200,255,.08),
        0 0 18px rgba(0,200,255,.06) !important;
}


/* Quick amount */

.quick-amounts button {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    color:#ded8df !important;
}

.quick-amounts button:hover {
    background:
        rgba(0,200,255,.08) !important;

    border-color:#00c8ff !important;

    color:#fff !important;

    box-shadow:
        0 0 15px rgba(0,200,255,.08);
}


/* Payment filter tabs */

.payment-tab {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.18) !important;

    color:#aaa5af !important;
}

.payment-tab:hover {
    border-color:
        rgba(0,200,255,.55) !important;

    color:#fff !important;
}

.payment-tab.active {
    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #00e5ff
        ) !important;

    border-color:
        transparent !important;

    color:#fff !important;

    box-shadow:
        0 0 20px rgba(0,200,255,.20) !important;
}


/* Payment cards */

.payment-card {
    background:
        linear-gradient(
            145deg,
            #151216,
            #0d0d0f
        ) !important;

    border:
        1px solid rgba(0,200,255,.18) !important;

    color:#fff !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.payment-card:hover {
    border-color:
        rgba(0,200,255,.55) !important;

    background:#171218 !important;

    box-shadow:
        0 0 20px rgba(0,200,255,.08),
        0 15px 35px rgba(0,0,0,.24) !important;
}

.payment-card.selected {
    background:
        linear-gradient(
            145deg,
            rgba(0,200,255,.10),
            #111013
        ) !important;

    border:
        2px solid #00c8ff !important;

    box-shadow:
        0 0 0 2px rgba(0,200,255,.07),
        0 0 25px rgba(0,200,255,.14) !important;
}

.payment-logo {
    color:#fff !important;
}

.payment-name {
    color:#fff !important;
}

.payment-fee {
    color:#aaa5af !important;
}

.payment-check {
    background:
        linear-gradient(
            135deg,
            #00c8ff,
            #75eaff
        ) !important;

    color:#fff !important;

    box-shadow:
        0 0 15px rgba(0,200,255,.30);
}


/* =========================================================
   DEPOSIT HISTORY
   ========================================================= */

.deposit-toolbar h2 {
    color:#fff !important;
}

.deposit-toolbar p {
    color:#aaa5af !important;
}

.deposit-row {
    background:
        linear-gradient(
            145deg,
            #151216,
            #0d0d0f
        ) !important;

    border:
        1px solid rgba(0,200,255,.18) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.deposit-row:hover {
    border-color:
        rgba(0,200,255,.38) !important;
}

.deposit-label {
    color:#928b95 !important;
}


/* =========================================================
   ORDERS
   ========================================================= */

.orders-search {
    background:#0d0d0f !important;

    border:
        1px solid rgba(0,200,255,.20) !important;
}

.orders-search:focus-within {
    border-color:#00c8ff !important;

    box-shadow:
        0 0 0 3px rgba(0,200,255,.07) !important;
}

.orders-search span {
    color:#00e5ff !important;
}

.orders-search input {
    color:#fff !important;
}

.order-filter {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    color:#aaa5af !important;
}

.order-filter:hover {
    border-color:#00c8ff !important;
    color:#fff !important;
}

.order-filter.active {
    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #00e5ff
        ) !important;

    border-color:
        transparent !important;

    color:#fff !important;

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

.orders-sort {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    color:#fff !important;
}

.orders-panel {
    background:#0e0d0f !important;

    border:
        1px solid rgba(0,200,255,.18) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.24);
}

.orders-table-head {
    background:#151216 !important;
    color:#928b95 !important;
}

.order-row {
    color:#ddd7df !important;

    border-top:
        1px solid rgba(0,200,255,.10) !important;
}

.order-row:hover {
    background:
        rgba(0,200,255,.045) !important;
}

.order-number {
    color:#00e5ff !important;
}


/* =========================================================
   MEMBER NAVIGATION
   ========================================================= */

.member-sidebar,
.member-nav,
.member-menu {
    background:#0d0d0f !important;

    border-color:
        rgba(0,200,255,.18) !important;
}

.member-sidebar a,
.member-nav a,
.member-menu a {
    color:#bdb7c0 !important;
}

.member-sidebar a:hover,
.member-sidebar a.active,
.member-nav a:hover,
.member-nav a.active,
.member-menu a:hover,
.member-menu a.active {
    background:
        rgba(0,200,255,.08) !important;

    color:#00e5ff !important;

    border-color:
        rgba(0,200,255,.30) !important;
}


/* =========================================================
   MEMBER TEXT / ACCENTS
   ========================================================= */

.member-dashboard a:not(.member-btn):not(.deposit-back),
.member-area a:not(.member-btn):not(.deposit-back) {
    --member-link-color:#00e5ff;
}


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

@media (max-width: 900px) {

    .deposit-panel {
        padding:22px !important;
    }

    .payment-card {
        min-height:135px;
    }
}

@media (max-width: 600px) {

    .deposit-panel {
        padding:18px !important;
        border-radius:15px !important;
    }

    .deposit-step {
        font-size:34px !important;
    }

    .deposit-panel h2 {
        font-size:21px !important;
    }

    .quick-amounts button {
        min-height:44px;
    }

    .payment-card {
        min-height:120px;
    }

    .member-btn-primary,
    .member-btn-secondary,
    .deposit-submit,
    .deposit-back,
    .orders-back-btn {
        min-height:46px;
    }
}


/* ===== END CICI-MEMBER-THEME-V1 ===== */



/* =========================================================
   CICI-MEMBER-BUTTON-SYSTEM-V1
   ========================================================= */

.member-btn,
.deposit-submit,
.deposit-back,
.orders-shop-btn,
.orders-back-btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    min-height:44px !important;
    box-sizing:border-box !important;

    padding:0 20px !important;

    border-radius:10px !important;

    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;

    text-decoration:none !important;

    cursor:pointer !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* PRIMARY */

.member-btn-primary,
.deposit-submit,
.orders-shop-btn {
    border:1px solid transparent !important;

    background:
        linear-gradient(
            90deg,
            #00c8ff 0%,
            #00e5ff 55%,
            #75eaff 100%
        ) !important;

    color:#fff !important;

    box-shadow:
        0 0 16px rgba(0,200,255,.18) !important;
}

.member-btn-primary:hover,
.deposit-submit:hover,
.orders-shop-btn:hover {
    color:#fff !important;

    transform:translateY(-1px) !important;

    box-shadow:
        0 0 24px rgba(0,200,255,.30) !important;
}


/* SECONDARY */

.member-btn-secondary,
.deposit-back,
.orders-back-btn {
    border:
        1px solid rgba(0,200,255,.38) !important;

    background:#111013 !important;

    color:#fff !important;

    box-shadow:none !important;
}

.member-btn-secondary:hover,
.deposit-back:hover,
.orders-back-btn:hover {
    border-color:#00c8ff !important;

    background:
        rgba(0,200,255,.08) !important;

    color:#75eaff !important;

    transform:translateY(-1px) !important;
}


/* WALLET TOOLBAR */

.cici-wallet-toolbar .member-btn {
    flex-shrink:0 !important;
}


/* EMPTY WALLET */

.cici-wallet-empty .member-btn {
    margin-top:2px !important;
}


/* BOTTOM ACTION */

.cici-wallet-actions {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}


/* MEMBER BUTTON ICON */

.member-btn-icon {
    display:inline-grid !important;
    place-items:center !important;

    min-width:18px !important;

    font-size:18px !important;
    line-height:1 !important;
}


/* MOBILE */

@media(max-width:700px) {

    .cici-wallet-toolbar .member-btn,
    .cici-wallet-actions .member-btn,
    .deposit-actions .deposit-submit,
    .deposit-actions .deposit-back {
        width:100% !important;
    }

    .cici-wallet-actions {
        flex-direction:column !important;
        align-items:stretch !important;
    }
}


/* ===== END CICI-MEMBER-BUTTON-SYSTEM-V1 ===== */



/* =========================================================
   CICI-MEMBER-DASHBOARD-V2
   Black + Neon Pink
   ========================================================= */


/* ---------- MAIN AREA ---------- */

.member-hero {
    position:relative !important;

    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(0,200,255,.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0,229,255,.035),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #09090a 0%,
            #070708 100%
        ) !important;

    border-bottom:
        1px solid rgba(0,200,255,.16) !important;

    overflow:hidden;
}


/* subtle ambient glow */

.member-hero::before {
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    left:-170px;
    top:90px;

    border-radius:50%;

    background:
        rgba(0,200,255,.045);

    filter:blur(75px);

    pointer-events:none;
}

.member-hero > .container {
    position:relative;
    z-index:1;
}


/* ---------- WELCOME ---------- */

.member-label {
    color:#00e5ff !important;

    font-weight:900 !important;
    letter-spacing:.08em !important;
}

.member-welcome h1 {
    color:#fff !important;
}

.member-welcome p {
    color:#aaa5af !important;
}


/* ---------- TOP LOGOUT ---------- */

.member-logout-top {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.32) !important;

    color:#fff !important;

    box-shadow:none !important;

    text-decoration:none !important;
}

.member-logout-top:hover {
    background:
        rgba(0,200,255,.07) !important;

    border-color:#00c8ff !important;

    color:#75eaff !important;
}


/* =========================================================
   THREE MAIN CARDS
   ========================================================= */

.member-main-grid {
    gap:18px !important;
}

.member-main-grid .member-card {
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0,200,255,.055),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151216 0%,
            #0c0c0e 70%,
            #09090a 100%
        ) !important;

    border:
        1px solid rgba(0,200,255,.23) !important;

    box-shadow:
        0 16px 38px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025)
        !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.member-main-grid .member-card:hover {
    transform:translateY(-2px);

    border-color:
        rgba(0,200,255,.46) !important;

    box-shadow:
        0 0 22px rgba(0,200,255,.075),
        0 20px 42px rgba(0,0,0,.30)
        !important;
}


/* ---------- CARD ICON ---------- */

.member-card-icon {
    display:grid !important;
    place-items:center !important;

    width:40px !important;
    height:40px !important;

    border-radius:11px !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,200,255,.16),
            rgba(0,229,255,.055)
        ) !important;

    border:
        1px solid rgba(0,200,255,.24) !important;

    color:#75eaff !important;

    box-shadow:
        inset 0 0 16px rgba(0,200,255,.035)
        !important;
}


/* ---------- CARD LABEL ---------- */

.member-card-label {
    color:#00e5ff !important;

    font-weight:850 !important;
}


/* ---------- BALANCE ---------- */

.member-balance {
    color:#fff !important;

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


/* ---------- ORDER COUNT ---------- */

.member-stat {
    color:#fff !important;
}


/* ---------- ACCOUNT NAME ---------- */

.member-account-name {
    color:#fff !important;
}

.member-main-grid .member-card p {
    color:#aaa5af !important;
}


/* =========================================================
   MAIN CARD BUTTONS
   ========================================================= */

.member-main-grid .member-btn-primary {
    background:
        linear-gradient(
            90deg,
            #00c8ff 0%,
            #00e5ff 55%,
            #75eaff 100%
        ) !important;

    border-color:transparent !important;

    color:#fff !important;

    box-shadow:
        0 0 18px rgba(0,200,255,.20)
        !important;
}

.member-main-grid .member-btn-primary:hover {
    box-shadow:
        0 0 26px rgba(0,200,255,.32)
        !important;
}


.member-main-grid .member-btn-secondary {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.34) !important;

    color:#fff !important;
}

.member-main-grid .member-btn-secondary:hover {
    background:
        rgba(0,200,255,.07) !important;

    border-color:#00c8ff !important;

    color:#75eaff !important;
}


/* =========================================================
   QUICK MEMBER MENU
   ========================================================= */

.member-menu {
    background:transparent !important;

    border:none !important;

    gap:12px !important;
}

.member-menu-item {
    position:relative;

    min-height:74px;

    background:
        linear-gradient(
            145deg,
            #141116,
            #0c0c0e
        ) !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    border-radius:13px !important;

    color:#fff !important;

    text-decoration:none !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18)
        !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

.member-menu-item:hover {
    transform:translateY(-2px);

    background:
        linear-gradient(
            145deg,
            #191219,
            #0e0d0f
        ) !important;

    border-color:
        rgba(0,200,255,.48) !important;

    box-shadow:
        0 0 20px rgba(0,200,255,.07),
        0 15px 30px rgba(0,0,0,.22)
        !important;
}


/* ---------- QUICK MENU ICON ---------- */

.member-menu-icon {
    display:grid !important;
    place-items:center !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,200,255,.16),
            rgba(0,229,255,.055)
        ) !important;

    border:
        1px solid rgba(0,200,255,.22) !important;

    color:#75eaff !important;

    box-shadow:none !important;
}


/* quick menu title */

.member-menu-item strong {
    color:#fff !important;
}


/* quick menu description */

.member-menu-item small,
.member-menu-item span:not(.member-menu-icon) {
    color:#928b95 !important;
}


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.member-bottom-actions {
    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    margin-top:22px !important;
}


/* Logout bottom */

.member-btn-danger {
    background:
        linear-gradient(
            145deg,
            #271215,
            #190d10
        ) !important;

    border:
        1px solid rgba(251,113,133,.30) !important;

    color:#ff9aaa !important;

    text-decoration:none !important;

    box-shadow:none !important;
}

.member-btn-danger:hover {
    background:
        linear-gradient(
            145deg,
            #351419,
            #211014
        ) !important;

    border-color:
        rgba(251,113,133,.58) !important;

    color:#ffc0ca !important;

    transform:translateY(-1px);
}


/* =========================================================
   REMOVE OLD BLUE/NAVY ACCENTS
   DASHBOARD ONLY
   ========================================================= */

.member-hero .member-card,
.member-hero .member-menu-item,
.member-hero .member-card-icon,
.member-hero .member-menu-icon {
    --member-old-blue:none;
}


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

@media(max-width:900px) {

    .member-main-grid {
        gap:14px !important;
    }

    .member-menu {
        gap:10px !important;
    }
}


@media(max-width:600px) {

    .member-hero {
        padding-top:42px !important;
        padding-bottom:52px !important;
    }

    .member-main-grid .member-card {
        border-radius:15px !important;
    }

    .member-menu-item {
        min-height:68px;
    }

    .member-bottom-actions {
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .member-bottom-actions .member-btn {
        width:100% !important;
    }

    .member-logout-top {
        width:auto !important;
    }
}


/* ===== END CICI-MEMBER-DASHBOARD-V2 ===== */



/* =========================================================
   CICI-MEMBER-PROFILE-V2
   Black + Neon Pink
   ========================================================= */


/* ---------- WHATSAPP PANEL ---------- */

.phone-panel {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0,200,255,.055),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151216,
            #0c0c0e
        ) !important;

    border:
        1px solid rgba(0,200,255,.24) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025)
        !important;
}


/* ---------- PANEL TITLE ---------- */

.phone-label {
    color:#00e5ff !important;
}

.phone-header h2 {
    color:#fff !important;
}

.phone-header p {
    color:#aaa5af !important;
}


/* ---------- PHONE INPUT ---------- */

.phone-field label {
    color:#d7d1d9 !important;
}

.phone-field select,
.phone-field input {
    background:#0a090b !important;

    border:
        1px solid rgba(0,200,255,.22) !important;

    color:#fff !important;
}

.phone-field select:focus,
.phone-field input:focus {
    border-color:#00c8ff !important;

    outline:none !important;

    box-shadow:
        0 0 0 3px rgba(0,200,255,.08),
        0 0 18px rgba(0,200,255,.06)
        !important;
}

.phone-note {
    color:#918a94 !important;
}


/* ---------- SAVED NUMBER ---------- */

.phone-saved {
    background:
        linear-gradient(
            145deg,
            #111013,
            #09090a
        ) !important;

    border:
        1px solid rgba(0,200,255,.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02)
        !important;
}

.phone-saved span {
    color:#918a94 !important;
}

.phone-saved strong {
    color:#fff !important;
}


/* ---------- SAVED STATUS ---------- */

.phone-status {
    background:
        rgba(0,200,255,.10) !important;

    border:
        1px solid rgba(0,200,255,.22) !important;

    color:#75eaff !important;

    box-shadow:
        0 0 14px rgba(0,200,255,.06)
        !important;
}


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

.profile-btn {
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    min-height:44px !important;

    padding:0 18px !important;

    border-radius:10px !important;

    font-weight:800 !important;

    text-decoration:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* PRIMARY */

.profile-btn-primary {
    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #00e5ff,
            #75eaff
        ) !important;

    border:
        1px solid transparent !important;

    color:#fff !important;

    box-shadow:
        0 0 18px rgba(0,200,255,.20)
        !important;
}

.profile-btn-primary:hover {
    transform:translateY(-1px);

    box-shadow:
        0 0 26px rgba(0,200,255,.30)
        !important;
}


/* SECONDARY */

.profile-btn-secondary {
    background:#111013 !important;

    border:
        1px solid rgba(0,200,255,.34) !important;

    color:#fff !important;

    box-shadow:none !important;
}

.profile-btn-secondary:hover {
    background:
        rgba(0,200,255,.07) !important;

    border-color:#00c8ff !important;

    color:#75eaff !important;

    transform:translateY(-1px);
}


/* =========================================================
   PROFILE ALERTS
   ========================================================= */

.profile-alert.success {
    background:
        rgba(34,197,94,.08) !important;

    border:
        1px solid rgba(34,197,94,.28) !important;

    color:#86efac !important;
}

.profile-alert.error {
    background:
        rgba(239,68,68,.08) !important;

    border:
        1px solid rgba(239,68,68,.30) !important;

    color:#fca5a5 !important;
}


/* =========================================================
   PROFILE CARDS POLISH
   ========================================================= */

.profile-grid > * {
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.profile-grid > *:hover {
    transform:translateY(-2px);

    border-color:
        rgba(0,200,255,.44) !important;

    box-shadow:
        0 0 20px rgba(0,200,255,.06),
        0 18px 38px rgba(0,0,0,.28)
        !important;
}


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

@media(max-width:700px) {

    .phone-panel {
        padding:20px !important;
        border-radius:15px !important;
    }

    .profile-actions .profile-btn {
        width:100% !important;
    }

    .phone-status {
        align-self:flex-start !important;
    }
}


/* ===== END CICI-MEMBER-PROFILE-V2 ===== */


/* ==================================================
   CICI-REVIEWS-NAV-V1
   Reviews navigation
   ================================================== */

.cici-nav-v2 .cici-reviews-nav{
    white-space:nowrap;
}

/*
 * app.css lama menyembunyikan link nav biasa
 * pada mobile. Reviews dibuat tetap terlihat
 * sebagai shortcut publik.
 */
@media(max-width:768px){

    .cici-nav-v2 > .cici-reviews-nav{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        min-height:38px;
        padding:8px 12px;
        border:1px solid rgba(0,200,255,.38);
        border-radius:10px;
        font-size:12px;
        font-weight:700;
        line-height:1;
        text-decoration:none;
        white-space:nowrap;
    }

}

@media(max-width:420px){

    .cici-nav-v2 > .cici-reviews-nav{
        padding:8px 9px;
        font-size:11px;
    }

}

/* CICI-REVIEWS-NAV-V1-END */


/* =========================================================
   CICI-MOBILE-NAV-V1
   ========================================================= */

.cici-mobile-menu-button,
.cici-mobile-menu{
    display:none;
}

@media(max-width:850px){

    /*
     * Header row:
     * logo | login/member | hamburger
     */
    .cici-nav-v2{
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
        gap:8px !important;
    }

    /*
     * Desktop text navigation stays hidden.
     * Mobile navigation is provided by drawer.
     */
    .cici-nav-v2 > a:not(.cici-login-v2){
        display:none !important;
    }

    /*
     * Reviews shortcut V1 is no longer needed
     * as a standalone mobile button.
     */
    .cici-nav-v2 > .cici-reviews-nav{
        display:none !important;
    }

    .cici-mobile-menu-button{
        width:40px;
        height:38px;

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

        gap:4px;

        padding:0;

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

        border-radius:10px;

        background:
            rgba(0,200,255,.055);

        cursor:pointer;

        box-shadow:
            0 0 14px rgba(0,200,255,.08);
    }

    .cici-mobile-menu-button span{
        display:block;

        width:17px;
        height:2px;

        border-radius:999px;

        background:#75eaff;

        transition:
            transform .18s ease,
            opacity .18s ease;
    }

    .cici-mobile-menu-button[
        aria-expanded="true"
    ] span:nth-child(1){
        transform:
            translateY(6px)
            rotate(45deg);
    }

    .cici-mobile-menu-button[
        aria-expanded="true"
    ] span:nth-child(2){
        opacity:0;
    }

    .cici-mobile-menu-button[
        aria-expanded="true"
    ] span:nth-child(3){
        transform:
            translateY(-6px)
            rotate(-45deg);
    }

    .cici-mobile-menu{
        display:block;

        position:absolute;

        top:100%;
        left:0;
        right:0;

        z-index:1000;

        padding:
            8px 14px 18px;

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

        backdrop-filter:
            blur(9px);
    }

    .cici-mobile-menu[hidden]{
        display:none !important;
    }

    .cici-mobile-menu-panel{
        width:min(100%,420px);

        margin-left:auto;

        padding:10px;

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

        border-radius:18px;

        background:
            linear-gradient(
                145deg,
                #151216,
                #09090a
            );

        box-shadow:
            0 18px 55px rgba(0,0,0,.55),
            0 0 24px rgba(0,200,255,.08);
    }

    .cici-mobile-menu-panel a{
        display:flex !important;

        align-items:center;

        gap:12px;

        min-height:46px;

        padding:10px 13px;

        border-radius:11px;

        color:#d8d3da !important;

        text-decoration:none !important;

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

        transition:
            background .18s ease,
            color .18s ease;
    }

    .cici-mobile-menu-panel a + a{
        margin-top:2px;
    }

    .cici-mobile-menu-panel a span{
        width:24px;

        flex:0 0 24px;

        color:#75eaff;

        text-align:center;
        font-size:16px;
    }

    .cici-mobile-menu-panel a:hover,
    .cici-mobile-menu-panel a:active{
        color:#fff !important;

        background:
            rgba(0,200,255,.09);
    }

    body.cici-mobile-menu-open{
        overflow:hidden;
    }

}

@media(max-width:420px){

    .cici-mobile-menu{
        padding:
            7px 10px 14px;
    }

    .cici-mobile-menu-panel{
        border-radius:15px;
    }

    .cici-mobile-menu-panel a{
        min-height:44px;
        font-size:13px;
    }

}

/* CICI-MOBILE-NAV-V1-END */

/* =========================================================
   CICI-PRICE-NAV-V2
   ========================================================= */

.cici-nav-v2 > .cici-price-nav{
    white-space:nowrap;
}

@media(min-width:851px){

    /*
     * Header sekarang memiliki satu item tambahan.
     * Sedikit rapatkan gap agar semua tetap satu baris.
     */
    .cici-nav-v2{
        gap:20px !important;
    }

    .cici-nav-v2 > a{
        white-space:nowrap;
    }

}

@media(max-width:850px){

    /*
     * Seperti link desktop lain, Daftar Harga desktop
     * disembunyikan karena menu tersedia di drawer.
     */
    .cici-nav-v2 > .cici-price-nav{
        display:none !important;
    }

}

/* CICI-PRICE-NAV-V2-END */

/* =========================================================
   CICI-MOBILE-PRICE-CARDS-V4
   ========================================================= */

@media(max-width:760px){

    /*
     * Heading lebih ringkas di mobile.
     */
    .cici-price-page{
        padding-top:18px !important;
    }

    .cici-price-breadcrumb{
        margin-bottom:8px !important;
    }

    .cici-price-hero{
        margin-bottom:16px !important;
    }

    .cici-price-hero h1{
        font-size:27px !important;
        line-height:1.12 !important;
    }

    .cici-price-hero p{
        margin-top:8px !important;
        font-size:12px !important;
    }

    /*
     * Sidebar game.
     */
    .cici-price-sidebar{
        border-radius:13px !important;
        padding:10px !important;
    }

    .cici-price-game-search{
        height:42px !important;
    }

    .cici-price-game-list{
        display:flex !important;
        gap:8px !important;
        padding:0 0 2px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x proximity;
    }

    .cici-price-game-item{
        flex:0 0 auto !important;
        min-width:auto !important;
        max-width:210px !important;
        scroll-snap-align:start;
    }

    .cici-price-game-item .game-title{
        max-width:145px !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
     * Header game.
     */
    .cici-price-game-header{
        gap:8px !important;
        padding:10px !important;
    }

    .game-header-left{
        min-width:0 !important;
    }

    .cici-price-game-header h2{
        max-width:180px !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .cici-game-info-button{
        flex:0 0 auto !important;
    }

    /*
     * Tidak lagi memakai tabel horizontal lebar.
     * Setiap produk menjadi sebuah card.
     */
    .cici-price-table-wrap{
        overflow:visible !important;
        padding:0 10px 12px !important;
    }

    .cici-price-table{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        table-layout:auto !important;
    }

    .cici-price-table thead{
        display:none !important;
    }

    .cici-price-table tbody{
        display:block !important;
        width:100% !important;
    }

    .cici-price-table tbody tr{
        display:grid !important;
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap:10px 12px !important;

        width:100% !important;

        margin:0 0 10px !important;
        padding:13px !important;

        border:
            1px solid rgba(255,255,255,.09) !important;

        border-radius:12px !important;

        background:
            linear-gradient(
                145deg,
                #121316,
                #0c0d0f
            ) !important;

        box-shadow:
            0 8px 20px rgba(0,0,0,.14);
    }

    .cici-price-table tbody td{
        display:block !important;
        width:auto !important;
        min-width:0 !important;

        padding:0 !important;

        border:0 !important;

        white-space:normal !important;
    }

    /*
     * Nama produk memakai seluruh lebar.
     */
    .cici-price-table
    tbody td.product-cell{
        grid-column:1 / -1 !important;

        padding-bottom:10px !important;

        border-bottom:
            1px solid rgba(255,255,255,.08)
            !important;
    }

    .product-cell strong{
        display:block !important;

        overflow:visible !important;

        font-size:13px !important;
        line-height:1.4 !important;

        text-overflow:clip !important;
        white-space:normal !important;
    }

    .product-cell small{
        margin-top:5px !important;
    }

    /*
     * Label harga.
     */
    .cici-price-table
    tbody td:not(.product-cell)::before{
        content:
            attr(data-label);

        display:block;

        margin-bottom:4px;

        color:#747b88;

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

        letter-spacing:.04em;
        text-transform:uppercase;
    }

    .price-guest,
    .price-member,
    .price-vip,
    .price-reseller{
        font-size:13px !important;
        line-height:1.3 !important;
    }

    /*
     * Status memakai lebar penuh.
     */
    .cici-price-table
    tbody td:last-child{
        grid-column:1 / -1 !important;

        display:flex !important;
        align-items:center;
        justify-content:space-between;
    }

    .cici-price-table
    tbody td:last-child::before{
        margin-bottom:0 !important;
    }

    .cici-price-status{
        min-height:25px !important;
    }

}

@media(max-width:420px){

    .cici-price-table tbody tr{
        gap:9px !important;
        padding:12px !important;
    }

    .cici-price-game-header h2{
        max-width:145px !important;
    }

}

/* CICI-MOBILE-PRICE-CARDS-V4-END */

/* =========================================================
   CICI-FLASH-BANNER-RATIO-V2
   Banner Game 16:6 tanpa crop
   ========================================================= */

.cici-flash-visual{
    width:100% !important;

    height:auto !important;
    aspect-ratio:16 / 6 !important;

    overflow:hidden !important;

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

    background:#0d0d10 !important;
}

.cici-flash-visual > img{
    display:block !important;

    width:100% !important;
    height:100% !important;

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

    background:#0d0d10 !important;
}

@media(max-width:760px){

    .cici-flash-visual{
        height:auto !important;
        aspect-ratio:16 / 6 !important;
    }

    .cici-flash-visual > img{
        object-fit:contain !important;
        object-position:center center !important;
    }

}

/* CICI-FLASH-BANNER-RATIO-V2-END */


/* =========================================================
   CICI-MEMBER-MOBILE-GRID-FINAL-V4
   Mobile: 2 + 2 + Profile full width
   ========================================================= */
@media (max-width:600px) {

    .member-menu {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .member-menu > .member-menu-item {
        width:auto !important;
        min-width:0 !important;
        min-height:108px !important;

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

        padding:14px 10px !important;
        gap:9px !important;
    }

    .member-menu > .member-menu-item:last-child {
        grid-column:1 / -1 !important;

        min-height:76px !important;

        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;

        padding:13px 16px !important;
    }

    .member-menu > .member-menu-item .member-menu-icon {
        width:36px !important;
        height:36px !important;
        flex:0 0 36px !important;
    }

    .member-menu > .member-menu-item strong {
        font-size:14px !important;
        line-height:1.25 !important;
    }

    .member-menu > .member-menu-item small,
    .member-menu > .member-menu-item span:not(.member-menu-icon) {
        font-size:11px !important;
        line-height:1.3 !important;
    }
}
/* ===== END CICI-MEMBER-MOBILE-GRID-FINAL-V4 ===== */



/* =========================================================
   CICI DYNAMIC HOMEPAGE BACKGROUND FINAL V1
   Background image berasal dari Admin > General
   ========================================================= */

/*
 * Jangan beri warna solid pada BODY.
 * Layer body::before dari home/index.php yang menampilkan
 * gambar background harus tetap terlihat.
 */
body{
    background:transparent !important;
}


/*
 * Wrapper section utama homepage harus transparan.
 * Card dan komponen di dalam section TIDAK disentuh.
 */
body > main > .section,
body > main > .section-alt{
    background:transparent !important;
}


/*
 * Hero homepage sebelumnya mempunyai gradient hitam solid
 * yang menutup background.
 *
 * Kita pertahankan sedikit gradient transparan agar teks
 * tetap terbaca tanpa menutup gambar.
 */
body > main > .hero{
    background:
        linear-gradient(
            180deg,
            rgba(13,13,13,.30) 0%,
            rgba(10,10,10,.20) 55%,
            rgba(13,13,13,.30) 100%
        ) !important;
}


/*
 * Pseudo layer section-alt versi tema juga harus transparan.
 * Dekorasi neon tetap boleh tampil.
 */
body > main > .section-alt::before{
    background:transparent !important;
}


/*
 * Jangan biarkan pseudo overlay section-alt membuat
 * lapisan hitam penuh di atas background.
 */
body > main > .section-alt::after{
    background:transparent !important;
}


/*
 * Pastikan main sendiri tidak menciptakan background solid.
 */
body > main{
    background:transparent !important;
}


/*
 * Mobile menggunakan prinsip yang sama.
 */
@media(max-width:768px){

    body{
        background:transparent !important;
    }

    body > main{
        background:transparent !important;
    }

    body > main > .section,
    body > main > .section-alt{
        background:transparent !important;
    }

    body > main > .hero{
        background:
            linear-gradient(
                180deg,
                rgba(13,13,13,.34),
                rgba(13,13,13,.22),
                rgba(13,13,13,.34)
            ) !important;
    }
}


/* CICI DYNAMIC HOMEPAGE BACKGROUND FINAL V1 END */



/* ==========================================================
   CICI-WEBSITE-BACKGROUND-FINAL-V4
   FINAL HOMEPAGE BACKGROUND FROM ADMIN

   Tujuan:
   - Background Admin terlihat di seluruh homepage
   - Banner tetap utuh
   - Card tetap gelap
   - Glow / bubble / love neon tetap ada
   - Header tidak diubah
   ========================================================== */


/* ---------- ROOT PAGE ---------- */

html,
body{
    background-color:transparent !important;
}

body > main{
    background:transparent !important;
}


/* ---------- BANNER AREA ---------- */

/*
 * Section banner tidak boleh mempunyai bidang hitam sendiri.
 * Slider/banner di dalamnya tetap tidak disentuh.
 */
body > main > .cici-banner-section{
    background:transparent !important;
}


/* ---------- FLASH SALE AREA ---------- */

body > main > .cici-flash-section{
    background:transparent !important;
}


/*
 * Jangan matikan ::before / ::after Flash Sale.
 * Keduanya adalah bubble/glow/love neon transparan.
 */


/* ---------- GAME POPULER ---------- */

/*
 * Rule lama:
 * #games.section { ... #0d0d0d !important; }
 *
 * Inilah salah satu penutup utama background Admin.
 */
body > main > #games.section{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/* ---------- SECTION NORMAL ---------- */

body > main > .section{
    background-color:transparent !important;
}


/* ---------- HERO ---------- */

/*
 * Hero tetap memiliki sedikit tint gelap transparan.
 * Tidak lagi menggunakan warna hitam solid.
 */
body > main > .hero{
    background:
        linear-gradient(
            180deg,
            rgba(8,8,10,.22) 0%,
            rgba(8,8,10,.12) 50%,
            rgba(8,8,10,.22) 100%
        ) !important;
}


/* ---------- SECTION ALT ---------- */

body > main > .section-alt{
    background:transparent !important;
    background-color:transparent !important;
}


/*
 * Dekorasi section-alt dikembalikan.
 * Jangan dibuat transparent total seperti patch V1,
 * karena pseudo element ini adalah ambient neon.
 */

body > main > .section-alt::before{
    background:
        radial-gradient(
            ellipse at center,
            rgba(0,200,255,.075),
            rgba(0,200,255,.025) 40%,
            transparent 72%
        ) !important;
}

body > main > .section-alt::after{
    background:
        radial-gradient(
            circle at 31% 28%,
            rgba(255,255,255,.09) 0 4%,
            rgba(117,234,255,.032) 18%,
            rgba(0,200,255,.012) 48%,
            transparent 70%
        ) !important;
}


/* ---------- KEEP CARDS SOLID ---------- */

/*
 * Card tetap mempunyai background gelap agar konten
 * tetap mudah dibaca di atas gambar website.
 */

.cici-flash-card,
.game-card,
.feature-card,
.category-card,
.product-card{
    position:relative;
}


/* ---------- MOBILE ---------- */

@media(max-width:768px){

    body > main,
    body > main > .cici-banner-section,
    body > main > .cici-flash-section,
    body > main > #games.section,
    body > main > .section,
    body > main > .section-alt{
        background-color:transparent !important;
    }

    body > main > .cici-banner-section,
    body > main > .cici-flash-section,
    body > main > #games.section,
    body > main > .section,
    body > main > .section-alt{
        background-image:none !important;
    }

    body > main > .hero{
        background:
            linear-gradient(
                180deg,
                rgba(8,8,10,.26),
                rgba(8,8,10,.14),
                rgba(8,8,10,.26)
            ) !important;
    }
}


/* ===== CICI-WEBSITE-BACKGROUND-FINAL-V4-END ===== */



/* =========================================================
   CICI-MEMBER-BACKGROUND-FIX-V2
   Member pages must stay dark while homepage keeps wallpaper
   ========================================================= */

/*
 * Member dashboard / profile / wallet / deposit / orders /
 * referral memakai background gelap sendiri.
 *
 * Selector dibuat melalui :has() agar tidak perlu mengubah
 * layout utama maupun Admin Panel.
 */

body:has(.member-dashboard),
body:has(.member-area),
body:has(.member-page),
body:has(.profile-grid),
body:has(.deposit-layout),
body:has(.deposit-list),
body:has(.orders-toolbar),
body:has(.wallet-page),
body:has(.wallet-layout),
body:has(.referral-page),
body:has(.referral-layout) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0,229,255,.035),
            transparent 28%
        ),
        #070708 !important;

    background-image:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0,229,255,.035),
            transparent 28%
        ) !important;

    background-color:#070708 !important;
    background-attachment:scroll !important;
}


/*
 * Main pada halaman member juga diberi dasar gelap.
 * Ini mencegah wallpaper homepage terlihat melalui section
 * yang sekarang memang dibuat transparent.
 */

body:has(.member-dashboard) > main,
body:has(.member-area) > main,
body:has(.member-page) > main,
body:has(.profile-grid) > main,
body:has(.deposit-layout) > main,
body:has(.deposit-list) > main,
body:has(.orders-toolbar) > main,
body:has(.wallet-page) > main,
body:has(.wallet-layout) > main,
body:has(.referral-page) > main,
body:has(.referral-layout) > main {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.055),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
}


/*
 * Section member tetap transparan terhadap background GELAP
 * member, bukan terhadap wallpaper homepage.
 */

body:has(.member-dashboard) > main > .section,
body:has(.member-area) > main > .section,
body:has(.member-page) > main > .section,
body:has(.profile-grid) > main > .section,
body:has(.deposit-layout) > main > .section,
body:has(.deposit-list) > main > .section,
body:has(.orders-toolbar) > main > .section,
body:has(.wallet-page) > main > .section,
body:has(.wallet-layout) > main > .section,
body:has(.referral-page) > main > .section,
body:has(.referral-layout) > main > .section {
    background-color:transparent !important;
    background-image:none !important;
}


/* Mobile tetap menggunakan background member */

@media(max-width:768px){

    body:has(.member-dashboard) > main,
    body:has(.member-area) > main,
    body:has(.member-page) > main,
    body:has(.profile-grid) > main,
    body:has(.deposit-layout) > main,
    body:has(.deposit-list) > main,
    body:has(.orders-toolbar) > main,
    body:has(.wallet-page) > main,
    body:has(.wallet-layout) > main,
    body:has(.referral-page) > main,
    body:has(.referral-layout) > main {
        background:
            radial-gradient(
                circle at 18% 10%,
                rgba(0,200,255,.055),
                transparent 30%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }
}

/* CICI-MEMBER-BACKGROUND-FIX-V2-END */


/* =========================================================
   CICI-REFERRAL-BACKGROUND-FINAL-V3
   Actual view root: .cici-referral
   ========================================================= */

/*
 * Referral view sebenarnya memakai:
 *
 * <section class="cici-referral">
 *
 * Maka halaman referral harus dideteksi dari class tersebut.
 */

body:has(.cici-referral) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0,229,255,.035),
            transparent 28%
        ),
        #070708 !important;

    background-color:#070708 !important;
    background-image:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(0,229,255,.035),
            transparent 28%
        ) !important;
}


/* Main referral */

body:has(.cici-referral) > main {
    min-height:calc(100vh - 74px);

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.055),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 55%,
            rgba(0,200,255,.025),
            transparent 30%
        ),
        #070708 !important;

    background-color:#070708 !important;
}


/*
 * Root referral jangan mempunyai lapisan putih.
 * Card di dalam referral tidak disentuh.
 */

body:has(.cici-referral) > main > .cici-referral,
.cici-referral {
    background-color:transparent !important;
}


/* Pastikan area setelah konten juga gelap */

body:has(.cici-referral) > main::before,
body:has(.cici-referral) > main::after {
    background-color:transparent !important;
}


/* Mobile */

@media(max-width:768px){

    body:has(.cici-referral),
    body:has(.cici-referral) > main {
        background:
            radial-gradient(
                circle at 20% 8%,
                rgba(0,200,255,.06),
                transparent 28%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }

}


/* CICI-REFERRAL-BACKGROUND-FINAL-V3-END */

/* =========================================================
   CICI MEMBER BACKGROUND FINAL V4
   Fix actual Wallet + Referral roots
   ========================================================= */

/*
 * Homepage mempunyai rule global:
 *
 * body > main > .section { background:transparent }
 *
 * Untuk halaman member, transparency tersebut harus membuka
 * background GELAP member, bukan background/wallpaper homepage.
 */


/* ---------------------------------------------------------
   WALLET
   Actual wallet structure:
   .page-hero
   .section
       .container
           .cici-wallet-summary
   --------------------------------------------------------- */

body:has(.cici-wallet-summary) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 48%,
            rgba(0,229,255,.03),
            transparent 30%
        ),
        #070708 !important;

    background-color:#070708 !important;
}

body:has(.cici-wallet-summary) > main {
    min-height:calc(100vh - 74px);

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.05),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
}

body:has(.cici-wallet-summary) > main > .section {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/* ---------------------------------------------------------
   REFERRAL
   Actual root:
   .cici-referral
   --------------------------------------------------------- */

body:has(.cici-referral) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 48%,
            rgba(0,229,255,.03),
            transparent 30%
        ),
        #070708 !important;

    background-color:#070708 !important;
}

body:has(.cici-referral) > main {
    min-height:calc(100vh - 74px);

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.05),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
}

body:has(.cici-referral) > main > .cici-referral,
.cici-referral {
    background-color:transparent !important;
}


/* ---------------------------------------------------------
   SAFETY
   Jangan sentuh card/box internal.
   --------------------------------------------------------- */

body:has(.cici-wallet-summary) > main::before,
body:has(.cici-wallet-summary) > main::after,
body:has(.cici-referral) > main::before,
body:has(.cici-referral) > main::after {
    background-color:transparent !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:768px){

    body:has(.cici-wallet-summary),
    body:has(.cici-wallet-summary) > main,
    body:has(.cici-referral),
    body:has(.cici-referral) > main {
        background:
            radial-gradient(
                circle at 20% 8%,
                rgba(0,200,255,.055),
                transparent 28%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }

    body:has(.cici-wallet-summary) > main > .section {
        background:transparent !important;
        background-color:transparent !important;
        background-image:none !important;
    }
}

/* CICI MEMBER BACKGROUND FINAL V4 END */


/* =========================================================
   CICI MEMBER PROFILE BACKGROUND FINAL
   Actual root: .cici-member-profile
   ========================================================= */

/*
 * Khusus halaman:
 * /member/profile
 *
 * Tidak mempengaruhi:
 * homepage
 * wallet
 * referral
 * deposit
 * orders
 */

body:has(.cici-member-profile) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 48%,
            rgba(0,229,255,.03),
            transparent 30%
        ),
        #070708 !important;

    background-color:#070708 !important;
}


body:has(.cici-member-profile) > main {
    min-height:calc(100vh - 74px);

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.05),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
}


/*
 * Section yang sebelumnya putih sekarang transparan,
 * sehingga background gelap main terlihat.
 */
body:has(.cici-member-profile) > main > .cici-member-profile,
.cici-member-profile {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/*
 * Container jangan membuat lapisan putih.
 */
.cici-member-profile > .container {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/*
 * Jangan ubah card.
 * Hanya memastikan wrapper feature-grid transparan.
 */
.cici-member-profile .feature-grid {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


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

    body:has(.cici-member-profile),
    body:has(.cici-member-profile) > main {

        background:
            radial-gradient(
                circle at 20% 8%,
                rgba(0,200,255,.055),
                transparent 28%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }

    body:has(.cici-member-profile) > main > .cici-member-profile {
        background:transparent !important;
        background-color:transparent !important;
        background-image:none !important;
    }
}


/* CICI MEMBER PROFILE BACKGROUND FINAL END */


/* =========================================================
   CICI PROFILE WHITE BACKGROUND FIX V2
   KHUSUS /member/profile
   ========================================================= */

/*
 * Jangan lagi bergantung pada transparent.
 * Section Profile diberi background gelap secara langsung.
 */

body:has(.cici-member-profile) {
    background:#070708 !important;
    background-color:#070708 !important;
}

body:has(.cici-member-profile) > main {
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(0,200,255,.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 58%,
            rgba(0,229,255,.025),
            transparent 30%
        ),
        #070708 !important;

    background-color:#070708 !important;
}


/* AREA PROFILE SETELAH HERO */
body:has(.cici-member-profile) > main > section.cici-member-profile,
section.cici-member-profile {
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(0,200,255,.045),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
    background-image:
        radial-gradient(
            circle at 18% 10%,
            rgba(0,200,255,.045),
            transparent 32%
        ) !important;

    min-height:500px;
}


/* Container profile tetap transparan terhadap section GELAP */
section.cici-member-profile > .container {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/* Grid hanya wrapper */
section.cici-member-profile .feature-grid {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}


/* Pastikan pseudo-element tidak membuat layer putih */
section.cici-member-profile::before,
section.cici-member-profile::after,
section.cici-member-profile > .container::before,
section.cici-member-profile > .container::after {
    background-color:transparent !important;
}


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

    body:has(.cici-member-profile),
    body:has(.cici-member-profile) > main,
    body:has(.cici-member-profile) > main > section.cici-member-profile,
    section.cici-member-profile {

        background:
            radial-gradient(
                circle at 20% 8%,
                rgba(0,200,255,.05),
                transparent 30%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }

}


/* CICI PROFILE WHITE BACKGROUND FIX V2 END */

/* =========================================================
   CICI-HOMEPAGE-BACKGROUND-SCOPE-FINAL-V5
   Purpose:
   - Wallpaper Admin hanya mempengaruhi homepage
   - Game detail / checkout kembali menggunakan background dark
   - Member rules tetap dapat bekerja
   ========================================================= */


/*
 * =========================================================
 * NON HOMEPAGE BASE
 * =========================================================
 *
 * Homepage selalu memiliki .cici-banner-section.
 * Halaman lain tidak.
 *
 * Rule ini membatalkan transparansi global dari patch
 * homepage lama pada halaman selain homepage.
 */

body:not(:has(.cici-banner-section)){
    background:#070708 !important;
    background-image:none !important;
    background-attachment:scroll !important;
}

body:not(:has(.cici-banner-section)) > main{
    background:#070708 !important;
    background-color:#070708 !important;
}


/*
 * =========================================================
 * GAME DETAIL
 * =========================================================
 *
 * Checkout mempunyai:
 *
 * <section class="section cici-checkout">
 *
 * sehingga sebelumnya terkena:
 *
 * body > main > .section { background:transparent }
 *
 * Kembalikan background halaman game.
 */

body:has(.cici-game-detail){
    background:#070708 !important;
    background-image:none !important;
}

body:has(.cici-game-detail) > main{
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(0,200,255,.055),
            transparent 32%
        ),
        #070708 !important;

    background-color:#070708 !important;
}

body:has(.cici-game-detail) > main > .cici-game-detail{
    background-color:transparent !important;
}


/*
 * Checkout tetap menyatu dengan background game.
 * Bukan wallpaper homepage.
 */

body:has(.cici-game-detail) > main > .cici-checkout{
    background:transparent !important;
    background-color:transparent !important;
}


/*
 * =========================================================
 * HOMEPAGE
 * =========================================================
 *
 * HANYA halaman yang mempunyai .cici-banner-section
 * yang boleh menggunakan transparansi wallpaper Admin.
 */

body:has(.cici-banner-section){
    background:transparent !important;
}

body:has(.cici-banner-section) > main{
    background:transparent !important;
}

body:has(.cici-banner-section) > main > .cici-banner-section,
body:has(.cici-banner-section) > main > .cici-flash-section,
body:has(.cici-banner-section) > main > #games.section,
body:has(.cici-banner-section) > main > .section,
body:has(.cici-banner-section) > main > .section-alt{
    background-color:transparent !important;
}

body:has(.cici-banner-section) > main > #games.section{
    background-image:none !important;
}


/*
 * Hero homepage tetap memakai tint transparan.
 */

body:has(.cici-banner-section) > main > .hero{
    background:
        linear-gradient(
            180deg,
            rgba(8,8,10,.22) 0%,
            rgba(8,8,10,.12) 50%,
            rgba(8,8,10,.22) 100%
        ) !important;
}


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

@media(max-width:768px){

    body:not(:has(.cici-banner-section)),
    body:not(:has(.cici-banner-section)) > main{
        background:#070708 !important;
        background-color:#070708 !important;
        background-image:none !important;
    }

    body:has(.cici-game-detail) > main{
        background:
            radial-gradient(
                circle at 18% 10%,
                rgba(0,200,255,.05),
                transparent 30%
            ),
            #070708 !important;

        background-color:#070708 !important;
    }

    body:has(.cici-banner-section),
    body:has(.cici-banner-section) > main{
        background:transparent !important;
    }

    body:has(.cici-banner-section) > main > .cici-banner-section,
    body:has(.cici-banner-section) > main > .cici-flash-section,
    body:has(.cici-banner-section) > main > #games.section,
    body:has(.cici-banner-section) > main > .section,
    body:has(.cici-banner-section) > main > .section-alt{
        background-color:transparent !important;
    }

}

/* CICI-HOMEPAGE-BACKGROUND-SCOPE-FINAL-V5-END */


/* =========================================================
   CICI GLOBAL NON-HOMEPAGE DARK BACKGROUND FINAL V6
   Homepage tetap memakai background dari Admin.
   Halaman selain homepage memakai dasar dark.
   ========================================================= */

body:not(:has(.cici-banner-section)) {
    background: #070708 !important;
    background-color: #070708 !important;
    background-image: none !important;
}

body:not(:has(.cici-banner-section)) > main {
    background: #070708 !important;
    background-color: #070708 !important;
    background-image: none !important;
}

body:not(:has(.cici-banner-section)) > main > .section {
    background: #070708 !important;
    background-color: #070708 !important;
    background-image: none !important;
}

/* CICI GLOBAL NON-HOMEPAGE DARK BACKGROUND FINAL V6 END */


/* OMTOPUP-NAVY-BLUE-SOURCE-V1 */

/* Hilangkan dekorasi bubble, love, dan glow */
.cici-banner-section::before,
.cici-banner-section::after,
.cici-banner-section > .container::before,
.cici-banner-section > .container::after,
.cici-flash-section::before,
.cici-flash-section::after,
.cici-flash-head::before,
.cici-flash-head::after,
#games::before,
#games::after,
#games .section-head::before,
#games .section-head::after,
#games > .container::before,
#games > .container::after,
#games .game-cover::before,
#games .game-cover::after,
.hero::before,
.hero::after,
.hero-inner::before,
.hero-inner::after,
.section-alt::before,
.section-alt::after,
.section-alt .section-head::before,
.section-alt .section-head::after,
.feature-grid::before,
.feature-grid::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Palet utama */
:root {
    --cici-pink: #00c8ff;
    --cici-pink-light: #00e5ff;
    --cici-pink-soft: #75eaff;
    --cici-pink-border: rgba(0,200,255,.45);
    --cici-gradient: linear-gradient(
        90deg, #00c8ff, #00e5ff, #75eaff
    );
    --cici-glow: 0 0 18px rgba(0,200,255,.25);
}

/* Background utama */
html,
body {
    background-color: #06152e !important;
    background-image: none !important;
}

/* Kartu keunggulan */
.feature-card h3 {
    color: #00e5ff !important;
}

/* OMTOPUP-NAVY-BLUE-SOURCE-V1-END */