/* ==========================================
   RESET & GLOBAL
========================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:#fff;
    font-family:Arial,sans-serif;
    overflow-x:hidden;
}

/* ==========================================
   HEADER
========================================== */
.utility-bar{
    background:#000;
    padding:10px 40px;
    border-bottom:1px solid #1a1a1a;
}

.utility-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.top-logo img{
    height:60px;
    
}

.running-text-container{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 30px;
}

.running-text{
    color:#fff;
    font-size:14px;
    font-weight:bold;
}

.top-right-info{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
}

.btn-pengaduan{
    background:linear-gradient(to bottom,#ffd700,#b8860b);
    color:#000;
    padding:5px 14px;
    border-radius:8px;
    font-weight:bold;
}

.clock-text{
    color:#ccc;
    font-family:monospace;
}

.separator{
    color:#555;
}

.utility-bottom-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:12px;
    gap:20px;
}

.utility-icons{
    display:flex;
    align-items:center;
    gap:15px;
}

.auth-buttons{
    display:flex;
    gap:10px;
}

.btn-login,
.btn-daftar{
    padding:8px 35px;
    border:none;
    font-weight:bold;
    cursor:pointer;
    color:#000;
}

.btn-login{
    background:linear-gradient(to bottom,#f1c40f,#b8860b);
}

.btn-daftar{
    background:linear-gradient(to bottom,#ffd700,#ff8c00);
}

/* ==========================================
   NAVIGATION
========================================== */
.nav-main{
    background:#111;
    border-bottom:2px solid #ffd700;
    overflow-x:auto;
}

.nav-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    min-width:max-content;
}

.nav-item{
    min-width:95px;
    padding:12px 10px;
    text-align:center;
    color:#ffd700;
    font-size:12px;
    font-weight:bold;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
    cursor:pointer;
}

.nav-item img{
    width:38px;
    height:38px;
    object-fit:contain;
}

.nav-item i{
    font-size:26px;
}

.nav-item.active{
    background:rgba(255,215,0,0.12);
    border-bottom:3px solid #ffd700;
}

.hot-badge{
    position:absolute;
    top:4px;
    right:10px;
    background:red;
    color:#fff;
    font-size:9px;
    padding:2px 5px;
    border-radius:5px;
    font-weight:bold;
}

/* ==========================================
   BANNER
========================================== */
.slideshow-container{
    width:100%;
    overflow:visible;
    position:relative;
}

.banner-track{
    display:flex;
    width:200%;
    animation:bannerSlide 10s infinite;
}

.banner-track img{
    width:50%;
    height:350px;
    object-fit:cover;
}

@keyframes bannerSlide{
    0%{transform:translateX(0%);}
    45%{transform:translateX(0%);}
    50%{transform:translateX(-50%);}
    95%{transform:translateX(-50%);}
    100%{transform:translateX(0%);}
}

/* ==========================================
   INFO SECTION
========================================== */
.info-section{
    padding:40px 20px;
}

.container-custom{
    max-width:1400px;
    margin:auto;
}

.info-flex{
    display:flex;
    align-items:flex-start;
    gap:40px;
}

/* ==========================================
   JACKPOT
========================================== */
.jackpot-box{
    flex:0 0 560px;
    margin-left:60px;
    display:flex;
    justify-content:flex-end;
    margin-top:-20px;
}

.jackpot-inner{
    position:relative;
    width:470px;
    height:110px;
    transform: translateY(-10px);
}

.jackpot-bg{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.jackpot-text-layer{
    position:absolute;
    top:50%;
    left:52%;
    transform:translate(-50%,-50%);
    width:72%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.jackpot-number{
    font-family:'Arial Black',sans-serif;
    font-size:28px;
    font-weight:900;
    color:#fff;
    white-space:nowrap;
    text-align:center;
    text-shadow:0 0 3px #000,0 0 6px #000,2px 2px 4px #000;
}

/* ==========================================
   HOT PROVIDER
========================================== */
.provider-box{
    flex:1;
    overflow:hidden;
}

.hot-title-static{
    font-size:28px;
    font-weight:900;
    color:silver;
    text-align:center;
    letter-spacing:3px;
    margin-bottom:10px;
}

.provider-slider-container{
    overflow:hidden;
    width:100%;
}

.provider-track-animate{
    display:flex;
    align-items:center;
    gap:18px;
    width:max-content;
    animation:providerRun 18s linear infinite;
}

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

.p-item{
    width:110px;
    height:110px;
    background:radial-gradient(circle,#2a2a2a 0%,#000 100%);
    border-radius:50%;
    border:1px solid #444;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.p-item img{
    max-width:75%;
    max-height:75%;
    object-fit:contain;
}

/* ==========================================
   HOT GAMES (FINAL FIX 100% MUNCUL)
========================================== */

.hot-games-section{
    padding:40px 20px 70px;
    display:block !important;
}

.hot-header-frame{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin-bottom:35px !important;
    width:100%;
}

/* BACKGROUND HOT GAMES */
.hot-title-bg{
    background:url("hot.png") center center no-repeat !important;
    background-size:contain !important;

    width:100% !important;
    max-width:1300px !important;
    height:120px !important;

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

    position:relative;
}

/* TEXT HOT GAMES */
.hot-games-title{
    font-size:30px !important;
    font-family:'Arial Black',sans-serif !important;
    letter-spacing:8px !important;
    color:#fff !important;
    text-shadow:0 0 10px #000 !important;

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:5 !important;
}

/* ==========================================
   RTP
========================================== */
.rtp-pulse{
    animation:pulse 1.5s infinite;
}

.rtp-img-icon{
    width:40px;
    height:40px;
}

@keyframes pulse{
    0%{opacity:1;}
    50%{opacity:.5;}
    100%{opacity:1;}
}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){
    .utility-bar{padding:10px 0;}
    .utility-top-row{flex-direction:column;}
    .jackpot-box{margin-top:-10px;}
}
/* ==========================================
   DIGITAL CLOCK STYLE (UPGRADE ONLY)
========================================== */
.clock-text{
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #00ffcc;

    padding: 4px 10px;
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 204, 0.4);

    box-shadow: 
        0 0 6px rgba(0, 255, 204, 0.4),
        inset 0 0 6px rgba(0, 255, 204, 0.1);

    letter-spacing: 1px;

    min-width: 80px;
    text-align: center;

    animation: clockGlow 2s infinite alternate;
}

/* efek glow halus */
@keyframes clockGlow{
    0%{
        box-shadow:
            0 0 4px rgba(0,255,204,0.3),
            inset 0 0 4px rgba(0,255,204,0.1);
    }
    100%{
        box-shadow:
            0 0 10px rgba(0,255,204,0.7),
            inset 0 0 6px rgba(0,255,204,0.2);
    }
}

/* ==========================================
   HEADER UI ADJUSTMENT (TIDAK MERUSAK LAYOUT)
========================================== */

/* perkecil tombol login & daftar */
.auth-buttons button{
    padding:6px 18px !important;
    font-size:11px !important;
    border-radius:6px;
}

/* rapikan kanan header supaya lebih ke kiri */
.top-right-info{
    gap:8px !important;
    transform: translateX(-10px);
}

/* tombol pengaduan lebih compact */
.btn-pengaduan{
    padding:4px 10px !important;
    font-size:10px !important;
    border-radius:6px;
}

/* clock sedikit lebih kecil */
.clock-text{
    font-size:12px !important;
}

/* ==========================================
   TAMBAHAN MENU MINI (cara main / pusat info / chat)
   ========================================== */

.utility-icons{
    gap:8px !important;
}

/* icon dibuat seperti tombol kecil */
.utility-icons i{
    font-size:14px;
    padding:6px;
    border-radius:6px;
    background:rgba(255,215,0,0.08);
    border:1px solid rgba(255,215,0,0.2);
    transition:0.2s;
}

.utility-icons i:hover{
    background:rgba(255,215,0,0.2);
    transform:scale(1.05);
}

/* ==========================================
   HEADER SHIFT KE KIRI HALUS
========================================== */
.utility-top-row{
    justify-content:space-between;
}

/* logo tetap, tapi isi kanan sedikit ke kiri */
.top-right-info{
    margin-left:auto;
}

/* ==========================================
   POSISI PENGADUAN + JAM LEBIH KE TENGAH
========================================== */

/* geser grup kanan header sedikit ke tengah */
.top-right-info{
    justify-content:flex-start;
    gap:10px;
    transform: translateX(-25px);
}

/* rapikan supaya jam & pengaduan sejajar enak dilihat */
.btn-pengaduan{
    margin-right:6px;
}

/* jam digital biar lebih center feel */
.clock-text{
    margin:0 4px;
    font-weight:bold;
}

/* ==========================================
   BESARKAN TOMBOL PENGADUAN MEMBER
========================================== */

.btn-pengaduan{
    padding:8px 18px !important;
    font-size:12px !important;
    border-radius:10px !important;
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:900;
    transform: scale(1.05);
}

/* ikon di dalam pengaduan biar ikut proporsional */
.btn-pengaduan i{
    font-size:14px;
}

/* ==========================================
   BESARKAN LOGO & TEKS INDONESIA
========================================== */

/* container flag + teks */
.top-right-info .flex{
    display:flex;
    align-items:center;
    gap:8px !important;
}

/* logo indonesia */
.top-right-info img{
    width:26px !important;   /* sebelumnya 20px */
    height:26px;
    border-radius:50%;
    object-fit:cover;
}

/* tulisan INDONESIA */
.top-right-info .flex span{
    font-size:12px !important;   /* sedikit lebih besar */
    font-weight:900 !important;
    letter-spacing:1px;
    color:#fff;
}

/* ==========================================
   BESARKAN ICON: CARA BERMAIN / INFO / CHAT
========================================== */

.utility-icons{
    display:flex;
    align-items:center;
    gap:18px; /* jarak antar icon lebih lega */
}

/* semua icon di utility icons */
.utility-icons i{
    font-size:22px !important;  /* lebih besar dari default */
    color:#ffd700;
    transition:0.2s ease;
    cursor:pointer;
}

/* efek hover biar lebih hidup */
.utility-icons i:hover{
    transform:scale(1.15);
    color:#fff;
}

/* kalau ada teks di bawah icon (kalau nanti kamu tambah label) */
.utility-icons span{
    font-size:12px;
    font-weight:bold;
}

/* ==========================================
   SEJAJARKAN DI BAWAH PENGADUAN MEMBER
========================================== */

/* pastikan header kanan jadi acuan posisi */
.utility-top-row{
    position:relative;
}

/* area bawah (icon + login) kita geser ke posisi pengaduan */
.utility-bottom-row{
    justify-content:flex-end;
    gap:18px;
    position:relative;
    top:-8px;              /* naik sedikit supaya sejajar bawah pengaduan */
    right:140px;           /* tarik ke kiri ke arah pengaduan */
}

/* icon tetap rapi */
.utility-icons{
    display:flex;
    gap:14px;
    align-items:center;
}

/* tombol login lebih rapi */
.auth-buttons button{
    padding:6px 20px;
    font-size:12px;
}

/* ==========================================
   BESARKAN SOCIAL ICON (SHARE / SOSIAL)
========================================== */

.top-right-info .fa-share-nodes{
    font-size:20px;   /* lebih besar dari default */
    color:#ffd700;
    cursor:pointer;
}

/* kalau ada icon lain di area yang sama */
.top-right-info i{
    transition:0.2s ease;
}

.top-right-info i:hover{
    transform:scale(1.2);
}

/* ==========================================
   SEJAJARKAN INDONESIA DENGAN BAWAH DAFTAR (FIX)
========================================== */

/* jadikan row bawah sebagai acuan */
.utility-bottom-row{
    position:relative;
}

/* geser grup atas kanan pakai referensi layout */
.utility-top-row .top-right-info{
    position:relative;
    left:-120px;   /* kunci utama geser ke kiri */
    gap:6px;
    align-items:center;
}

/* pastikan tidak berubah layout lain */
.utility-bottom-row .auth-buttons{
    position:relative;
    z-index:2;
}

/* rapikan elemen */
.utility-top-row .top-right-info .btn-pengaduan{
    font-size:11px;
    padding:5px 9px;
}

.utility-top-row .top-right-info .clock-text{
    font-size:12px;
    margin:0 3px;
}

.utility-top-row .top-right-info i{
    font-size:18px;
}

.utility-top-row .top-right-info img{
    width:26px !important;
    height:26px !important;
}

.utility-top-row .top-right-info span{
    font-size:11px !important;
    font-weight:800;
    letter-spacing:1px;
}

/* ==========================================
   MEGAPHONE SEJAJAR LIVE GAMES (PRECISE ALIGN)
========================================== */

/* jadikan acuan posisi header */
.utility-top-row{
    position:relative;
}

/* pindahkan megaphone ke posisi sejajar menu Live Games */
.running-text-container{
    position:absolute;
    left:380px;   /* sejajar Live Games (adjust utama) */
    top:18px;     /* posisi vertikal di header */
    display:flex;
    align-items:center;
    gap:10px;
}

/* icon megaphone */
.running-text-container i.fa-bullhorn{
    font-size:26px !important;
}

/* logo ikut sedikit rapih */
.top-logo{
    margin-left:20px !important;
}
.top-logo{
    position: relative;
    left: 120px !important;  /* geser ke kanan sejajar menu slot bawah */
    display: flex;
    align-items: center;
}

/* kalau masih kurang sejajar, adjust ini */
.utility-top-row{
    justify-content: flex-start !important;
    padding-left: 40px;
}
.top-logo img{
    width: 196px !important;
    height: 70px !important;
    object-fit: contain;
}
.utility-top-row{
    align-items: flex-start !important;
}

/* naikkan seluruh group kanan */
.top-right-info{
    transform: translateY(+6px) !important;
}

/* tombol pengaduan naik sedikit */
.btn-pengaduan{
    transform: translateY(-4px) !important;
}

/* jam digital naik */
.clock-text{
    transform: translateY(-4px) !important;
}

/* icon share / megaphone dll */
.top-right-info i{
    position: relative;
    top: -2px;
}

/* logo indonesia + teks */
.top-right-info img{
    transform: translateY(-3px);
}

.top-right-info .flex span{
    position: relative;
    top: -2px;
}
.running-text-container{
    transform: translateY(-10px) !important;
    display: flex;
    align-items: center;
}

/* kalau icon megaphone di dalamnya */
.running-text-container i{
    position: relative;
    top: -2px;
}

/* teks running */
.running-text{
    position: relative;
    top: -1px;
}

/* samakan tinggi dengan pengaduan member */
.btn-pengaduan{
    transform: translateY(-4px) !important;
}
.utility-bottom-row{
    transform: translateY(-26px) !important;
    align-items: center;
}

/* icon cara bermain / info / chat */
.utility-icons i{
    position: relative;
    top: -2px;
}

/* tombol login & daftar */
.auth-buttons{
    position: relative;
    top: -2px;
}

.auth-buttons button{
    transform: translateY(-2px);
}
.nav-item:active,
.nav-item:focus,
.nav-item:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* hilangkan efek sentuh kuning di HP (ini penting) */
.nav-item{
    -webkit-tap-highlight-color: transparent !important;
}

/* kalau efek kuning dari active state */
.nav-item.active{
    background: rgba(0, 0, 0, 0.00) !important;
    border-bottom: 3px solid #000000 !important;
    box-shadow: none !important;
}

/* icon juga dibersihkan */
.nav-item img,
.nav-item i{
    filter: none !important;
    box-shadow: none !important;
}
.nav-main,
.nav-wrapper,
.main-nav-wrapper{
    transform: translateY(-12px) !important;
    margin-top: 0 !important;
    padding-top: 4px !important;
}

/* kalau masih ada jarak kosong atas */
.nav-main{
    position: relative;
    top: -22px;
}
/* efek hover provider */
.auto-box{
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.auto-box img{
    transition: all 0.3s ease;
}

/* saat mouse diarahkan */
.auto-box:hover img{
    transform: scale(1.15);
    filter: brightness(1.2);
}

/* background glow */
.auto-box:hover{
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
}

/* tampilkan title */
.menu-item-title{
    transition: all 0.3s ease;
}

.auto-box:hover .menu-item-title{
    color: gold;
    transform: translateY(-2px);
}
/* =========================
   FULLSCREEN SLOT PROVIDER
========================= */

/* NAVBAR */
.nav-main{
    position: relative;
    z-index: 10;

    overflow: visible !important;
}

.nav-container{
    position: static !important;

    overflow: visible !important;
}

/* MENU SLOT */
.dropdown-slot{
    position: relative;

    cursor: pointer;
}

/* DROPDOWN FULLSCREEN */
.slot-dropdown{

    position: fixed;

    top: 80px;
    left: 0;

    width: 100vw;
    height: calc(100vh - 80px);

    background: #0b0b0b;

    z-index: 999999999;

    padding: 28px;

    overflow-y: auto;

    display: none;

    grid-template-columns:
    repeat(auto-fill,minmax(170px,1fr));

    gap: 20px;

    align-content: start;

    box-sizing: border-box;

    border-top: 2px solid gold;

    box-shadow:
    0 0 40px rgba(0,0,0,.95);
}

/* MUNCUL SAAT HOVER */
.dropdown-slot:hover .slot-dropdown{
    display: grid;
}

/* CARD PROVIDER */
.slot-dropdown a{

    background: #181818;

    border-radius: 18px;

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

    text-decoration: none;

    min-height: 170px;

    padding: 18px 10px;

    display: flex;
    flex-direction: column;

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

    transition: .25s ease;
}

/* HOVER CARD */
.slot-dropdown a:hover{

    transform: translateY(-6px);

    border-color: gold;

    background: #242424;

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

/* LOGO */
.slot-dropdown img{

    width: 110px;
    height: 80px;

    object-fit: contain;

    margin-bottom: 12px;
}

/* TEXT */
.slot-dropdown span{

    color: white;

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

    text-align: center;

    line-height: 1.3;
}

/* SCROLL */
.slot-dropdown::-webkit-scrollbar{
    width: 8px;
}

.slot-dropdown::-webkit-scrollbar-thumb{
    background: gold;
    border-radius: 10px;
}

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

    .slot-dropdown{

        top: 70px;

        height: calc(100vh - 70px);

        padding: 15px;

        grid-template-columns:
        repeat(2,1fr);

        gap: 12px;
    }

    .slot-dropdown a{
        min-height: 130px;
    }

    .slot-dropdown img{
        width: 80px;
        height: 60px;
    }

    .slot-dropdown span{
        font-size: 11px;
    }

}
.games-grid{
    display:flex;
    gap:15px;
    width:max-content;
    animation:scrollGames 25s linear infinite;
    padding:20px;
    align-items:flex-start
}

.games-grid a{
    flex:0 0 auto;
}

.games-grid img{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:12px;
}

/* ANIMASI RUNNING */
@keyframes scrollGames{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

.hot-games-section{
    margin-top:0;
}

.info-section{
    display:flex;
    align-items:flex-start;
}

/* samakan posisi atas jackpot & hot games */
.info-flex{
    align-items:flex-start;
}

/* WRAPPER BIAR KEREN */
.hot-games-section{
    overflow:hidden;
    background:#000;
    padding-top:0;
}

/* =========================================================
   TAMBAHAN RESPONSIVE MOBILE
   JANGAN HAPUS / UBAH CSS LAMA
   PASTE KODE INI PALING BAWAH style.css
========================================================= */

@media (max-width: 768px){

    /* ================================
       GLOBAL MOBILE
    ================================= */
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        margin:0;
        padding:0;
        background:#000;
    }

    /* ================================
       HEADER MOBILE
    ================================= */
    .utility-bar{
        width:100%;
        padding:8px 8px 5px !important;
        overflow:hidden;
    }

    .utility-top-row{
        width:100%;
        min-height:65px;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        padding:0 !important;
        gap:4px !important;
    }

    /* LOGO */
    .top-logo{
        position:relative !important;
        left:0 !important;
        margin:0 !important;
        flex:0 0 auto;
    }

    .top-logo img{
        width:105px !important;
        height:42px !important;
        object-fit:contain;
    }

    /* RUNNING TEXT */
    .running-text-container{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        transform:none !important;

        flex:1;
        min-width:0;
        margin:0 4px !important;

        display:flex;
        align-items:center;
        gap:4px;
    }

    .running-text-container i{
        font-size:15px !important;
        flex-shrink:0;
    }

    .running-text{
        font-size:9px !important;
        width:100%;
    }

    /* BAGIAN KANAN HEADER */
    .top-right-info{
        position:relative !important;
        left:auto !important;
        right:auto !important;

        transform:none !important;

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

        gap:3px !important;

        flex:0 0 auto;
        margin:0 !important;
    }

    .btn-pengaduan{
        padding:3px 6px !important;
        font-size:7px !important;
        border-radius:5px !important;
        transform:none !important;
        margin:0 !important;
        white-space:nowrap;
    }

    .btn-pengaduan i{
        font-size:8px !important;
    }

    .clock-text{
        font-size:7px !important;
        min-width:auto !important;
        padding:2px 4px !important;
        margin:0 !important;
        transform:none !important;
        letter-spacing:0 !important;
    }

    .top-right-info .separator,
    .top-right-info .fa-share-nodes{
        display:none;
    }

    .top-right-info .flex{
        gap:3px !important;
    }

    .top-right-info img{
        width:13px !important;
        height:13px !important;
        transform:none !important;
    }

    .top-right-info .flex span{
        font-size:6px !important;
        letter-spacing:0 !important;
        top:0 !important;
    }

    /* ================================
       BARIS LOGIN / DAFTAR
    ================================= */
    .utility-bottom-row{
        width:100%;
        position:relative !important;
        top:auto !important;
        right:auto !important;

        transform:none !important;

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

        gap:6px !important;
        margin-top:3px !important;
    }

    .utility-icons{
        display:flex;
        gap:5px !important;
        margin-right:auto;
    }

    .utility-icons i{
        font-size:12px !important;
        padding:4px !important;
    }

    .auth-buttons{
        display:flex;
        gap:4px !important;
        top:0 !important;
    }

    .auth-buttons button{
        padding:5px 12px !important;
        font-size:8px !important;
        border-radius:4px !important;
        transform:none !important;
    }


    /* ================================
       NAVIGATION MOBILE
    ================================= */
    .nav-main{
        width:100%;
        position:relative !important;
        top:0 !important;

        transform:none !important;

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

        border-bottom:1px solid #ffd700;
        -webkit-overflow-scrolling:touch;
    }

    .nav-main::-webkit-scrollbar{
        display:none;
    }

    .nav-container{
        width:max-content;
        min-width:max-content;

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

        gap:0 !important;
        padding:3px 4px;
    }

    .nav-item{
        min-width:65px !important;
        width:65px !important;

        padding:6px 3px !important;

        font-size:7px !important;
        gap:3px !important;

        flex-shrink:0;
    }

    .nav-item img{
        width:24px !important;
        height:24px !important;
    }

    .nav-item i{
        font-size:18px !important;
    }

    .hot-badge{
        top:1px !important;
        right:4px !important;

        font-size:6px !important;
        padding:1px 3px !important;
    }

    /* ================================
       BANNER MOBILE
    ================================= */
    .slideshow-container{
        width:100% !important;
        height:auto !important;

        overflow:hidden !important;
        margin:0 !important;
    }

    .banner-track{
        width:200% !important;
    }

    .banner-track img{
        width:50% !important;
        height:180px !important;
        min-height:180px !important;

        object-fit:cover !important;
        display:block;
    }


    /* ================================
       INFO SECTION MOBILE
    ================================= */
    .info-section{
        width:100% !important;

        padding:15px 8px 10px !important;

        display:block !important;
        overflow:hidden;
    }

    .container-custom{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    .info-flex{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;

        gap:12px !important;
    }


    /* ================================
       JACKPOT MOBILE
    ================================= */
    .jackpot-box{
        width:100% !important;
        max-width:100% !important;

        flex:0 0 auto !important;

        margin:0 !important;

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

    .jackpot-inner{
        width:min(95vw,470px) !important;
        height:auto !important;
        aspect-ratio:470 / 110;

        transform:none !important;
    }

    .jackpot-text-layer{
        width:72% !important;
        height:30px !important;
    }

    .jackpot-number{
        font-size:15px !important;
        line-height:1 !important;
    }


    /* ================================
       HOT PROVIDER MOBILE
    ================================= */
    .provider-box{
        width:100% !important;
        flex:none !important;

        overflow:hidden !important;
    }

    .hot-title-static{
        font-size:16px !important;
        letter-spacing:2px !important;

        margin:2px 0 8px !important;
    }

    .provider-slider-container{
        width:100% !important;
        overflow:hidden !important;
    }

    .provider-track-animate{
        gap:8px !important;

        animation-duration:16s !important;
    }

    .p-item{
        width:54px !important;
        height:54px !important;

        flex:0 0 54px !important;
    }

    .p-item img{
        max-width:70% !important;
        max-height:70% !important;
    }


    /* ================================
       HOT GAMES HEADER
    ================================= */
    .hot-games-section{
        width:100% !important;

        margin:0 !important;

        padding:10px 8px 50px !important;

        overflow:hidden !important;
    }

    .hot-header-frame{
        width:100% !important;

        margin:0 0 12px !important;

        display:flex !important;
        justify-content:center !important;
    }

    .hot-title-bg{
        width:100% !important;
        max-width:360px !important;

        height:55px !important;

        background-size:100% 100% !important;
    }

    .hot-games-title{
        font-size:17px !important;
        letter-spacing:4px !important;
    }


    /* ================================
       HOT GAMES GRID MOBILE
       2 KOLOM
    ================================= */
    .games-grid{
        width:100% !important;
        max-width:100% !important;

        display:grid !important;

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;

        padding:0 !important;

        animation:none !important;

        transform:none !important;
    }

    .games-grid a{
        width:100% !important;
        min-width:0 !important;

        display:block !important;
    }

    .games-grid img{
        width:100% !important;
        height:auto !important;

        aspect-ratio:1 / 1;

        object-fit:cover !important;

        border-radius:8px !important;

        display:block;
    }


    /* ================================
       SLOT DROPDOWN MOBILE
    ================================= */
    .slot-dropdown{
        top:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100vh !important;

        padding:10px !important;

        grid-template-columns:repeat(2,1fr) !important;

        gap:8px !important;

        overflow-y:auto !important;
    }

    .slot-dropdown a{
        min-height:100px !important;

        padding:8px !important;

        border-radius:10px !important;
    }

    .slot-dropdown img{
        width:65px !important;
        height:48px !important;

        margin-bottom:5px !important;
    }

    .slot-dropdown span{
        font-size:9px !important;
    }

}


/* =========================================================
   HP KECIL
   320px - 380px
========================================================= */
@media (max-width:380px){

    .top-logo img{
        width:88px !important;
        height:38px !important;
    }

    .running-text-container i{
        font-size:13px !important;
    }

    .running-text{
        font-size:8px !important;
    }

    .btn-pengaduan{
        font-size:6px !important;
    }

    .clock-text{
        font-size:6px !important;
    }

    .nav-item{
        min-width:60px !important;
        width:60px !important;
    }

    .nav-item img{
        width:22px !important;
        height:22px !important;
    }

    .nav-item i{
        font-size:16px !important;
    }

    .banner-track img{
        height:165px !important;
        min-height:165px !important;
    }

    .jackpot-number{
        font-size:13px !important;
    }

    .p-item{
        width:50px !important;
        height:50px !important;
        flex-basis:50px !important;
    }

    .hot-games-title{
        font-size:15px !important;
        letter-spacing:3px !important;
    }

}


/* =========================================================
   HP BESAR
   381px - 768px
========================================================= */
@media (min-width:381px) and (max-width:768px){

    .banner-track img{
        height:200px !important;
        min-height:200px !important;
    }

    .games-grid{
        gap:10px !important;
    }

    .jackpot-number{
        font-size:16px !important;
    }

}
/* =========================================================
   TAMBAHAN UKURAN FORM REGISTRASI
   PASTE PALING BAWAH style.css
   ========================================================= */

.register-demo-box{
    width:1100px !important;
    max-width:calc(100% - 40px) !important;
    margin:30px auto 50px !important;
}

/* Judul Daftar Akun */
.register-demo-title{
    height:38px !important;
    margin-bottom:25px !important;
}

.register-demo-title span{
    height:38px !important;
    min-width:155px !important;

    padding:8px 22px !important;

    font-size:18px !important;
    line-height:22px !important;
}

.register-demo-title span:after{
    right:-22px !important;

    border-top-width:19px !important;
    border-bottom-width:19px !important;
    border-left-width:22px !important;
}


/* =========================================================
   KOLOM KIRI
   ========================================================= */

.register-demo-content{
    grid-template-columns:270px 1fr !important;
    gap:35px !important;
}

.register-benefit h3{
    font-size:18px !important;
    margin-bottom:14px !important;
}

.register-benefit ul{
    padding-left:22px !important;
}

.register-benefit li{
    font-size:15px !important;
    line-height:1.5 !important;
    margin-bottom:15px !important;
}


/* =========================================================
   JUDUL BAGIAN
   ========================================================= */

.register-section-title{
    font-size:17px !important;
    margin-bottom:12px !important;
    gap:11px !important;
}

.register-section-title span{
    width:5px !important;
    height:22px !important;
}


/* =========================================================
   BARIS FORM
   ========================================================= */

.register-row{
    grid-template-columns:270px 1fr !important;
    gap:28px !important;

    margin-bottom:20px !important;
}

.register-row label{
    font-size:15px !important;
    padding-top:9px !important;
}


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

.register-field input{
    width:100% !important;
    height:38px !important;

    padding:7px 12px !important;

    font-size:14px !important;
}

.register-field small{
    font-size:11px !important;
    line-height:1.45 !important;
    margin-top:4px !important;
}


/* =========================================================
   NOMOR TELEPON
   ========================================================= */

.phone-prefix{
    left:12px !important;
    top:10px !important;

    font-size:13px !important;
}

.phone-field input{
    padding-left:48px !important;
}


/* =========================================================
   TOMBOL LANJUT
   ========================================================= */

.register-action{
    margin-top:25px !important;
}

.register-action button{
    padding:11px 24px !important;

    font-size:15px !important;
    font-weight:bold !important;

    min-width:75px !important;
    min-height:42px !important;
}


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

@media(max-width:768px){

    .register-demo-box{
        width:100% !important;
        max-width:none !important;

        margin:15px auto 30px !important;
        padding:0 15px !important;
    }

    .register-demo-title{
        height:34px !important;
    }

    .register-demo-title span{
        height:34px !important;
        min-width:135px !important;

        padding:7px 16px !important;

        font-size:15px !important;
    }

    .register-demo-title span:after{
        right:-18px !important;

        border-top-width:17px !important;
        border-bottom-width:17px !important;
        border-left-width:18px !important;
    }

    .register-demo-content{
        grid-template-columns:1fr !important;
        gap:15px !important;
    }

    .register-benefit{
        display:none !important;
    }

    .register-row{
        grid-template-columns:1fr !important;
        gap:6px !important;
        margin-bottom:16px !important;
    }

    .register-row label{
        font-size:13px !important;
        padding-top:0 !important;
    }

    .register-field input{
        height:38px !important;
        font-size:13px !important;
    }

    .register-field small{
        font-size:9px !important;
    }

    .register-section-title{
        font-size:15px !important;
    }

    .register-action button{
        font-size:13px !important;
        padding:9px 20px !important;
    }
}
/* =========================================================
   REGISTRATION PAGE
   TAMBAHAN SAJA - CSS LAMA TIDAK DIUBAH
========================================================= */

#registerPageNew{
    display:none;
    width:100%;
    min-height:650px;
    background:#050505;
    color:#fff;
    box-sizing:border-box;
}

#registerPageNew.register-open{
    display:block;
}


/* AREA UTAMA */

.register-layout-new{
    width:1100px;
    max-width:calc(100% - 80px);

    margin:25px auto 70px;

    display:grid;

    grid-template-columns:270px minmax(0,1fr);

    column-gap:45px;

    box-sizing:border-box;
}


/* =========================================================
   KIRI
========================================================= */

.register-benefit-new{
    padding-top:16px;
}

.register-benefit-new h2{
    margin:0 0 18px;

    color:#fff;

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

.register-benefit-new ul{
    margin:0;
    padding-left:22px;
}

.register-benefit-new li{
    margin-bottom:14px;

    color:#ddd;

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


/* =========================================================
   FORM
========================================================= */

.register-form-new{
    width:100%;
    box-sizing:border-box;
}


/* JUDUL */

.register-title-new{
    position:relative;

    width:100%;
    height:42px;

    line-height:42px;

    padding-left:18px;

    box-sizing:border-box;

    background:#fff;

    color:#d8a900;

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

.register-title-new:after{
    content:"";

    position:absolute;

    left:125px;
    top:0;

    width:0;
    height:0;

    border-top:21px solid transparent;
    border-bottom:21px solid transparent;
    border-left:24px solid #e0ad00;
}


/* JUDUL SECTION */

.register-section-title-new{
    display:flex;
    align-items:center;

    gap:9px;

    margin-top:20px;
    margin-bottom:14px;

    color:#fff;

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

.register-section-title-new span{
    width:5px;
    height:23px;

    display:block;

    background:#fff;
}

.register-contact-title-new{
    margin-top:20px;
}


/* BARIS FORM */

.register-row-new{
    display:grid;

    grid-template-columns:240px minmax(0,1fr);

    column-gap:25px;

    margin-bottom:19px;
}

.register-row-new label{
    padding-top:9px;

    color:#fff;

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


/* INPUT */

.register-input-area-new{
    width:100%;
}

.register-input-area-new input{
    width:100%;
    height:40px;

    padding:0 10px;

    box-sizing:border-box;

    border:1px solid #555;
    border-radius:0;

    outline:none;

    background:#858585;

    color:#fff;

    font-size:14px;
}

.register-input-area-new input:focus{
    border-color:#d8ad00;

    box-shadow:0 0 4px rgba(255,215,0,.35);
}

.register-input-area-new small{
    display:block;

    margin-top:4px;

    color:#d6d6d6;

    font-size:10px;
    line-height:1.4;
}


/* NOMOR TELEPON */

.phone-new{
    position:relative;
}

.phone-code-new{
    position:absolute;

    left:12px;
    top:12px;

    color:#ddd;

    font-size:12px;

    z-index:2;
}

.phone-new input{
    padding-left:48px !important;
}


/* TOMBOL */

.register-button-area-new{
    display:flex;

    justify-content:flex-end;

    margin-top:28px;
}

.register-button-area-new button{
    min-width:82px;
    height:44px;

    padding:0 18px;

    border:1px solid #d4a500;

    background:
        linear-gradient(
            180deg,
            #ffda4d 0%,
            #bd8900 100%
        );

    color:#fff;

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

    cursor:pointer;
}


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

@media(max-width:768px){

    #registerPageNew{
        min-height:100vh;
    }

    .register-layout-new{
        width:100%;
        max-width:none;

        display:block;

        margin:0;

        padding:18px 12px 50px;

        box-sizing:border-box;
    }

    .register-benefit-new{
        display:none;
    }

    .register-form-new{
        width:100%;
    }

    .register-title-new{
        height:40px;
        line-height:40px;

        font-size:16px;
    }

    .register-title-new:after{
        left:110px;

        border-top-width:20px;
        border-bottom-width:20px;
    }

    .register-row-new{
        display:block;

        margin-bottom:17px;
    }

    .register-row-new label{
        display:block;

        padding:0;
        margin-bottom:7px;

        font-size:13px;
    }

    .register-input-area-new input{
        height:43px;
    }

    .register-section-title-new{
        font-size:16px;
    }

    .register-button-area-new{
        margin-top:25px;
    }
}
/* =========================================================
   UI PENDAFTARAN SEPERTI REFERENSI FOTO
   TAMBAHAN SAJA
   CSS LAMA TIDAK DIUBAH
========================================================= */

#registerMockupPage{
    display:none;
    width:100%;
    background:#050505;
    color:#fff;
    box-sizing:border-box;
    min-height:620px;
}

#registerMockupPage.register-mockup-open{
    display:block;
}


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

.register-mockup-container{
    width:1100px;
    max-width:calc(100% - 80px);

    margin:0 auto;

    padding:18px 0 70px;

    display:grid;

    grid-template-columns:270px minmax(0,1fr);

    column-gap:38px;

    box-sizing:border-box;
}


/* =========================================================
   KOLOM KIRI
========================================================= */

.register-mockup-benefit{
    padding-top:20px;
}

.register-mockup-benefit h2{
    margin:0 0 16px;

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

    color:#fff;
}

.register-mockup-benefit ul{
    margin:0;
    padding-left:20px;
}

.register-mockup-benefit li{
    margin-bottom:15px;

    color:#fff;

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

    line-height:1.45;
}


/* =========================================================
   FORM
========================================================= */

.register-mockup-form{
    width:100%;
    min-width:0;
}


/* =========================================================
   JUDUL DAFTAR AKUN
========================================================= */

.register-mockup-title{
    width:100%;
    height:40px;

    position:relative;

    background:#fff;

    display:flex;
    align-items:center;

    margin-bottom:22px;

    box-sizing:border-box;
}

.register-mockup-title span{
    position:relative;

    height:40px;
    min-width:125px;

    padding:0 18px;

    display:flex;
    align-items:center;

    background:linear-gradient(
        90deg,
        #ffd72a,
        #e2ac00
    );

    color:#fff;

    font-size:16px;
    font-weight:400;

    box-sizing:border-box;
}

.register-mockup-title span::after{
    content:"";

    position:absolute;

    right:-22px;
    top:0;

    width:0;
    height:0;

    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:22px solid #e2ac00;
}


/* =========================================================
   JUDUL SECTION
========================================================= */

.register-mockup-section-title{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:13px;

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

    color:#fff;
}

.register-mockup-section-title span{
    width:5px;
    height:22px;

    background:#fff;

    display:block;
}

.register-mockup-section-title.contact{
    margin-top:17px;
}


/* =========================================================
   BARIS FORM
========================================================= */

.register-mockup-row{
    display:grid;

    grid-template-columns:235px minmax(0,1fr);

    column-gap:25px;

    margin-bottom:17px;
}

.register-mockup-row > label{
    padding-top:7px;

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

    color:#fff;
}


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

.register-mockup-input{
    width:100%;
    height:38px;

    border:1px solid #777;

    border-radius:0;

    outline:none;

    background:#85888d;

    color:#fff;

    padding:0 10px;

    font-size:14px;

    box-sizing:border-box;
}

.register-mockup-input:focus{
    border-color:#dcae00;

    box-shadow:
        0 0 5px rgba(255,215,0,.35);
}

.register-mockup-row small{
    display:block;

    margin-top:4px;

    color:#ddd;

    font-size:10px;

    line-height:1.45;
}


/* =========================================================
   NOMOR TELEPON
========================================================= */

.register-phone-wrapper{
    position:relative;
}

.register-phone-wrapper > span{
    position:absolute;

    left:10px;
    top:10px;

    z-index:2;

    color:#ddd;

    font-size:12px;
}

.register-phone-input{
    padding-left:42px !important;
}


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

.register-mockup-action{
    display:flex;

    justify-content:flex-end;

    margin-top:25px;
}

.register-mockup-action button{
    min-width:75px;
    height:40px;

    border:1px solid #e3b500;

    background:linear-gradient(
        180deg,
        #ffd94f,
        #d49a00
    );

    color:#fff;

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

    cursor:pointer;

    padding:0 18px;
}


/* =========================================================
   DESKTOP - FORM MENGIKUTI PROPORSI FOTO
========================================================= */

@media(min-width:769px){

    #registerMockupPage{
        position:relative;

        z-index:5;
    }

    .register-mockup-container{
        min-height:600px;
    }

}


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

@media(max-width:768px){

    #registerMockupPage{
        min-height:100vh;
    }

    .register-mockup-container{

        width:100%;
        max-width:none;

        display:block;

        padding:15px 12px 50px;

        margin:0;

        box-sizing:border-box;
    }


    .register-mockup-benefit{
        display:none;
    }


    .register-mockup-title{
        height:38px;

        margin-bottom:20px;
    }

    .register-mockup-title span{
        height:38px;

        min-width:115px;

        font-size:15px;

        padding:0 15px;
    }

    .register-mockup-title span::after{

        right:-20px;

        border-top-width:19px;
        border-bottom-width:19px;
        border-left-width:20px;
    }


    .register-mockup-section-title{
        font-size:15px;

        margin-bottom:12px;
    }


    .register-mockup-row{

        display:block;

        margin-bottom:16px;
    }


    .register-mockup-row > label{

        display:block;

        padding:0;

        margin-bottom:6px;

        font-size:13px;
    }


    .register-mockup-input{

        height:42px;

        font-size:13px;
    }


    .register-mockup-row small{

        font-size:9px;

        line-height:1.4;
    }


    .register-mockup-action{

        justify-content:flex-end;

        margin-top:20px;
    }


    .register-mockup-action button{

        height:42px;

        min-width:90px;

        font-size:13px;
    }

}


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

@media(max-width:380px){

    .register-mockup-container{
        padding-left:10px;
        padding-right:10px;
    }

    .register-mockup-title span{
        font-size:14px;
    }

    .register-mockup-row > label{
        font-size:12px;
    }

    .register-mockup-input{
        height:40px;
    }

}
/* =========================================================
   FIX FORM PENDAFTARAN
   SEMBUNYIKAN BANNER DI BAWAH FORM
   CSS LAMA TIDAK DIUBAH
========================================================= */

/* Saat halaman pendaftaran terbuka,
   banner utama tidak ditampilkan */
body.register-page-active .slideshow-container{
    display:none !important;
}
/* =========================================================
   MODE PENDAFTARAN
   HILANGKAN SEMUA KONTEN BERANDA DI BAWAH FORM
   KODE LAMA TIDAK DIUBAH
========================================================= */

body.register-page-active main{
    display:none !important;
}

/* Form pendaftaran tetap tampil */
body.register-page-active #registerMockupPage{
    display:block !important;
}
/* =========================================================
   COUNTRY PHONE DROPDOWN
   TAMBAHAN SAJA - JANGAN HAPUS CSS LAMA
========================================================= */

.phone-country-wrap{
    position:relative !important;
    width:100%;
    display:flex;
    align-items:stretch;
}

/* tombol negara */
.phone-country-button{
    position:absolute;
    left:0;
    top:0;
    z-index:20;

    height:40px;
    min-width:80px;

    padding:0 10px;

    border:none;
    border-right:1px solid #aaa;

    background:#858585;
    color:#fff;

    font-size:13px;
    cursor:pointer;

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

/* panah */
.phone-country-button::after{
    content:"";
    width:0;
    height:0;

    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #333;
}

/* input nomor */
.phone-country-wrap input{
    width:100% !important;
    padding-left:90px !important;
}

/* dropdown */
.phone-country-dropdown{
    position:absolute;

    left:0;
    top:43px;

    width:100%;
    max-width:420px;

    height:300px;

    background:#fff;

    border:1px solid #aaa;
    border-radius:0 0 5px 5px;

    overflow-y:auto;

    z-index:999999;

    display:none;

    box-shadow:0 5px 15px rgba(0,0,0,.45);
}

/* buka */
.phone-country-dropdown.open{
    display:block;
}

/* item negara */
.phone-country-item{
    width:100%;

    min-height:38px;

    padding:8px 18px;

    box-sizing:border-box;

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

    background:#fff;

    color:#777;

    font-size:14px;

    cursor:pointer;

    transition:.15s;
}

.phone-country-item:hover{
    background:linear-gradient(
        to bottom,
        #ffd95a,
        #d99d00
    );

    color:#fff;
}

/* kode */
.phone-country-code{
    font-weight:bold;
    margin-left:15px;
    white-space:nowrap;
}

/* scrollbar */
.phone-country-dropdown::-webkit-scrollbar{
    width:8px;
}

.phone-country-dropdown::-webkit-scrollbar-thumb{
    background:#999;
    border-radius:8px;
}

.phone-country-dropdown::-webkit-scrollbar-track{
    background:#eee;
}

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

    .phone-country-button{
        height:43px;
        min-width:78px;
        font-size:12px;
    }

    .phone-country-wrap input{
        padding-left:88px !important;
    }

    .phone-country-dropdown{
        top:46px;
        width:100%;
        max-width:none;
        height:280px;
    }

    .phone-country-item{
        min-height:40px;
        padding:9px 12px;
        font-size:13px;
    }
}
/* =========================================================
   FIX COUNTRY PHONE - OVERRIDE TANPA MENGUBAH CSS LAMA
========================================================= */

.register-phone-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tombol +62 */
.register-phone-wrapper .country-phone-button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 90px !important;
    width: 90px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: #8b8e93 !important;
    color: #ffffff !important;

    border: none !important;
    outline: none !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    z-index: 10001 !important;
}

/* Kode +62 */
.register-phone-wrapper .country-code {
    display: inline-block !important;
    pointer-events: none !important;
}

/* Panah */
.register-phone-wrapper .country-arrow {
    display: inline-block !important;
    margin-left: 8px !important;
    pointer-events: none !important;
}

/* Input nomor HP */
.register-phone-wrapper .register-phone-input {
    flex: 1 1 auto !important;
    width: auto !important;

    height: 40px !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 12px !important;

    position: relative !important;
    z-index: 10000 !important;
}

/* Dropdown negara */
.register-phone-wrapper .country-phone-dropdown {
    display: none;

    position: absolute !important;

    left: 0 !important;
    top: 40px !important;

    width: 100% !important;
    max-height: 300px !important;

    overflow-y: auto !important;

    background: #ffffff !important;

    border: 1px solid #999 !important;

    box-sizing: border-box !important;

    z-index: 999999 !important;
}

.register-phone-wrapper .country-phone-dropdown.show {
    display: block !important;
}

/* Item negara */
.register-phone-wrapper .country-phone-item {
    display: flex !important;

    justify-content: space-between !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 40px !important;

    padding: 8px 12px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    color: #555555 !important;

    cursor: pointer !important;

    font-size: 14px !important;
}

.register-phone-wrapper .country-phone-item:hover {
    background: #f1b900 !important;
    color: #ffffff !important;
}
/* =========================================================
   RAPikan FORM PENDAFTARAN
   TAMBAHAN SAJA — CSS LAMA TIDAK DIUBAH
========================================================= */

.register-mockup-row{
    display:grid !important;
    grid-template-columns:240px minmax(0, 1fr) !important;
    column-gap:70px !important;
    align-items:start !important;
    margin-bottom:28px !important;
}

.register-mockup-row > label{
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    color:#fff !important;
    padding-top:8px !important;
}

.register-mockup-input{
    width:100% !important;
    height:40px !important;
    box-sizing:border-box !important;
    border:1px solid #777 !important;
    border-radius:0 !important;
    background:#85878b !important;
    color:#fff !important;
    padding:8px 12px !important;
    font-size:14px !important;
    outline:none !important;
}

.register-mockup-input:focus{
    outline:none !important;
    border-color:#f2bd00 !important;
}

.register-mockup-row small{
    display:block !important;
    margin-top:5px !important;
    color:#fff !important;
    font-size:11px !important;
    line-height:1.45 !important;
}

/* Judul bagian */
.register-mockup-row h3{
    margin:0 0 20px 0 !important;
}

/* =========================================================
   BAGIAN NOMOR TELEPON
========================================================= */

.register-phone-wrapper{
    position:relative !important;
    display:flex !important;
    align-items:flex-start !important;
    width:100% !important;
}

.country-phone-button{
    flex:0 0 78px !important;
    width:78px !important;
    height:40px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    background:#85878b !important;
    color:#fff !important;
    border:1px solid #777 !important;
    cursor:pointer !important;
    font-size:14px !important;
    box-sizing:border-box !important;
}

.country-phone-button:hover{
    background:#777 !important;
}

.country-arrow{
    font-size:12px !important;
}

.register-phone-input{
    flex:1 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* Dropdown negara */
.country-phone-dropdown{
    position:absolute !important;
    top:42px !important;
    left:0 !important;
    width:300px !important;
    max-height:300px !important;
    overflow-y:auto !important;
    background:#fff !important;
    border:1px solid #aaa !important;
    box-shadow:0 5px 15px rgba(0,0,0,.5) !important;
    z-index:999999 !important;
}

.country-phone-dropdown.show{
    display:block !important;
}

.country-phone-option{
    width:100% !important;
    min-height:38px !important;
    padding:8px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:#fff !important;
    color:#777 !important;
    border:0 !important;
    border-bottom:1px solid #eee !important;
    cursor:pointer !important;
    text-align:left !important;
    font-size:14px !important;
}

.country-phone-option:hover{
    background:#f0b800 !important;
    color:#fff !important;
}

.country-name{
    flex:1 !important;
}

.country-code-value{
    margin-left:15px !important;
    font-weight:600 !important;
}

/* =========================================================
   TOMBOL LANJUT
========================================================= */

.register-mockup-row button{
    font-size:14px !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:800px){

    .register-mockup-row{
        grid-template-columns:1fr !important;
        row-gap:8px !important;
        margin-bottom:22px !important;
    }

    .register-mockup-row > label{
        padding-top:0 !important;
    }

    .register-phone-wrapper{
        width:100% !important;
    }

    .country-phone-dropdown{
        width:100% !important;
    }
}
/* =========================================================
   FINAL RAPIIKAN FORM PENDAFTARAN
   TAMBAHAN SAJA - JANGAN UBAH CSS LAMA
========================================================= */

/* CONTAINER FORM */
.register-mockup-container{
    width:1100px !important;
    max-width:calc(100% - 60px) !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:240px minmax(0,1fr) !important;
    column-gap:35px !important;

    padding:18px 0 70px !important;
    box-sizing:border-box !important;
}

/* KOLOM KIRI */
.register-mockup-benefit{
    padding-top:20px !important;
}

.register-mockup-benefit h2{
    font-size:18px !important;
    line-height:1.2 !important;
    margin:0 0 18px !important;
    font-weight:700 !important;
}

.register-mockup-benefit ul{
    margin:0 !important;
    padding-left:20px !important;
}

.register-mockup-benefit li{
    font-size:14px !important;
    line-height:1.45 !important;
    margin-bottom:14px !important;
    font-weight:400 !important;
}

/* FORM */
.register-mockup-form{
    width:100% !important;
    min-width:0 !important;
}

/* JUDUL DAFTAR AKUN */
.register-mockup-title{
    width:100% !important;
    height:40px !important;
    margin-bottom:20px !important;
}

.register-mockup-title span{
    height:40px !important;
    min-width:130px !important;
    padding:0 17px !important;
    font-size:16px !important;
    line-height:40px !important;
}

/* JUDUL BAGIAN */
.register-mockup-section-title{
    font-size:16px !important;
    line-height:22px !important;
    margin-bottom:13px !important;
    gap:9px !important;
}

.register-mockup-section-title span{
    width:5px !important;
    height:22px !important;
}

/* BARIS FORM */
.register-mockup-row{
    display:grid !important;

    /* kiri label / kanan input */
    grid-template-columns:240px minmax(0,1fr) !important;

    column-gap:25px !important;

    align-items:start !important;

    margin-bottom:20px !important;
}

/* LABEL */
.register-mockup-row > label{
    padding-top:7px !important;

    font-size:14px !important;
    line-height:20px !important;
    font-weight:700 !important;

    color:#fff !important;
}

/* SEMUA KOTAK INPUT */
.register-mockup-input{
    width:100% !important;
    height:40px !important;

    box-sizing:border-box !important;

    padding:0 10px !important;

    border:1px solid #777 !important;
    border-radius:0 !important;

    background:#85878b !important;
    color:#fff !important;

    font-size:14px !important;
    line-height:40px !important;

    outline:none !important;
}

/* FOCUS */
.register-mockup-input:focus{
    border-color:#dcae00 !important;
    box-shadow:0 0 4px rgba(255,215,0,.30) !important;
}

/* KETERANGAN DI BAWAH INPUT */
.register-mockup-row small{
    display:block !important;

    margin-top:4px !important;

    font-size:10px !important;
    line-height:1.45 !important;

    color:#ddd !important;
}

/* NOMOR TELEPON */
.register-phone-wrapper{
    position:relative !important;

    display:flex !important;
    align-items:stretch !important;

    width:100% !important;

    min-width:0 !important;
}

/* TOMBOL NEGARA */
.register-phone-wrapper .country-phone-button{
    flex:0 0 78px !important;
    width:78px !important;
    height:40px !important;

    padding:0 8px !important;
    margin:0 !important;

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

    background:#85878b !important;
    color:#fff !important;

    border:1px solid #777 !important;
    border-right:0 !important;

    cursor:pointer !important;
    z-index:10001 !important;

    font-size:14px !important;
}

/* KODE NEGARA */
.register-phone-wrapper .country-code{
    pointer-events:none !important;
}

/* PANAH */
.register-phone-wrapper .country-arrow{
    pointer-events:none !important;
    margin-left:3px !important;
}

/* INPUT NOMOR */
.register-phone-wrapper .register-phone-input{
    flex:1 1 auto !important;

    width:auto !important;
    height:40px !important;

    margin:0 !important;

    padding:0 10px !important;

    box-sizing:border-box !important;
}

/* DROPDOWN */
.register-phone-wrapper .country-phone-dropdown{
    position:absolute !important;

    left:0 !important;
    top:42px !important;

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

    max-height:300px !important;

    overflow-y:auto !important;

    background:#fff !important;

    border:1px solid #aaa !important;

    box-sizing:border-box !important;

    z-index:999999 !important;

    box-shadow:0 5px 15px rgba(0,0,0,.5) !important;
}

/* ITEM NEGARA */
.register-phone-wrapper .country-phone-item{
    width:100% !important;
    min-height:38px !important;

    padding:8px 14px !important;

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

    box-sizing:border-box !important;

    background:#fff !important;
    color:#777 !important;

    font-size:14px !important;

    cursor:pointer !important;
}

.register-phone-wrapper .country-phone-item:hover{
    background:#eeb600 !important;
    color:#fff !important;
}

/* TOMBOL LANJUT */
.register-mockup-action{
    display:flex !important;
    justify-content:flex-end !important;

    margin-top:24px !important;
}

.register-mockup-action button{
    min-width:70px !important;
    height:40px !important;

    padding:0 14px !important;

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

    cursor:pointer !important;
}


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

@media(max-width:768px){

    .register-mockup-container{
        width:100% !important;
        max-width:none !important;

        display:block !important;

        padding:15px 12px 50px !important;
        margin:0 !important;
    }

    .register-mockup-benefit{
        display:none !important;
    }

    .register-mockup-title{
        height:38px !important;
    }

    .register-mockup-title span{
        height:38px !important;
        min-width:115px !important;

        font-size:15px !important;
    }

    .register-mockup-row{
        display:block !important;

        margin-bottom:17px !important;
    }

    .register-mockup-row > label{
        display:block !important;

        padding:0 !important;
        margin-bottom:6px !important;

        font-size:13px !important;
        line-height:18px !important;
    }

    .register-mockup-input{
        width:100% !important;
        height:42px !important;

        font-size:13px !important;
    }

    .register-phone-wrapper .country-phone-button{
        height:42px !important;
        flex-basis:78px !important;
        width:78px !important;

        font-size:13px !important;
    }

    .register-phone-wrapper .register-phone-input{
        height:42px !important;
    }

    .register-mockup-row small{
        font-size:9px !important;
    }

    .register-mockup-action{
        margin-top:20px !important;
    }

    .register-mockup-action button{
        height:42px !important;
        min-width:80px !important;
        font-size:13px !important;
    }
}
/* =====================================================
   FIX FINAL - WA / NOMOR TELEPON
   +62 dan nomor TETAP SATU BARIS
   keterangan TURUN KE BAWAH
===================================================== */

.register-phone-wrapper {
    display: grid !important;

    grid-template-columns: 78px minmax(0, 1fr) !important;
    grid-template-rows: 40px auto !important;

    width: 100% !important;
    height: auto !important;

    position: relative !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}

/* ===============================
   TOMBOL +62
=============================== */

.register-phone-wrapper .country-phone-button {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 78px !important;
    height: 40px !important;

    min-width: 78px !important;
    max-width: 78px !important;

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

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

    background: #85878b !important;

    border: 1px solid #777 !important;
    border-right: 0 !important;

    color: #ffffff !important;

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

    box-sizing: border-box !important;
}

/* Tulisan +62 */
.register-phone-wrapper .country-phone-button .country-code {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Panah */
.register-phone-wrapper .country-phone-button .country-arrow {
    color: #ffffff !important;
    font-size: 9px !important;
    margin-left: 6px !important;
}

/* ===============================
   KOLOM NOMOR TELEPON
=============================== */

.register-phone-wrapper .register-phone-input {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    background: #85878b !important;

    color: #ffffff !important;

    border: 1px solid #777 !important;

    box-sizing: border-box !important;
}

/* ===============================
   KETERANGAN
   TURUN KE BAWAH KOLOM
=============================== */

.register-phone-wrapper > small {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;

    margin: 4px 0 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 11px !important;
    line-height: 17px !important;

    text-align: left !important;

    box-sizing: border-box !important;
}

/* ===============================
   DROPDOWN +62
=============================== */

.register-phone-wrapper .country-phone-dropdown {
    position: absolute !important;

    left: 0 !important;
    top: 42px !important;

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

    overflow-y: auto !important;

    background: #ffffff !important;

    border: 1px solid #aaa !important;

    z-index: 999999 !important;
}

.register-phone-wrapper .country-phone-dropdown.show {
    display: block !important;
}

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

@media (max-width: 768px) {

    .register-phone-wrapper {
        display: grid !important;

        grid-template-columns: 78px minmax(0, 1fr) !important;
        grid-template-rows: 40px auto !important;

        width: 100% !important;
    }

    .register-phone-wrapper .country-phone-button {
        width: 78px !important;
        min-width: 78px !important;
    }

    .register-phone-wrapper .register-phone-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .register-phone-wrapper > small {
        grid-column: 1 / -1 !important;
        width: 100% !important;

        font-size: 10px !important;
        line-height: 16px !important;
    }
}
/* ==========================================
   FIX WARNA +62
   PASTE PALING BAWAH style.css
   ========================================== */

.register-phone-wrapper .country-phone-button .country-code {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Panah ▼ juga putih */
.register-phone-wrapper .country-phone-button .country-arrow {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
/* ==========================================
   FIX FINAL KOLOM +62
   ========================================== */

.register-phone-wrapper .country-phone-button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;

    border: 1px solid #ddd !important;
    box-shadow: none !important;

    height: 40px !important;
    width: 80px !important;
    min-width: 80px !important;

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

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

    border-radius: 4px 0 0 4px !important;
}

/* Tulisan +62 */
.register-phone-wrapper .country-phone-button .country-code {
    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;
    background: transparent !important;
}

/* Panah */
.register-phone-wrapper .country-phone-button .country-arrow {
    color: #555555 !important;
    -webkit-text-fill-color: #555555 !important;
    margin-left: 7px !important;
    background: transparent !important;
}

/* Input nomor tetap abu-abu */
.register-phone-wrapper .register-phone-input {
    background: #858585 !important;
    color: #ffffff !important;

    height: 40px !important;
    border-radius: 0 4px 4px 0 !important;
}
/* =========================================================
   VALIDASI FORM PENDAFTARAN
   TAMBAHAN SAJA - CSS LAMA TIDAK DIUBAH
========================================================= */

.register-validation-message{
    display:none;
    margin-top:5px;
    font-size:12px;
    font-style:italic;
    line-height:1.4;
}

.register-validation-message.show{
    display:block;
}

.register-validation-message.error{
    color:#ff2020 !important;
}

.register-validation-message.success{
    color:#20d060 !important;
}

.register-validation-wrap{
    position:relative;
    width:100%;
}

.register-validation-wrap .register-validation-icon{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    font-weight:bold;
    pointer-events:none;
    z-index:5;
}

.register-validation-wrap .register-validation-icon.error{
    color:#ff0000;
}

.register-validation-wrap .register-validation-icon.success{
    color:#20d060;
}

.register-validation-input-error{
    border-color:#ff0000 !important;
    box-shadow:0 0 5px rgba(255,0,0,.35) !important;
}

.register-validation-input-success{
    border-color:#20d060 !important;
    box-shadow:0 0 5px rgba(32,208,96,.25) !important;
}


/* =========================================================
   POPUP WARNING
========================================================= */

#surgaRegisterWarning{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    z-index:9999999999;
    align-items:center;
    justify-content:center;
}

#surgaRegisterWarning.show{
    display:flex;
}

.surga-warning-box{
    width:510px;
    max-width:90%;
    background:#fff;
    border-radius:6px;
    padding:38px 35px 25px;
    text-align:center;
    box-sizing:border-box;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
    font-family:Arial,sans-serif;
}

.surga-warning-icon{
    width:80px;
    height:80px;
    margin:0 auto 24px;
    border:4px solid #f5c9a7;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f2ad7d;
    font-size:50px;
    font-weight:300;
}

.surga-warning-title{
    margin:0 0 12px;
    color:#506070;
    font-size:32px;
    font-weight:400;
}

.surga-warning-text{
    margin:0;
    color:#777;
    font-size:18px;
    line-height:1.45;
}

.surga-warning-ok{
    margin-top:25px;
    min-width:100px;
    padding:12px 30px;
    border:0;
    border-radius:5px;
    background:#3489d8;
    color:#fff;
    font-size:16px;
    cursor:pointer;
}

.surga-warning-ok:hover{
    background:#2779c5;
}

@media(max-width:768px){

    .register-validation-message{
        font-size:11px;
    }

    .surga-warning-box{
        width:92%;
        padding:30px 20px 22px;
    }

    .surga-warning-title{
        font-size:27px;
    }

    .surga-warning-text{
        font-size:16px;
    }

}
/* =========================================================
   WARNING FORM PENDAFTARAN
   TAMBAHAN BARU - PASTE PALING BAWAH style.css
========================================================= */

#surga-warning-register {
    position: fixed;
    inset: 0;
    z-index: 9999999999;

    display: none;

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

    background: rgba(0, 0, 0, 0.78);
}

#surga-warning-register.show {
    display: flex;
}

