:root{
    /* Brand */
    --primary-color:#FF6500 !important;
    --primary-hover:#ff7a24 !important;
    --primary-dark:#e65b00 !important;
    --primary-light:#ffb27d !important;
    /* Background */
    --bg-1:#ffffff !important;
    --bg-2:#fafafa !important;
    --bg-3:#f3f3f3 !important;
    /* Dark */
    --dark-1:#111111 !important;
    --dark-2:#1b1b1b !important;
    --dark-3:#262626 !important;
    /* Text */
    --text:#222 !important;
    --text-light:#666 !important;
    --text-white:#fff !important;
    /* Border */
    --border:rgba(0,0,0,.08) !important;
    --border-light:rgba(255,255,255,.20) !important;
    --border-primary:rgba(255,101,0,.28) !important;
    /* Glass */
    --glass:rgba(255,255,255,.08) !important;
    --glass-dark:rgba(0,0,0,.08) !important;
    /* Shadow */
    --shadow-xs:0 2px 6px rgba(0,0,0,.08) !important;
    --shadow-sm:
        0 4px 10px rgba(0,0,0,.10) !important;
    --shadow-md:
        0 8px 18px rgba(0,0,0,.14) !important;
    --shadow-lg:
        0 14px 34px rgba(0,0,0,.18) !important;
    --shadow-xl:
        0 20px 48px rgba(0,0,0,.24) !important;
    /* Orange Glow */
    --glow-sm:
        0 0 8px rgba(255,101,0,.18) !important;
    --glow-md:
        0 0 18px rgba(255,101,0,.25) !important;
    --glow-lg:
        0 0 30px rgba(255,101,0,.35) !important;
    /* Inner Shadow */
    --inner-light:
        inset 0 1px 0 rgba(255,255,255,.22) !important;
    --inner-dark:
        inset 0 -2px 0 rgba(0,0,0,.12) !important;
    /* Radius */
    --radius-xs:6px !important;
    --radius-sm:10px !important;
    --radius-md:14px !important;
    --radius-lg:18px !important;
    --radius-xl:24px !important;
    --radius-round:999px !important;
    /* Transition */
    --transition:.30s cubic-bezier(.4,0,.2,1) !important;
    /* Blur */
    --blur:blur(12px) !important;
    /* Gradient */
    --gradient-primary:
        linear-gradient(
            180deg,
            var(--primary-hover),
            var(--primary-color),
            var(--primary-dark)
        ) !important;
    --gradient-light:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,0)
        ) !important;
    --gradient-glass:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.02)
        ) !important;
    /* Premium Border */
    --premium-border:
        1px solid rgba(255,255,255,.18) !important;

    --premium-border-orange:
        1px solid rgba(255,101,0,.28) !important;

}
/*Background Mobile*/
@media screen and (max-width: 768px) {
    .main-content {
        position: relative !important;
        background: black !important;
    }

    .main-content::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: url("https://ms.cdnkita.com/img/background.webp") !important;
        background-size: 100% auto !important;
        background-position: top center !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll !important;
        opacity: 0.7!important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .main-content > * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* ==========================================
   MOBILE HEADER (NEXT-GEN HUD EDITION)
========================================== */
.header-mobile {
    display: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important; /* Pastikan di atas segalanya */
    
    /* Deep Carbon Glass Base */
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    
    /* Neon Orange Edge & Shadows */
    border-bottom: 1px solid rgba(255, 101, 0, 0.4) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8), 
        inset 0 -1px 8px rgba(255, 101, 0, 0.15) !important;
        
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media (max-width: 1080px) {
    .header-mobile {
        display: block !important;
    }
}

/* Garis Cahaya Tipis di Atas Header */
.header-mobile::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 101, 0, 0.5), transparent) !important;
}

/* Kilap Kaca Halus (Shimmer) */
.header-mobile::after {
    content: "" !important;
    position: absolute !important;
    top: -70% !important;
    left: -30% !important;
    width: 45% !important;
    height: 220% !important;
    transform: rotate(28deg) !important;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.04), transparent) !important;
    pointer-events: none !important;
}

