/* ==========================================
   RR IS HERE BRODYY
========================================== */
@media screen and (min-width: 1081px) {
  .header {
    background: rgba(17, 17, 17, 0.8) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 101, 0, 0.3) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: var(--transition, 0.3s ease) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  }

  /* Progress Bar */
  #pageLoadingBar {
    background: linear-gradient(90deg, #FF6500, #ffb27d) !important;
    box-shadow: 0 0 15px #FF6500 !important;
  }

  /* 2. HEADER TOP (Logo, Nav, Form) */
  .header__top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%) !important;
  }

  /* Penahan Utama (Sebagai batas Mega Menu) */
  .top-holder {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 80px !important;
    position: relative !important; /* CRITICAL FIX: Untuk Mega Menu */
  }

  /* Logo */
  .header-logo a {
    display: block !important;
  }
  .header-logo img {
    filter: drop-shadow(0 0 12px rgba(255, 101, 0, 0.3)) brightness(1.05) !important;
    transition: var(--transition, 0.3s ease) !important;
  }
  .header-logo img:hover {
    transform: scale(1.03) !important;
    filter: drop-shadow(0 0 18px rgba(255, 101, 0, 0.6)) brightness(1.1) !important;
  }

  /* 3. NAVBAR & MENU */
  .header-navbar,
  .navbar-nav,
  .nav-item {
    position: static !important; /* Bebaskan agar Mega Menu full-width */
  }

  .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .nav-item > a.nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-sm, 8px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  .nav-item > a.nav-link:hover,
  .nav-item:hover > a.nav-link {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.6) !important;
    background: rgba(255, 101, 0, 0.1) !important;
    box-shadow: inset 0 0 10px rgba(255, 101, 0, 0.15) !important;
  }

  /* Icon Home di Nav */
  .nav-item > a.nav-link i.fa-home {
    font-size: 16px !important;
    color: #FF6500 !important;
    filter: drop-shadow(0 0 5px rgba(255, 101, 0, 0.5)) !important;
  }

  /* Label Hot/New */
  .hot-label-desktop {
    position: absolute !important;
    top: -12px !important;
    right: -5px !important;
    filter: drop-shadow(0 0 4px rgba(255, 65, 0, 0.8)) !important;
    animation: pulseLabel 2s infinite !important;
  }
  @keyframes pulseLabel {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  /* 4. MEGA MENU DROPDOWN */
  .nav-item__game {
    position: absolute !important;
    top: 110% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 24px 20px !important;
    background: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    border-radius: var(--radius-md, 12px) !important;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 1000 !important;
    pointer-events: none !important;
  }

  .nav-item:hover .nav-item__game {
    opacity: 1 !important;
    visibility: visible !important;
    top: 100% !important;
    pointer-events: auto !important;
  }

  .nav-item__game .container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 20px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav-item__game .game-item {
    width: 95px !important;
    transition: all 0.3s ease !important;
  }

  .nav-item__game .game-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    position: relative !important;
  }

  .nav-item__game .game-item img {
    width: 55px !important;
    height: 55px !important;
    object-fit: contain !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important;
  }

  .nav-item__game .game-name {
    margin-top: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease !important;
  }

  .nav-item__game .game-item:hover img {
    transform: translateY(-5px) scale(1.15) !important;
    filter: drop-shadow(0 5px 12px rgba(255, 101, 0, 0.7)) !important;
  }

  .nav-item__game .game-item:hover .game-name {
    color: #ffffff !important;
    text-shadow: 0 0 8px #FF6500 !important;
  }

  .nav-item__game .game-new,
  .nav-item__game .game-maintenance {
    position: absolute !important;
    top: -8px !important;
    right: 5px !important;
    width: auto !important;
    height: 16px !important;
    filter: none !important;
    animation: pulseLabel 2s infinite !important;
  }

  /* 5. FORM LOGIN & DAFTAR */
  .header-form .form-button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .header-form button {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    height: 38px !important;
    padding: 0 20px !important;
    border-radius: var(--radius-sm, 8px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Tombol Masuk (Dark Glass) */
  .header-form .btn-login {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  .header-form .btn-login:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 101, 0, 0.5) !important;
    color: #FF6500 !important;
    box-shadow: 0 0 12px rgba(255, 101, 0, 0.25) !important;
    transform: translateY(-2px) !important;
  }

  /* Tombol Daftar (Glowing Orange) */
  .header-form .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),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  .header-form .btn-register:hover {
    box-shadow: 
        0 0 25px rgba(255, 101, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
  }
  /* Shimmer pada Tombol Daftar */
  .header-form .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.5), transparent) !important;
    transform: rotate(25deg) !important;
    transition: 0.7s ease !important;
  }
  .header-form .btn-register:hover::after {
    left: 140% !important;
  }

  /* Lupa Password */
  .header-form .btn-forgot {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    transition: all 0.3s ease !important;
  }
  .header-form .btn-forgot:hover {
    color: #FF6500 !important;
    text-decoration: underline !important;
    text-shadow: 0 0 5px rgba(255, 101, 0, 0.5) !important;
  }

  /* 6. HEADER NAV (Baris Bawah - Marquee & Tools) */
  .header__nav {
    background: rgba(0, 0, 0, 0.45) !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
  }

  /* Marquee */
  .nav-marquee {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .nav-marquee i {
    font-size: 14px !important;
    color: #FF6500 !important;
    filter: drop-shadow(0 0 5px rgba(255, 101, 0, 0.6)) !important;
  }
  .nav-marquee .marquee {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
  }

  /* Right Tools Container */
  .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
  }
  .nav-time {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.5px !important;
  }

  /* Small Icons (Bantuan, Event) */
  .nav-icon {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-icon .icon-item {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-xs, 6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
  }
  .nav-icon .icon-item:hover {
    background: rgba(255, 101, 0, 0.15) !important;
    border-color: #FF6500 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 8px rgba(255, 101, 0, 0.3) !important;
  }

  /* Mata Uang & Bahasa */
  .nav-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-button button {
    height: 28px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-xs, 6px) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
  }
  .nav-button button:hover {
    background: rgba(255, 101, 0, 0.15) !important;
    border-color: rgba(255, 101, 0, 0.4) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 8px rgba(255, 101, 0, 0.2) !important;
  }
  .nav-button .flag-image {
    width: 16px !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
  }
}

/* ==========================================
   BG DESKTOP (Dark & Proper Overlay)
========================================== */
@media screen and (min-width: 1081px) {
  .main-content {
    position: relative !important;
    background-color: #000000 !important; /* Base hitam pekat untuk fallback */
    
    /* Menggabungkan Dark Gradient Overlay dengan Gambar WebP */
    background-image: 
      linear-gradient(180deg, rgba(17, 17, 17, 0.60) 0%, rgba(0, 0, 0, 0.80) 100%), 
      url('https://ms.cdnkita.com/img/background.webp') !important;
      
    background-size: cover !important;
    background-position: center top !important; /* Fokus center-top biasanya menghindari gambar terpotong jelek */
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}


/* ==========================================
   1. HEADER & TITLE (HUD PANEL STYLE)
========================================== */
html body .game-container__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 101, 0, 0.25) !important;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5) !important;
}

/* Judul Game Terpopuler */
html body .game-container__header .game-title h6 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    padding-left: 10px !important;
    border-left: 4px solid #FF6500 !important; /* Aksen garis tepi */
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.6) !important;
}