.surga-warning-register-box {
    width: 510px;
    max-width: calc(100% - 30px);

    background: #ffffff;

    border-radius: 6px;

    padding: 40px 35px 25px;

    text-align: center;

    box-sizing: border-box;

    box-shadow:
        0 10px 45px rgba(0, 0, 0, 0.6);
}

.surga-warning-register-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 25px;

    border: 4px solid #f5c9a6;

    border-radius: 50%;

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

    color: #f0aa78;

    font-size: 50px;
    font-weight: 300;
}

.surga-warning-register-title {
    margin: 0 0 12px;

    color: #506070;

    font-family: Arial, sans-serif;

    font-size: 32px;
    font-weight: 400;
}

.surga-warning-register-text {
    margin: 0;

    color: #777777;

    font-family: Arial, sans-serif;

    font-size: 18px;

    line-height: 1.45;
}

.surga-warning-register-ok {
    margin-top: 25px;

    min-width: 100px;

    padding: 12px 30px;

    border: 0;

    border-radius: 5px;

    background: #3489d8;

    color: #ffffff;

    font-size: 16px;

    cursor: pointer;
}

.surga-warning-register-ok:hover {
    background: #277ac5;
}
/* =========================================================
   VALIDASI NOMOR REKENING + CHECKBOX PERSETUJUAN
   TAMBAHAN SAJA
========================================================= */