/* ==========================================
   TOP BAR
========================================== */
.header-mobile__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    padding: 0 16px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ==========================================
   TOMBOL BANTUAN (HELP) & MENU (HUD STYLE)
========================================== */
.mobile-help a,
.mobile-menu {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    
    /* Dark Glass Terminal Button */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* Interaksi Saat Ditekan/Di-hover */
.mobile-help a:active,
.mobile-help a:hover,
.mobile-menu:active,
.mobile-menu:hover {
    background: rgba(255, 101, 0, 0.15) !important;
    border-color: rgba(255, 101, 0, 0.5) !important;
    color: #FF6500 !important;
    box-shadow: 
        0 0 15px rgba(255, 101, 0, 0.3),
        inset 0 0 8px rgba(255, 101, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   LOGO MOBILE
========================================== */
.mobile-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.mobile-logo img {
    display: block !important;
    max-height: 44px !important;
    /* Glow Oranye Halus pada Logo */
    filter: drop-shadow(0 0 10px rgba(255, 101, 0, 0.4)) brightness(1.1) !important;
    transition: transform 0.3s ease !important;
}

.mobile-logo img:active {
    transform: scale(0.95) !important;
}

/* ==========================================
   RIGHT WRAPPER
========================================== */
.mobile-right {
    display: flex !important;
    align-items: center !important;
}

/* ==========================================
   HAMBURGER ICON (CYBER LINES)
========================================== */
.mobile-menu--line {
    position: relative !important;
    width: 20px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.mobile-menu--line::before,
.mobile-menu--line::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 999px !important;
    transition: all 0.3s ease !important;
}

.mobile-menu--line::before { top: -6px !important; left: 0 !important; }
.mobile-menu--line::after { top: 6px !important; right: 0 !important; }

/* Efek Pelebaran Garis Saat Ditekan */
.mobile-menu:active .mobile-menu--line,
.mobile-menu:hover .mobile-menu--line {
    width: 24px !important;
    background: #FF6500 !important;
    box-shadow: 0 0 8px rgba(255, 101, 0, 0.6) !important;
}
.mobile-menu:active .mobile-menu--line::before,
.mobile-menu:hover .mobile-menu--line::before { width: 22px !important; background: #FF6500 !important; }
.mobile-menu:active .mobile-menu--line::after,
.mobile-menu:hover .mobile-menu--line::after { width: 22px !important; background: #FF6500 !important; }

/* ==========================================
   MARQUEE (PENGUMUMAN BERJALAN)
========================================== */
@media screen and (max-width: 1080px) {
    .header-mobile__marquee {
        /* Mengganti abu-abu dekil dengan Black Carbon transparan */
        background: rgba(0, 0, 0, 0.55) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom: 1px solid rgba(255, 101, 0, 0.2) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        height: 38px !important; 
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 16px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    }
    
    /* Ikon Pengumuman Kiri */
    .header-mobile__marquee i {
        font-size: 11px !important;
        padding: 6px 10px !important;
        background: linear-gradient(180deg, #ff7a24, #FF6500) !important;
        color: #ffffff !important;
        border-radius: 6px !important; 
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 
            0 0 10px rgba(255, 101, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        flex-shrink: 0 !important;
    }
    
    /* Teks Pengumuman */
    .header-mobile__marquee .mq-content {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        color: rgba(255, 255, 255, 0.8) !important; 
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    }
}
/* ==========================================
   LOADING BAR
========================================== */
#mobilePageLoadingBar{
    background:#fff !important;
    box-shadow:
        0 0 10px rgba(255,255,255,.45) !important;
}
/*==========================================
    PREMIUM CATEGORY CARD
==========================================*/
.category-item{
    position:relative !important;
    overflow:hidden !important;
    transition:.35s ease !important;
    border-radius:16px !important;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03)
    ) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 14px rgba(0,0,0,.12) !important;
}
.category-item::before{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent 45%
    ) !important;
    pointer-events:none !important;
}
.category-item:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(255,255,255,.25) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.22),
        0 12px 24px rgba(0,0,0,.18),
        0 0 18px rgba(255,101,0,.15) !important;
}
/*==========================================
        ICON
==========================================*/
.item-icon{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    width:auto !important;
    height:auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin-bottom:6px !important;
}
/*==========================================
        SVG ICON
==========================================*/
.item-icon img{
    width:38px !important;
    height:38px !important;
    transition:.35s ease !important;
    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,.18))
        drop-shadow(0 0 6px rgba(255,255,255,.15)) !important;
    animation:iconFloat 3s ease-in-out infinite !important;
}
.category-item:hover .item-icon img{
    transform:
        scale(1.12)
        translateY(-2px) !important;
    filter:
        drop-shadow(0 5px 10px rgba(0,0,0,.22))
        drop-shadow(0 0 10px rgba(255,255,255,.25))
        drop-shadow(0 0 16px rgba(255,101,0,.25)) !important;
}
/*==========================================
        TEXT
==========================================*/
.item-name{
    color:#000 !important;
    font-size:12px !important;
    font-weight:bold !important;
    transition:.3s !important;
    text-shadow:
        0 1px 2px rgba(0,0,0,.18) !important;
    background: var(--primary-color) !important;
}
.category-item:hover .item-name{
    letter-spacing:.4px !important;
    text-shadow:
        0 0 8px rgba(255,255,255,.25) !important;
}
/*==========================================
        FLOAT ICON
==========================================*/
@keyframes iconFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-3px);
    }
}
/* ==========================================
   SHIMMER CARD
========================================== */
.category-item::after{
    content:"" !important;
    position:absolute !important;
    top:-120% !important;
    left:-70% !important;
    width:45% !important;
    height:260% !important;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    ) !important;
    transform:rotate(25deg) !important;
    transition:.8s ease !important;
    pointer-events:none !important;
}
.category-item:hover::after{
    left:140% !important;
}
/* ==========================================
   CYBER TEXT
========================================== */
.item-name{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:60px !important;
    padding:4px 10px !important;
    border-radius:999px !important;
    background:linear-gradient(
        180deg,
        #ff8d33,
        #FF6500
    ) !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.4px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.28),
        0 4px 10px rgba(255,101,0,.20) !important;
    overflow:hidden !important;
}
/* Kilau pada badge */
.item-name::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:-120% !important;
    width:45% !important;
    height:100% !important;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    ) !important;
    transform:skewX(-25deg) !important;
    transition:.6s !important;
}
.category-item:hover .item-name::before{
    left:150% !important;
}
/* Hover badge */
.category-item:hover .item-name{
    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        0 0 12px rgba(255,101,0,.30),
        0 6px 14px rgba(255,101,0,.25) !important;
    transform:translateY(1px) !important;
}
/* ==========================================
   ICON GLOW
========================================== */
.item-icon img{
    animation:
        iconFloat 3s ease-in-out infinite,
        iconGlow 2.5s ease-in-out infinite !important;
}
@keyframes iconGlow{
    0%,100%{
        filter:
            drop-shadow(0 2px 5px rgba(0,0,0,.18))
            drop-shadow(0 0 4px rgba(255,255,255,.10)) !important;
    }
    50%{
        filter:
            drop-shadow(0 3px 6px rgba(0,0,0,.18))
            drop-shadow(0 0 12px rgba(255,255,255,.28))
            drop-shadow(0 0 18px rgba(255,101,0,.22)) !important;
    }
}
/* ==========================================
   MOBILE LOGIN SECTION
========================================== */
@media screen and (max-width: 1080px) {
  .mobile__login {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    backdrop-filter: var(--blur) !important;
    -webkit-backdrop-filter: var(--blur) !important;
  }
  .mobile__login .btn-login,
  .mobile__login .btn-register {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .mobile__login .btn-login {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm) !important;
  }
  .mobile__login .btn-login:hover,
  .mobile__login .btn-login:active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  .mobile__login .btn-register {
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--inner-light), var(--glow-sm) !important;
  }
  .mobile__login .btn-register:hover,
  .mobile__login .btn-register:active {
    box-shadow: var(--inner-light), var(--glow-md) !important;
    transform: translateY(-1px) !important;
  }
  .mobile__login .btn-register::after {
    content: "" !important;
    position: absolute !important;
    top: -120% !important;
    left: -70% !important;
    width: 45% !important;
    height: 260% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    transform: rotate(25deg) !important;
    transition: 0.7s ease !important;
    pointer-events: none !important;
  }
  .mobile__login .btn-register:hover::after {
    left: 140% !important;
  }
}