/* ==========================================
   2. ACTION BUTTONS & NAVIGATION
========================================== */
html body .game-container__header .game-action {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

html body .btn-custom-sm {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(5px) !important;
}

html body .btn-custom-sm:hover,
html body .btn-custom-sm:not([disabled]):hover {
    background: rgba(255, 101, 0, 0.15) !important;
    color: #ffffff !important;
    border-color: #FF6500 !important;
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.4), inset 0 0 5px rgba(255, 101, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Tombol Panah (Prev/Next) yang sedang disabled */
html body .btn-custom-sm[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   3. GAME CARDS (GOLDEN ORANGE GLASS)
========================================== */
html body .game-container__list .games-holder {
    background: linear-gradient(180deg, rgba(255, 122, 36, 0.15), rgba(17, 17, 17, 0.8)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
}

html body .game-container__list .games-holder:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(180deg, rgba(255, 122, 36, 0.3), rgba(255, 101, 0, 0.15)) !important;
    border-color: #ff7a24 !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3), 
        0 0 18px rgba(255, 101, 0, 0.35) !important;
}

/* Shimmer / Kilap Kaca */
html body .game-container__list .games-holder::after {
    content: "" !important;
    position: absolute !important;
    top: -120% !important;
    left: -70% !important;
    width: 50% !important;
    height: 260% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transform: rotate(25deg) !important;
    transition: 0.7s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
html body .game-container__list .games-holder:hover::after {
    left: 140% !important;
}

/* ==========================================
   4. GAME IMAGE & HOVER PLAY ICON
========================================== */
html body .game-container__list .games-holder a.main {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    height: 100% !important;
    position: relative !important;
}

html body .game-container__list .games-img {
    width: 100% !important;
    aspect-ratio: 110 / 80 !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

html body .game-container__list .games-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease, filter 0.5s ease !important;
}

/* Efek Gambar Gelap & Zoom saat Hover */
html body .game-container__list .games-holder:hover .games-img img {
    filter: brightness(0.5) blur(1px) !important; 
}

/* Tombol Play di Tengah (Mundur dulu, muncul saat hover) */
html body .game-container__list .hover-play {
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.5) !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 2 !important;
    background: radial-gradient(circle, #ff6500 0%, #d44d00 100%) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(255, 101, 0, 0.8), inset 0 0 8px rgba(255,255,255,0.6) !important;
    color: #fff !important;
    font-size: 16px !important;
    padding-left: 3px !important; /* Menyeimbangkan icon play segitiga */
}

html body .game-container__list .games-holder:hover .hover-play {
    opacity: 1 !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* ==========================================
   5. NAMA GAME (NEON BANNER)
========================================== */
html body .game-container__list .games-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 10px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    border-top: 1px solid rgba(255, 122, 36, 0.3) !important;
    background: linear-gradient(90deg, rgba(255, 101, 0, 0.5), rgba(230, 91, 0, 0.7)) !important;
    transition: all 0.3s ease !important;
    flex-grow: 1 !important;
}

html body .game-container__list .games-holder:hover .games-name {
    background: linear-gradient(90deg, #ff7a24, #FF6500) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px #ffffff !important;
    letter-spacing: 0.5px !important;
}


/* ==========================================
   DESKTOP PROVIDER LIST SECTION (Golden Orange Glass)
========================================== */
@media screen and (min-width: 1081px) {
  /* Card Holder Wrapper */
  .game-container__category-list .slide-border {
    position: relative !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(180deg, rgba(255, 122, 36, 0.25), rgba(255, 101, 0, 0.12)) !important;
    border: 1px solid rgba(255, 122, 36, 0.4) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(255, 101, 0, 0.15) !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    display: block !important;
  }

  /* Efek Kilap Kaca (Glass Glare Effect) - Identik dengan Mobile */
  .game-container__category-list .slide-border::after {
    content: "" !important;
    position: absolute !important;
    top: -120% !important;
    left: -70% !important;
    width: 50% !important;
    height: 260% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transform: rotate(25deg) !important;
    transition: 0.7s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  /* Hover State untuk Card */
  .game-container__category-list .slide-border:hover {
    transform: translateY(-3px) !important;
    background: linear-gradient(180deg, rgba(255, 124, 36, 0.341), rgba(255, 101, 0, 0.25)) !important;
    border-color: #ff9d42 !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 18px #ff7a24, 0 0 30px #ff6500 !important;
  }

  .game-container__category-list .slide-border:hover::after {
    left: 140% !important;
  }

  /* Wrapper Link */
  .game-container__category-list .slide-item a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Image Container */
  .game-container__category-list .slide-img {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }

  /* Image Styling */
  .game-container__category-list .slide-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    transition: var(--transition) !important;
    filter: brightness(1) contrast(1.05) !important;
  }

  /* Hover Image Zoom - Identik dengan Mobile (1.06) */
  .game-container__category-list .slide-border:hover .slide-img img {
    transform: scale(1.06) !important;
  }

  /* 
     ==================================================
     HOVER PLAY OVERLAY (Sebagai Title & Play Button)
     ==================================================
  */
  .game-container__category-list .hover-play {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Efek gelap transparan agar icon/teks terlihat */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 0 !important; /* Tersembunyi saat normal */
    transition: var(--transition) !important;
    z-index: 2 !important;
  }

  /* Munculkan Overlay saat Card di-hover */
  .game-container__category-list .slide-border:hover .hover-play {
    opacity: 1 !important;
  }

  /* Nama Provider (h6) di dalam Overlay */
  .game-container__category-list .hover-play h6 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 4px rgba(255, 101, 0, 0.6) !important;
  }

  /* Ikon Play (i) di dalam Overlay */
  .game-container__category-list .hover-play i {
    color: #ffffff !important;
    font-size: 22px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px #ff7a24 !important;
    transition: var(--transition) !important;
  }

  /* Efek sedikit membesar pada ikon play saat hover */
  .game-container__category-list .slide-border:hover .hover-play i {
    transform: scale(1.1) !important;
    color: #ff7a24 !important;
  }
}

/* ==========================================
   1. BERSIHKAN BACKGROUND DALAM (WAJIB)
========================================== */
html body .game-container__market-list .lotto-item {
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 16px !important;
}

/* ==========================================
   2. PRO TABLE ROW (HUD Panel Design)
========================================== */
html body .game-container__market-list .lotto-border {
    /* Background gelap pekat dengan gradasi tipis ke oranye di kanan */
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.95) 0%, rgba(255, 101, 0, 0.1) 100%) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    
    /* Aksen tabel pro: Garis tebal di kiri */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid #FF6500 !important; 
    border-radius: 8px !important; /* Dibuat sedikit kotak agar pro */
    
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.6), 
        inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

html body .game-container__market-list .lotto-border:hover {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.95) 0%, rgba(255, 101, 0, 0.25) 100%) !important;
    border-color: rgba(255, 101, 0, 0.4) !important;
    border-left: 4px solid #ffb27d !important; /* Glow up saat disentuh */
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.8), 
        0 0 15px rgba(255, 101, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   3. ICON BENDERA (Data Module Style)
========================================== */
html body .game-container__market-list .lotto-flag {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important; /* Kotak rounded khas dashboard */
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.2) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #000 !important;
}

html body .game-container__market-list .lotto-flag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}
html body .game-container__market-list .lotto-border:hover .lotto-flag img {
    transform: scale(1.1) !important;
}

/* ==========================================
   4. MAGIC GRID (Menyulap Div Jadi Kolom Tabel)
========================================== */
html body .game-container__market-list .lotto-info {
    flex: 1 !important;
    display: grid !important;
    /* Membuat 2 kolom dan 2 baris persis seperti layout tabel */
    grid-template-areas: 
        "country number"
        "date number" !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    row-gap: 4px !important;
}