.s5k-bank-status{
    display:block;
    min-height:18px;
    margin-top:5px;
    font-size:12px;
    font-style:italic;
    line-height:18px;
}

.s5k-bank-status.error{
    color:#ff0000 !important;
}

.s5k-bank-status.success{
    color:#19d65b !important;
}

.s5k-bank-input-error{
    border:1px solid #ff0000 !important;
    box-shadow:0 0 5px rgba(255,0,0,.35) !important;
}

.s5k-bank-input-success{
    border:1px solid #19d65b !important;
    box-shadow:0 0 5px rgba(25,214,91,.30) !important;
}

.s5k-bank-icon{
    float:right;
    font-size:16px;
    font-style:normal;
    font-weight:bold;
}

.s5k-bank-icon.error{
    color:#ff0000;
}

.s5k-bank-icon.success{
    color:#19d65b;
}


/* =========================================================
   CHECKBOX ERROR
========================================================= */

.s5k-agreement-error{
    color:#ff2020 !important;
    font-size:13px;
    font-style:italic;
    margin-top:8px;
    display:none;
}

.s5k-agreement-error.show{
    display:block;
}

.s5k-agreement-box-error{
    outline:1px solid #ff2020;
}


/* =========================================================
   POPUP WARNING
========================================================= */

#s5kBankWarning{
    display:none;

    position:fixed;
    inset:0;

    z-index:2147483647;

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

    background:rgba(0,0,0,.78);
}