/* ==========================================
   FOOTER MOBILE SECTION (NEXT-GEN HUD STYLE)
========================================== */
@media screen and (max-width: 1080px) {
  .footer-mobile {
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    height: 68px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    padding: 0 8px !important;
    
    /* Luxury Golden Orange Crystal Glass */
    background: linear-gradient(135deg, rgba(255, 101, 0, 0.35) 0%, rgba(230, 91, 0, 0.15) 50%, rgba(255, 122, 36, 0.25) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Sharp Premium Cyber Borders */
    border: 1px solid rgba(255, 166, 80, 0.5) !important;
    border-radius: var(--radius-xl) !important;
    
    /* Holographic Glow Profile */
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.4),
      inset 0 -1px 8px rgba(255, 101, 0, 0.2),
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 101, 0, 0.25) !important;
    z-index: 999 !important;
  }

  .footer-mobile a {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .footer-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  .item-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .footer-item .icon {
    font-size: 18px !important;
    color: rgba(255, 230, 200, 0.75) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
  }

  .footer-item .name {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: rgba(255, 230, 200, 0.75) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

  /* Active & Interaction State (Hyper Gaming Glow) */
  .footer-item.active,
  .footer-item:hover {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 75%) !important;
  }

  .footer-item.active .icon,
  .footer-item:hover .icon {
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.15) !important;
    filter: 
      drop-shadow(0 0 8px #ffffff) 
      drop-shadow(0 0 15px #ff7a24) !important;
  }

  .footer-item.active .name,
  .footer-item:hover .name {
    color: #ffffff !important;
    letter-spacing: 1.2px !important;
    text-shadow: 
      0 0 10px #ffb27d,
      0 2px 4px rgba(0, 0, 0, 0.8) !important;
  }

  /* Cyberpunk Indicator Dock */
  .footer-item.active::before {
    content: "" !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 35% !important;
    width: 30% !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: var(--radius-round) !important;
    box-shadow: 
      0 0 12px #ffffff,
      0 0 20px #ff6500 !important;
  }
}
/* ==========================================
   MOBILE SIDENAV (PURE CSS - BUBBLE GLASS HUD)
   Berlaku hanya untuk layar di bawah 1080px
========================================== */
@media screen and (max-width: 1080px) {

    /* 1. SIDENAV CONTAINER (SEMBUNYI DI KIRI) */
    html body .sidenav {
        position: fixed !important;
        top: 0 !important;
        left: -120% !important; /* Paksa sembunyi jauh ke kiri secara default */
        width: 280px !important; 
        max-width: 85vw !important; /* Adaptif, sisakan sedikit ruang di kanan */
        height: 100vh !important;
        background: linear-gradient(135deg, rgba(15, 15, 15, 0.85) 0%, rgba(0, 0, 0, 0.98) 100%) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        border-right: 1px solid rgba(255, 101, 0, 0.4) !important;
        box-shadow: 15px 0 40px rgba(0, 0, 0, 0.8) !important;
        z-index: 1050 !important;
        display: flex !important;
        flex-direction: column !important;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Geser super mulus */
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Class saat tombol menu ditekan (Sidenav Terbuka) */
    html body .sidenav.sidenav-open {
        left: 0 !important; /* Muncul ke layar */
    }

    /* Custom Scrollbar */
    html body .sidenav::-webkit-scrollbar { width: 3px !important; }
    html body .sidenav::-webkit-scrollbar-track { background: transparent !important; }
    html body .sidenav::-webkit-scrollbar-thumb { background: rgba(255, 101, 0, 0.4) !important; border-radius: 10px !important; }

    /* 2. HEADER & PROFIL */
    html body .sidenav__header {
        padding: 30px 20px 24px !important;
        background: transparent !important;
        border-bottom: 1px dashed rgba(255, 101, 0, 0.3) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
        position: relative !important;
    }

    html body .sidenav__header-user span {
        font-size: 10px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #ffffff !important;
        background: rgba(255, 101, 0, 0.15) !important;
        padding: 6px 16px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 101, 0, 0.4) !important;
        box-shadow: 0 0 10px rgba(255, 101, 0, 0.2) !important;
    }

    html body .sidenav__header-logo img {
        width: 150px !important;
        height: auto !important;
        filter: drop-shadow(0 0 12px rgba(255, 101, 0, 0.4)) brightness(1.1) !important;
    }

    html body .sidenav-button-title {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        text-transform: uppercase !important;
        margin-bottom: -4px !important;
    }

    /* 3. BUTTON LOGIN & DAFTAR */
    html body .sidenav-button {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    html body .sidenav-button button {
        height: 40px !important;
        border-radius: 8px !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        border: none !important;
    }

    html body .sidenav-button .btn-login {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    html body .sidenav-button .btn-register {
        background: linear-gradient(180deg, #ff7a24, #FF6500) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 0 15px rgba(255, 101, 0, 0.4) !important;
    }

    html body .sidenav-password { margin-top: 4px !important; text-align: center !important; }
    html body .sidenav-password a {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* 4. LIST MENU (BUBBLE GLASS TRANSPARENT) */
    html body .sidenav__list {
        flex: 1 !important;
        padding: 20px 14px !important;
        background: transparent !important; /* Hancurkan background bawaan */
    }

    html body .sidenav__list ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Jarak antar bubble agar terlihat bulatannya */
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Memaksa background oranye kaku bawaan hancur */
    html body .sidenav__list li {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* EFEK BUBBLE GLASS DI MENU */
    html body .sidenav__list li a {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 16px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        
        /* Bubble Glass UI */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)) !important;
        background-color: transparent !important;
        backdrop-filter: blur(16px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 14px !important; /* Dibuat melengkung seperti bubble */
        box-shadow: 
            inset 0 2px 4px rgba(255, 255, 255, 0.2), 
            inset 0 -2px 6px rgba(0, 0, 0, 0.2),      
            0 4px 10px rgba(0, 0, 0, 0.3) !important;
            
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    html body .sidenav__list li a i {
        font-size: 16px !important;
        width: 22px !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.6) !important;
        transition: all 0.3s ease !important;
    }

    /* Efek saat Menu Aktif / Disentuh */
    html body .sidenav__list li.active a,
    html body .sidenav__list li:active a {
        background: linear-gradient(135deg, rgba(255, 101, 0, 0.15), rgba(255, 101, 0, 0.05)) !important;
        border-color: rgba(255, 101, 0, 0.4) !important;
        color: #ffffff !important;
        box-shadow: 
            inset 0 2px 4px rgba(255, 255, 255, 0.3), 
            0 4px 15px rgba(255, 101, 0, 0.3) !important;
        transform: translateY(-2px) !important; /* Efek membal ke atas sedikit saat ditekan */
    }

    html body .sidenav__list li.active a i,
    html body .sidenav__list li:active a i {
        color: #ffb27d !important;
        filter: drop-shadow(0 0 8px #FF6500) !important;
    }

    /* Garis Oranye Khas HUD di Menu Aktif */
    html body .sidenav__list li.active a::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 20% !important;
        height: 60% !important;
        width: 4px !important;
        background: #FF6500 !important;
        border-radius: 0 4px 4px 0 !important;
        box-shadow: 0 0 10px #FF6500 !important;
    }

    /* 5. BOTTOM FOOTER */
    html body .sidenav__bottom {
        padding: 20px 16px !important;
        background: transparent !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    html body .sidenav__bottom h6 {
        font-size: 10px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 5px !important;
        color: rgba(255, 255, 255, 0.3) !important;
        margin: 0 !important;
    }

    html body .bottom-apps img {
        height: 28px !important;
        width: auto !important;
    }

    html body .bottom-country {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .bottom-country button {
        height: 34px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    html body .bottom-country .flag-image {
        width: 16px !important;
        border-radius: 2px !important;
    }
}

/* ==========================================
   MOBILE SIDENAV - LOGGED IN ELEMENTS (HUD EDITION)
   Tambahkan ke dalam @media screen and (max-width: 1080px)
========================================== */

/* 1. HEADER LOGGED IN: PROFIL & USERNAME */
html body .sidenav__header-game {
    padding: 30px 20px 24px !important;
    background: transparent !important;
    border-bottom: 1px dashed rgba(255, 101, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    position: relative !important;
}

html body .sidenav__header-game .sidenav__header-user {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Tulisan "Selamat Datang," */
html body .sidenav__header-game .sidenav__header-user > span:first-child {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Badge Status & Username */
html body .account-username {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(90deg, rgba(255, 101, 0, 0.15), rgba(255, 101, 0, 0.05)) !important;
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.2) !important;
}

html body .account-username img {
    height: 16px !important;
    width: auto !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)) !important;
}

html body .account-username a {
    color: #FF6500 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.5) !important;
}

/* 2. TOMBOL VOUCHER */
html body .sidenav__header-voucher {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px !important;
}

html body .voucher-button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FF6500 !important;
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    padding: 8px 24px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: inset 0 0 8px rgba(255, 101, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body .voucher-button:active {
    background: rgba(255, 101, 0, 0.2) !important;
    color: #ffffff !important;
    border-color: #FF6500 !important;
    box-shadow: 0 0 15px rgba(255, 101, 0, 0.5) !important;
    transform: scale(0.95) !important;
}

/* 3. MENU DROPDOWN TOGGLE (Transaksi, Permainan, Bonus) */
/* Karena struktur dropdown-nya pakai <li> bukan <a>, kita style li-nya */
html body .sidenav__list li[class*="-toggle"] {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    
    /* Style Bubble Glass seperti menu biasa */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important; 
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    
    transition: all 0.3s ease !important;
    position: relative !important;
    margin-bottom: 0 !important; /* Direset agar rapi */
}

/* Icon Menu Utama Dropdown */
html body .sidenav__list li[class*="-toggle"] > i:first-child {
    font-size: 16px !important;
    width: 22px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}

/* Icon Panah Dropdown (Kanan) */
html body .sidenav__list li[class*="-toggle"] .fa-caret-down {
    margin-left: auto !important; /* Memaksa ke kanan */
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.3s ease !important;
}

/* Saat Dropdown Aktif / Ditekan */
html body .sidenav__list li[class*="-toggle"].active,
html body .sidenav__list li[class*="-toggle"]:active {
    background: linear-gradient(135deg, rgba(255, 101, 0, 0.15), rgba(255, 101, 0, 0.05)) !important;
    border-color: rgba(255, 101, 0, 0.4) !important;
    color: #ffffff !important;
    border-bottom-left-radius: 4px !important; /* Dibuat sedikit rata jika submenu terbuka */
    border-bottom-right-radius: 4px !important;
}

html body .sidenav__list li[class*="-toggle"].active > i:first-child {
    color: #FF6500 !important;
    filter: drop-shadow(0 0 8px #FF6500) !important;
}

/* Putar panah saat aktif */
html body .sidenav__list li[class*="-toggle"].active .fa-caret-down {
    transform: rotate(180deg) !important;
    color: #FF6500 !important;
}

/* 4. SUB-MENU DROPDOWN CONTENT (Anak Menu) */
html body .sidenav-dropdown {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 101, 0, 0.1) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    padding: 8px 0 !important;
    margin-top: -8px !important; /* Menempel ke menu induk */
    margin-bottom: 8px !important;
    display: none; /* Sembunyikan default (Biasanya diurus oleh JS bawaan) */
}

/* Catatan: Jangan gunakan !important pada 'display' dropdown jika JS 
   bawaan website mengatur show/hide-nya secara dinamis. */

html body .sidenav-dropdown a {
    display: block !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

html body .sidenav-dropdown li,
html body .sidenav-dropdown a li {
    padding: 10px 16px 10px 48px !important; /* Indentasi ke dalam (hierarki) */
    font-size: 11px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Bullet Point Cyber untuk Sub-menu */
html body .sidenav-dropdown li::before {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.2s ease !important;
}

/* Hover/Active State Sub-menu */
html body .sidenav-dropdown a:active li,
html body .sidenav-dropdown li.active {
    color: #FF6500 !important;
    background: linear-gradient(90deg, rgba(255, 101, 0, 0.1), transparent) !important;
    font-weight: 800 !important;
}

html body .sidenav-dropdown a:active li::before,
html body .sidenav-dropdown li.active::before {
    background: #FF6500 !important;
    width: 10px !important;
    box-shadow: 0 0 5px #FF6500 !important;
}

/* 5. BADGE NOTIFIKASI (Contoh: Memo) */
html body .sidenav__list .badge.bg-danger {
    background: #ff3333 !important; /* Merah terang */
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    margin-left: auto !important; /* Dorong ke ujung kanan */
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}


/* ==========================================
   MOBILE PROVIDER SLIDER (CYBER HUD CARDS)
   Berlaku hanya untuk layar di bawah 1080px
========================================== */
@media screen and (max-width: 1080px) {
    
    /* 1. KOTAK KARTU (DARK GLASS + NEON BORDER) */
    html body .game-container__category-list .slide-border {
        position: relative !important;
        border-radius: 12px !important;
        /* Background Kaca Hitam Gradasi Oranye */
        background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(255, 101, 0, 0.15) 100%) !important;
        border: 1px solid rgba(255, 101, 0, 0.4) !important;
        box-shadow: 
            inset 0 1px 1px rgba(255, 255, 255, 0.1), 
            0 4px 10px rgba(0, 0, 0, 0.5) !important;
        overflow: hidden !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        display: block !important;
    }

    /* Efek membal dan menyala saat kartu di-tap (diklik) */
    html body .game-container__category-list .slide-border:active {
        transform: scale(0.95) !important;
        border-color: #ff9d42 !important;
        box-shadow: 
            0 0 15px rgba(255, 101, 0, 0.6), 
            inset 0 0 10px rgba(255, 101, 0, 0.3) !important;
    }

    /* 2. AREA GAMBAR (REVISI: MEMASTIKAN GAMBAR UTUH/CONTAIN) */
    html body .game-container__category-list .slide-img {
        position: relative !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 4 / 3 !important; 
        padding: 5px !important; /* Memberi ruang agar gambar tidak menempel ke pinggir */
    }

    html body .game-container__category-list .slide-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* MENGUBAH COVER KE CONTAIN AGAR GAMBAR TIDAK TERPOTONG */
        filter: brightness(0.9) contrast(1.1) !important;
        transition: transform 0.3s ease !important;
    }

    /* 3. OVERLAY HUD (NAMA PROVIDER & TOMBOL PLAY) 
       Di-set agar SELALU TERLIHAT di Mobile, mengabaikan hover desktop */
    html body .game-container__category-list .hover-play {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important; /* Paksa muncul di mobile */
        background: transparent !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        pointer-events: none !important; /* Agar klik tembus ke tag <a> */
        z-index: 2 !important;
    }

    /* Tombol Play Kecil Bercahaya (Tengah Layar) */
    html body .game-container__category-list .hover-play i {
        margin-top: auto !important;
        margin-bottom: auto !important;
        width: 32px !important;
        height: 32px !important;
        background: radial-gradient(circle, #ff6500 0%, #d44d00 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 12px !important;
        padding-left: 3px !important; /* Menyeimbangkan ikon segitiga */
        box-shadow: 
            0 0 12px rgba(255, 101, 0, 0.8), 
            inset 0 0 5px rgba(255, 255, 255, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        animation: pulseMobilePlay 2s infinite !important;
    }

    /* Animasi detak jantung (Pulse) untuk Tombol Play */
    @keyframes pulseMobilePlay {
        0% { transform: scale(1); box-shadow: 0 0 8px rgba(255,101,0,0.6); }
        50% { transform: scale(1.1); box-shadow: 0 0 16px rgba(255,101,0,0.9); }
        100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,101,0,0.6); }
    }

    /* Bar Nama Provider (Bawah) */
    html body .game-container__category-list .hover-play h6 {
        width: 100% !important;
        background: linear-gradient(90deg, rgba(255, 101, 0, 0.7), rgba(230, 91, 0, 0.9)) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border-top: 1px solid rgba(255, 122, 36, 0.8) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 6px 4px !important;
        margin: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}


/* ==========================================
   CAROUSEL SLIDER (HOLOGRAPHIC CYBER FRAME)
========================================== */

/* 1. CONTAINER UTAMA */
html body .home__slider {
    padding: 20px 16px !important; /* Ruang bernapas */
    position: relative !important;
    z-index: 5 !important;
}

/* 2. FRAME KACA (BINGKAI BANNER) */
html body .main-slider {
    border-radius: 20px !important;
    overflow: hidden !important;
    
    /* Background dasar kaca gelap */
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Border Neon Tipis & Glow */
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.8), 
        0 0 20px rgba(255, 101, 0, 0.15),
        inset 0 0 10px rgba(255, 255, 255, 0.05) !important;
        
    /* Fix bug border-radius di Safari */
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

/* Kilap Kaca di atas Slider (Screen Glare) */
html body .main-slider::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%) !important;
    pointer-events: none !important; /* Agar banner tetap bisa diklik */
    z-index: 2 !important;
}

/* 3. GAMBAR BANNER */
html body .main-slider img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease, filter 0.5s ease !important;
    filter: contrast(1.05) brightness(1) !important;
}

/* Gambar sedikit menyala/zoom saat aktif (khusus tampilan desktop jika dihover) */
html body .main-slider:hover img {
    filter: contrast(1.1) brightness(1) !important;
    transform: scale(1.02) !important;
}

/* ==========================================
   4. TITIK INDIKATOR (LED PAGINATION BULLETS)
========================================== */
html body .main-slider .swiper-pagination {
    bottom: 12px !important; /* Posisi diangkat sedikit */
    z-index: 10 !important;
}

/* Titik Tidak Aktif (Lampu Mati) */
html body .main-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Titik Aktif (Kapsul Neon Menyala) */
html body .main-slider .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #ff7a24, #FF6500) !important;
    width: 24px !important; /* Memanjang seperti kapsul */
    border-radius: 6px !important;
    box-shadow: 
        0 0 12px rgba(255, 101, 0, 0.8), 
        0 0 20px rgba(255, 101, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================
   5. TOMBOL ARAH PANAH (CYBER NAV BUTTONS)
========================================== */
html body .main-slider .swiper-button-next,
html body .main-slider .swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    background: rgba(15, 15, 15, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    border-radius: 50% !important; /* Bundar */
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.5), 
        inset 0 0 8px rgba(255, 101, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    opacity: 0 !important; /* Sembunyi secara default (Desktop) */
}

/* Munculkan panah saat slider di-hover */
html body .main-slider:hover .swiper-button-next,
html body .main-slider:hover .swiper-button-prev {
    opacity: 1 !important;
}

/* Font ukuran panah (Bawaan Swiper) */
html body .main-slider .swiper-button-next:after,
html body .main-slider .swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Hover Panah (Menyala Oranye Penuh) */
html body .main-slider .swiper-button-next:hover,
html body .main-slider .swiper-button-prev:hover {
    background: rgba(255, 101, 0, 0.25) !important;
    color: #ffffff !important;
    border-color: #FF6500 !important;
    box-shadow: 
        0 0 15px rgba(255, 101, 0, 0.6), 
        inset 0 0 10px rgba(255, 101, 0, 0.4) !important;
    transform: scale(1.1) !important;
}

/* ==========================================
   6. OPTIMASI MOBILE (HP / TABLET)
========================================== */
@media screen and (max-width: 768px) {
    html body .home__slider {
        padding: 16px 12px !important; /* Padding disesuaikan untuk layar kecil */
    }
    
    html body .main-slider {
        border-radius: 16px !important;
    }
    
    /* Perkecil tombol panah di HP */
    html body .main-slider .swiper-button-next,
    html body .main-slider .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important; /* Selalu muncul di mobile karena tidak ada hover */
    }
    
    html body .main-slider .swiper-button-next:after,
    html body .main-slider .swiper-button-prev:after {
        font-size: 12px !important;
    }
    
    /* Indikator lebih ringkas di HP */
    html body .main-slider .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }
    html body .main-slider .swiper-pagination-bullet-active {
        width: 18px !important;
    }
}




/*Additional*/

.home .mobile__download-bannner {
    background-color: #0000004f !important;
}

.home .mobile__seo {
    background: none !important;
}