/* Kolom 1 Baris 1: Nama Negara */
html body .game-container__market-list .lotto-country {
    grid-area: country !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Kolom 1 Baris 2: Tanggal */
html body .game-container__market-list .lotto-date {
    grid-area: date !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Kolom 2: Angka Lotre (Digital HUD Cell) */
html body .game-container__market-list .lotto-number {
    grid-area: number !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #FF6500 !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Kotak hitam pelindung angka */
    border: 1px solid rgba(255, 101, 0, 0.25) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    letter-spacing: 3px !important;
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.8) !important;
    box-shadow: inset 0 0 10px rgba(255, 101, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    text-align: right !important;
}

/* Hover Effect: Angka Menyala Penuh */
html body .game-container__market-list .lotto-border:hover .lotto-number {
    color: #ffffff !important;
    background: #FF6500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 101, 0, 0.5) !important;
    border-color: #ffb27d !important;
}

/* ==========================================
   1. BERSIHKAN BACKGROUND DALAM (WAJIB)
========================================== */
/* Kita paksa transparent agar efek bubble di luarnya tidak tertutup warna solid */
html body .game-container__bank-list .bank-item {
    background: transparent !important; 
    background-color: transparent !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

/* ==========================================
   2. BUBBLE GLASS BORDER (Gelembung Kaca)
========================================== */
html body .game-container__bank-list .bank-border {
    /* Gradien putih tipis khas kaca / gelembung */
    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.2) !important;
    border-radius: 16px !important; /* Dibuat membulat seperti bubble */
    
    /* Kombinasi shadow dalam dan luar untuk efek 3D Bubble */
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.3), 
        inset 0 -2px 6px rgba(0, 0, 0, 0.2),      
        0 4px 12px rgba(0, 0, 0, 0.4) !important; 
        
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    height: 100% !important;
    position: relative !important;
    cursor: pointer !important;
}

/* ==========================================
   3. BUBBLE HOVER STATE (Saat disentuh)
========================================== */
html body .game-container__bank-list .bank-border:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 
        inset 0 2px 5px rgba(255, 255, 255, 0.5), 
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================
   4. EFEK KILAP KACA BUBBLE (Shimmer)
========================================== */
html body .game-container__bank-list .bank-border::after {
    content: "" !important;
    position: absolute !important;
    top: -150% !important;
    left: -100% !important;
    width: 50% !important;
    height: 300% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transform: rotate(35deg) !important;
    transition: 0.7s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

html body .game-container__bank-list .bank-border:hover::after {
    left: 150% !important;
}

/* ==========================================
   5. STYLING LOGO GAMBAR
========================================== */
html body .game-container__bank-list .bank-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.05) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

html body .game-container__bank-list .bank-border:hover .bank-item img {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) brightness(1.2) !important;
}


/* ==========================================
   1. CONTAINER ARTIKEL (DARK GLASS TERMINAL)
========================================== */
html body .seo-content {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.7), rgba(0, 0, 0, 0.95)) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 101, 0, 0.25) !important;
    border-radius: var(--radius-md, 14px) !important;
    padding: 24px !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.05), 
        0 8px 24px rgba(0, 0, 0, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.8 !important;
    font-size: 13px !important;
    position: relative !important;
}

/* ==========================================
   2. HEADINGS (H1, H2, H3, dll) - NEON ACCENT
========================================== */
html body .seo-content h1,
html body .seo-content h2,
html body .seo-content h3,
html body .seo-content h4,
html body .seo-content h5,
html body .seo-content h6 {
    color: #FF6500 !important; /* Warna Utama Oranye */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 101, 0, 0.4) !important;
    border-bottom: 1px dashed rgba(255, 101, 0, 0.3) !important;
    padding-bottom: 8px !important;
    display: block !important;
}

html body .seo-content h1 { font-size: 22px !important; }
html body .seo-content h2 { font-size: 19px !important; }
html body .seo-content h3 { font-size: 17px !important; }
html body .seo-content h4 { font-size: 15px !important; }

/* Menghilangkan margin top untuk heading pertama agar rapi */
html body .seo-content > h1:first-child,
html body .seo-content > h2:first-child,
html body .seo-content > h3:first-child {
    margin-top: 0 !important;
}

/* ==========================================
   3. PARAGRAF (P) - TEXT KETERBACAAN TINGGI
========================================== */
html body .seo-content p {
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 18px !important;
    text-align: justify !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================
   4. STRONG / BOLD (KEYWORD HIGHLIGHT)
========================================== */
html body .seo-content strong,
html body .seo-content b {
    color: #ffb27d !important; /* Warna Oranye Terang / Emas */
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.5) !important;
    letter-spacing: 0.3px !important;
}

/* ==========================================
   5. TAUTAN / LINK (A)
========================================== */
html body .seo-content a {
    color: #FF6500 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(255, 101, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

html body .seo-content a:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    text-shadow: 0 0 10px #FF6500 !important;
    background: rgba(255, 101, 0, 0.1) !important;
}

/* ==========================================
   6. LISTING (UL, OL, LI)
========================================== */
html body .seo-content ul,
html body .seo-content ol {
    margin-bottom: 20px !important;
    padding-left: 24px !important;
}

html body .seo-content li {
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 8px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Mengubah warna titik (bullet) menjadi oranye */
html body .seo-content ul li::marker {
    color: #FF6500 !important;
    font-size: 1.2em !important;
}
html body .seo-content ol li::marker {
    color: #FF6500 !important;
    font-weight: 800 !important;
}


/* ==========================================
   1. FOOTER BASE & HOLDER (Dark Command Center)
========================================== */
html body .footer {
    background: transparent !important;
    position: relative !important;
    z-index: 10 !important;
}

html body .footer__holder {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.95) 0%, rgba(0, 0, 0, 1) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 2px solid #FF6500 !important;
    box-shadow: 0 -10px 30px rgba(255, 101, 0, 0.15) !important;
    padding: 40px 0 20px !important;
}

/* ==========================================
   2. FOOTER TITLES (Neon Headers)
========================================== */
html body .footer-col {
    margin-bottom: 30px !important;
}

html body .footer-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-left: 4px solid #FF6500 !important;
    padding-left: 12px !important;
    margin-bottom: 16px !important;
    text-shadow: 0 0 10px rgba(255, 101, 0, 0.6) !important;
}

/* ==========================================
   3. LAYANAN MEMBER & CUSTOMER (Presisi & Rata Kiri)
========================================== */
html body .footer-service,
html body .footer-customer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Memaksa kartu rapat ke garis awal */
    gap: 10px !important;
    width: 100% !important;
}