#s5kBankWarning.show{
    display:flex;
}

.s5k-bank-warning-box{
    width:510px;
    max-width:90%;

    box-sizing:border-box;

    padding:40px 35px 25px;

    background:#fff;

    border-radius:6px;

    text-align:center;

    box-shadow:0 12px 45px rgba(0,0,0,.65);

    font-family:Arial,sans-serif;
}

.s5k-bank-warning-icon{
    width:80px;
    height:80px;

    margin:0 auto 25px;

    border:4px solid #f5c9a6;

    border-radius:50%;

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

    color:#f0aa78;

    font-size:50px;
    font-weight:300;
}

.s5k-bank-warning-title{
    margin:0 0 12px;

    color:#506070;

    font-size:32px;
    font-weight:400;
}

.s5k-bank-warning-text{
    margin:0;

    color:#777;

    font-size:18px;

    line-height:1.45;
}

.s5k-bank-warning-ok{
    margin-top:25px;

    min-width:100px;

    padding:12px 30px;

    border:0;

    border-radius:5px;

    background:#3489d8;

    color:#fff;

    font-size:16px;

    cursor:pointer;
}
/* =========================================================
   PESAN ERROR CHECKBOX
========================================================= */

#bankRegisterPage .s5k-final-agreement-error {
    display: none;

    margin-top: 8px;

    color: #ff4b4b !important;

    font-size: 13px !important;

    font-style: italic !important;

    line-height: 18px !important;
}
/* =========================================================
   DEMO SUCCESS
========================================================= */