html body .footer-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important; 
    
    width: 100% !important; 
    max-width: 260px !important; /* Seragamkan panjang kartu */
    margin: 0 !important; 
    padding: 10px 16px !important; 
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body .footer-item:hover {
    background: rgba(255, 101, 0, 0.1) !important;
    border-color: rgba(255, 101, 0, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(255, 101, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    transform: translateX(5px) !important;
}

/* Teks dalam kartu layanan */
html body .footer-info {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

html body .footer-info h5 {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

html body .footer-info h6 {
    color: #FF6500 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important; 
    letter-spacing: 0.5px !important;
}

html body .footer-icon {
    width: 35px !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

html body .footer-icon img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
    max-width: 100% !important; 
    height: auto !important;
}

/* ==========================================
   4. PROVIDER LIST (MATRIX GRID) 
========================================== */
html body .footer-provider {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important; /* Rak otomatis */
    gap: 8px !important; 
}

html body .provider-icon {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 45px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body .provider-icon img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: grayscale(100%) opacity(0.5) !important;
    transition: all 0.3s ease !important;
}

html body .provider-icon:hover {
    background: rgba(255, 101, 0, 0.15) !important;
    border-color: #FF6500 !important;
    box-shadow: 0 0 12px rgba(255, 101, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

html body .provider-icon:hover img {
    filter: grayscale(0%) opacity(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)) !important;
    transform: scale(1.15) !important;
}

/* Aplikasi / MPO500 App */
html body .footer-apps .apps-item a {
    display: block !important;
    max-width: 150px !important;
    transition: all 0.3s ease !important;
}
html body .footer-apps .apps-item a:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 10px rgba(255, 101, 0, 0.5)) !important;
}

/* ==========================================
   5. FOOTER NAVIGATION LINKS
========================================== */
html body .footer-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px 25px !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px dashed rgba(255, 101, 0, 0.3) !important;
}

html body .footer-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

html body .footer-link:hover {
    color: #FF6500 !important;
    text-shadow: 0 0 10px rgba(255, 101, 0, 0.8) !important;
}

/* ==========================================
   6. COPYRIGHT TRADEMARK
========================================== */
html body .footer__trademark {
    background: #000000 !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: center !important;
    padding: 16px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   7. OPTIMASI MOBILE FRIENDLY (HP/TABLET)
========================================== */
@media screen and (max-width: 1080px) {
    html body .footer__holder {
        /* Ekstra margin bawah agar aman dari Navigasi HUD Mobile */
        padding: 30px 15px 90px !important; 
    }
    
    html body .footer-col {
        margin-bottom: 25px !important;
    }
    
    html body .footer-item {
        max-width: 100% !important; /* Di HP, penuhi layarnya */
    }
    
    html body .footer-provider {
        /* Di HP, kotak provider jadi lebih kecil agar muat banyak */
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)) !important;
        gap: 6px !important;
    }
    
    html body .provider-icon {
        height: 38px !important; 
        padding: 4px !important;
    }
    
    html body .footer-nav {
        gap: 12px 15px !important; 
        margin-top: 20px !important;
    }
    
    html body .footer-link {
        font-size: 10px !important; 
    }
}


/* ==========================================
   1. MODAL BASE (DARK GLASS HUD)
========================================== */
html body .modal-content {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 101, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ==========================================
   2. HEADER & TOMBOL CLOSE (X)
========================================== */
html body .modal-header {
    border-bottom: 1px dashed rgba(255, 101, 0, 0.3) !important;
    padding: 20px 24px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

html body .modal-title {
    color: #FF6500 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    text-shadow: 0 0 12px rgba(255, 101, 0, 0.6) !important;
}

/* Tombol X (Cyber Close) */
html body .modal-content .close {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body .modal-content .close:hover {
    background: rgba(255, 0, 0, 0.15) !important;
    color: #ff3333 !important;
    border-color: #ff3333 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4) !important;
    transform: rotate(90deg) !important;
}

/* ==========================================
   3. FORM BODY & INPUT FIELDS (FIXED VISIBILITY)
========================================== */
html body .modal-body {
    padding: 24px 24px 30px !important;
}

html body .form-item {
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Label Teks */
html body .form-item .item-title {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Kolom Input (Username & Password) */
html body .form-item input {
    width: 100% !important;
    background-color: #111111 !important; /* Paksa background hitam pekat */
    background: #111111 !important;
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    color: #FF6500 !important; /* Warna teks ketikan menjadi Oranye Terang */
    -webkit-text-fill-color: #FF6500 !important; /* Memaksa warna di Chrome/Safari */
    caret-color: #ffffff !important; /* Kursor warna putih agar mencolok */
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: normal !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

html body .form-item input:focus {
    outline: none !important;
    border-color: #FF6500 !important;
    background-color: #000000 !important;
    color: #FF6500 !important;
    -webkit-text-fill-color: #FF6500 !important;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.8), 
        0 0 12px rgba(255, 101, 0, 0.4) !important;
}

html body .form-item input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Mengatasi Background Putih Auto-fill dari Browser */
html body .form-item input:-webkit-autofill,
html body .form-item input:-webkit-autofill:hover, 
html body .form-item input:-webkit-autofill:focus, 
html body .form-item input:-webkit-autofill:active {
    -webkit-text-fill-color: #FF6500 !important;
    -webkit-box-shadow: 0 0 0px 1000px #000000 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Toggle Password (Icon Mata) */
html body .toggle-password {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
    right: 1.2rem !important; 
    z-index: 10 !important;
}

html body .toggle-password:hover {
    color: #FF6500 !important;
    filter: drop-shadow(0 0 5px rgba(255, 101, 0, 0.5)) !important;
}

/* ==========================================
   4. LINKS (LUPA PASSWORD & REGISTER)
========================================== */
html body .form-forgot {
    text-align: right !important;
    margin-bottom: 24px !important;
    margin-top: -8px !important;
}

html body .form-forgot a {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

html body .form-forgot a:hover {
    color: #FF6500 !important;
    text-decoration: underline !important;
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.5) !important;
}

html body .form-register {
    text-align: center !important;
    margin-top: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

html body .form-register a {
    color: #FF6500 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

html body .form-register a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #FF6500 !important;
}

/* ==========================================
   5. BUTTON MASUK (GLOWING GOLDEN ORANGE)
========================================== */
html body .button-login {
    width: 100% !important;
    background: linear-gradient(180deg, #ff7a24, #FF6500) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 14px !important;
    border-radius: var(--radius-sm, 10px) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 
        0 0 15px rgba(255, 101, 0, 0.4), 
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html body .button-login:hover {
    box-shadow: 
        0 0 25px rgba(255, 101, 0, 0.7), 
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Efek Shimmer Kilap Kaca */
html body .button-login::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.5), transparent) !important;
    transform: rotate(25deg) !important;
    transition: 0.7s ease !important;
}

html body .button-login:hover::after {
    left: 140% !important;
}

/* ==========================================
   CAROUSEL SLIDER (TACTICAL HUD EDITION - NO ZOOM)
========================================== */

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

/* 2. HUD TARGETING FRAME (MAIN SLIDER) */
html body .main-slider {
    border-radius: 12px !important; /* Sudut taktis, tidak terlalu bulat */
    overflow: hidden !important;
    background: #050505 !important;
    border: 1px solid rgba(255, 101, 0, 0.2) !important;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.9), 
        0 0 20px rgba(255, 101, 0, 0.1) !important;
    position: relative !important;
}

/* Garis Sudut Taktis (HUD Reticle Corners) */
html body .main-slider::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* Teknik menggambar siku di keempat sudut dengan background gradient */
    background: 
        linear-gradient(90deg, #FF6500 0%, #FF6500 100%) top left / 30px 2px no-repeat,
        linear-gradient(0deg, #FF6500 0%, #FF6500 100%) top left / 2px 30px no-repeat,
        linear-gradient(90deg, #FF6500 0%, #FF6500 100%) top right / 30px 2px no-repeat,
        linear-gradient(0deg, #FF6500 0%, #FF6500 100%) top right / 2px 30px no-repeat,
        linear-gradient(90deg, #FF6500 0%, #FF6500 100%) bottom left / 30px 2px no-repeat,
        linear-gradient(0deg, #FF6500 0%, #FF6500 100%) bottom left / 2px 30px no-repeat,
        linear-gradient(90deg, #FF6500 0%, #FF6500 100%) bottom right / 30px 2px no-repeat,
        linear-gradient(0deg, #FF6500 0%, #FF6500 100%) bottom right / 2px 30px no-repeat !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0.9 !important;
}

/* Efek Laser Pemindai (Animasi Cyber Scanline) */
html body .main-slider::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 101, 0, 0.15) 50%, transparent 100%) !important;
    background-size: 100% 200% !important;
    animation: hudScanline 4s linear infinite !important;
    pointer-events: none !important;
    z-index: 4 !important;
    mix-blend-mode: screen !important;
}

@keyframes hudScanline {
    0% { background-position: 0% -100%; }
    100% { background-position: 0% 200%; }
}

/* 3. GAMBAR BANNER (STRICTLY NO ZOOM) */
html body .main-slider img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    /* Diberi efek sedikit abu-abu dan gelap agar nuansa dark-tech terasa */
    filter: brightness(0.85) contrast(1.1) grayscale(15%) !important;
    transition: filter 0.4s ease !important;
    transform: none !important; /* DILARANG ZOOM */
}

/* Hover hanya merubah kecerahan dan mengembalikan warna asli */
html body .main-slider:hover img {
    filter: brightness(1.1) contrast(1.15) grayscale(0%) !important;
    transform: none !important; /* DILARANG ZOOM */
}

/* ==========================================
   4. DIGITAL GAUGE PAGINATION (BAR METER)
========================================== */
html body .main-slider .swiper-pagination {
    bottom: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 10 !important;
}

/* Garis Tipis Indikator Mati */
html body .main-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.25) !important;
    width: 14px !important;
    height: 4px !important; /* Berbentuk strip/bar datar */
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    margin: 0 !important; 
}

/* Garis Menyala Indikator Aktif */
html body .main-slider .swiper-pagination-bullet-active {
    background: #FF6500 !important;
    width: 28px !important;
    box-shadow: 0 0 10px #FF6500, 0 0 15px rgba(255, 101, 0, 0.6) !important;
    background-image: linear-gradient(90deg, #ff7a24, #FF6500) !important;
}

/* ==========================================
   5. TACTICAL SIDE PANELS (NAV ARROWS)
========================================== */
html body .main-slider .swiper-button-next,
html body .main-slider .swiper-button-prev {
    width: 34px !important;
    height: 70px !important; /* Bentuk panel memanjang */
    background: rgba(5, 5, 5, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 0 !important; /* Sembunyi saat tidak di-hover (Desktop) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

html body .main-slider .swiper-button-prev {
    left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    border-right: 2px solid rgba(255, 101, 0, 0.2) !important;
}

html body .main-slider .swiper-button-next {
    right: 0 !important;
    border-radius: 8px 0 0 8px !important;
    border-left: 2px solid rgba(255, 101, 0, 0.2) !important;
}

html body .main-slider:hover .swiper-button-next,
html body .main-slider:hover .swiper-button-prev {
    opacity: 1 !important;
}

html body .main-slider .swiper-button-next:after,
html body .main-slider .swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* Hover Efek Panel Kiri Kanan */
html body .main-slider .swiper-button-prev:hover {
    background: rgba(255, 101, 0, 0.2) !important;
    color: #fff !important;
    border-right-color: #FF6500 !important;
    box-shadow: 10px 0 20px rgba(255, 101, 0, 0.4) !important;
}

html body .main-slider .swiper-button-next:hover {
    background: rgba(255, 101, 0, 0.2) !important;
    color: #fff !important;
    border-left-color: #FF6500 !important;
    box-shadow: -10px 0 20px rgba(255, 101, 0, 0.4) !important;
}

/* ==========================================
   6. MOBILE OPTIMIZATION
========================================== */
@media screen and (max-width: 768px) {
    html body .home__slider {
        padding: 16px 12px !important;
    }
    
    html body .main-slider {
        border-radius: 8px !important;
    }
    
    html body .main-slider .swiper-button-next,
    html body .main-slider .swiper-button-prev {
        opacity: 1 !important; /* Selalu tampil di HP */
        height: 50px !important;
        width: 24px !important;
    }
    
    html body .main-slider .swiper-button-next:after,
    html body .main-slider .swiper-button-prev:after {
        font-size: 10px !important;
    }
    
    html body .main-slider .swiper-pagination-bullet {
        width: 10px !important;
        height: 3px !important;
    }
    html body .main-slider .swiper-pagination-bullet-active {
        width: 20px !important;
    }
}

/* ==========================================
   NEWS CARDS (TACTICAL HUD DATA PANELS - NO ZOOM)
========================================== */

/* 1. CONTAINER KARTU BERITA */
html body .news-item {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.95), rgba(5, 5, 5, 0.98)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 24px) !important; /* Membuat tinggi kartu merata */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
}

/* Garis aksen kiri untuk kesan HUD terminal */
html body .news-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 3px !important;
    background: #FF6500 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 5 !important;
}

/* Hover Kartu Berita (Kartu Terangkat, Garis Menyala) */
html body .news-item:hover {
    border-color: rgba(255, 101, 0, 0.4) !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.8), 
        inset 0 0 20px rgba(255, 101, 0, 0.05) !important;
    transform: translateY(-5px) !important;
}
html body .news-item:hover::before {
    opacity: 1 !important;
    box-shadow: 0 0 10px #FF6500 !important;
}

/* ==========================================
   2. AREA GAMBAR (TAMPIL UTUH - FULL VISIBILITY)
========================================== */
html body .news-img {
    width: 100% !important;
    /* Kita hilangkan paksaan aspect-ratio agar lebih fleksibel, 
       atau setel tinggi minimum jika diperlukan. 
       Di sini kita gunakan min-height agar grid tetap rapi */
    min-height: 160px !important; 
    overflow: hidden !important;
    position: relative !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important; /* Memberi ruang bernapas agar gambar tidak mentok pinggir */
}

html body .news-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* KUNCI UTAMA: Gambar tidak akan terpotong/zoom */
    max-height: 200px !important; /* Menjaga agar gambar yang terlalu tinggi tidak merusak layout */
    
    /* Transisi filter warna */
    transition: filter 0.4s ease !important; 
    filter: grayscale(40%) brightness(1) contrast(1.1) !important; 
    transform: none !important; /* Mengunci gambar agar tidak membesar */
}

/* Hover Gambar: Hanya mengembalikan warna dan kecerahan */
html body .news-item:hover .news-img img {
    filter: grayscale(0%) brightness(1.1) contrast(1.15) !important;
    transform: none !important; /* Memastikan tidak ada zoom */
}

/* Garis Laser di Bawah Gambar */
html body .news-img::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #FF6500, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}
html body .news-item:hover .news-img::after {
    opacity: 1 !important;
    box-shadow: 0 -2px 10px rgba(255, 101, 0, 0.8) !important;
}

/* Garis Laser di Bawah Gambar */
html body .news-img::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #FF6500, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}
html body .news-item:hover .news-img::after {
    opacity: 1 !important;
    box-shadow: 0 -2px 10px rgba(255, 101, 0, 0.8) !important;
}

/* 3. INFO & JUDUL BERITA */
html body .news-info {
    padding: 16px 20px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

html body .info-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    transition: color 0.3s ease !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html body .news-item:hover .info-title {
    color: #FF6500 !important;
    text-shadow: 0 0 10px rgba(255, 101, 0, 0.3) !important;
}

/* 4. BAGIAN BAWAH (TANGGAL & TOMBOL) */
html body .news-bottom {
    padding: 14px 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: border-color 0.3s ease !important;
}

html body .news-item:hover .news-bottom {
    border-top-color: rgba(255, 101, 0, 0.3) !important;
}

/* Tanggal Terbit */
html body .bottom-publish {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.5px !important;
}

html body .bottom-publish span {
    color: rgba(255, 101, 0, 0.8) !important;
    font-weight: 800 !important;
}

/* Tombol Baca Selengkapnya */
html body .bottom-read {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
}

html body .news-item:hover .bottom-read {
    background: linear-gradient(90deg, #ff7a24, #FF6500) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.5) !important;
    border-color: #ffb27d !important;
}

/* ==========================================
   5. MOBILE OPTIMIZATION (HP / TABLET)
========================================== */
@media screen and (max-width: 768px) {
    html body .news-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    html body .bottom-read {
        width: 100% !important;
        text-align: center !important;
        padding: 10px !important;
    }
    
    html body .info-title {
        font-size: 12px !important;
    }
}

/* ==========================================
   PROMOTION CARDS (CYBER HUD TERMINAL)
========================================== */

/* 1. CONTAINER PROMOSI */
html body .promo__container {
    padding: 20px 16px !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Judul Halaman Promosi */
html body .page-header {
    color: #FF6500 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 24px !important;
    text-shadow: 0 0 15px rgba(255, 101, 0, 0.6) !important;
    border-bottom: 2px dashed rgba(255, 101, 0, 0.4) !important;
    padding-bottom: 12px !important;
    text-align: center !important;
}

/* 2. KARTU PROMOSI (DATA PANEL) */
html body .promo-item {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.95), rgba(5, 5, 5, 0.98)) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 24px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
}

/* Garis Indikator Kiri (Cyber Accent) */
html body .promo-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 4px !important;
    background: linear-gradient(180deg, #FF6500, #ffb27d) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 5 !important;
}

/* Hover Efek Kartu Promosi */
html body .promo-item:hover {
    border-color: rgba(255, 101, 0, 0.5) !important;
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.9), 
        inset 0 0 25px rgba(255, 101, 0, 0.08) !important;
    transform: translateY(-5px) !important;
}
html body .promo-item:hover::before {
    opacity: 1 !important;
    box-shadow: 0 0 15px #FF6500 !important;
}

/* 3. AREA GAMBAR (CONTAIN, NO ZOOM) */
html body .promo-img {
    width: 100% !important;
    /* Memberi ruang agar gambar banner promosi tidak terpotong */
    min-height: 140px !important; 
    overflow: hidden !important;
    position: relative !important;
    background: hsl(0, 0%, 0%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html body .promo-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Mencegah gambar terpotong */
    max-height: 220px !important;
    transition: filter 0.4s ease !important;
    filter: grayscale(0%) brightness(1.1) contrast(1.15) !important;
    transform: none !important; /* Mencegah zoom */
}

/* Mengembalikan warna asli saat di-hover */
html body .promo-item:hover .promo-img img {
    filter: grayscale(0%) brightness(1.1) contrast(1.15) !important;
    transform: none !important; /* Memastikan tidak ada zoom */
}

/* Garis Pemindai (Scanline) di Bawah Gambar */
html body .promo-img::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #FF6500, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}
html body .promo-item:hover .promo-img::after {
    opacity: 1 !important;
    box-shadow: 0 -3px 12px rgba(255, 101, 0, 0.9) !important;
}

/* 4. INFO & JUDUL PROMOSI */
html body .promo-info {
    padding: 16px 20px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Memisahkan judul dan tombol */
    align-items: center !important; /* Menengahkan konten */
    text-align: center !important;
    gap: 16px !important;
}

html body .info-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

html body .promo-item:hover .info-title {
    color: #FF6500 !important;
    text-shadow: 0 0 12px rgba(255, 101, 0, 0.5) !important;
}

/* 5. TOMBOL "SELENGKAPNYA" */
html body .info-read {
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 8px 24px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    width: 100% !important;
    max-width: 200px !important; /* Mencegah tombol terlalu panjang di desktop */
}

html body .promo-item:hover .info-read {
    background: linear-gradient(180deg, #ff7a24, #FF6500) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 101, 0, 0.5) !important;
    border-color: #ffb27d !important;
}

/* ==========================================
   6. OPTIMASI MOBILE (HP / TABLET)
========================================== */
@media screen and (max-width: 768px) {
    html body .promo__container {
        padding: 16px 12px !important;
    }
    
    html body .page-header {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
    
    html body .info-title {
        font-size: 12px !important;
    }
    
    html body .info-read {
        padding: 10px 16px !important;
        max-width: 100% !important; /* Tombol memanjang penuh di mobile */
    }
}

/* ==========================================
   LOTTERY RESULTS (PRO FUTURISTIC HUD TERMINAL)
========================================== */

/* 1. WRAPPER & GRID SYSTEM */
html body .lottery__container {
    padding: 20px 16px !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Judul Halaman */
html body .lottery__container .page-header {
    color: #FF6500 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 24px !important;
    text-shadow: 0 0 15px rgba(255, 101, 0, 0.6) !important;
    border-bottom: 2px dashed rgba(255, 101, 0, 0.4) !important;
    padding-bottom: 12px !important;
    text-align: center !important;
}

/* Grid Layout: Responsif otomatis menyesuaikan lebar layar */
html body .lottery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

/* 2. KARTU DATA (MODUL HUD) */
html body .lotto-border {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.95) 0%, rgba(5, 5, 5, 0.98) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Aksen garis terminal tebal di sebelah kiri */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid #FF6500 !important; 
    border-radius: 12px !important;
    
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Reset Link Default */
html body .lotto-border a.main {
    text-decoration: none !important;
    display: block !important;
    color: inherit !important;
}

/* Efek Shimmer Kilap Kaca */
html body .lotto-border::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; 
    left: -100% !important;
    width: 50% !important; 
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: 0.6s ease !important;
    pointer-events: none !important;
}

/* Interaksi saat Modul Di-hover / Di-tap */
html body .lotto-border:hover {
    border-color: rgba(255, 101, 0, 0.3) !important;
    border-left: 4px solid #ffb27d !important; /* Garis kiri menyala putih-oranye */
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.9), 
        inset 0 0 15px rgba(255, 101, 0, 0.1) !important;
    transform: translateY(-3px) !important;
}
html body .lotto-border:hover::after {
    left: 150% !important;
}

/* 3. LAYOUT DALAM KARTU */
html body .lotto-item {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    gap: 16px !important;
    background: transparent !important;
}

/* 4. ICON BENDERA (AVATAR MODUL) */
html body .lotto-flag {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important; /* Kotak melengkung futuristik */
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
    overflow: hidden !important;
    position: relative !important;
}

html body .lotto-flag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    filter: brightness(0.9) contrast(1.1) !important;
    transition: all 0.3s ease !important;
}

html body .lotto-border:hover .lotto-flag img {
    filter: brightness(1.1) contrast(1.2) !important;
    transform: scale(1.05) !important;
}

/* 5. INFORMASI TEKS & ANGKA (GRID SYSTEM) */
html body .lotto-info {
    flex-grow: 1 !important;
    display: grid !important;
    /* Menyusun area grid: Kiri untuk teks, Kanan untuk kotak angka */
    grid-template-areas: 
        "country number"
        "date number" !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    row-gap: 6px !important;
}

/* Nama Pasaran */
html body .lotto-country {
    grid-area: country !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Tanggal Result */
html body .lotto-date {
    grid-area: date !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 6. LAYAR LED ANGKA RESULT (THE HIGHLIGHT) */
html body .lotto-number {
    grid-area: number !important;
    font-family: 'Courier New', Courier, monospace !important; /* Font bergaya digital/kalkulator */
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    color: #FF6500 !important;
    
    /* Box Layar LED */
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 101, 0, 0.3) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    
    text-shadow: 0 0 8px rgba(255, 101, 0, 0.5) !important;
    box-shadow: inset 0 0 10px rgba(255, 101, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    text-align: right !important;
}

/* Angka Menyala Terang Saat Di-hover */
html body .lotto-border:hover .lotto-number {
    background: rgba(255, 101, 0, 0.15) !important;
    border-color: #FF6500 !important;
    color: #ffffff !important; /* Teks berubah putih agar lebih kontras */
    text-shadow: 0 0 10px #FF6500, 0 0 20px #FF6500 !important;
    box-shadow: 
        inset 0 0 15px rgba(255, 101, 0, 0.4), 
        0 0 15px rgba(255, 101, 0, 0.3) !important;
}

/* ==========================================
   7. MOBILE OPTIMIZATION
========================================== */
@media screen and (max-width: 768px) {
    html body .lottery-grid {
        grid-template-columns: 1fr !important; /* 1 Kolom penuh di HP */
    }
    
    html body .lotto-number {
        font-size: 16px !important; /* Sesuaikan ukuran font di layar kecil */
        letter-spacing: 2px !important;
    }
}


/*Bagian Form Transaksi*/
/* ==========================================
   TRANSACTION PAGE (CLEAN HUD - FINAL REVISION)
   Memperbaiki Teks Terpotong & Background Bank
========================================== */

/* 1. TABS NAVIGASI (ANTI-TERPOTONG) */
html body .transaksi .component-tabs {
    border-bottom: 2px solid rgba(255, 101, 0, 0.2) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
}

html body .transaksi .component-tabs::-webkit-scrollbar {
    height: 3px !important;
}

html body .transaksi .component-tabs::-webkit-scrollbar-thumb {
    background: #FF6500 !important;
    border-radius: 10px !important;
}

html body .transaksi .component-tabs .nav-item {
    flex: 0 0 auto !important;
}

html body .transaksi .button-pills {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transition: all 0.3s ease !important;
}

html body .transaksi .button-pills.active {
    background: #FF6500 !important;
    border-color: #FF6500 !important;
    color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(255, 101, 0, 0.4) !important;
}

html body .transaksi .button-pills.active i {
    color: #ffffff !important;
}


/* ==========================================
   MOBILE TABS COMPACT MODE
========================================== */

@media screen and (max-width:1080px){

    html body .transaksi .component-tabs{
        gap:4px !important;
        overflow:hidden !important;
        flex-wrap:nowrap !important;
        padding-bottom:4px !important;
    }

    html body .transaksi .component-tabs .nav-item{
        flex:1 1 0 !important;
        min-width:0 !important;
    }

    html body .transaksi .button-pills{
        width:100% !important;
        padding:8px 4px !important;
        font-size:10px !important;
        letter-spacing:0 !important;
        white-space:nowrap !important;
        text-align:center !important;
    }

}
/* 2. GRID PAYMENT ITEM & BUBBLE GLASS ICON */
html body .payment-item {
    background: #1e1e1e !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 16px 12px !important;
    position: relative !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

html body .payment-item:hover {
    border-color: #FF6500 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(255, 101, 0, 0.2) !important;
}

/* Indikator Online (Rapi di Sudut) */
html body .payment-status.online {
    background: #00cc00 !important; 
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 0 0 8px 0 !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    letter-spacing: 1px !important;
    z-index: 5 !important;
}

html body .payment-body { background: transparent !important; }

/* BUBBLE GLASS TRANSPARENT UNTUK LOGO BANK */
html body .payment-icon {
    /* Menghancurkan oranye bawaan dan mengganti dengan Kaca Bening */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    border-radius: 8px !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 42px !important;
    width: auto !important;
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.1), 
        0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

html body .payment-icon img { 
    background: transparent !important; /* Paksa hapus background bawaan gambar */
    max-height: 26px !important; 
    max-width: 100% !important;
    object-fit: contain !important; 
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)) !important; /* Teks gambar lebih terbaca */
}

/* Teks Bank Dibuat Rapi */
html body .payment-content .title { 
    color: #FF6500 !important; 
    font-size: 13px !important; 
    font-weight: 800 !important; 
    margin-top: 12px !important;
}

html body .payment-content .desc { 
    color: #bbbbbb !important; 
    font-size: 10px !important; 
    margin-top: 4px !important;
    line-height: 1.3 !important;
}


/* 3. FORMULIR TRANSAKSI (BERSIH & TERANG) */
html body .transaksi-formulir {
    background: #1a1a1a !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

html body .transaksi-formulir .formulir-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding left: 20px !important;
}

.formulir-title {
    margin-left: 5px !important;
}

/* INPUT FORM (Teks Putih Terang) */
html body .transaksi-formulir input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), 
html body .transaksi-formulir select {
    background-color: #2a2a2a !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

html body .transaksi-formulir input:focus, 
html body .transaksi-formulir select:focus {
    border-color: #FF6500 !important;
    background-color: #222222 !important;
    box-shadow: 0 0 8px rgba(255, 101, 0, 0.3) !important;
    outline: none !important;
}

/* Fix Auto-fill */
html body .transaksi-formulir input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #2a2a2a inset !important;
}

/* Disable Input (Readonly) */
html body .transaksi-formulir input.bg-white,
html body .transaksi-formulir input:disabled,
html body .transaksi-formulir input[readonly] {
    background-color: #333333 !important;
    color: #aaaaaa !important;
    -webkit-text-fill-color: #aaaaaa !important;
    border-color: #444444 !important;
}

html body .transaksi-formulir label {
    color: #dddddd !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

html body .formulir-desc { color: #FF6500 !important; font-size: 11px !important; }

/* Tombol Kirim */
html body .transaksi-formulir .btn-custom {
    background: #FF6500 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 250px !important;
}
html body .transaksi-formulir .btn-custom:hover { background: #e65b00 !important; }


/* 4. KARTU DETAIL REKENING BANK & QR CODE */
html body .bankOption .card {
    background: #222222 !important;
    border: 1px solid #444444 !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
}
html body .bankOption .card-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #333333 !important;
}
html body .bankOption .card-body.text-dark { color: #ffffff !important; }

html body a[name="copyAddress"] {
    background: rgba(255, 101, 0, 0.1) !important;
    color: #FF6500 !important;
    border: 1px solid #FF6500 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    display: inline-block !important;
}

html body #qrCode.bg-white {
    background: #ffffff !important; 
    border: 2px solid #FF6500 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    display: inline-block !important;
}


/* 5. BOX INFORMASI PERATURAN (BERSIH & BUKAN MERAH) */
html body .transaksi-info {
    background: #1c1c1c !important; 
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

html body .transaksi-info .info-header {
    background: rgba(255, 101, 0, 0.05) !important;
    color: #FF6500 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #333333 !important;
}

html body .transaksi-info .info-content { padding: 20px !important; }

html body .transaksi-info .info-content * {
    color: #eeeeee !important; 
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-shadow: none !important; 
}
html body .transaksi-info .info-content strong { color: #fff !important; font-weight: 800 !important; }


/* 6. TABEL RIWAYAT TRANSAKSI */
html body .table-dataTable { margin-top: 20px !important; }
html body .table-dataTable table {
    background: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    width: 100% !important;
}
html body .table-dataTable th {
    background: #2a2a2a !important;
    border-color: #444444 !important;
    color: #FF6500 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 12px !important;
}
html body .table-dataTable td { 
    border-color: #333333 !important; 
    font-size: 12px !important;
    padding: 10px !important;
}

.transaksi .component-tab-content .transaksi-table-bottom {
    background: #1e1e1e !important;
}


/* ==========================================
   7. GRID LAYOUT DESKTOP VS MOBILE
========================================== */

@media screen and (min-width:1081px){
    html body .transaksi-grid{
        display:grid!important;
        grid-template-columns:320px 1fr!important;
        gap:24px!important;
        align-items:start!important;
    }
    html body .transaksi-payment{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }
}

@media screen and (max-width:1080px){
    html body .transaksi-grid{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
    }

    html body .transaksi-payment{
        display:flex!important;
        flex-direction:row!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        gap:10px!important;
        padding-bottom:8px!important;
        scroll-behavior:smooth!important;
        -webkit-overflow-scrolling:touch!important;
    }

    html body .transaksi-payment>*{
        flex:0 0 auto!important;
        width:140px!important;
    }

    html body .transaksi-payment::-webkit-scrollbar{
        display:none!important;
    }

    html body .transaksi-payment{
        scrollbar-width:none!important;
    }

    html body .transaksi-formulir{
        padding:16px!important;
    }

    html body .table-dataTable table,
    html body .table-dataTable th,
    html body .table-dataTable td{
        font-size:11px!important;
        padding:8px!important;
    }

    html body .transaksi-info .info-content *{
        font-size:12px!important;
    }

    .component-tab-content {
        padding: 0 !important;
    }
}
/* ==========================================
   CASHBACK / KLAIM PROMO (CYBER HUD TERMINAL)
   Desktop & Mobile Optimized
========================================== */

/* 1. HEADER & JUDUL HALAMAN */
html body #cashbackPage .claim-bonus {
    padding: 10px 0 20px !important;
}

html body #cashbackPage .claim-title {
    margin-bottom: 24px !important;
    border-bottom: 1px dashed rgba(255, 101, 0, 0.4) !important;
    padding-bottom: 14px !important;
    text-align: center !important;
}

html body #cashbackPage .claim-title h5 {
    color: #FF6500 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 15px rgba(255, 101, 0, 0.6) !important;
    margin: 0 !important;
}

/* 2. MODAL KARTU CASHBACK (DATA PANEL) */
html body #cashbackPage .bonus-item {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(5, 5, 5, 0.98)) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid #FF6500 !important; /* Garis aksen kiri khas HUD */
    border-radius: 12px !important;
    
    padding: 20px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efek Shimmer Kilap Kaca */
html body #cashbackPage .bonus-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; 
    left: -100% !important;
    width: 40% !important; 
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: 0.6s ease !important;
    pointer-events: none !important;
}

/* Interaksi saat Modul Di-hover */
html body #cashbackPage .bonus-item:hover {
    border-color: rgba(255, 101, 0, 0.4) !important;
    border-left-color: #ffb27d !important;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.9), 
        inset 0 0 15px rgba(255, 101, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

html body #cashbackPage .bonus-item:hover::before {
    left: 150% !important;
}

/* 3. TEKS DI DALAM KARTU */

/* Judul Pertama (Kategori: SPORT, SLOT, dll) -> Disulap Jadi Badge Keren */
html body #cashbackPage .bonus-item .prog-title:nth-child(1) {
    display: inline-block !important;
    background: rgba(255, 101, 0, 0.15) !important;
    color: #ffb27d !important;
    border: 1px solid rgba(255, 101, 0, 0.4) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    margin-bottom: 14px !important;
    align-self: flex-start !important; /* Menahan agar tidak penuh sebaris */
    box-shadow: 0 0 10px rgba(255, 101, 0, 0.2) !important;
}

/* Judul Kedua (Deskripsi Lengkap) -> Teks Putih Terang */
html body #cashbackPage .bonus-item .prog-title:nth-child(2) {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    transition: all 0.3s ease !important;
}

html body #cashbackPage .bonus-item:hover .prog-title:nth-child(2) {
    color: #FF6500 !important;
    text-shadow: 0 0 10px rgba(255, 101, 0, 0.4) !important;
}

/* 4. TOMBOL KLAIM ("AMBIL") */
html body #cashbackPage .bonus-button {
    margin-top: auto !important; /* Mendorong tombol selalu ke bawah */
}

html body #cashbackPage .bonus-button .btn-custom {
    width: 100% !important;
    background: linear-gradient(180deg, #ff7a24, #FF6500) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(255, 101, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body #cashbackPage .bonus-button .btn-custom:hover {
    box-shadow: 
        0 0 20px rgba(255, 101, 0, 0.7), 
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    border-color: #ffb27d !important;
}

/* 5. OPTIMASI MOBILE */
@media screen and (max-width: 768px) {
    html body #cashbackPage .claim-title h5 {
        font-size: 15px !important;
    }
    
    html body #cashbackPage .bonus-item {
        padding: 16px !important;
    }
    
    html body #cashbackPage .bonus-item .prog-title:nth-child(2) {
        font-size: 12px !important;
        margin-bottom: 16px !important;
    }
    
    html body #cashbackPage .bonus-button .btn-custom {
        padding: 10px !important;
        font-size: 12px !important;
    }
}