#s5kDemoSuccessPopup {
    display:none;
    position:fixed;
    inset:0;
    z-index:999999999;

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

    background:rgba(0,0,0,.78);
}

#s5kDemoSuccessPopup.show {
    display:flex;
}

.s5k-demo-success-box {
    width:510px;
    max-width:90%;

    padding:40px 30px 25px;

    box-sizing:border-box;

    background:#fff;
    border-radius:6px;

    text-align:center;

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

.s5k-demo-success-icon {
    width:78px;
    height:78px;

    margin:0 auto 25px;

    border:4px solid #d9f2c8;
    border-radius:50%;

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

    color:#9bd77c;

    font-size:50px;
}

.s5k-demo-success-title {
    color:#555;
    font-size:32px;
    margin-bottom:12px;
}

.s5k-demo-success-text {
    color:#777;
    font-size:18px;
    line-height:1.5;
}

#s5kDemoSuccessOK {
    margin-top:25px;

    padding:12px 35px;

    border:0;
    border-radius:5px;

    background:#3489d8;
    color:#fff;

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


/* =========================================================
   HALAMAN AKUN DEMO
========================================================= */

#s5kDemoAccountPage {
    display:none;

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

    padding:60px 20px;

    box-sizing:border-box;

    background:#000;

    text-align:center;

    color:#fff;
}