/* ==========================================
   FORMULIR PENDAFTARAN - PROFESSIONAL INDUSTRIAL HUD
   Struktur lebih rapi, fokus pada keterbacaan
========================================== */

/* 1. CONTAINER & HEADER */
html body .register__container {
    padding: 40px 20px !important;
    background: transparent !important;
    max-width: 750px !important;
    margin: 0 auto !important;
}

html body .register__container .page-header {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    background: linear-gradient(90deg, transparent, #FF6500, transparent) !important;
    padding: 10px !important;
    border-radius: 50px !important;
}

/* 2. FORM BOX (INDUSTRIAL DARK) */
html body #register-form .register-form {
    background: #141414 !important; /* Warna dasar profesional */
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    padding: 40px !important;
}

/* 3. ROW & GROUP RAPI (Layout Grid) */
html body .register-form .form-group {
    margin-bottom: 25px !important;
    border-bottom: 1px solid #222222 !important;
    padding-bottom: 20px !important;
}

/* Label agar sejajar dan mudah dibaca */
html body .register-form label {
    color: #bbbbbb !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* 4. INPUT FIELD (PROFESIONAL & CLEAN) */
html body .register-form .form-control {
    background: #000000 !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important; /* Teks putih jelas */
    padding: 12px 15px !important;
    border-radius: 4px !important; /* Sudut tegas profesional */
    font-size: 12px !important;
    transition: all 0.3s ease !important;
}

html body .register-form .form-control:focus {
    border-color: #FF6500 !important;
    outline: none !important;
    background: #0d0d0d !important;
}

/* Toggle Password */
html body .toggle-password {
    color: #FF6500 !important;
}

/* Select Box */
html body .register-form select.form-control {
    /* Pastikan tinggi otomatis menyesuaikan isi teks */
    height: auto !important; 
    min-height: 48px !important;
    
    /* Padding diperbaiki agar teks tidak menabrak batas */
    padding: 12px 35px 12px 15px !important; 
    
    /* Mengatur agar teks tidak terpotong */
    line-height: 1.5 !important;
    display: block !important;
    width: 100% !important;
    
    /* Styling tampilan */
    background: #000000 !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    
    /* Penyesuaian untuk Browser agar tidak ter-crop */
    -webkit-appearance: none !important; /* Hilangkan default OS */
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF6500%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

/* Pastikan option di dalam select juga terbaca */
html body .register-form select.form-control option,
html body .register-form select.form-control optgroup {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* Fix khusus jika ada elemen parent yang membatasi */
html body .register-form .col-lg-8 {
    width: 100% !important;
    overflow: visible !important;
}

/* 5. TOMBOL DAFTAR (SOLID & AUTHORITATIVE) */
html body .button-submit {
    width: 100% !important;
    background: #FF6500 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 101, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

html body .button-submit:hover {
    background: #ff8533 !important;
    box-shadow: 0 6px 20px rgba(255, 101, 0, 0.6) !important;
    transform: translateY(-3px) !important;
}

/* 6. RESPONSIVE LAYOUT (PENTING) */
@media screen and (min-width: 992px) {
    /* Layout dua kolom untuk desktop (Label kiri, Input kanan) */
    html body .register-form .form-group .row {
        display: flex !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 991px) {
    /* Mobile: Tumpuk ke bawah agar tidak berantakan */
    html body .register-form .form-group .row {
        display: block !important;
    }
    html body .register-form {
        padding: 20px !important;
    }
}


/* ==========================================
   OTHER POSTS / PROMO TERAKHIR (SIDEBAR WIDGET)
========================================== */

/* 1. CONTAINER SIDEBAR */
html body .other-post {
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
}

html body .other-header {
    color: #FF6500 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #333333 !important;
    padding-bottom: 10px !important;
}

/* 2. ITEM PROMO */
html body .other-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

html body .other-item:hover {
    background: rgba(255, 101, 0, 0.1) !important;
    transform: translateX(5px) !important;
}

/* 3. GAMBAR (Fixed Size Agar Rapi) */
html body .other-item .img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

html body .other-item .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. CONTENT & TITLE (Anti-Potong) */
html body .other-item .content {
    flex: 1 !important;
    overflow: hidden !important;
}

html body .other-item .title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    
    /* Mengatasi teks "..." menjadi teks penuh yang rapi */
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Maksimal 2 baris */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html body .other-item .read-more {
    color: #FF6500 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* Menghilangkan underline bawaan link */
html body .other-post a {
    text-decoration: none !important;
}

/*additional*/
#languageModal .modal-content .modal-body .language-list .list-item .item-content h5 {
    color: white !important;
}