#s5kDemoAccountPage.show {
    display:block;
}

.s5k-demo-account-box {
    max-width:1170px;
    margin:0 auto;

    padding:35px;

    background:#111;
}

.s5k-demo-account-box h1 {
    margin:0 0 12px;

    font-size:34px;
}

.s5k-demo-account-box h1 span {
    color:#ffe600;
}

.s5k-demo-active {
    color:#20df20;
    font-size:27px;
    margin-bottom:25px;
}

.s5k-demo-id {
    font-size:20px;
    margin:15px 0;
}

.s5k-demo-id strong {
    color:#ffe600;
}

.s5k-demo-points {
    margin-top:15px;
    font-size:20px;
}

.s5k-demo-points strong {
    color:#20df20;
}

#s5kDemoLogout {
    margin-top:30px;

    padding:13px 30px;

    border:0;

    background:#eab000;
    color:#111;

    font-size:16px;

    cursor:pointer;
}
/* =========================================================
   MOBILE HEADER SURGA5000
   HANYA BERLAKU DI HP
   Paste di PALING BAWAH style.css
   ========================================================= */

@media (max-width: 600px){

    /* HEADER UTAMA */
    .utility-bar{
        position: relative !important;
        width: 100% !important;
        height: 145px !important;
        min-height: 145px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #050505 !important;
        border-bottom: 1px solid #222 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* =====================================================
       BARIS ATAS
       HAMBURGER | LOGO | USER
       ===================================================== */

    .utility-top-row{
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #171717 !important;
        box-sizing: border-box !important;
    }

    /* LOGO TENGAH */
    .top-logo{
        position: absolute !important;
        left: 50% !important;
        top: 5px !important;
        transform: translateX(-50%) !important;
        width: 130px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .top-logo img{
        width: 125px !important;
        max-width: 125px !important;
        height: auto !important;
        display: block !important;
    }

    /* HAMBURGER KIRI */
    .utility-top-row::before{
        content: "\f0c9";
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        position: absolute !important;
        left: 15px !important;
        top: 11px !important;
        color: #ffd000 !important;
        font-size: 25px !important;
        line-height: 30px !important;
        z-index: 20 !important;
    }

    /* ICON USER KANAN */
    .utility-top-row::after{
        content: "\f2bd";
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 400 !important;
        position: absolute !important;
        right: 15px !important;
        top: 10px !important;
        color: #ffd000 !important;
        font-size: 27px !important;
        line-height: 30px !important;
        z-index: 20 !important;
    }

    /* =====================================================
       SEMBUNYIKAN ELEMEN HEADER LAMA DARI BARIS ATAS
       ===================================================== */

    .utility-top-row .running-text-container{
        position: absolute !important;
        left: 0 !important;
        top: 52px !important;
        width: 48% !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 5 !important;
    }

    /* ICON MEGAPHONE */
    .running-text-container > i{
        color: #ffd000 !important;
        font-size: 17px !important;
        flex-shrink: 0 !important;
        margin-right: 5px !important;
    }

    /* TEKS SELAMAT DATANG */
    .running-text{
        display: block !important;
        width: calc(100% - 22px) !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* =====================================================
       KANAN: PENGADUAN + JAM
       ===================================================== */

    .top-right-info{
        position: absolute !important;
        right: 8px !important;
        top: 52px !important;
        width: 52% !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 15 !important;
    }

    /* PENGADUAN */
    .btn-pengaduan{
        padding: 5px 9px !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 6px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        height: 25px !important;
        display: flex !important;
        align-items: center !important;
    }

    .btn-pengaduan i{
        font-size: 9px !important;
    }

    /* JAM */
    .clock-text{
        font-size: 11px !important;
        font-weight: 900 !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        color: #00ff88 !important;
        background: #020202 !important;
        border: 1px solid rgba(0,255,150,.45) !important;
        border-radius: 6px !important;
        box-shadow: 0 0 8px rgba(0,255,150,.25) !important;
        white-space: nowrap !important;
    }

    /* HILANGKAN PEMISAH DAN SHARE */
    .top-right-info .separator,
    .top-right-info > i.fa-share-nodes{
        display: none !important;
    }

    /* =====================================================
       BARIS BAWAH
       ICON KIRI | LOGIN DAFTAR KANAN
       ===================================================== */

    .utility-bottom-row{
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 92px !important;
        height: 53px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-top: 1px solid #111 !important;
    }

    /* ICON INFO */
    .utility-icons{
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        height: 100% !important;
    }

    .utility-icons i{
        width: 29px !important;
        height: 29px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        color: #ffd000 !important;
        background: #080808 !important;
        border: 1px solid rgba(255,208,0,.5) !important;
        border-radius: 7px !important;
        box-sizing: border-box !important;
    }

    .utility-icons .separator{
        display: none !important;
    }

    /* LOGIN DAFTAR */
    .auth-buttons{
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    .auth-buttons button{
        height: 29px !important;
        min-width: 62px !important;
        padding: 0 11px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }

    /* =====================================================
       INDONESIA
       ===================================================== */

    .top-right-info > .flex{
        position: absolute !important;
        right: 0 !important;
        top: 31px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .top-right-info > .flex img{
        width: 18px !important;
        height: 18px !important;
    }

    .top-right-info > .flex span{
        font-size: 7px !important;
        font-weight: 700 !important;
    }

    /* =====================================================
       NAVBAR TEPAT DI BAWAH HEADER
       ===================================================== */

    .nav-main{
        position: relative !important;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #101010 !important;
        border-top: 1px solid #292929 !important;
        border-bottom: 2px solid #d6ad00 !important;
        box-sizing: border-box !important;
    }

    .nav-container{
        display: flex !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .nav-item{
        flex: 0 0 82px !important;
        width: 82px !important;
        min-width: 82px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 3px 2px !important;
        box-sizing: border-box !important;
    }

    .nav-item img{
        width: 25px !important;
        height: 25px !important;
        object-fit: contain !important;
    }

    .nav-item span,
    .nav-item div{
        font-size: 8px !important;
        line-height: 10px !important;
        text-align: center !important;
    }

    /* Hilangkan scrollbar horizontal */
    .nav-main::-webkit-scrollbar{
        height: 0 !important;
        display: none !important;
    }

    .nav-main{
        scrollbar-width: none !important;
    }
}


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

@media (max-width: 380px){

    .top-logo img{
        width: 115px !important;
    }

    .utility-top-row::before{
        left: 13px !important;
        font-size: 23px !important;
    }

    .utility-top-row::after{
        right: 13px !important;
        font-size: 25px !important;
    }

    .btn-pengaduan{
        font-size: 7px !important;
        padding: 4px 7px !important;
    }

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

    .nav-item{
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
    }
}
/* =========================================================
   SURGA5000 - FIX POSISI HEADER HP
   HANYA MENGATUR BAGIAN ATAS
   NAVBAR BAWAH TIDAK DIUBAH
   PASTE PALING BAWAH style.css
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       TINGGI HEADER ATAS
       ===================================================== */

    .utility-bar {
        height: 150px !important;
        min-height: 150px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .utility-top-row {
        position: relative !important;
        width: 100% !important;
        height: 150px !important;
        min-height: 150px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
    }


    /* =====================================================
       LOGO TETAP DI TENGAH
       ===================================================== */

    .utility-top-row .top-logo {
        position: absolute !important;
        left: 50% !important;
        top: 5px !important;
        transform: translateX(-50%) !important;
        width: 130px !important;
        height: 50px !important;
        margin: 0 !important;
        z-index: 50 !important;
    }

    .utility-top-row .top-logo img {
        width: 125px !important;
        height: auto !important;
        max-width: 125px !important;
        max-height: 50px !important;
        object-fit: contain !important;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .utility-top-row::before {
        content: "\f0c9" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;

        position: absolute !important;
        left: 14px !important;
        top: 12px !important;

        color: #ffd000 !important;
        font-size: 27px !important;
        line-height: 30px !important;

        z-index: 100 !important;
    }


    /* =====================================================
       ICON USER
       ===================================================== */

    .utility-top-row::after {
        content: "\f2bd" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 400 !important;

        position: absolute !important;
        right: 14px !important;
        top: 10px !important;

        color: #ffd000 !important;
        font-size: 30px !important;
        line-height: 32px !important;

        z-index: 100 !important;
    }


    /* =====================================================
       TOP RIGHT INFO
       JANGAN PAKAI DISPLAY CONTENTS LAGI
       ===================================================== */

    .utility-top-row .top-right-info {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;
        width: 100% !important;
        height: 150px !important;

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

        z-index: 20 !important;
    }


    /* =====================================================
       PENGADUAN MEMBER
       POSISI TENGAH
       ===================================================== */

    .utility-top-row .top-right-info .btn-pengaduan {
        position: absolute !important;

        left: 50% !important;
        top: 55px !important;

        transform: translateX(-50%) !important;

        width: 150px !important;
        min-width: 150px !important;
        height: 34px !important;

        padding: 0 8px !important;
        margin: 0 !important;

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

        background: linear-gradient(
            to bottom,
            #ffd900,
            #d39b00
        ) !important;

        color: #000 !important;
        border-radius: 8px !important;

        font-size: 10px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;

        z-index: 60 !important;
    }

    .utility-top-row .top-right-info .btn-pengaduan i {
        font-size: 10px !important;
        margin-right: 5px !important;
    }


    /* =====================================================
       JAM DIGITAL
       POJOK KANAN
       ===================================================== */

    .utility-top-row .top-right-info .clock-text {
        position: absolute !important;

        right: 10px !important;
        top: 55px !important;

        width: 82px !important;
        min-width: 82px !important;
        height: 34px !important;

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

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

        color: #00ffcc !important;
        background: #000 !important;

        border: 1px solid rgba(
            0,
            255,
            204,
            .6
        ) !important;

        border-radius: 8px !important;

        font-family: "Courier New", monospace !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;

        white-space: nowrap !important;

        z-index: 60 !important;
    }


    /* =====================================================
       INDONESIA
       DI BAWAH JAM
       ===================================================== */

    .utility-top-row .top-right-info > .flex {
        position: absolute !important;

        right: 8px !important;
        top: 91px !important;

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

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

        gap: 4px !important;

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

        z-index: 60 !important;
    }

    .utility-top-row .top-right-info > .flex img {
        width: 18px !important;
        height: 18px !important;

        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .utility-top-row .top-right-info > .flex span {
        color: #fff !important;

        font-size: 7px !important;
        font-weight: 800 !important;

        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }


    /* =====================================================
       BARIS 3 ICON + LOGIN
       ===================================================== */

    .utility-bottom-row {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        top: 55px !important;
        bottom: auto !important;

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

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

        display: block !important;

        z-index: 70 !important;
    }


    /* =====================================================
       3 KOTAK [?] [!] [CHAT]
       DI SAMPING KIRI PENGADUAN
       ===================================================== */

    .utility-bottom-row .utility-icons {
        position: absolute !important;

        left: 10px !important;
        top: 0 !important;

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

        gap: 6px !important;

        width: auto !important;
        height: 36px !important;

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

        z-index: 90 !important;
    }

    .utility-bottom-row .utility-icons .separator {
        display: none !important;
    }

    .utility-bottom-row .utility-icons i {
        width: 31px !important;
        height: 31px !important;

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

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

        color: #ffd000 !important;
        background: #050505 !important;

        border: 1px solid #8d7100 !important;
        border-radius: 6px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MEGAPHONE + RUNNING TEXT
       PINDAH KE BAWAH
       ===================================================== */

    .utility-top-row .running-text-container {
        position: absolute !important;

        left: 10px !important;
        top: 104px !important;

        width: 53% !important;
        max-width: 53% !important;

        height: 30px !important;

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

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

        gap: 5px !important;

        overflow: hidden !important;

        z-index: 80 !important;
    }


    /* MEGAPHONE */

    .utility-top-row .running-text-container > i {
        flex: 0 0 auto !important;

        color: #ffd000 !important;
        font-size: 18px !important;

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


    /* RUNNING TEXT */

    .utility-top-row .running-text {
        display: block !important;

        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        color: #fff !important;

        font-size: 8px !important;
        font-weight: 700 !important;

        line-height: 20px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

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


    /* =====================================================
       LOGIN + DAFTAR
       DI BAWAH JAM
       ===================================================== */

    .utility-bottom-row .auth-buttons {
        position: absolute !important;

        right: 10px !important;
        top: 47px !important;

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

        gap: 6px !important;

        width: auto !important;

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

        z-index: 90 !important;
    }


    .utility-bottom-row .auth-buttons button {
        width: 67px !important;
        min-width: 67px !important;

        height: 30px !important;

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

        border-radius: 5px !important;

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

        line-height: 30px !important;

        box-sizing: border-box !important;
    }


    .utility-bottom-row .auth-buttons .btn-login {
        background: #050505 !important;
        color: #ffd000 !important;

        border: 1px solid #a38200 !important;
    }


    .utility-bottom-row .auth-buttons .btn-daftar {
        background: linear-gradient(
            to bottom,
            #ffd900,
            #ff9800
        ) !important;

        color: #000 !important;

        border: 1px solid #e0a900 !important;
    }


    /* =====================================================
       PENTING:
       NAVBAR BAWAH TIDAK DIUBAH
       ===================================================== */

    .nav-main,
    .nav-container,
    .nav-container .nav-item,
    .nav-container .nav-item img,
    .nav-container .nav-item i,
    .nav-container .nav-item .hot-badge {
        /* sengaja tidak mengubah layout navbar */
    }
}
/* =========================================================
   SURGA5000 - FIX POSISI HEADER HP
   HANYA MENGATUR BAGIAN ATAS
   NAVBAR BAWAH TIDAK DIUBAH
   PASTE PALING BAWAH style.css
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       TINGGI HEADER ATAS
       ===================================================== */

    .utility-bar {
        height: 150px !important;
        min-height: 150px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .utility-top-row {
        position: relative !important;
        width: 100% !important;
        height: 150px !important;
        min-height: 150px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
    }


    /* =====================================================
       LOGO TETAP DI TENGAH
       ===================================================== */

    .utility-top-row .top-logo {
        position: absolute !important;
        left: 50% !important;
        top: 5px !important;
        transform: translateX(-50%) !important;
        width: 130px !important;
        height: 50px !important;
        margin: 0 !important;
        z-index: 50 !important;
    }

    .utility-top-row .top-logo img {
        width: 125px !important;
        height: auto !important;
        max-width: 125px !important;
        max-height: 50px !important;
        object-fit: contain !important;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .utility-top-row::before {
        content: "\f0c9" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;

        position: absolute !important;
        left: 14px !important;
        top: 12px !important;

        color: #ffd000 !important;
        font-size: 27px !important;
        line-height: 30px !important;

        z-index: 100 !important;
    }


    /* =====================================================
       ICON USER
       ===================================================== */

    .utility-top-row::after {
        content: "\f2bd" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 400 !important;

        position: absolute !important;
        right: 14px !important;
        top: 10px !important;

        color: #ffd000 !important;
        font-size: 30px !important;
        line-height: 32px !important;

        z-index: 100 !important;
    }


    /* =====================================================
       TOP RIGHT INFO
       JANGAN PAKAI DISPLAY CONTENTS LAGI
       ===================================================== */

    .utility-top-row .top-right-info {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;
        width: 100% !important;
        height: 150px !important;

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

        z-index: 20 !important;
    }


    /* =====================================================
       PENGADUAN MEMBER
       POSISI TENGAH
       ===================================================== */

    .utility-top-row .top-right-info .btn-pengaduan {
        position: absolute !important;

        left: 50% !important;
        top: 55px !important;

        transform: translateX(-50%) !important;

        width: 150px !important;
        min-width: 150px !important;
        height: 34px !important;

        padding: 0 8px !important;
        margin: 0 !important;

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

        background: linear-gradient(
            to bottom,
            #ffd900,
            #d39b00
        ) !important;

        color: #000 !important;
        border-radius: 8px !important;

        font-size: 10px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;

        z-index: 60 !important;
    }

    .utility-top-row .top-right-info .btn-pengaduan i {
        font-size: 10px !important;
        margin-right: 5px !important;
    }


    /* =====================================================
       JAM DIGITAL
       POJOK KANAN
       ===================================================== */

    .utility-top-row .top-right-info .clock-text {
        position: absolute !important;

        right: 10px !important;
        top: 55px !important;

        width: 82px !important;
        min-width: 82px !important;
        height: 34px !important;

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

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

        color: #00ffcc !important;
        background: #000 !important;

        border: 1px solid rgba(
            0,
            255,
            204,
            .6
        ) !important;

        border-radius: 8px !important;

        font-family: "Courier New", monospace !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;

        white-space: nowrap !important;

        z-index: 60 !important;
    }


    /* =====================================================
       INDONESIA
       DI BAWAH JAM
       ===================================================== */

    .utility-top-row .top-right-info > .flex {
        position: absolute !important;

        right: 8px !important;
        top: 91px !important;

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

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

        gap: 4px !important;

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

        z-index: 60 !important;
    }

    .utility-top-row .top-right-info > .flex img {
        width: 18px !important;
        height: 18px !important;

        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .utility-top-row .top-right-info > .flex span {
        color: #fff !important;

        font-size: 7px !important;
        font-weight: 800 !important;

        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }


    /* =====================================================
       BARIS 3 ICON + LOGIN
       ===================================================== */

    .utility-bottom-row {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        top: 55px !important;
        bottom: auto !important;

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

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

        display: block !important;

        z-index: 70 !important;
    }


    /* =====================================================
       3 KOTAK [?] [!] [CHAT]
       DI SAMPING KIRI PENGADUAN
       ===================================================== */

    .utility-bottom-row .utility-icons {
        position: absolute !important;

        left: 10px !important;
        top: 0 !important;

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

        gap: 6px !important;

        width: auto !important;
        height: 36px !important;

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

        z-index: 90 !important;
    }

    .utility-bottom-row .utility-icons .separator {
        display: none !important;
    }

    .utility-bottom-row .utility-icons i {
        width: 31px !important;
        height: 31px !important;

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

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

        color: #ffd000 !important;
        background: #050505 !important;

        border: 1px solid #8d7100 !important;
        border-radius: 6px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MEGAPHONE + RUNNING TEXT
       PINDAH KE BAWAH
       ===================================================== */

    .utility-top-row .running-text-container {
        position: absolute !important;

        left: 10px !important;
        top: 104px !important;

        width: 53% !important;
        max-width: 53% !important;

        height: 30px !important;

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

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

        gap: 5px !important;

        overflow: hidden !important;

        z-index: 80 !important;
    }


    /* MEGAPHONE */

    .utility-top-row .running-text-container > i {
        flex: 0 0 auto !important;

        color: #ffd000 !important;
        font-size: 18px !important;

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


    /* RUNNING TEXT */

    .utility-top-row .running-text {
        display: block !important;

        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        color: #fff !important;

        font-size: 8px !important;
        font-weight: 700 !important;

        line-height: 20px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

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


    /* =====================================================
       LOGIN + DAFTAR
       DI BAWAH JAM
       ===================================================== */

    .utility-bottom-row .auth-buttons {
        position: absolute !important;

        right: 10px !important;
        top: 47px !important;

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

        gap: 6px !important;

        width: auto !important;

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

        z-index: 90 !important;
    }


    .utility-bottom-row .auth-buttons button {
        width: 67px !important;
        min-width: 67px !important;

        height: 30px !important;

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

        border-radius: 5px !important;

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

        line-height: 30px !important;

        box-sizing: border-box !important;
    }


    .utility-bottom-row .auth-buttons .btn-login {
        background: #050505 !important;
        color: #ffd000 !important;

        border: 1px solid #a38200 !important;
    }


    .utility-bottom-row .auth-buttons .btn-daftar {
        background: linear-gradient(
            to bottom,
            #ffd900,
            #ff9800
        ) !important;

        color: #000 !important;

        border: 1px solid #e0a900 !important;
    }


    /* =====================================================
       PENTING:
       NAVBAR BAWAH TIDAK DIUBAH
       ===================================================== */

    .nav-main,
    .nav-container,
    .nav-container .nav-item,
    .nav-container .nav-item img,
    .nav-container .nav-item i,
    .nav-container .nav-item .hot-badge {
        /* sengaja tidak mengubah layout navbar */
    }
}
/* =========================================================
   FINAL FIX MOBILE
   HANYA PENGADUAN MEMBER + JAM DIGITAL
   NAVBAR DAN ELEMEN LAIN TIDAK DIUBAH
   ========================================================= */

@media (max-width: 768px) {

    /* =========================
       PENGADUAN MEMBER
       LEBIH KECIL
       ========================= */
    .utility-top-row .top-right-info .btn-pengaduan {
        position: absolute !important;

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

        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;

        padding: 0 5px !important;
        margin: 0 !important;

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

        font-size: 9px !important;
        line-height: 32px !important;

        border-radius: 8px !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
        overflow: hidden !important;

        z-index: 60 !important;
    }

    /* ikon tanda seru */
    .utility-top-row .top-right-info .btn-pengaduan i {
        font-size: 9px !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }


    /* =========================
       JAM DIGITAL
       LEBIH KECIL
       ========================= */
    .utility-top-row .top-right-info #realtime-clock {
        position: absolute !important;

        right: 10px !important;
        top: 55px !important;

        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

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

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

        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        line-height: 38px !important;

        border-radius: 9px !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;

        z-index: 60 !important;
    }

}
/* =========================================================
   FIX JAM DIGITAL MOBILE
   PASTE PALING BAWAH STYLE.CSS
   JANGAN UBAH CSS LAMA
   ========================================================= */

@media screen and (max-width: 768px) {

    body .utility-top-row .top-right-info .clock-text {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;

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

        font-size: 7px !important;
        line-height: 22px !important;
        letter-spacing: 0 !important;

        border-radius: 5px !important;

        transform: scale(0.65) !important;
        transform-origin: right center !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
        white-space: nowrap !important;

        z-index: 60 !important;
    }

}
/* =========================================================
   POSISI INDONESIA - SESUAI FOTO REFERENSI
   TAMBAHAN SAJA - PASTE PALING BAWAH
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Container bendera + tulisan */
    .utility-top-row .top-right-info > .flex {
        position: absolute !important;

        right: 8px !important;
        top: 84px !important;

        width: auto !important;
        height: 30px !important;

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

        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        z-index: 70 !important;
    }

    /* Bendera Indonesia */
    .utility-top-row .top-right-info > .flex img {
        width: 28px !important;
        height: 28px !important;

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

        border-radius: 50% !important;
        object-fit: cover !important;

        transform: none !important;
    }

    /* Tulisan INDONESIA • INDONESIA */
    .utility-top-row .top-right-info > .flex span {
        font-size: 12px !important;
        font-weight: 900 !important;

        letter-spacing: 0 !important;
        line-height: 30px !important;

        color: #ffffff !important;

        white-space: nowrap !important;

        transform: none !important;
    }

}
/* =========================================
   PERKECIL LOGO & TULISAN INDONESIA - HP
   TAMBAHAN SAJA
   ========================================= */

@media screen and (max-width: 768px) {

    .utility-top-row .top-right-info > .flex {
        gap: 3px !important;
        height: 22px !important;
        top: 84px !important;
    }

    /* Logo / bendera Indonesia */
    .utility-top-row .top-right-info > .flex img {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    /* Tulisan Indonesia */
    .utility-top-row .top-right-info > .flex span {
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 22px !important;
    }

}
/* =========================================================
   HEADER ATAS TETAP BEKU SAAT SCROLL - MOBILE
   HANYA:
   HAMBURGER + LOGO + ICON USER
   ELEMEN LAIN TIDAK IKUT BEKU
   CSS LAMA TIDAK DIUBAH
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Background hitam untuk bagian header yang dibekukan */
    body::before {
        content: "";
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

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

        background: #050505 !important;

        z-index: 99990 !important;

        pointer-events: none !important;
    }

    /* LOGO SURGA5000 - TETAP DI ATAS */
    .utility-top-row .top-logo {
        position: fixed !important;

        left: 50% !important;
        top: 5px !important;

        transform: translateX(-50%) !important;

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

        z-index: 99999 !important;

        margin: 0 !important;
    }

    .utility-top-row .top-logo img {
        width: 125px !important;
        height: auto !important;

        max-width: 125px !important;
        max-height: 50px !important;

        object-fit: contain !important;
    }

    /* HAMBURGER KIRI - TETAP DI ATAS */
    .utility-top-row::before {
        position: fixed !important;

        left: 14px !important;
        top: 12px !important;

        z-index: 100000 !important;

        pointer-events: none !important;
    }

    /* ICON USER KANAN - TETAP DI ATAS */
    .utility-top-row::after {
        position: fixed !important;

        right: 14px !important;
        top: 10px !important;

        z-index: 100000 !important;

        pointer-events: none !important;
    }

}


/* HP KECIL */
@media screen and (max-width: 380px) {

    body::before {
        height: 52px !important;
    }

    .utility-top-row .top-logo {
        top: 5px !important;
    }

    .utility-top-row .top-logo img {
        width: 115px !important;
    }

    .utility-top-row::before {
        left: 12px !important;
        top: 11px !important;
    }

    .utility-top-row::after {
        right: 12px !important;
        top: 10px !important;
    }

}
/* =====================================================
   BOTTOM NAVIGATION MOBILE
   HOME | PROMOSI | LIVE CHAT
   CSS TAMBAHAN SAJA
   ===================================================== */

.mobile-bottom-nav {
    display: none;
}


/* =====================================================
   TAMPIL DI HP
   ===================================================== */

@media screen and (max-width: 768px) {

    .mobile-bottom-nav {
        position: fixed !important;

        left: 0 !important;
        bottom: 0 !important;

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

        display: flex !important;
        align-items: stretch !important;
        justify-content: space-around !important;

        background: #2b2b2b !important;

        z-index: 999999 !important;

        box-sizing: border-box !important;

        border-top: 1px solid #333 !important;

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


    /* ITEM */

    .mobile-bottom-item {
        flex: 1 1 33.333% !important;

        height: 82px !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 8px !important;

        color: #ffffff !important;

        text-decoration: none !important;

        font-family: Arial, sans-serif !important;

        box-sizing: border-box !important;

        -webkit-tap-highlight-color: transparent !important;
    }


    /* ICON */

    .mobile-bottom-item i {
        font-size: 42px !important;

        line-height: 1 !important;

        color: #ffffff !important;

        font-weight: 400 !important;
    }


    /* TEXT */

    .mobile-bottom-item span {
        font-size: 17px !important;

        font-weight: 400 !important;

        letter-spacing: 0 !important;

        color: #ffffff !important;

        line-height: 1 !important;
    }


    /* ITEM AKTIF */

    .mobile-bottom-item.active {
        background: transparent !important;
    }


    .mobile-bottom-item:active {
        background: rgba(255,255,255,0.06) !important;
    }

}


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

@media screen and (max-width: 380px) {

    .mobile-bottom-nav {
        height: 72px !important;
    }

    .mobile-bottom-item {
        height: 72px !important;

        gap: 6px !important;
    }

    .mobile-bottom-item i {
        font-size: 34px !important;
    }

    .mobile-bottom-item span {
        font-size: 14px !important;
    }

}
/* =====================================================
   FIX ICON BOTTOM NAV
   RUMAH - HADIAH - LIVE CHAT
   ===================================================== */

@media screen and (max-width: 768px) {

    .mobile-bottom-item i {
        display: block !important;

        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;

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

        color: #ffffff !important;

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

    .mobile-bottom-item span {
        display: block !important;

        color: #ffffff !important;

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

}
/* PERKECIL ICON BOTTOM NAV */
@media screen and (max-width: 768px) {

    .mobile-bottom-item i {
        font-size: 24px !important;
        transform: scale(0.75) !important;
        margin-bottom: -2px !important;
    }

    .mobile-bottom-item span {
        font-size: 14px !important;
    }

}
/* =====================================================
   TAMBAH RUANG SCROLL DI BAWAH HALAMAN MOBILE
   AGAR TOMBOL "LANJUT" TIDAK TERTUTUP BOTTOM NAV
   ===================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        padding-bottom: 110px !important;
    }

    body {
        min-height: calc(100vh + 110px) !important;
    }

}
/* =====================================================
   FORM DAFTAR - RUANG TAMBAHAN DI BAWAH
   AGAR TOMBOL SEBELUMNYA & SUBMIT TIDAK TERTUTUP
   BOTTOM NAV
   ===================================================== */

@media screen and (max-width: 768px) {

    /* Tambahkan ruang scroll setelah seluruh isi form */
    body {
        padding-bottom: 180px !important;
    }

    html {
        padding-bottom: 180px !important;
    }

    /* Pastikan tombol form bisa berada di atas bottom nav */
    button,
    input[type="submit"],
    .submit-btn,
    .btn-submit {
        position: relative !important;
        z-index: 10 !important;
    }

}
@media screen and (max-width: 768px) {
    body::after {
        content: "";
        display: block;
        height: 100px;
        width: 100%;
    }
}
/* =========================================================
   FIX FINAL FORM BANK MOBILE
   TOMBOL SEBELUMNYA & SUBMIT BISA DI-SCROLL SAMPAI TERLIHAT
   CSS TAMBAHAN SAJA
   ========================================================= */

@media screen and (max-width: 800px) {

    /* Tambahkan ruang besar setelah isi form */
    #bankRegisterPage .register-content {
        padding-bottom: 180px !important;
        margin-bottom: 100px !important;
    }

    /* Tombol tetap berada di atas area bottom navigation */
    #bankRegisterPage .register-buttons {
        position: relative !important;
        z-index: 20 !important;

        margin-top: 20px !important;
        margin-bottom: 140px !important;

        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    /* Tombol Sebelumnya */
    #bankRegisterPage .register-buttons .register-btn.back {
        position: relative !important;
        z-index: 21 !important;

        min-height: 42px !important;
    }

    /* Tombol Submit */
    #bankRegisterPage .register-buttons .register-btn:not(.back) {
        position: relative !important;
        z-index: 21 !important;

        min-height: 42px !important;
    }

}
/* =========================================================
   FIX FORM BANK - TIDAK BISA GESER KE KANAN / KIRI
   TAMBAHAN SAJA
   ========================================================= */

@media screen and (max-width: 800px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #bankRegisterPage {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #bankRegisterPage .register-content {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        box-sizing: border-box !important;
    }

    #bankRegisterPage * {
        max-width: 100%;
        box-sizing: border-box;
    }

}
/* =====================================================
   FIX HEADER FORM BANK - TIDAK TRANSPARAN
   ===================================================== */
@media (max-width: 768px) {

    /* Header bagian atas dibuat benar-benar solid */
    header,
    .header,
    .top-header,
    .mobile-header,
    .main-header {
        background: #050505 !important;
        background-color: #050505 !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Pastikan isi header tidak tembus ke form */
    header::before,
    header::after,
    .header::before,
    .header::after,
    .top-header::before,
    .top-header::after,
    .mobile-header::before,
    .mobile-header::after {
        opacity: 1 !important;
    }

    /* Logo dan menu tetap berada di atas background */
    header img,
    .header img,
    .mobile-header img {
        position: relative;
        z-index: 10;
    }
}