/* Import Montserrat font dari Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ====== Variabel Warna (Root CSS) ====== */
:root {
  --color-background: #222;
  --color-foreground: #fff;

  --color-primary: #ffc107;
  --color-secondary: #f39c12;
  --color-blackpearl: #2b333d;
  --color-primary-dark: #e0a800;
  --color-primary-light: #ffe082;

  --color-danger: #dc3545;
  --color-success: #28a745;
  --color-info: #17a2b8;

  --color-dark: #111;
  --color-light: #f8f9fa;
  --color-muted: #6c757d;

  --color-border: #333;
  --shadow-soft: 0 2px 4px rgba(0,0,0,0.3);
}

/* ====== Base Styles ====== */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

main {
  flex: 1; /* Mengisi ruang kosong antara header dan footer */
}
/* ====== Navbar Login ====== */
.navbar-login {
  background-color: var(--color-dark);
  color: var(--color-foreground);

  position: sticky;
  top: 0;
  z-index: 1040;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ====== Navbar Menu Utama ====== */
.navbar-mainmenu {
  background-color: var(--color-blackpearl);
  color: var(--color-foreground);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  position: sticky;
  top: 48px; /* posisinya tepat di bawah login bar */
  z-index: 1039;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.navbar-mainmenu a {
  color: var(--color-foreground);
  text-decoration: none;
  font-size: 16px;
}

.navbar-mainmenu a .fas {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
  color: var(--color-foreground);
}

.menu-icon-svg {
  width: 60px;
  height: 60px;
  margin: 0 auto 5px;
  display: block;
  transition: transform 0.3s ease;
}

.navbar-mainmenu a:hover .menu-icon-svg {
  transform: scale(1.1); /* efek zoom saat hover */
}

/* Hover Menu Utama */
.navbar-mainmenu a:hover,
.navbar-mainmenu a:focus {
  color: var(--color-primary);
}

/* ====== Menu Scroll Mobile ====== */
.menu-scroll-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
  margin: 0 -10px;
  scrollbar-width: none; /* Firefox */
}
.menu-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.menu-scroll-row {
  display: inline-flex;
  gap: 1rem;
  padding-bottom: 5px;
}
.menu-item {
  display: inline-block;
  text-align: center;
}
.menu-item img.menu-icon-svg {
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
}

/* ===========================================================
   LC SideDrawer v4.2  — mengikuti alurmu + tombol 2 kolom
   =========================================================== */

/* -- tombol tetap, dipoles -- */
#mobileMenuToggle{
  position:fixed; top:15px; right:15px; z-index:1051;
  width:44px; height:44px; display:none;
  background:var(--color-secondary); color:var(--color-foreground);
  border:2px solid #fff; border-radius:50%; font-size:20px;
  align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#mobileMenuToggle i{ line-height:1; transition:transform .2s ease }
#mobileMenuToggle:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.45) }

/* Drawer: animasi transform (lebih halus) */
#sideDrawer{
  position:fixed; top:0; right:0; height:100vh;
  width:clamp(288px, 86vw, 340px);
  background:linear-gradient(to right,#1d2227,#111418); color:#e9ecef; z-index:1050;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .28s ease-in-out;
  box-shadow:-2px 0 18px rgba(0,0,0,.55);
  border-left:1px solid rgba(255,255,255,.06);
  padding-bottom:max(76px, env(safe-area-inset-bottom));
  max-width:300px;
}
#sideDrawer.open, #sideDrawer.active{ transform:translateX(0) }

/* penting */
#sideDrawer, #sideDrawer *{ box-sizing:border-box }
#sideDrawer .section, 
#sideDrawer .header, 
#sideDrawer .quick-actions, 
#sideDrawer .btn-block, 
#sideDrawer .menu-item{ width:100% }

/* xs screen */
@media (max-width:360px){
  #sideDrawer{ width:86vw }
}

/* Body lock + backdrop */
body.lc-sd-open{ overflow:hidden }
.lc-sd-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:1049;
}
.lc-sd-backdrop.show{ opacity:1; visibility:visible }

/* Scrollbar */
#sideDrawer::-webkit-scrollbar{ width:8px }
#sideDrawer::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px }

/* =================== HEADER =================== */
#sideDrawer .header{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f0b93b 0%, #905f00 100%);
  padding:14px 56px 14px 14px;
  border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  color:#0e0f10;
}

/* close button */
#sideDrawer .header .lc-sd-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.28); color:#fff; border:1px solid rgba(255,255,255,.25);
}

/* badge level */
#sideDrawer .header .badge{
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* Bungkus konten ringkasan dalam panel agar tidak “nabrak” gradient header */
#sideDrawer .header > .section{
  margin-top:10px;
  background:rgba(20,24,30,.8);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.25) inset, 0 10px 24px rgba(0,0,0,.2);
  color:#e9ecef;
  width:273px;
}

/* =================== STAT CARDS =================== */
#sideDrawer .stat-card{
  background:#151a20;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:10px 12px; margin:10px 0 0;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
#sideDrawer .stat-card .small{ opacity:.9; font-size:.7rem; letter-spacing:.2px }
#sideDrawer .stat-card .val{ font-weight:800; font-size:0.7rem }
#sideDrawer .stat-card.lp  .val{ color:#ffcf6a }
#sideDrawer .stat-card.exp .val{ color:#dfe6ee }

/* =================== QUICK ACTIONS =================== */
#sideDrawer .quick-actions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:12px 0 12px;
}
#sideDrawer .quick-actions .qa{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:50px; gap:6px; text-align:center;
  border:1px solid rgba(255,255,255,.10); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:#e9ecef; text-decoration:none; user-select:none;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
#sideDrawer .quick-actions .qa i{ color:#ffc107; font-size:13px }
#sideDrawer .quick-actions .qa span{ font-size:.5rem; font-weight:700; letter-spacing:.3px }
#sideDrawer .quick-actions .qa:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08) }
#sideDrawer .quick-actions .qa:active{ transform:translateY(0) }

/* =================== BUTTONS (Akun & Logout kiri–kanan) =================== */
#sideDrawer .btn-block{
  display:grid;
  grid-template-columns:1fr 1fr;  /* dua kolom sama besar */
  gap:10px;
  margin:6px 0 10px;
}
#sideDrawer .btn-block > *{ min-width:0 }  /* cegah overflow grid item */
#sideDrawer .btn-block a.btn,
#sideDrawer .btn-block form,
#sideDrawer .btn-block form .btn{ width:100% }

#sideDrawer .btn-block .btn{
  height:30px; border-radius:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; 
  font-size:0.7rem;/* pusatkan icon+teks */
}

/* primary tegas & bersih di atas panel gelap */
#sideDrawer .btn-block .btn.btn-primary{
  background:#2f6df6; border-color:#2755ca; color:#fff;
  box-shadow:0 10px 24px rgba(47,109,246,.35);
}
#sideDrawer .btn-block .btn.btn-primary:hover{ filter:brightness(1.06) }

/* outline-danger dibuat solid/kontras */
#sideDrawer .btn-block .btn.btn-outline-danger{
  color:#fff; background:linear-gradient(180deg,#e94545 0%,#c72f2f 100%);
  border:1px solid #c72f2f;
}
#sideDrawer .btn-block .btn.btn-outline-danger:hover{
  color:#fff; background:#ef4444; border-color:#ef4444;
  box-shadow:0 10px 24px rgba(239,68,68,.35);
}

/* =================== MENU LIST =================== */
#sideDrawer .menu-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to right,#1d2227,#111418); color:#e9ecef; text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .06s ease;
  cursor:pointer; user-select:none;
}
#sideDrawer .menu-item i{
  width:28px; min-width:28px; text-align:center; font-size:18px; color:#ffc107;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
#sideDrawer .menu-item span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#sideDrawer .menu-item:hover{ background:#161b22 }
#sideDrawer .menu-item:active{ transform:translateY(1px) }
#sideDrawer .menu-item:last-of-type{ border-bottom:0 }

/* =================== RESPONSIVE =================== */
@media (max-width:768px){
  #mobileMenuToggle{ display:flex }
  #sideDrawer{ display:block }
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  #sideDrawer, #mobileMenuToggle{ transition:none }
}
/* Sidenav — warna angka Saldo/LP/EXP */
#sideDrawer .stat-card .val { font-weight: 800; }

/* Saldo & LP kuning */
#sideDrawer .stat-card.stat-saldo .val,
#sideDrawer .stat-card.lp .val {
  color: #ffd34d !important;
}

/* EXP hijau */
#sideDrawer .stat-card.exp .val {
  color: #0be881 !important;
}
  /* pastikan kartu EXP bisa tinggi dinamis */
  #sideDrawer .stat-card.exp {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
  #sideDrawer .stat-card.exp .val { display:block; }

  /* Track */
  #sideDrawer .exp .exp-progress {
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #2b333d, #232a33);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
  }
  /* Bar */
  #sideDrawer .exp .exp-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 0 10px rgba(34,197,94,.55);
    transition: width .45s ease;
  }
  /* Teks kecil di bawah bar */
  #sideDrawer .exp .exp-meta {
    font-size: 11px;           /* kecil */
    line-height: 1.2;
    opacity: .8;
    margin-top: .25rem;
    color:#fff !important;
  }
  #sideDrawer .exp .exp-meta b { opacity: .95; }
/* =================== Sidenav Submenu Grid (Games) =================== */
#sideDrawer .menu-item .caret{ margin-left:auto; opacity:.85; transition:transform .2s ease }
#sideDrawer .menu-item.open .caret{ transform:rotate(180deg) }

/* Kontainer submenu grid */
#sideDrawer .submenu-grid{
  padding:10px 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to right,#1d2227,#111418);
}
#sideDrawer .submenu-grid[hidden]{ display:none !important; }

/* Grid */
#sideDrawer .submenu-grid-wrap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

/* Tile */
#sideDrawer .submenu-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:#e9ecef; user-select:none;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 8px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  transition:transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#sideDrawer .submenu-tile:hover{ transform:translateY(-1px); background:rgba(255,255,255,.06) }
#sideDrawer .submenu-tile:active{ transform:translateY(0) }

/* Gambar */
#sideDrawer .submenu-tile .img-wrap{
  width:48px; height:48px;
  border-radius:10px; overflow:hidden; display:grid; place-items:center;
  background:#0f1318; border:1px solid rgba(255,255,255,.08);
}
#sideDrawer .submenu-tile img{
  width:100%; height:100%; object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}

/* Teks */
#sideDrawer .submenu-tile .title{
  font-size:11px; font-weight:800; letter-spacing:.2px;
  text-align:center; line-height:1.1;
}

/* Responsif kecil: rapatkan grid jika perlu */
@media (max-width:360px){
  #sideDrawer .submenu-grid{ padding:8px 10px 12px }
  #sideDrawer .submenu-grid-wrap{ gap:8px }
  #sideDrawer .submenu-tile .img-wrap{ width:44px; height:44px }
  #sideDrawer .submenu-tile .title{ font-size:10.5px }
}
/* === Perbaikan alignment menu utama di sidenav (bukan center) === */
#sideDrawer .menu-item { 
  justify-content: flex-start !important;   /* pastikan tidak center */
  text-align: left !important;
}

/* ikon kiri tetap, beri jarak kecil ke label */
#sideDrawer .menu-item > i {
  margin-right: 6px;
}

/* label tepat di sebelah ikon, tidak dipaksa memenuhi lebar baris */
#sideDrawer .menu-item > span {
  flex: 0 1 auto !important;
  text-align: left !important;
}

/* caret (panah) khusus "Games" tetap di kanan */
#sideDrawer .menu-item .caret {
  margin-left: auto;
}
#sideDrawer .submenu-tile .img-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* (opsional) kalau ikon jadi terasa terlalu kecil, sesuaikan ukurannya */
#sideDrawer .submenu-tile .img-wrap{
  width: 48px; height: 48px;          /* samakan dengan sebelumnya */
}
#sideDrawer .submenu-tile img{
  width: 100%; height: 100%; object-fit: contain;
}

/* ====== Scroll Menu Horizontal Mobile ====== */
.menu-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 0.5rem 0;
  cursor: grab;
  white-space: nowrap;
}

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

.menu-scroll-wrapper.dragging {
  cursor: grabbing;
  user-select: none;
}

.menu-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0 1rem;
}

.menu-item {
  flex: 0 0 auto;
  width: 80px;
  text-align: center;
}
.carousel-inner img {
  object-fit: cover;
  max-height: 400px;
}

@media (max-width: 768px) {
  .carousel-inner img {
    max-height: 200px;
  }
}
.announcement-bar {
  background-color: #1d232b; /* latar belakang luar */
  padding: 8px;
}

.announcement-container {
  background: linear-gradient(to right, #2c343f, #1f272f);
  border-radius: 8px;
  color: #ffffff;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 12px; /* Tambahkan jarak ke bawah */
}

.announcement-container i {
  color: #fff;
}
/* === Mobile Bottom Nav === */
.mobile-bottom-nav{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to right,#1d2227,#111418);
  display: flex; justify-content: space-around; align-items: flex-end;
  z-index: 9999;
  padding-bottom: 5px;
  border-top: 1px solid rgba(255,255,255,.05);

  /* ... punyamu yang lain tetap ... */
  box-shadow: 0 -1px 6px rgba(0,0,0,.22); /* lebih tipis */
}

.mobile-bottom-nav::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-8px;          /* sebelumnya -14px */
  height:8px;        /* sebelumnya 14px */
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.22),  /* turunkan opasitas (lebih ringan) */
    rgba(0,0,0,0)
  );
}



.mobile-bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.mobile-bottom-nav .nav-item i {
  font-size: 18px;
  margin-bottom: 6px;
  color: #ffc107;
  display: block;
}

.mobile-bottom-nav .nav-item span {
  display: block;
}

/* === Center Floating Icon === */
.mobile-bottom-nav .center-icon {
  position: relative;
  margin-top: -30px;
  text-align: center;
}

.mobile-bottom-nav .center-icon .circle-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom, #2a2f35, #111418);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.mobile-bottom-nav .center-icon .circle-icon i {
  font-size: 24px;
  color: #ffc107;
  margin: 0;
}

.mobile-bottom-nav .center-icon .center-label {
  margin-top: 6px;
  font-size: 12px;
  color: #fff;
  display: block;
}

/* === Responsive Menu Icon (Mobile) === */
@media (max-width: 576px) {
  .menu-scroll-row {
    gap: 6px;
    padding: 0 0.5rem;
  }

  .menu-item {
    width: 58px;
  }

  .menu-icon-svg {
    width: 38px;
    height: auto;
    margin-bottom: 2px;
  }

  .menu-item div {
    font-size: 11px;
    font-weight: 600; /* ✔ Tebalkan font */
    letter-spacing: 0.3px; /* ✔ Tambahkan jarak antar huruf */
    line-height: 1.2; /* ✔ Supaya tidak terlalu rapat vertikal */
  }
}


@media (max-width: 576px) {
  .announcement-bar {
    padding: 4px;
    margin-bottom: 10px;
  }

  .announcement-bar .d-flex {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .announcement-bar .fa-volume-up {
    font-size: 14px !important;
    margin-right: 6px !important;
  }

  .announcement-bar marquee {
    font-size: 12px !important;
  }
}

@font-face {
  font-family: 'AdvancedDotDigital';
  src: url('/assets/fonts/advanced_dot_digital-7-webfont.woff2') format('woff2'),
       url('/assets/fonts/advanced_dot_digital-7-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.jackpot-section {
  background: none !important;
  padding: 10px;
  border-radius: 10px;
}

.jackpot-wrapper {
  position: relative;
  display: inline-block;
}

.jackpot-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.jackpot-amount {
  position: absolute;
  top: 63%; /* sedikit lebih ke bawah */
  left: 50%;
  transform: translate(-50%, -50%);
}

#jackpotValue {
  font-family: 'AdvancedDotDigital', monospace !important;
  font-size: 2.6rem !important;
  color: #ffd700;
  text-shadow: 2px 2px 4px #000;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  #jackpotValue {
    font-size: 3.0vw !important; /* responsif fleksibel */
  }

  .jackpot-amount {
    top: 60%; /* sesuaikan tengah vertikal */
  }
}

@media (max-width: 480px) {
  #jackpotValue {
    font-size: 3.0vw !important;
  }

  .jackpot-amount {
    top: 68%;
  }
}
.w-45 {
  width: 45%;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === ANIMASI SLIDE UP === */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}
.table-fade-row {
  animation: slideUpFade 0.5s ease;
}

/* === TABEL MODERN === */
.table-modern {
  background-color: #2d323c !important;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* HEADER TABEL */
.table-modern thead {
  background-color: #1d232b !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: 1px solid #2d323c;
}

/* ISI TABEL */
.table-modern tbody tr {
  background-color: #2d323c !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-modern td {
  background-color: #2d323c !important;
}

.table-modern td,
.table-modern th {
  padding: 10px 12px;
  vertical-align: middle;
  border: none !important;
}

/* === BADGE STATUS === */
.table-modern .badge {
  padding: 5px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
  font-weight: bold; /* Diubah dari 500 ke bold */
}

/* === CARD WRAPPER === */
.modern-card {
  background-color: #1d232b !important;
  border: 3px solid #1d232b !important;
  border-radius: 10px !important;
  overflow: hidden;
}

/* HEADER CARD */
.modern-card .card-header {
  background-color: #1d232b !important;
  border-bottom: 1px solid #2d323c !important;
  color: #ffffff;
  padding: 10px 15px;
  font-weight: bold;
}

/* BODY CARD */
.modern-card .card-body {
  padding: 0 !important;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 767.98px) {
  .table-modern td,
  .table-modern th {
    padding: 8px 10px;
  }
}
.togel-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.result-box {
  background-color: #2d333c;
  border: 2px solid #1d232b;
  border-radius: 15px;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.15);
}

.result-box .region {
  font-size: 13px;
  margin-bottom: 5px;
}

.result-box .number {
  background-color: #f5a623;
  color: white;
  font-size: 24px;
  border-radius: 10px;
  padding: 6px 12px;
}
.togel-date {
  font-size: 13px;
  color: #ccc;
  margin-top:7px;
}
/* CARD FORM REGISTER DARK MODE */
.form-register-card {
  background-color: #2d323c !important;
  color: #fff;
  border-radius: 10px;
  border: 5px solid #1d232b;
  padding: 20px;
}

.form-register-card .card-header {
  background-color: #2d323c !important;
  border-bottom: 1px solid #1d232b;
  color: #ffc107;
  font-weight: bold;
  font-size: 18px;
}

.form-register-card label {
  color: #fff;
}

.form-register-card .form-control,
.form-register-card .form-select {
  background-color: #1d232b;
  color: #fff;
  border: 1px solid #444;
}

.form-register-card .form-control::placeholder {
  color: #aaa;
}

.form-register-card .input-group-text {
  background-color: #1d232b;
  color: #ffc107;
  border: 1px solid #444;
}

.form-register-card .form-control:focus,
.form-register-card .form-select:focus {
  background-color: #1d232b;
  color: #fff;
  border-color: #ffc107;
  box-shadow: none;
}

.form-register-card .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
  font-weight: bold;
}

.form-register-card .btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.form-register-card .btn-outline-warning:hover {
  background-color: #ffc107;
  color: #000;
}
.footer-wrapper {
  margin-top: 40px;
}

/* Bagian atas */
.footer-top {
  background-color: #2d323c;
}


/* Bagian copyright */
.footer-bottom {
  background-color: var(--color-dark);
  font-size: 0.875rem;
}

/* Link footer */
.footer-link {
  color: #ccc;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

.footer-link:hover {
  color: #ffc107;
  text-decoration: underline;
}
/* Tambahan khusus mobile agar footer tidak tertutup bottom nav */
@media (max-width: 768px) {
  .footer-wrapper {
    padding-bottom: 60px; /* Sesuaikan dengan tinggi bottom nav kamu */
  }
}
@media (max-width: 768px) {
  .footer-bottom .copyright-text {
    display: flex;
    justify-content: flex-start;
    padding-left: 15px;
  }
}

/* =========================================================
   Provider Card — ANDROID LOOK (rapi 3 kolom di iPhone)
   + Shimmer untuk .provider-name
   ========================================================= */

/* iOS suka auto-zoom/resize text, matikan */
html { -webkit-text-size-adjust: 100%; }

/* --- Grid helper: kolom equal-height & full-width (fix iOS flex bug) --- */
.provider-grid > [class*="col-"],
.row.g-4.justify-content-center > [class*="col-"]{
  display:flex;
  min-width:0;               /* cegah kolom melar di iOS */
}

/* Gutter */
.row.g-4{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1.25rem;
}
@media (max-width:576px){
  .row.g-4{
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .9rem;
  }
}

/* ===== Kartu Provider ===== */
.provider-card{
  background:#1e232b;
  border-radius:16px;
  overflow:hidden;           /* kunci tinggi seragam */
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .3s ease, box-shadow .3s ease;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  box-sizing:border-box;
}
.provider-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}

/* ===== Gambar kotak penuh ===== */
.provider-image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  flex:1 0 auto;             /* ambil ruang di atas judul */
  background:#0f1318;
}
.provider-logo{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s ease;
}
.provider-card:hover .provider-logo{ transform:scale(1.05); }

/* Fallback Safari lama (tanpa aspect-ratio) */
@supports not (aspect-ratio:1/1){
  .provider-image-wrapper{ position:relative; padding-top:100%; }
  .provider-image-wrapper .provider-logo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
}

/* ===== Nama provider (ANDROID LOOK) ===== */
.provider-name{
  position:relative;         /* penting utk shimmer */
  background:#ffc107;
  color:#1a1a1a;
  font-weight:700;
  font-size:clamp(.78rem, 2vw, .9rem);
  letter-spacing:.3px;

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

  padding:10px 10px;
  margin:0; width:100%;
  border-radius:0 0 16px 16px;
  line-height:1.15;

  /* desktop: boleh 2 baris */
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ✨ Shimmer kembali */
.provider-name::before{
  content:"";
  position:absolute; top:0; left:-75%;
  width:55%; height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg);
  pointer-events:none;
  animation:providerShimmer 2.2s ease-in-out infinite;
  will-change:left;
}
@keyframes providerShimmer{
  0%   { left:-75%; }
  100% { left:125%; }
}

/* Mobile iPhone: 1 baris + tinggi seragam (Android-look) */
@media (max-width:576px){
  .provider-card{ border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.35); }

  .provider-name{
    border-radius:0 0 12px 12px;
    font-size:clamp(.65rem, 2.5vw, .7rem);
    padding:8px 6px;

    /* 1 baris + ellipsis */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    /* tinggi seragam (Android look) */
    height:30px;            /* sesuaikan kalau perlu 34–40px */
    min-height:30px;
    max-height:30px;
  }
}

/* ===== Overlay Maintenance ===== */
.maintenance-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  color:#fff; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  z-index:5; border-radius:16px;
}
@media (max-width:576px){
  .maintenance-overlay{ border-radius:12px; }
}

/* Aksesibilitas */
@media (prefers-reduced-motion:reduce){
  .provider-card, .provider-logo{ transition:none !important; }
  .provider-name::before{ animation:none !important; }
}

/* Rendering */
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}



/* =========================================================
   GAMELIST — Android look, 3 grid di iPhone (375–480px),
   jarak padat, RTP panjang, Title gold + shimmer
   ========================================================= */

/* iOS text scaling fix */
html{ -webkit-text-size-adjust:100%; }

/* ===============================
   lce-paymethod — header & stats (COMPACT)
   =============================== */
.lce-paymethod-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}

/* Heading — pakai elemen ikon, bukan ::before */
.lce-paymethod-title{
  display:flex; align-items:center; gap:8px;
  position:relative;
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:#f5a623;
  letter-spacing:.2px;
  line-height:1.2;
  padding-bottom:6px;                 /* ruang underline */
}
.lce-paymethod-title-ico{
  width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#f5a623;                      /* dipakai oleh SVG (currentColor) */
  background:linear-gradient(180deg, rgba(245,166,35,.18) 0%, rgba(245,166,35,.06) 100%);
  border:1px solid rgba(245,166,35,.35);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
}
.lce-paymethod-title-ico svg{ width:14px; height:14px; display:block; }

/* underline aksen */
.lce-paymethod-title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:3px; border-radius:999px;
  background:linear-gradient(90deg, rgba(245,166,35,.0) 0%, #f5a623 28%, rgba(245,166,35,.0) 100%);
  opacity:.85;
}

/* stats wrapper (kanan) */
.lce-paymethod-stats{
  display:flex; gap:8px; align-items:stretch; flex-wrap:wrap;
}

/* kartu kecil status */
.lce-paystatus{
  min-width:160px; max-width:180px;
  background:linear-gradient(180deg,#181c23 0%, #11151b 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:8px 10px;
  color:#dfe4ea;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.22);
}
.lce-paystatus.is-withdraw{ background:linear-gradient(180deg,#181c23 0%, #11151b 100%); }

/* baris atas kartu */
.lce-paystatus-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.lce-paystatus-left{ display:flex; align-items:center; gap:6px; }

/* ikon kartu */
.lce-paystatus-ico{
  width:24px; height:24px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(245,166,35,.18);
  color:#ffe08a;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.35);
}
.lce-paystatus-ico svg{
  width:13px; height:13px; display:block;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.65));
}

.lce-paystatus-title{
  font-size:.66rem; font-weight:800; color:#ffd37a; letter-spacing:.3px;
}
.lce-paystatus-val{
  font-size:1.08rem; line-height:1; font-weight:800; color:#f7fafc;
}
.lce-paystatus-val small{
  font-size:.60rem; font-weight:700; color:#cbd1d8; margin-left:2px;
}

/* progress bar (dengan shimmer) */
.lce-payprogress{
  position:relative;
  height:6px; margin-top:6px; border-radius:9999px;
  background:rgba(255,255,255,.10); overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.35);
}
.lce-payprogress-bar{
  position:relative;
  display:block; height:100%;
  background:#f5a623;
  border-radius:9999px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.2);
  transition:width .3s ease;
}
.lce-payprogress-bar::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  animation:lce-payprogress-shimmer 1.6s linear infinite;
  mix-blend-mode:screen; opacity:.6; pointer-events:none;
}

/* subteks */
.lce-paystatus-sub{
  margin-top:4px; font-size:.65rem; color:#bcc3cb;
}

/* Responsif / Mobile rapi */
@media (max-width: 991.98px){
  .lce-paymethod-stats{ width:100%; justify-content:flex-start; }
}

/* ===== MOBILE: heading pindah ke bawah stats + center + underline pendek ===== */
@media (max-width: 575.98px){
  .lce-paymethod-head{
    flex-direction:column; align-items:center; gap:10px;
  }
  /* urutan: stats dulu (1), baru heading (2) */
  .lce-paymethod-stats{
    order:1; display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;
  }
  .lce-paystatus{ min-width:0; max-width:none; width:100%; }

  .lce-paymethod-title{
    order:2; font-size:1rem; padding-bottom:5px; margin-top:4px;
    text-align:center; justify-content:center;
  }
  .lce-paymethod-title-ico{ width:24px; height:24px; border-radius:6px; }
  .lce-paymethod-title-ico svg{ width:13px; height:13px; }

  /* underline dipendekkan & dipusatkan */
  .lce-paymethod-title::after{
    left:50%; right:auto; transform:translateX(-50%);
    width:260px; height:2px; bottom:-5px;
  }
}
@media (max-width: 360px){
  .lce-paymethod-stats{ grid-template-columns:1fr; }
}

/* shimmer keyframes utk progress bar */
@keyframes lce-payprogress-shimmer{
  0%   { background-position: -120% 0; }
  100% { background-position:  120% 0; }
}





/* ===============================
   lce-paymethod — slider (tanpa shimmer, tetap)
   =============================== */

/* ruang ekstra agar efek hover tidak terpotong */
.lce-paymethod-viewport{
  overflow:hidden;
  position:relative;
  padding:10px 0;
}
/* pause marquee saat hover area (opsional) */
.lce-paymethod-viewport:hover .lce-paymethod-track{
  animation-play-state: paused;
}

/* track (marquee) */
.lce-paymethod-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
  animation:lce-paymethod-scroll 28s linear infinite;
  transform:translate3d(0,0,0);
}

/* kartu logo */
.footer-wrapper .lce-paymethod-item{
  position:relative;
  flex:0 0 auto;
  width:150px; height:68px;
  padding:14px;
  border-radius:14px;
  background:#2e353e;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),
             0 4px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  overflow:hidden;
  isolation:isolate;
}

/* hover: ring kuning, tanpa transform biar tak kepotong */
.footer-wrapper .lce-paymethod-item:hover{
  background:#39414b;
  border-color:rgba(255,255,255,.10);
  outline:2px solid #f5a623;
  outline-offset:0;
}

/* LOGO default: TINT #f5a623 (anti bocor) */
.footer-wrapper .lce-paymethod-item .lce-paymethod-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  -webkit-filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  transition:opacity .18s ease !important;
  opacity:1;
  pointer-events:none;
}

/* Hover: warna asli logo (instan) */
.footer-wrapper .lce-paymethod-item:hover .lce-paymethod-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1;
}

/* pastikan tak ada shimmer tersisa di kartu */
.footer-wrapper .lce-paymethod-item::before,
.footer-wrapper .lce-paymethod-item::after{
  content:none !important;
}

/* responsif kecil slider */
@media (max-width:575.98px){
  .footer-wrapper .lce-paymethod-item{
    width:132px; height:60px; padding:12px; border-radius:12px;
  }
}

/* keyframes marquee */
@keyframes lce-paymethod-scroll{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); } /* track digandakan via JS */
}


/* ===============================
   lce-paymethod — slider (tanpa shimmer, tetap)
   =============================== */

/* ruang ekstra agar efek hover tidak terpotong */
.lce-paymethod-viewport{
  overflow:hidden;
  position:relative;
  padding:10px 0;
}
/* pause marquee saat hover area (opsional) */
.lce-paymethod-viewport:hover .lce-paymethod-track{
  animation-play-state: paused;
}

/* track (marquee) */
.lce-paymethod-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
  animation:lce-paymethod-scroll 28s linear infinite;
  transform:translate3d(0,0,0);
}

/* kartu logo */
.footer-wrapper .lce-paymethod-item{
  position:relative;
  flex:0 0 auto;
  width:150px; height:68px;
  padding:14px;
  border-radius:14px;
  background:#2e353e;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),
             0 4px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  overflow:hidden;
  isolation:isolate;
}

/* hover: ring kuning, tanpa transform biar tak kepotong */
.footer-wrapper .lce-paymethod-item:hover{
  background:#39414b;
  border-color:rgba(255,255,255,.10);
  outline:2px solid #f5a623;
  outline-offset:0;
}

/* LOGO default: TINT #f5a623 (anti bocor) */
.footer-wrapper .lce-paymethod-item .lce-paymethod-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  -webkit-filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  transition:opacity .18s ease !important;
  opacity:1;
  pointer-events:none;
}

/* Hover: warna asli logo (instan) */
.footer-wrapper .lce-paymethod-item:hover .lce-paymethod-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1;
}

/* pastikan tak ada shimmer tersisa */
.footer-wrapper .lce-paymethod-item::before,
.footer-wrapper .lce-paymethod-item::after{
  content:none !important;
}

/* responsif kecil slider */
@media (max-width:575.98px){
  .footer-wrapper .lce-paymethod-item{
    width:132px; height:60px; padding:12px; border-radius:12px;
  }
}

/* keyframes marquee */
@keyframes lce-paymethod-scroll{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); } /* track digandakan via JS */
}


/* ===============================
   lce-paymethod — slider (tanpa shimmer)
   =============================== */

/* ruang ekstra agar efek hover tidak terpotong */
.lce-paymethod-viewport{
  overflow:hidden;
  position:relative;
  padding:10px 0;
}
/* pause marquee saat hover area (opsional) */
.lce-paymethod-viewport:hover .lce-paymethod-track{
  animation-play-state: paused;
}

/* track (marquee) */
.lce-paymethod-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
  animation:lce-paymethod-scroll 28s linear infinite;
  transform:translate3d(0,0,0);
}

/* kartu logo */
.footer-wrapper .lce-paymethod-item{
  position:relative;
  flex:0 0 auto;
  width:150px; height:68px;
  padding:14px;
  border-radius:14px;
  background:#2e353e;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),
             0 4px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  overflow:hidden;
  isolation:isolate;
}

/* hover: ring kuning, tanpa transform biar tak kepotong */
.footer-wrapper .lce-paymethod-item:hover{
  background:#39414b;
  border-color:rgba(255,255,255,.10);
  outline:2px solid #f5a623;
  outline-offset:0;
}

/* ======= LOGO default: TINT #f5a623 (anti bocor) ======= */
.footer-wrapper .lce-paymethod-item .lce-paymethod-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  -webkit-filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;

  /* JANGAN transisikan filter agar tidak muncul ungu/pink */
  transition:opacity .18s ease !important;
  opacity:1;
  pointer-events:none;
}

/* Hover: tampilkan warna asli logo (instan) */
.footer-wrapper .lce-paymethod-item:hover .lce-paymethod-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1;
}

/* pastikan tak ada shimmer tersisa */
.footer-wrapper .lce-paymethod-item::before,
.footer-wrapper .lce-paymethod-item::after{
  content:none !important;
}

/* responsif kecil slider */
@media (max-width:575.98px){
  .footer-wrapper .lce-paymethod-item{
    width:132px; height:60px; padding:12px; border-radius:12px;
  }
}

/* keyframes marquee */
@keyframes lce-paymethod-scroll{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); } /* track digandakan via JS */
}


/* ===============================
   lce-paymethod — tanpa shimmer, tint #f5a623
   =============================== */

/* ruang ekstra agar efek hover tidak terpotong */
.lce-paymethod-viewport{
  overflow:hidden;
  position:relative;
  padding:10px 0;
}
/* pause marquee saat hover area (opsional) */
.lce-paymethod-viewport:hover .lce-paymethod-track{
  animation-play-state: paused;
}

/* track (marquee) */
.lce-paymethod-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
  animation:lce-paymethod-scroll 28s linear infinite;
  transform:translate3d(0,0,0);
}

/* kartu logo */
.footer-wrapper .lce-paymethod-item{
  position:relative;
  flex:0 0 auto;
  width:150px; height:68px;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#181c23 0%, #11151b 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),
             0 4px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  overflow:hidden;     /* rapi di tepi kartu */
  isolation:isolate;
}

/* hover: ring kuning, tanpa transform biar tak kepotong */
.footer-wrapper .lce-paymethod-item:hover{
  background:#dfe6e9;
  border-color:rgba(255,255,255,.10);
  outline:2px solid #f5a623;
  outline-offset:0;
}

/* ======= LOGO default: TINT #f5a623 (anti bocor) ======= */
.footer-wrapper .lce-paymethod-item .lce-paymethod-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* tint ke #f5a623 */
  filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;
  -webkit-filter:
    brightness(0) saturate(100%)
    invert(73%) sepia(63%) saturate(1342%)
    hue-rotate(356deg) brightness(98%) contrast(96%) !important;

  /* JANGAN transisikan filter agar tidak muncul ungu/pink */
  transition:opacity .18s ease !important;
  opacity:1;
  pointer-events:none;
}

/* Hover: tampilkan warna asli logo (instan) */
.footer-wrapper .lce-paymethod-item:hover .lce-paymethod-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1;
}

/* matikan semua shimmer/pseudo elemen */
.footer-wrapper .lce-paymethod-item::before,
.footer-wrapper .lce-paymethod-item::after{
  content:none !important;
}

/* responsif kecil */
@media (max-width:575.98px){
  .footer-wrapper .lce-paymethod-item{
    width:132px; height:60px; padding:12px; border-radius:12px;
  }
}

/* animasi keyframes jika belum ada */
@keyframes lce-paymethod-scroll{
  0%   { transform:translate3d(0,0,0); }
  100% { transform:translate3d(-50%,0,0); } /* track digandakan via JS */
}



/* -------- Header & Filter -------- */
.gamelist-page .page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2b3038;border:1px solid #3a404b;border-radius:14px;
  padding:12px 16px;margin:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.gamelist-page .page-h1{margin:0;font-size:1.15rem;color:#f8fafc;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gamelist-page .page-meta .count{color:#e6eaef;font-weight:400}

.gamelist-page .filter-bar{position:static;padding:6px 0}
.gamelist-page .filter-card{background:#262c33;border:1px solid #3a404b;border-radius:12px;padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.gamelist-page .sort-tabs{display:inline-flex;gap:8px;flex-wrap:wrap}
.gamelist-page .sort-tab{display:inline-block;padding:6px 10px;border:1px solid #4a5160;border-radius:999px;background:#323844;color:#dfe5ee;text-decoration:none;font-size:.82rem}
.gamelist-page .sort-tab.active{background:linear-gradient(180deg,#ffd773,#f6c343);border-color:#f6c343;color:#1f2328}

.gamelist-page #searchBox.form-control{
  background:#1f242b !important;color:#e9eef6 !important;border:1px solid #444b57 !important;border-radius:10px !important;box-shadow:none !important;
}
.gamelist-page #searchBox.form-control::placeholder{color:#9aa3af !important}
.gamelist-page #searchBox.form-control:focus{border-color:#f6c343 !important;box-shadow:0 0 0 2px rgba(246,195,67,.35) !important;outline:0 !important}

/* =========================================================
   GRID — rapi & padat
   ========================================================= */
.gamelist-page #grid.grid-6-3{
  display:grid !important;
  grid-auto-flow:row dense;
  align-items:start;
  gap:12px 10px; /* row | col */
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:991.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; }
}
/* Paksa iPhone (375–480px) tetap 3 kolom */
@media (max-width:479.98px) and (min-width:360px){
  .gamelist-page #grid.grid-6-3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 8px !important;
  }
}
/* 2 kolom hanya layar sangat kecil */
@media (max-width:359.98px){
  .gamelist-page #grid.grid-6-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px 6px !important; }
}

/* reset anak grid */
.gamelist-page #grid.grid-6-3 > *{
  box-sizing:border-box;width:100% !important;max-width:none !important;min-width:0 !important;margin:0 !important;flex:0 0 auto !important;
}

/* =========================================================
   TILE — parent meng-clip agar lebar RTP/Title = lebar gambar
   ========================================================= */
.gamelist-page .card-game{
  background:#14181e;border:0;border-radius:14px !important;
  overflow:hidden !important;              /* anak ikut lebar & radius */
  padding-bottom:10px !important;          /* ruang badge, tetap padat */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s ease;container-type:inline-size;
}
.gamelist-page .card-game:hover{ transform:translateY(-3px); }

.gamelist-page .thumb{width:100%;aspect-ratio:1/1;border-radius:0 !important;overflow:hidden;background:#101419}
.gamelist-page .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gamelist-page .card-game:hover .thumb img{ transform:scale(1.06) }

/* Fallback Safari lama */
@supports not (aspect-ratio:1/1){
  .gamelist-page .thumb{ position:relative; padding-top:100%; }
  .gamelist-page .thumb img{ position:absolute; inset:0; }
}

/* =========================================================
   META (RTP + TITLE + TAG)
   ========================================================= */
.gamelist-page .meta{
  padding:0 !important;min-width:0;display:grid;row-gap:0;
  grid-template-rows:auto auto 22px; /* RTP | TITLE | TAG */
  justify-items:start;
}

/* ----- RTP panjang — teks di luar ring ----- */
.gamelist-page .rtp-row{
  position:relative !important;display:block !important;margin:0 !important;padding:6px 10px !important;height:26px !important;
  background:rgba(0,0,0,.55) !important;border-left-width:0 !important;border-right-width:0 !important;border-bottom:none !important;border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.35) !important;justify-self:stretch;
}
.gamelist-page .rtp-pill{
  position:absolute !important;top:50% !important;transform:translateY(-50%) !important;left:30px !important;right:30px !important;height:11px !important;
  border:2px solid rgba(255,255,255,.9) !important;background:rgba(255,255,255,.10) !important;border-radius:999px !important;overflow:hidden !important;z-index:1;
}
.gamelist-page .rtp-fill{height:100% !important;border-radius:999px !important;box-shadow:inset 0 1px 1px rgba(255,255,255,.25) !important}
.gamelist-page .rtp-red    .rtp-fill{background:linear-gradient(180deg,#ff6b6b,#c93f3f) !important}
.gamelist-page .rtp-yellow .rtp-fill{background:linear-gradient(180deg,#ffe280,#f0c03a) !important}
.gamelist-page .rtp-green  .rtp-fill{background:linear-gradient(180deg,#7fe691,#2ecc71) !important}

.gamelist-page .rtp-label,.gamelist-page .rtp-val{
  position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:2;color:#fff !important;
  font-weight:800 !important;font-size:8.5px !important;line-height:1;letter-spacing:.2px;-webkit-text-stroke:.25px rgba(0,0,0,.7);text-shadow:0 1px 1px rgba(0,0,0,.7);
}
.gamelist-page .rtp-label{left:5px !important}
.gamelist-page .rtp-val{right:5px !important;min-width:3.1ch !important;text-align:right !important;font-variant-numeric:tabular-nums}

/* ----- TITLE: match .provider-name (warna & shimmer) ----- */
.gamelist-page .title{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0 !important;padding:7px 8px;line-height:1.16;overflow:hidden;
  background-color:#ffc107 !important;color:#1a1a1a !important;
  font-weight:700 !important;text-shadow:none !important;
  white-space:normal;word-break:break-word;hyphens:auto;
  font-size:clamp(.72rem,3cqi,.88rem);   /* lebih kecil (mobile-friendly) */
  height:calc(2 * 1.16em + 14px);        /* dua baris, padat */
  border:1px solid #ffc107 !important;border-left-width:0 !important;border-right-width:0 !important;border-top:none !important;
  border-radius:0 0 14px 14px !important;justify-self:stretch;
}
/* shimmer */
.gamelist-page .title::before{
  content:'';position:absolute;inset:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 100%);
  animation:shimmer 2s infinite;pointer-events:none;
}
@keyframes shimmer{0%{left:-75%}100%{left:125%}}

/* ----- Badge ‘slot’ rapi ----- */
.gamelist-page .tag{
  display:inline-flex !important;align-items:center;justify-content:center;place-self:start;
  width:auto !important;max-width:100% !important;white-space:nowrap;
  height:20px;padding:0 8px;margin:8px 0 0 10px !important;
  color:#f6c343;background:rgba(246,195,67,.12);border:1px solid rgba(246,195,67,.38);border-radius:12px;font-size:.66rem;letter-spacing:.2px;
}
.gamelist-page .tag.w-100,.gamelist-page .tag.d-block{width:auto !important;display:inline-flex !important;}

/* =========================================================
   Reduce motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .gamelist-page .card-game,.gamelist-page .thumb img,.gamelist-page .title{ animation:none !important; transition:none !important; }
}

/* Render font halus */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* =========================================================
   GAMELIST — NON-RTP (Android look) | scope: .gamelist-nortp
   3 grid di iPhone (375–480px), jarak padat, title gold + shimmer
   ========================================================= */

/* iOS text scaling fix */
html{ -webkit-text-size-adjust:100%; }

/* -------- Header & Filter -------- */
.gamelist-nortp .page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2b3038;border:1px solid #3a404b;border-radius:14px;
  padding:12px 16px;margin:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.gamelist-nortp .page-h1{
  margin:0;font-size:1.15rem;color:#f8fafc;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gamelist-nortp .page-meta .count{color:#e6eaef;font-weight:400}

.gamelist-nortp .filter-bar{position:static;padding:6px 0}
.gamelist-nortp .filter-card{
  background:#262c33;border:1px solid #3a404b;border-radius:12px;
  padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.25)
}
.gamelist-nortp .sort-tabs{display:inline-flex;gap:8px;flex-wrap:wrap}
.gamelist-nortp .sort-tab{
  display:inline-block;padding:6px 10px;border:1px solid #4a5160;border-radius:999px;
  background:#323844;color:#dfe5ee;text-decoration:none;font-size:.82rem
}
.gamelist-nortp .sort-tab.active{
  background:linear-gradient(180deg,#ffd773,#f6c343);
  border-color:#f6c343;color:#1f2328
}

.gamelist-nortp #searchBox.form-control{
  background:#1f242b !important;color:#e9eef6 !important;
  border:1px solid #444b57 !important;border-radius:10px !important;box-shadow:none !important;
}
.gamelist-nortp #searchBox.form-control::placeholder{color:#9aa3af !important}
.gamelist-nortp #searchBox.form-control:focus{
  border-color:#f6c343 !important;box-shadow:0 0 0 2px rgba(246,195,67,.35) !important;outline:0 !important
}

/* =========================================================
   GRID — rapi & padat (match snippetmu)
   ========================================================= */
.gamelist-nortp #grid.grid-6-3{
  display:grid !important;
  grid-auto-flow:row dense;
  align-items:start;
  gap:12px 10px; /* row | col */
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:991.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; }
}
/* Paksa iPhone (375–480px) tetap 3 kolom */
@media (max-width:479.98px) and (min-width:360px){
  .gamelist-nortp #grid.grid-6-3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 8px !important;
  }
}
/* 2 kolom hanya layar sangat kecil */
@media (max-width:359.98px){
  .gamelist-nortp #grid.grid-6-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px 6px !important; }
}

/* reset anak grid */
.gamelist-nortp #grid.grid-6-3 > *{
  box-sizing:border-box;width:100% !important;max-width:none !important;min-width:0 !important;
  margin:0 !important;flex:0 0 auto !important;
}

/* =========================================================
   TILE — parent meng-clip agar lebar Title = lebar gambar
   ========================================================= */
.gamelist-nortp .card-game{
  background:#14181e;border:0;border-radius:14px !important;
  overflow:hidden !important;              /* anak ikut lebar & radius */
  padding-bottom:10px !important;          /* ruang badge, tetap padat */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s ease;container-type:inline-size;
}
.gamelist-nortp .card-game:hover{ transform:translateY(-3px); }

.gamelist-nortp .thumb{
  width:100%;aspect-ratio:1/1;border-radius:0 !important;overflow:hidden;background:#101419
}
.gamelist-nortp .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease
}
.gamelist-nortp .card-game:hover .thumb img{ transform:scale(1.06) }

/* Fallback Safari lama */
@supports not (aspect-ratio:1/1){
  .gamelist-nortp .thumb{ position:relative; padding-top:100%; }
  .gamelist-nortp .thumb img{ position:absolute; inset:0; }
}

/* =========================================================
   TITLE — match provider-name (warna & shimmer), 2 baris center
   ========================================================= */
.gamelist-nortp .title{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0 !important;padding:7px 8px;line-height:1.16;overflow:hidden;
  background-color:#ffc107 !important;color:#1a1a1a !important;
  font-weight:700 !important;text-shadow:none !important;
  white-space:normal;word-break:break-word;hyphens:auto;

  /* ukuran font & tinggi persis seperti snippet */
  font-size:clamp(.72rem,3cqi,.88rem);
  height:calc(2 * 1.16em + 14px);

  border:1px solid #ffc107 !important;border-left-width:0 !important;border-right-width:0 !important;border-top:none !important;
  border-radius:0 0 14px 14px !important;justify-self:stretch;
}
/* shimmer */
.gamelist-nortp .title::before{
  content:'';position:absolute;inset:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 100%);
  animation:shimmer 2s infinite;pointer-events:none;
}
@keyframes shimmer{0%{left:-75%}100%{left:125%}}

/* =========================================================
   Badge — rapi, tidak melebar, padat
   ========================================================= */
.gamelist-nortp .tag{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;max-width:100% !important;white-space:nowrap;
  height:20px;padding:0 8px;margin:8px 0 0 10px !important;
  color:#f6c343;background:rgba(246,195,67,.12);
  border:1px solid rgba(246,195,67,.38);border-radius:12px;
  font-size:.66rem;letter-spacing:.2px;
}
.gamelist-nortp .tag.w-100,.gamelist-nortp .tag.d-block{width:auto !important;display:inline-flex !important;}

/* =========================================================
   Reduce motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .gamelist-nortp .card-game,.gamelist-nortp .thumb img,.gamelist-nortp .title{
    animation:none !important; transition:none !important;
  }
}

/* Render font halus */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ===========================
   lcengine: Desktop Login Toast
   =========================== */
.lcengine-toast {
  position: fixed;
  right: 16px;
  top: 84px;
  z-index: 1085;
  min-width: 240px;
  max-width: 320px;
}

.lcengine-toast .card {
  background: #1f2329;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lcengine-toast .leftbar {
  width: 56px;
  background: #2b333d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.lcengine-toast .progressbar {
  height: 4px;
  background: #a06a2b;
  width: 0;
  animation: lcengineToast 4s linear forwards;
}

/* Progress animation */
@keyframes lcengineToast {
  from { width: 0; }
  to   { width: 100%; }
}

/* Sembunyikan toast di mobile */
@media (max-width: 767.98px) {
  .lcengine-toast { display: none; }
}
/* ============================
   Register (Scoped) — .lcreg
   ============================ */
.lcreg {
  --lcreg-green: #22c55e;
  --lcreg-muted: #94a3b8;
  --lcreg-border: rgba(148, 163, 184, .35);
}

/* Icon box kecil di ujung input (status username) */
.lcreg .lcreg-iconbox {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-left: 0;
}

/* Badge status kecil (tersedia/tidak/teks bantuan) */
.lcreg .lcreg-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
}
.lcreg .lcreg-badge--ok {
  color: var(--lcreg-green);
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
}
.lcreg .lcreg-badge--bad {
  color: #ef4444;
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
}
.lcreg .lcreg-badge--muted {
  color: var(--lcreg-muted);
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .35);
}

/* Captcha: rapi & stabil di semua ukuran */
.lcreg .lcreg-captcha {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap; /* biar rapi di mobile */
}
.lcreg .lcreg-captcha-img {
  height: 40px;
  border-radius: .5rem;
  border: 1px solid var(--lcreg-border);
}
.lcreg .lcreg-captcha-refresh {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcreg .lcreg-captcha-input {
  max-width: 240px;
}

/* Submit: full di mobile, center & max-width di desktop */
.lcreg .lcreg-submit-wrap .btn {
  display: block;
  width: 100% !important;
}

@media (min-width: 768px) {
  .lcreg .lcreg-submit-wrap {
    display: flex;
    justify-content: center;
  }
  .lcreg .lcreg-submit-wrap .btn {
    max-width: 460px;
  }
}

/* Mobile: input captcha melebar rapi */
@media (max-width: 767.98px) {
  .lcreg .lcreg-captcha-input {
    max-width: none;
    flex: 1;
    min-width: 0;
  }
}

/* ===========================================================
   lc: WELCOME NEO MODAL (tema gelap + accent)
   =========================================================== */
.lc-neo-modal .modal-dialog{
  max-width:640px;
  width:auto;
  margin: .75rem auto;
}
.lc-neo-modal .modal-content{
  position:relative; overflow:hidden;
  background:#0e1217; color:#e9ecef;
  border-radius:16px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  margin-left:10px;
  margin-right:10px;
}
.lc-neo-modal .modal-content::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:16px;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(255,193,7,.85), rgba(13,110,253,.7), rgba(25,135,84,.65), rgba(255,193,7,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.25;
}

/* Header & footer */
.lc-neo-modal .modal-header,
.lc-neo-modal .modal-footer{border-color:rgba(255,255,255,.1)!important}
.lc-neo-modal .modal-header{gap:.6rem}
.lc-neo-modal .lc-title{
  display:flex; align-items:center; gap:.6rem; font-weight:800;
}
.lc-neo-modal .lc-bullet{
  width:24px; height:24px; border-radius:999px;
  background: radial-gradient( circle at 30% 30%, #ffd24d, #ffb703 60%, #926100 );
  box-shadow:0 0 0 3px rgba(255,193,7,.15), 0 0 24px rgba(255,193,7,.25);
}

/* Body */
.lc-neo-modal .lc-emoji{font-size:1.35rem}
.lc-neo-modal .lc-sub{opacity:.78}

/* Ikon sukses (SVG) + animasi garis */
.lc-neo-modal .lc-check{
  width:56px; height:56px; flex:0 0 56px;
  filter: drop-shadow(0 6px 16px rgba(255,193,7,.18));
}
.lc-neo-modal .lc-check circle{
  stroke:#ffd24d; stroke-width:8; fill:none; stroke-linecap:round;
  stroke-dasharray:180; stroke-dashoffset:180; animation:lc-draw 1s ease forwards .05s;
}
.lc-neo-modal .lc-check path{
  stroke:#ffd24d; stroke-width:8; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:lc-draw .8s cubic-bezier(.2,.9,.2,1) forwards .25s;
}
@keyframes lc-draw{to{stroke-dashoffset:0}}

/* -----------------------------------------------------------
   CTA AREA — dua tombol seragam ukuran
   - Desktop/tablet: sejajar & sama lebar
   - ≤421px: menumpuk, full-width
   ----------------------------------------------------------- */
.lc-neo-modal .lc-neo-cta{
  display:flex;
  gap:12px;
  margin-top:.25rem;
}

/* samakan perilaku kedua tombol */
.lc-neo-modal .lc-neo-cta .btn{
  display:flex;                   /* jangan inline-block */
  align-items:center;
  justify-content:center;
  flex:1 1 0;                     /* bagi rata lebar */
  min-width:0;                    /* cegah overflow */
  padding:.70rem 1rem;            /* tinggi konsisten */
  line-height:1.2;
  border-radius:.6rem;
  font-weight:700;
  white-space:nowrap;
}
.lc-neo-modal .lc-neo-cta .btn i{ margin-right:.5rem }

/* Primary & Ghost styles */
.lc-neo-modal .lc-btn-primary{
  color:#1b1e22;
  background:linear-gradient(90deg,#ffe082,#ffc107);
  border:0;
  font-weight: 700;
  box-shadow:0 8px 22px rgba(255,193,7,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.lc-neo-modal .lc-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(255,193,7,.32);
  filter:saturate(1.08);
}
.lc-neo-modal .lc-btn-ghost{
  color:#e9ecef;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.18);
}

/* Stack & full-width di layar sempit */
@media (max-width:421px){
  .lc-neo-modal .lc-neo-cta{ flex-direction:column; }
  .lc-neo-modal .lc-neo-cta .btn{
    width:100%;
    flex:0 0 auto;               /* jangan dibagi rata saat ditumpuk */
  }
}

/* Slide-up masuk modal */
.lc-neo-modal.lc-animate .modal-dialog{
  animation:lc-slide-up .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lc-slide-up{
  from{ transform:translate3d(0,18px,0); opacity:.0 }
  to  { transform:none; opacity:1 }
}

/* Mini confetti (emoji) */
.lc-neo-modal .lc-confetti{
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.lc-neo-modal .lc-confetti span{
  position:absolute; top:20px; left:50%;
  font-size:30px; opacity:0; transform:translateX(-50%) translateY(0);
  animation:lc-burst .9s ease-out forwards;
}
.lc-neo-modal .lc-confetti span:nth-child(2){ left:38%; animation-delay:.05s }
.lc-neo-modal .lc-confetti span:nth-child(3){ left:62%; animation-delay:.1s }
@keyframes lc-burst{
  0%{opacity:0; transform:translateX(-50%) translateY(0) scale(.8)}
  40%{opacity:1}
  100%{opacity:0; transform:translateX(var(--x, -120%)) translateY(-28px) rotate(12deg) scale(1)}
}

/* ===== LC User Panel (desktop) ===== */
.lcup .lcup-card{
  display:flex; align-items:center; gap:16px;
  padding:8px 12px;
  background: linear-gradient(180deg,#1b1f24 0%, #222832 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.lcup-avatar{
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#2a3340; color:#fff; font-size:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.lcup-name{
  color:#eaeef4; font-weight:700; line-height:1.1;
  display:flex; align-items:center; gap:6px;
}
.lcup-dot{
  width:8px; height:8px; border-radius:50%;
  background: #22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.lcup-balance{
  margin-top:2px;
  font-size:.9rem; color:#bfe8c8;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.28);
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
}
.lcup-refresh{
  border:0; outline:0; background:transparent; color:#bfe8c8; line-height:0;
  padding:0; cursor:pointer; opacity:.9; transition:opacity .2s ease;
}
.lcup-refresh:hover{ opacity:1; }
.lcup-refresh.is-spinning i{ animation: lcup-spin .8s linear infinite; }
@keyframes lcup-spin{ to{ transform: rotate(360deg);} }

.lcup-actions .btn{
  --lcup-h:32px;
  height:var(--lcup-h); line-height:var(--lcup-h);
  padding:.25rem .7rem; border-radius:10px; font-weight:700;
}
.lcup-actions .btn + .btn, .lcup-actions .btn + form{ margin-left:.35rem; }
.lcup-actions form .btn{ height:var(--lcup-h); line-height:var(--lcup-h); }

/* Hover halus */
.lcup-actions .btn-warning:hover{ filter: brightness(1.05); }
.lcup-actions .btn-primary:hover{ filter: brightness(1.05); }
.lcup-actions .btn-outline-light:hover{ background:#fff; color:#111; }
.lcup-actions .btn-outline-danger:hover{ background:#dc3545; color:#fff; }


/* ===========================================================
   LC User Toolbar v2 
   =========================================================== */

.lcupx-toolbar-wrapper{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  max-width:100%;
  padding-right:8px;           
  overflow:hidden;
  box-sizing:border-box;
}

/* Batang toolbar */
.lcupx-toolbar{
  display:inline-flex;
  align-items:center;
  gap:8px;                     
  height:30px;
  padding:4px 6px;
  background:linear-gradient(180deg,#1e232a 0%, #171a1f 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  white-space:nowrap;
  flex-wrap:nowrap;
  box-sizing:border-box;

  /* muat isi, tapi jangan lebih lebar dari parent */
  width:max-content;
  max-width:min(600px, calc(100% - 12px)); 
  overflow:hidden;
}

/* ===== KIRI: avatar + nama + saldo ===== */
.lcupx-left{
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto;               
  min-width:0;                 
}

.lcupx-avatar{
  position:relative; width:24px; height:24px; border-radius:999px;
  background:linear-gradient(180deg,#2b333c,#1b2128);
  display:grid; place-items:center; color:#a6b0bf; font-size:11px;
  border:1px solid rgba(255,255,255,.06);
}
.lcupx-online-dot{
  position:absolute; right:-1px; top:-1px; width:9px; height:9px; border-radius:999px;
  background:#22c55e; box-shadow:0 0 0 2px #171a1f;
}

.lcupx-ident{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden }
.lcupx-username{
  color:#e7ebf0; font-size:12px; font-weight:600;
  max-width:120px; overflow:hidden; text-overflow:ellipsis;
}

.lcupx-balance{
  height:22px; display:inline-flex; align-items:center; gap:6px;
  padding:0 8px; border-radius:999px; line-height:1;
  background:linear-gradient(180deg,#12161c,#0c0f13);
  border:1px solid rgba(255,255,255,.08); color:#e7ebf0; font-size:12px;
  flex:0 0 auto;               
}
.lcupx-balance-refresh{
  display:inline-flex; margin-left:4px; width:16px; height:16px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(255,255,255,.06);
  color:#a6b0bf; font-size:10px;
}
#lcupxBalanceBtn:hover .lcupx-balance-refresh{
  animation:lcupx-spin .8s linear infinite; color:#e7ebf0; background:rgba(255,255,255,.12);
}
@keyframes lcupx-spin{ to{ transform:rotate(360deg) } }

/* ===== KANAN: tombol (tidak boleh hilang) ===== */
.lcupx-actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;              
  margin-left:6px;
}
.lcupx-btn{
  height:26px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:10px; font-weight:700; font-size:13px; line-height:1;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.lcupx-btn i{ font-size:13px }

/* warna tombol */
.lcupx-btn--gold   { color:#0d0b00; background:linear-gradient(180deg,#f6c003 0%,#cc8f00 100%); border-color:#b98100 }
.lcupx-btn--gold:hover{ filter:brightness(1.06) }
.lcupx-btn--blue   { color:#fff; background:linear-gradient(180deg,#2f6df6 0%,#1f58d9 100%); border-color:#1e4dc0 }
.lcupx-btn--blue:hover{ filter:brightness(1.06) }
.lcupx-btn--ghost  { color:#e7ebf0; background:#2a2f36; border-color:#3a4049 }
.lcupx-btn--ghost:hover{ background:#333942 }
.lcupx-btn--danger { color:#fff; background:linear-gradient(180deg,#e94545 0%,#c72f2f 100%); border-color:#b72a2a }
.lcupx-btn--danger:hover{ filter:brightness(1.05) }

/* ===== Mode ringkas otomatis saat ruang ketat ===== */
@media (max-width:1320px){
  .lcupx-toolbar{ max-width:min(560px, calc(100% - 12px)); gap:6px }
  .lcupx-username{ max-width:90px }
  .lcupx-btn{ padding:0 10px; font-size:12px }
}
@media (max-width:1200px){
  .lcupx-toolbar{ max-width:min(520px, calc(100% - 12px)) }
  .lcupx-actions{ gap:6px }
  .lcupx-actions .lcupx-btn span{ display:none }  
  .lcupx-btn{ padding:0 10px }
}
@media (max-width:1100px){
  .lcupx-toolbar{ max-width:min(480px, calc(100% - 12px)) }
  .lcupx-username{ display:none }                  
}
/* --- FIX: jangan kepotong di kanan --- */
.lcupx-toolbar-wrapper{
  overflow: visible;        
  padding-right: 8px;
}

.lcupx-toolbar{
  width: max-content;       
  max-width: none;          
  overflow: visible;        
}

/* jaga-jaga kalau parent punya overflow:hidden */
.navbar-login,
.navbar-login .container{
  overflow: visible !important;
}

/* tombol tetap satu baris, tidak dibungkus */
.lcupx-actions{ flex-wrap: nowrap; }


/* =========================
   LC Engine — Cashier & Transactions
   ========================= */

/* Card wrapper (ikut lebar .container) */
.lc-card{
  background:linear-gradient(180deg,#181c23 0%, #11151b 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin:18px auto;
  width:100%;
}
.lc-card__header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;
}
.lc-title-trx{font-weight:800;color:#fff;font-size:32px;line-height:1.15;margin-bottom:2px}
.lc-sub{color:#9aa4af}

/* Panel (isi dalam card) */
.lc-panel{
  background:#10141a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.lc-panel + .lc-panel{margin-top:14px}

/* Stats */
.lc-stat__label{color:#c8d1dc;font-size:.95rem}
.lc-stat__value{font-size:1.8rem;font-weight:900;letter-spacing:.2px}

/* Tabs */
.lc-tabs{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background:#222a33;
}
.lc-tab{
  padding:10px 16px;
  color:#c9d3df;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
}
.lc-tab:hover{filter:brightness(1.05)}
.lc-tab.active{background:#1b2128;color:#fff}

/* Form: input/textarea */
.lc-form .form-label{color:#cbd5e1;font-weight:700}
.lc-input{
  background:#0f1217;
  color:#e6edf5;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.55rem .8rem;
  box-shadow:none;
}
.lc-input:focus{
  outline:0;
  border-color:#ffd34d;
  box-shadow:0 0 0 3px rgba(255,211,77,.2);
}
.lc-input::placeholder{color:#9aa4af}
.lc-file{
  background:#1f262e;color:#e6edf5;border:1px dashed rgba(255,255,255,.25);border-radius:12px;
}
.lc-note{color:#91a5be;font-size:.85rem}

/* Deposit methods (radio pills) — hanya 2 opsi */
.lc-methods{display:flex;gap:8px;flex-wrap:wrap}
.lc-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:#0f1419;border:1px solid rgba(255,255,255,.14);color:#ced6e0;font-weight:700}
.lc-pill input{appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid #ffd34d;box-shadow:inset 0 0 0 3px #0f1419}
.lc-pill input:checked{background:#ffd34d}
.lc-pill:hover{filter:brightness(1.07)}

/* Select (dropdown) */
.lc-select{
  background:#1f262e;color:#e6edf5;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:.55rem 2.2rem .55rem .8rem;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffd34d'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:18px 18px
}
.lc-select:focus{outline:0;border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.25)}

/* Tabel transaksi */
.lc-table th{color:#cbd5e1;font-weight:800;border-color:rgba(255,255,255,.12)!important}
.lc-table td{border-color:rgba(255,255,255,.06)!important}

/* Alerts */
.lc-alert{border-radius:12px;padding:.75rem 1rem;font-weight:600;margin:.5rem 0}
.lc-alert--success{background:rgba(59,179,99,.15);border:1px solid rgba(59,179,99,.35);color:#9de0b9}
.lc-alert--danger{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}

/* Gold Buttons (gradient + shimmer) */
.btn-gold{
  background-image:linear-gradient(180deg,#ffe08a,#ffbe2e);
  border:1px solid #e7b32b;
  color:#1a1f26;
  font-weight:900;letter-spacing:.2px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 18px rgba(255,190,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold::after{
  content:"";position:absolute;top:-120%;left:-60%;width:60%;height:300%;transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation:btnShine 2.6s ease-in-out infinite;
}
@keyframes btnShine{0%{left:-60%}100%{left:140%}}
.btn-gold:hover{filter:brightness(1.02);transform:translateY(-1px)}
.btn-gold:active{transform:translateY(0)}
.btn-gold:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,211,77,.35),0 8px 18px rgba(255,190,46,.28)}
.btn-gold-outline{
  background:transparent;color:#ffd34d;border:1px solid #ffd34d;font-weight:800;border-radius:999px
}
.btn-gold-outline:hover{background:rgba(255,211,77,.08);color:#ffe18a;border-color:#ffe18a}
.btn-pill{border-radius:999px}
.btn-icon i{margin-right:.45rem}

/* Badges lembut */
.badge.bg-secondary-subtle{background:rgba(255,255,255,.12);color:#d1dae4}
.badge.bg-info-subtle{background:rgba(70,161,255,.18);color:#a8d2ff}

/* Mobile */
@media (max-width:576px){
  .lc-title-trx{font-size:26px}
  .lc-card{padding:14px}
  .lc-panel{padding:14px}
  .lc-tab{flex:1 1 50%;text-align:center}
  .lc-card__header{flex-direction:column;align-items:flex-start;gap:10px}
}



/* ===============================
   lce-nologin (desktop prompt)
   =============================== */

/* Kartu modal */
.lce-nologin .lce-nl-card{
  background:#0e1217;                 /* background gelap */
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.50);
}

/* Header: gradient KUNING + animasi flow */
.lce-nologin .lce-nl-header{
  padding:1.25rem;
  background:linear-gradient(90deg,#ffe27a 0%,#ffc107 35%,#ffb300 70%,#ffe27a 100%);
  background-size:220% 100%;
  animation:lce-nl-goldFlow 6s linear infinite;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
@keyframes lce-nl-goldFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}
/* Warna teks header tidak putih */
.lce-nologin .lce-nl-header .lce-nl-title,
.lce-nologin .lce-nl-header .lce-nl-subtitle{ color:#333; }

/* Icon bubble */
.lce-nologin .lce-nl-iconbox{
  width:44px;height:44px;border-radius:12px;
  background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}

/* Body list */
.lce-nologin .modal-body{ color:#fff; }
.lce-nologin .lce-nl-list{
  margin:0 0 1rem 0;
  padding-left:1.25rem;
  line-height:1.6;
}
.lce-nologin .lce-nl-list li{ margin:.25rem 0; }

/* Tombol OK: gradient KUNING + shimmer */
.lce-nologin .lce-nl-btn{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#ffe27a 0%,#ffc107 40%,#ffb300 70%,#ffe27a 100%);
  background-size:220% 100%;
  color:#1a1a1a; border:0; border-radius:.6rem;
  padding:.7rem 1.1rem; font-weight:800;
  box-shadow:0 10px 18px rgba(255,193,7,.25), inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  animation:lce-nl-goldFlow 3s linear infinite;      /* flow halus */
}
.lce-nologin .lce-nl-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(255,193,7,.32), inset 0 -2px 0 rgba(0,0,0,.22);
  filter:brightness(1.03);
}
.lce-nologin .lce-nl-btn:active{ transform:translateY(0); }

/* Shimmer kilau berjalan */
.lce-nologin .lce-nl-btn::after{
  content:""; position:absolute; top:0; left:-160%;
  width:55%; height:100%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 45%,
    rgba(255,255,255,0) 70%);
  transform:skewX(-18deg);
  animation:lce-nl-shimmer 2.2s infinite;
}
@keyframes lce-nl-shimmer{
  0%{ left:-160%; } 100%{ left:200%; }
}

/* Responsif kecil: rapikan padding */
@media (max-width:575.98px){
  .lce-nologin .lce-nl-header{ padding:1rem; }
  .lce-nologin .lce-nl-btn{ width:100%; }
}

/* =========================
   LCE Referral — match Wallet/Transactions
   (prefix: lce-referral-*)
   ========================= */

/* Card wrapper (ikut .container) */
.lce-referral-card{
  background:#1d232b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin:18px auto;
  width:100%;
}
.lce-referral-card__header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;
}
.lce-referral-title{font-weight:800;color:#fff;font-size:32px;line-height:1.15;margin:0 0 2px}
.lce-referral-sub{color:#9aa4af;margin:0}

/* Panel isi di dalam card */
.lce-referral-panel{
  background:#2b333d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.lce-referral-panel + .lce-referral-panel{margin-top:14px}

/* Grid kolom */
.lce-referral-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:768px){.lce-referral-grid2{grid-template-columns:1fr}}

/* Tabs (ikuti lc-tabs) */
.lce-referral-tabs{
  display:inline-flex;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;overflow:hidden;background:#222a33;margin-top:16px
}
.lce-referral-tab{
  padding:10px 16px;color:#c9d3df;text-decoration:none;font-weight:700;letter-spacing:.2px;
  background:transparent;border:0;cursor:pointer
}
.lce-referral-tab:hover{filter:brightness(1.05)}
.lce-referral-tab.active{background:#1b2128;color:#fff}

/* Form */
.lce-referral-form .form-label{color:#cbd5e1;font-weight:700;margin-bottom:6px;display:block}
.lce-referral-input{
  background:#1f262e;color:#e6edf5;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.55rem .8rem;box-shadow:none;width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.lce-referral-input:focus{
  outline:0;border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.2);
}
.lce-referral-input::placeholder{color:#9aa4af}
.lce-referral-input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(85%) opacity(.85)}
.lce-referral-file{background:#1f262e;color:#e6edf5;border:1px dashed rgba(255,255,255,.25);border-radius:12px}

/* Notes & alerts */
.lce-referral-note{color:#91a5be;font-size:.85rem;margin-top:8px}
.lce-referral-alert{border-radius:12px;padding:.75rem 1rem;font-weight:600;margin:.5rem 0}
.lce-referral-alert.success{background:rgba(59,179,99,.15);border:1px solid rgba(59,179,99,.35);color:#9de0b9}
.lce-referral-alert.error{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}

/* Share pills (ikut lc-pill) */
.lce-referral-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.lce-referral-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:#0f1419;border:1px solid rgba(255,255,255,.14);color:#ced6e0;font-weight:700;text-decoration:none}
.lce-referral-pill:hover{filter:brightness(1.07)}

/* Tabel-like list */
.lce-referral-list{margin:0;padding:0;list-style:none}
.lce-referral-list li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lce-referral-muted{color:#9aa4af}

/* Badges status */
.lce-referral-status{border-radius:999px;padding:.4rem .8rem;font-weight:800}
.lce-referral-status--subtle{background:rgba(255,255,255,.12);color:#d1dae4}
.lce-referral-status--danger{background:rgba(220,53,69,.12);border:1px solid rgba(220,53,69,.35);color:#ffb0b8}
.lce-referral-status--info{background:rgba(70,161,255,.18);color:#a8d2ff}

/* Buttons – GOLD (persis wallet) */
.lce-referral-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid transparent;padding:.6rem 1rem;font-weight:900;letter-spacing:.2px;position:relative;overflow:hidden;text-decoration:none;cursor:pointer}
.lce-referral-btn--gold{
  background-image:linear-gradient(180deg,#ffe08a,#ffbe2e);
  border:1px solid #e7b32b;color:#1a1f26;
  box-shadow:0 8px 18px rgba(255,190,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.lce-referral-btn--gold::after{
  content:"";position:absolute;top:-120%;left:-60%;width:60%;height:300%;transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation:lceRefBtnShine 2.6s ease-in-out infinite;
}
@keyframes lceRefBtnShine{0%{left:-60%}100%{left:140%}}
.lce-referral-btn--gold:hover{filter:brightness(1.02);transform:translateY(-1px)}
.lce-referral-btn--gold:active{transform:translateY(0)}
.lce-referral-btn--gold:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,211,77,.35),0 8px 18px rgba(255,190,46,.28)}
.lce-referral-btn--gold-outline{
  background:transparent;color:#ffd34d;border:1px solid #ffd34d;font-weight:800;border-radius:999px
}
.lce-referral-btn--gold-outline:hover{background:rgba(255,211,77,.08);color:#ffe18a;border-color:#ffe18a}
.lce-referral-btn--pill{border-radius:999px}

/* Mobile tweak */
@media (max-width:576px){
  .lce-referral-title{font-size:26px}
  .lce-referral-card{padding:14px}
  .lce-referral-panel{padding:14px}
  .lce-referral-tab{flex:1 1 50%;text-align:center}
  .lce-referral-card__header{flex-direction:column;align-items:flex-start;gap:10px}
}


/* ====== LCE DEPOSIT MODAL (namespaced) — FULL CSS ====== */

/* Pastikan dialog selalu center di semua layar */
.lce-depo-modal .modal-dialog { margin: .5rem auto; }

/* Ukuran & batas modal */
.lce-depo-dialog{
  max-width: 380px;
  width: min(380px, calc(100vw - 24px)); /* mobile: tidak nabrak tepi */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kontainer utama */
.lce-depo-content{
  background:#16181f;
  border:1px solid #2a2d3a;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,0,.06);
  color:#e6e8ef;
  overflow:hidden;
}

/* Header */
.lce-depo-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #222633;
  background:linear-gradient(180deg,#1a1d27 0%, #171a22 100%);
}
.lce-depo-title{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;}
.lce-depo-dot{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffd54d,#f6b729 60%,#8b6b12 100%);
  box-shadow:0 0 0 3px rgba(246,183,41,.15),0 0 12px rgba(246,183,41,.35);
}
.lce-depo-close{filter:invert(1) opacity(.7); cursor:pointer;}
.lce-depo-close:hover{opacity:1;}

/* Body */
.lce-depo-body{padding:14px;}

/* Status bar (dengan varian) */
.lce-depo-status{
  background:#0f1117;border:1px solid #272b3a;color:#d6d9e4;
  font-size:.92rem;line-height:1.4;padding:10px 12px;border-radius:10px;margin-bottom:12px;
}
.lce-depo-status.is-pending{ border-color:#2e374b; }
.lce-depo-status.is-success{
  color:#dff6e2; background:rgba(76,175,80,.08); border-color:#3c8b3f;
}
.lce-depo-status.is-rejected{
  color:#ffd6d6; background:rgba(220,38,38,.08); border-color:#7a2b2b;
}
.lce-depo-status.is-expired{
  color:#fca5a5; background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.35);
}

/* ===== Info Row (Total Bayar & Ref) ===== */
.lce-depo-inforow{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;margin:8px 0;border:1px solid #272b3a;border-radius:10px;
  background:#0f1117;
}
.lce-depo-info-label{color:#cfd3e2;font-weight:600; font-size:.7rem;}
.lce-depo-info-value{
  display:flex;align-items:center;gap:8px;
  background:#1e222e;border:1px solid #2b3446;border-radius:8px;
  padding:4px 8px;color:#f1f3f8;font-weight:700;
}
.lce-depo-info-value > span{
  color:#f7d569; letter-spacing:.2px;
  font-weight:600; font-size:.7rem;
}

/* Tombol copy kecil (untuk nominal & ref) */
.lce-depo-copybtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;
  background:#1c2030;border:1px solid #32364a;color:#f7d569;
}
.lce-depo-copybtn:hover{background:#23283b;color:#ffe083;}
.lce-depo-copybtn.is-copied{color:#22c55e;border-color:#265f3b;background:#0b1410;}

/* QRIS */
.lce-depo-qris{text-align:center;}
.lce-depo-qrbox{
  display:inline-flex;align-items:center;justify-content:center;
  width:270px;height:270px;background:#fff;border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  margin:6px auto 10px;padding:10px;
}
.lce-depo-qrbox canvas,.lce-depo-qrbox img{width:100%!important;height:100%!important;}

/* Timer */
.lce-depo-timer{
  font-size:.9rem;color:#f7d569;background:rgba(246,183,41,.12);
  border:1px dashed rgba(246,183,41,.35);
  padding:6px 10px;border-radius:8px;display:inline-block;
}
/* Countdown jadi merah saat expired (JS memberi class .expired di parent) */
.expired .lce-depo-timer{
  color:#fca5a5;
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
}

/* Manual (bank/e-wallet) */
.lce-depo-manual{text-align:left;}
.lce-depo-dest{
  background:#0f1117;border:1px solid #272b3a;border-radius:10px;
  padding:10px 12px;font-weight:600;color:#f1f3f8;margin-bottom:6px;word-break:break-word;
}
.lce-depo-help{font-size:.86rem;color:#a9afc6;}

/* Footer & tombol */
.lce-depo-footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;padding:10px 14px;border-top:1px solid #222633;
}
.lce-depo-btn{
  border-radius:10px;font-weight:700;font-size:.9rem;padding:8px 12px;
  transition:transform .05s ease, box-shadow .2s ease;
}
.lce-depo-btn:hover{transform:translateY(-1px);}
.lce-depo-btn.primary{
  color:#111;background:linear-gradient(180deg,#f7d569 0%, #f0b82a 100%);
  border:1px solid #cc9a1f;box-shadow:0 6px 14px rgba(246,183,41,.25);
}
.lce-depo-btn.primary:active{transform:translateY(0);}
.lce-depo-btn.ghost{color:#e6e8ef;background:#1c2030;border:1px solid #32364a;}
.lce-depo-btn.ghost:hover{background:#212536;}

/* Trigger (kalau dipakai di tempat lain) */
.lce-depo-trigger{
  background:#1c2030;color:#f7d569;border:1px solid #2f354a;border-radius:999px;
  padding:6px 12px;font-weight:700;
}
.lce-depo-trigger:hover{background:#23283b;color:#ffe083;}

/* Mobile tweaks */
@media (max-width: 420px){
  .lce-depo-dialog{
    width: min(380px, 92vw);
  }
  .lce-depo-body{padding:12px;}

  /* QR responsif */
  .lce-depo-qrbox{
    width: clamp(200px, calc(100vw - 110px), 270px);
    height: clamp(200px, calc(100vw - 110px), 270px);
    padding:8px;
  }

  /* Footer tombol full width */
  .lce-depo-footer{flex-direction:column;align-items:stretch;gap:8px;}
  .lce-depo-btn{width:100%;}
}

/* Beberapa theme Bootstrap mengubah transform dialog; matikan agar center */
.lce-depo-modal.show .modal-dialog{ transform: none; }

/* --- Sembunyikan section non-aktif agar tidak “kedip” saat load --- */
.lce-depo-qris, .lce-depo-manual{ display:none; }

/* === SUCCESS STATE (QR → CENTANG) === */
.lce-depo-qrbox.paid{
  background:#0b1410;
  border-color:#265f3b;
  box-shadow: 0 8px 20px rgba(0,0,0,.35),
              0 0 0 2px rgba(34,197,94,.15) inset;
}
#lceDepoQrTarget .lce-qr-success{
  width:250px; height:250px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1a12;
  border:1px solid #265f3b; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.12);
}
#lceDepoQrTarget .lce-qr-success svg{ width:116px; height:116px; }
#lceDepoQrTarget .lce-qr-success svg circle{
  fill:#0b1410; stroke:#22c55e; stroke-width:2;
}
#lceDepoQrTarget .lce-qr-success svg path{
  fill:none; stroke:#22c55e; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 12px rgba(34,197,94,.35));
}

/* (opsional) panel sukses di dalam modal bila ingin dipakai */
#lceDepoSuccessPanel{
  margin:10px 0 0;
  border:1px solid #3c8b3f;
  background:rgba(76,175,80,.08);
  color:#dff6e2;
  border-radius:10px;
  padding:10px 12px;
  display:flex; align-items:flex-start; gap:10px;
}
#lceDepoSuccessPanel .ico{ width:18px;height:18px;flex:0 0 18px; color:#22c55e; }
#lceDepoSuccessPanel .msg{ font-size:.92rem; line-height:1.35; }

.lce-depo-accountbox{
  background:#14161a;border-radius:12px;padding:10px 12px;margin-bottom:10px
}
.lce-depo-provider{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px}
#lceDepoProvIcon{width:22px;height:22px;object-fit:contain;display:none}
#lceDepoAccNo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3px}
.lce-depo-inforow{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.lce-depo-info-label{opacity:.7}
.lce-depo-info-value{display:flex;align-items:center;gap:6px}


/* =========================================================
   HOT & POPULAR — HOMEPAGE CARDS (prefix: lce-hotpop-*)
   Full CSS – paste paling akhir di theme-v1.css
   ========================================================= */

/* Root */
:root{ --lce-hotpop-bg:#1f1f1f; }

/* Section */
.lce-hotpop-section{ margin-top:24px; overflow:visible !important; }

/* Header */
.lce-hotpop-header{ display:flex; align-items:center; gap:14px; margin-bottom:20px; position:relative; }

/* Title group (BIARKAN — tidak diubah) */
.lce-hotpop-titlewrap{ display:flex; align-items:center; gap:10px; position:relative; z-index:3; }
.lce-hotpop-titlewrap::before,
.lce-hotpop-titlewrap::after,
.lce-hotpop-title::before,
.lce-hotpop-title::after{ content:none !important; display:none !important; }

.lce-hotpop-title,
.lce-hotpop-title *,
.lce-hotpop-title *::before,
.lce-hotpop-title *::after{
  background:none !important; box-shadow:none !important; border:0 !important;
  filter:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  -webkit-mask:none !important; mask:none !important;
}
.lce-hotpop-title{ display:inline-flex; align-items:center; gap:10px; margin:0; font-weight:800; font-size:20px; letter-spacing:.3px; text-transform:uppercase; position:relative; z-index:1; }
.lce-hotpop-title .lce-hotpop-icon{ font-size:30px; line-height:1; }

/* Badge kecil di judul (BIARKAN — tidak diubah) */
.lce-hotpop-badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; line-height:1;
  border-radius:999px; font-weight:800; font-size:11px; position:relative; z-index:1;
  border:1px solid transparent; box-shadow:0 4px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  background-image:none;
}
.lce-hotpop-badge--hot{
  background-image:linear-gradient(90deg,#ff8a46,#ff4d4d) !important;
  color:#fff !important; border:1px solid #fff !important
}
.lce-hotpop-badge--popular{
  background-image:linear-gradient(90deg,#ffe07e,#ffbe54) !important;
  color:#3b2400 !important; border:1px solid #fff !important
}
.lce-hotpop-badge::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition:transform .5s ease;
}
.lce-hotpop-titlewrap:hover .lce-hotpop-badge::after{ transform:translateX(120%); }

/* Garis aksen kanan judul (BIARKAN — tidak diubah) */
.lce-hotpop-rule{
  flex:1 1 auto; height:3px; border-radius:2px; overflow:hidden; align-self:center; margin-left:12px;
  background:linear-gradient(90deg, var(--lce-hotpop-accent,#e74c3c) 0, rgba(255,255,255,.08) 70%);
  position:relative; z-index:1;
}
.lce-hotpop-rule::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  background-size:220px 100%; animation:lce-hotpop-sheen 3.2s linear infinite;
}
@keyframes lce-hotpop-sheen{ from{background-position:-220px 0} to{background-position:100% 0} }

/* Tema */
.lce-hotpop--hot{     --lce-hotpop-accent:#ff6a3d; }
.lce-hotpop--popular{ --lce-hotpop-accent:#f4c145; }

/* Tombol kanan (BIARKAN) */
.lce-hotpop-action .btn{ padding:6px 12px; border-radius:50px; font-weight:700; position:relative; overflow:hidden; }
.lce-hotpop-action .btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition:transform .45s ease;
}
.lce-hotpop-action .btn:hover::after{ transform:translateX(120%); }

/* ===== Grid & Card ===== */
.lce-hotpop-section #grid{ gap:18px 16px; }

/* Izinkan bubble keluar — tanpa ganggu layout lain */
.lce-hotpop-section,
.lce-hotpop-section #grid,
.lce-hotpop-section .grid-6-3,
.lce-hotpop-section .grid-6-3 > *,
.lce-hotpop-section .card-game,
.lce-hotpop-section .game-card{ overflow:visible !important; }

/* >>> FIX CARD IMAGE CLIP <<< */
.lce-hotpop-section .game-card{ position:relative !important; }
.lce-hotpop-section .game-card .thumb{
  position:relative !important;
  overflow:hidden !important;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}
.lce-hotpop-section .game-card .thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform:translateZ(0);
}

/* Hapus animasi masuk berbasis transform supaya hover bawaanmu utuh */
.lce-hotpop-grid.lce-hotpop-anim .game-card{ opacity:1; }
.lce-hotpop-grid.is-visible .game-card{ opacity:1; }

/* ===== Corner bubble (center di sudut, offside) ===== */
.lce-hotpop-bubble{
  position:absolute; top:10px; left:15px; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  pointer-events:none; z-index:5;
  background: radial-gradient(120% 120% at 30% 30%, var(--b1,#ffd36a) 0%, var(--b2,#ff8a46) 55%, var(--b3,#ff4d4d) 100%);
  border:2px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 20px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55);
}
.lce-hotpop-bubble::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--pulse, rgba(255,120,0,.55)); animation:lce-hotpop-pulse 1.8s ease-out infinite;
}
@keyframes lce-hotpop-pulse{ 0%{transform:scale(1);opacity:.6} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }
.lce-hotpop-bubble--hot{ --b1:#ffd36a; --b2:#ff8a46; --b3:#ff4d4d; --pulse:rgba(255,120,0,.55); }
.lce-hotpop-bubble--popular{ --b1:#fff1a8; --b2:#ffd76b; --b3:#ffbe54; --pulse:rgba(255,210,70,.55); }

/* Ikon di bubble (dengan fallback + glow) */
.lce-hotpop-bubble i{
  line-height:1;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.25));

  /* ===== Outline/Stroke FOCUS ICON ONLY ===== */
  --ico-stroke: rgba(0,0,0,.85);  /* default */
  --ico-w: 1.2px;                 /* tebal stroke fallback */
  text-shadow:
    0 var(--ico-w) 0 var(--ico-stroke),
    0 calc(-1*var(--ico-w)) 0 var(--ico-stroke),
    var(--ico-w) 0 0 var(--ico-stroke),
    calc(-1*var(--ico-w)) 0 0 var(--ico-stroke),
    var(--ico-w) var(--ico-w) 0 var(--ico-stroke),
    var(--ico-w) calc(-1*var(--ico-w)) 0 var(--ico-stroke),
    calc(-1*var(--ico-w)) var(--ico-w) 0 var(--ico-stroke),
    calc(-1*var(--ico-w)) calc(-1*var(--ico-w)) 0 var(--ico-stroke);
}
.lce-hotpop-bubble--hot i{ --ico-stroke: rgba(43,10,0,.9);  color:#ff7a18; animation:lce-hotpop-firebeat 1.15s ease-in-out infinite; }
.lce-hotpop-bubble--popular i{ --ico-stroke: rgba(59,36,0,.9); color:#ffcc4d; animation:lce-hotpop-starspark 1.6s ease-in-out infinite; }

/* Gunakan stroke asli jika didukung */
@supports (-webkit-text-stroke: 1px) {
  .lce-hotpop-bubble i{
    text-shadow:none;
    -webkit-text-stroke: .09em var(--ico-stroke);
    -webkit-text-fill-color: currentColor; /* isi mengikuti color/gradient */
  }
}

/* Isi gradasi ikon (tetap) */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .lce-hotpop-bubble--hot i{
    background: radial-gradient(circle at 50% 40%, #fff4cc 0,#ffd36a 40%,#ff8a46 70%,#ff4d4d 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 8px rgba(255,120,0,.6));
  }
  .lce-hotpop-bubble--popular i{
    background: linear-gradient(180deg,#fff9d6 0,#ffe680 50%,#ffc94b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 8px rgba(255,200,80,.55));
  }
}

@keyframes lce-hotpop-firebeat{ 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes lce-hotpop-starspark{ 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(12deg) scale(1.18)} }

/* ========== Footer Provider Logos ========== */
.lce-footlogo-wrap{
  /* biarkan background mengikuti template */
}

.lce-footlogo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: .5rem;
}

/* ====== Provider Tersedia – Heading style (match paymethod) ====== */
.lce-footlogo-title{
  display:flex; align-items:center; gap:8px;
  position:relative;
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:#f5a623;
  letter-spacing:.2px;
  line-height:1.2;
  padding-bottom:6px; 
  margin-bottom:25px; 
}
.lce-footlogo-title-ico{
  width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#f5a623;                      
  background:linear-gradient(180deg, rgba(245,166,35,.18) 0%, rgba(245,166,35,.06) 100%);
  border:1px solid rgba(245,166,35,.35);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
}
.lce-footlogo-title-ico svg{ width:14px; height:14px; display:block; }

/* underline aksen */
.lce-footlogo-title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:3px; border-radius:999px;
  background:linear-gradient(90deg, rgba(245,166,35,.0) 0%, #f5a623 28%, rgba(245,166,35,.0) 100%);
  opacity:.85;
}

.lce-footlogo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px 14px;
  align-items:center;
}

.lce-footlogo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:10px;
  background: rgba(255,255,255,0.02); /* sangat tipis supaya tetap menyatu */
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.lce-footlogo-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.lce-footlogo-img{
  max-height:40px;     /* tinggi seragam */
  width:auto;
  object-fit:contain;
  filter: opacity(.85);
  transition: filter .15s ease;
}

.lce-footlogo-item:hover .lce-footlogo-img{
  filter: opacity(1);
}

/* layar kecil: rapikan jarak & ukuran */
@media (max-width: 480px){
  .lce-footlogo-grid{ gap:8px 10px; grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); }
  .lce-footlogo-img{ max-height:34px; }
}


/* Ikon anim di title (BIARKAN — tidak diubah) */
.lce-hotpop-icon-fire{ color:#ff7a18; filter: drop-shadow(0 0 8px rgba(255,96,0,.45)); animation: lce-hotpop-fire 1.15s infinite ease-in-out alternate; }
@keyframes lce-hotpop-fire{ 0%{ transform:translateY(0) scale(1) rotate(0); color:#ff7a18; } 100%{ transform:translateY(-1px) scale(1.07) rotate(-2deg); color:#ffd36a; } }
.lce-hotpop-icon-star{ color:#ffe06b; filter: drop-shadow(0 0 8px rgba(255,233,150,.55)); animation:lce-hotpop-star 1.6s infinite ease-in-out; }
@keyframes lce-hotpop-star{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.12) rotate(6deg); } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .lce-hotpop-rule::after, .lce-hotpop-bubble::after,
  .lce-hotpop-bubble--hot i, .lce-hotpop-bubble--popular i,
  .lce-hotpop-icon-fire, .lce-hotpop-icon-star{ animation:none !important; transition:none !important; }
}

/* Mobile */
@media (max-width:575.98px){
  .lce-hotpop-title{ font-size:18px; }
  .lce-hotpop-action .btn{ padding:6px 10px; font-size:12px; }
}

/* ===== BESARKAN IKON BUBBLE ===== */
/* tempel paling akhir CSS */
.lce-hotpop-bubble i{
  font-size: 20px !important;  
}

/* opsional: beda ukuran per kategori */
.lce-hotpop-bubble--hot i{ font-size: 22px !important; }
.lce-hotpop-bubble--popular i{ font-size: 20px !important; }

/* kalau stroke ikut membesar, pakai em biar proporsional */
@supports (-webkit-text-stroke: 1px){
  .lce-hotpop-bubble i{ -webkit-text-stroke: .08em rgba(0,0,0,.55) !important; }
}

/* ===== TIPISKAN STROKE IKON BUBBLE ===== */
@supports (-webkit-text-stroke: 1px){
  /* default semua bubble */
  .lce-hotpop-bubble i{
    -webkit-text-stroke: .9px rgba(0,0,0,.55) !important; 
  }
  /* opsional: beda tiap kategori */
  .lce-hotpop-bubble--hot i{
    -webkit-text-stroke-width: 1px !important;   
  }
  .lce-hotpop-bubble--popular i{
    -webkit-text-stroke-width: .8px !important;  
  }
}

/* rapikan kolom footer kanan (badge) */
.footer-cert{ display:block; }
.footer-cert-img{
  height:38px;         
  width:auto;           
  max-width:100%;       
  vertical-align:middle;
  opacity:.95;
}

/* kecilkan sedikit di layar kecil */
@media (max-width: 480px){
  .footer-cert-img{ height:32px; }
}
/* hanya sentuh ASF */
.footer-cert-img--asf{
  display:block;          
  margin:10px auto 0;     
  width:250px;            
  height:auto;  
}
@media (min-width: 992px){
  .footer-cert-img--asf{
    margin-right: 50px; /* → kanan 12px, ↓ 1px (opsional) */
  }
}

@media (min-width: 768px){
  .footer-cert-img--asf{ transform: translateY(1px);}
}

/* ===== Promosi Page (lce-promopage-*) ===== */
.lce-promopage-wrap { color:#e8e8e8; }
.lce-promopage-title { font-size:28px; font-weight:800; color:#fff; letter-spacing:.3px; }
.lce-promopage-subtitle { color:#9aa3ad; font-size:14px; }

.lce-promopage-card { background:#14181f; border:1px solid #232a34; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.lce-promopage-ribbon { position:absolute; top:14px; left:-8px; background:linear-gradient(135deg,#ffc83d,#e7a400); color:#121418; font-weight:800; font-size:12px; padding:6px 14px; border-radius:0 12px 12px 0; text-transform:uppercase; letter-spacing:.5px; }
.lce-promopage-badge { position:absolute; bottom:12px; right:12px; background:#111; border:1px solid #2d3642; color:#ffc83d; font-weight:800; font-size:14px; padding:6px 10px; border-radius:10px; box-shadow: inset 0 0 0 1px rgba(255,200,61,.15); }
.lce-promopage-card-media img { width:100%; height:220px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.lce-promopage-card-body { padding:14px 16px 0 16px; }
.lce-promopage-card-title { font-size:18px; font-weight:800; color:#fff; }
.lce-promopage-card-sub { font-size:13px; color:#b9c1cb; margin-top:4px; }
.lce-promopage-card-actions { display:flex; gap:10px; align-items:center; padding:14px 16px 18px 16px; }

.lce-promopage-btn { border:none; border-radius:12px; padding:10px 16px; font-weight:800; letter-spacing:.3px; font-size:14px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; outline:none; user-select:none; }
.lce-promopage-btn:hover { transform: translateY(-1px); }
.lce-promopage-btn:active { transform: translateY(0); }
.lce-promopage-btn-primary { background:linear-gradient(180deg,#ffc83d,#dca412); color:#14181f; box-shadow:0 6px 18px rgba(255,200,61,.25); }
.lce-promopage-btn-ghost { background:transparent; color:#c4ced8; border:1px solid #2a3340; }
.lce-promopage-btn-disabled { background:#232a34; color:#8893a0; cursor:not-allowed; opacity:.8; }

/* shimmer */
.lce-promopage-shimmer { position:relative; overflow:hidden; }
.lce-promopage-shimmer::after { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.25) 45%,rgba(255,255,255,0) 60%); animation:lce-promopage-sh 2.2s ease-in-out infinite; }
@keyframes lce-promopage-sh { 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

/* progress */
.lce-promopage-progress { width:100%; height:8px; background:#1b212a; border-radius:8px; border:1px solid #2a3442; overflow:hidden; }
.lce-promopage-progress-bar { height:100%; background:linear-gradient(90deg,#10b981,#22c55e); }

/* detail */
.lce-promopage-detail-hero { background:#0f1318; border:1px solid #232a34; border-radius:16px; overflow:hidden; }
.lce-promopage-detail-hero img { width:100%; height:280px; object-fit:cover; display:block; }
.lce-promopage-detail-head { padding:12px 14px; }
.lce-promopage-detail-card { background:#14181f; border:1px solid #232a34; border-radius:16px; }
.lce-promopage-detail-body { padding:16px; }
.lce-promopage-ket { margin:0; padding-left:18px; color:#c2cbd6; }
.lce-promopage-ket li { margin:4px 0; }

/* info popup */
.lce-promopage-infomodal { background:#14181f; border:1px solid #2a3442; color:#e8e8e8; border-radius:16px; overflow:hidden; }
.lce-promopage-infomodal-header { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#0f1318; border-bottom:1px solid #2a3442; color:#ffc83d; font-weight:800; }
.lce-promopage-infomodal-banner img { width:100%; height:auto; border-radius:10px; }
.lce-promopage-infomodal-body { padding:16px; }
.lce-promopage-infomodal-text { color:#cfd7e2; margin-top:25px; }
.lce-promopage-infomodal-links { margin:10px 0 0 0; padding-left:18px; }
.lce-promopage-infomodal-links a { color:#7dd3fc; text-decoration:none; }
.lce-promopage-infomodal-links a:hover { text-decoration:underline; }
.lce-promopage-infomodal-footer { padding:12px 16px 16px; display:flex; justify-content:flex-end; }


/* =========================
   LC Engine — Kontak
   ========================= */

/* Section spacing (ikut container) */
.lce-kontak-container { padding: 12px 0 18px; }

/* === CARD WRAPPER (match .lc-card) === */
.lce-kontak-card{
  background:linear-gradient(180deg,#181c23 0%, #11151b 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin:18px auto;            /* lebar ikut .container */
  width:100%;
}
.lce-kontak-card .lce-kontak-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;          /* konsisten dg .lc-card__header spacing */
}

/* Header */
.lce-kontak-dot{
  width:10px; height:10px; border-radius:50%;
  background:#f5b301; box-shadow:0 0 0 3px rgba(245,179,1,.18); display:inline-block;
}
.lce-kontak-title{
  margin:0; font-size:18px; color:#fff; letter-spacing:.2px; font-weight:800;
}

/* Grid layout */
.lce-kontak-grid{ display:grid; gap:18px; grid-template-columns: 1.1fr .9fr; }
.lce-kontak-grid.solo{ grid-template-columns: 1fr; } /* jika kiri kosong */
@media (max-width: 920px){ .lce-kontak-grid, .lce-kontak-grid.solo { grid-template-columns:1fr; } }

.lce-kontak-left{ display:grid; gap:10px; }

/* === Tile kontak (kiri) === */
.lce-kontak-item{
  display:flex; align-items:center; gap:12px;
  background:#0f1419;                          /* tone serasi dengan tema */
  border:1px solid rgba(255,255,255,.14);
  padding:12px 14px; border-radius:12px;
  text-decoration:none; color:#e9ecf2;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
}
.lce-kontak-item:hover{
  transform:translateY(-2px);
  border-color:#ffd34d;
  box-shadow:0 10px 22px rgba(255,211,77,.18);
  filter:brightness(1.04);
}
.lce-kontak-icon svg{ width:24px; height:24px; display:block; }
.lce-kontak-facebook  .lce-kontak-icon svg{ fill:#1877f2; }
.lce-kontak-instagram .lce-kontak-icon svg{ fill:#e4405f; }
.lce-kontak-telegram  .lce-kontak-icon svg{ fill:#2aa9e0; }
.lce-kontak-whatsapp  .lce-kontak-icon svg{ fill:#25D366; }

.lce-kontak-text{ display:grid; line-height:1.12; }
.lce-kontak-name{ font-weight:800; font-size:13px; color:#fff; letter-spacing:.2px; }
.lce-kontak-handle{ opacity:.9; font-size:12px; color:#cfd3db; }

/* === Tombol Live Chat (kuning + shimmer) === */
.lce-kontak-livechat{
  margin-top:6px; display:inline-flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.2px;
  background-image:linear-gradient(180deg,#ffe08a,#ffbe2e);
  border:1px solid #e7b32b; color:#1a1f26; border-radius:12px;
  padding:12px 16px; text-decoration:none;
  box-shadow:0 8px 18px rgba(255,190,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
  position:relative; overflow:hidden; transition:transform .12s ease, filter .12s ease;
}
.lce-kontak-livechat::after{
  content:""; position:absolute; top:-120%; left:-60%; width:60%; height:300%; transform:rotate(25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation:lce-kontak-btnShine 2.6s ease-in-out infinite;
}
@keyframes lce-kontak-btnShine{ 0%{left:-60%} 100%{left:140%} }
.lce-kontak-livechat:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.lce-kontak-btn-icon{ font-size:18px; }

/* (opsional) badge placeholder */
.lce-kontak-pill{
  margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.2px;
  color:#fff; background:#7a7f8a; opacity:.9; padding:3px 8px; border-radius:999px;
}
.lce-kontak-item.is-placeholder{ pointer-events:none; opacity:.75; }
.lce-kontak-livechat.is-placeholder{ pointer-events:none; filter:grayscale(.25); }

/* === Panel kanan (match .lc-panel) === */
.lce-kontak-right{ display:flex; }
.lce-kontak-box{
  background:#10141a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  color:#cfd3db;
}
.lce-kontak-box p{ margin:0 0 8px; }
.lce-kontak-bullets{ margin:0 0 8px 18px; padding:0; }
.lce-kontak-bullets li{ margin:6px 0; }

/* === Mobile tweaks (ikuti gaya di blok mobile milikmu) === */
@media (max-width:576px){
  .lce-kontak-card{ padding:14px; border-radius:16px; }
  .lce-kontak-box{ padding:14px; }
}
/* ===========================
   Artikel
   =========================== */

/* Card wrapper */
.lce-artikel-card {
  --lce-artikel-link: #7ec8ff;
  --lce-artikel-link-hover: #a6dcff;
  --lce-artikel-border: rgba(255, 255, 255, 0.15);
  --lce-artikel-muted: rgba(255, 255, 255, 0.75);
  margin-top: 1.5rem;
  background: linear-gradient(180deg, #181c23 0%, #11151b 100%);
}

/* Header */
.lce-artikel-card .lce-artikel-header {
  text-align: center;
  padding: .75rem 1rem !important;
  border-bottom-color: var(--lce-artikel-border) !important;
  background: linear-gradient(180deg, #181c23 0%, #11151b 100%);
}
.lce-artikel-card .lce-artikel-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.125rem; /* ~h5 */
  color: #fff;
}
@media (min-width:768px){
  .lce-artikel-card .lce-artikel-title { font-size: 1.25rem; }
}

/* Body padding – pakai !important supaya menang */
.lce-artikel-card .lce-artikel-body {
  padding: 1rem 1rem 1.25rem !important;
  font-size: .975rem;
  line-height: 1.8;
}
@media (min-width:768px){
  .lce-artikel-card .lce-artikel-body { padding: 1.25rem 1.5rem 1.75rem !important; }
}
@media (min-width:992px){
  .lce-artikel-card .lce-artikel-body { padding: 1.5rem 2rem 2rem !important; }
}

/* Max-width konten biar tidak melebar penuh */
.lce-artikel-card .lce-artikel-inner {
  max-width: 110ch;   /* kenyamanan baca */
  margin: 0 auto;
}

/* Spacing elemen teks */
.lce-artikel-card .lce-artikel-body p { margin: 0 0 1rem; }
.lce-artikel-card .lce-artikel-body h2,
.lce-artikel-card .lce-artikel-body h3,
.lce-artikel-card .lce-artikel-body h4,
.lce-artikel-card .lce-artikel-body h5,
.lce-artikel-card .lce-artikel-body h6 {
  margin-top: 1.1rem;
  margin-bottom: .75rem;
  line-height: 1.3;
}

/* List */
.lce-artikel-card .lce-artikel-body ul,
.lce-artikel-card .lce-artikel-body ol {
  margin: 0 0 1rem 1.25rem;
}
.lce-artikel-card .lce-artikel-body li { margin-bottom: .35rem; }

/* Quote, hr, table */
.lce-artikel-card .lce-artikel-body blockquote {
  border-left: 3px solid var(--lce-artikel-border);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--lce-artikel-muted);
}
.lce-artikel-card .lce-artikel-body hr {
  border-color: var(--lce-artikel-border);
  opacity: .75;
}
.lce-artikel-card .lce-artikel-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.lce-artikel-card .lce-artikel-body th,
.lce-artikel-card .lce-artikel-body td {
  padding: .5rem .75rem;
  border: 1px solid var(--lce-artikel-border);
}
.lce-artikel-card .lce-artikel-body thead th { font-weight: 700; }

/* Link kontras */
.lce-artikel-card .lce-artikel-body a {
  color: var(--lce-artikel-link);
  text-decoration: none;
}
.lce-artikel-card .lce-artikel-body a:hover {
  color: var(--lce-artikel-link-hover);
  text-decoration: underline;
}

/* Hilangkan margin bawah pada elemen terakhir */
.lce-artikel-card .lce-artikel-body > *:last-child,
.lce-artikel-card .lce-artikel-inner > *:last-child { margin-bottom: 0 !important; }

/* ===========================================================
   LCE FAQ 
   =========================================================== */

/* Wrapper */
.lce-faq {
  width: 100%;
  margin: 0 auto;
  background: #1b2027;
  color: #e6ebf2;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px;
  max-width: 100%;          /* default: penuh */
}
@media (min-width: 992px) {  /* lg */
  .lce-faq { max-width: 960px; }
}
@media (min-width: 1200px) { /* xl */
  .lce-faq { max-width: 1100px; }
}
@media (min-width: 1400px) { /* xxl */
  .lce-faq { max-width: 1280px; }
}


/* Judul/Subjudul */
.lce-faq-title {
  margin: 0 0 4px 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw + 10px, 28px);
  letter-spacing: .2px;
  color: #ffcc00;
}
.lce-faq-subtitle {
  margin: 0 0 16px 0;
  text-align: center;
  color: #a6afbd;
  font-size: 15.5px;
}

/* Daftar item */
.lce-faq-list { display: grid; gap: 12px; }
@media (min-width: 992px){
  .lce-faq-list.lce-faq-cols-2 { grid-template-columns: 1fr 1fr; }
  .lce-faq-list.lce-faq-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Kartu FAQ */
.lce-faq-item {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #20252d 0%, #181c23 100%);
  overflow: clip;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1),
              border-color 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.lce-faq-item:hover {
  transform: translateY(-2px);
  border-color: #ffcc00;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

/* Shimmer border */
.lce-faq-item::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(110deg,#ffcc00 20%,#ffe680 40%,#ffcc00 60%);
  background-size: 200% 200%;              /* <— penting biar shimmer bergerak */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 220ms ease;
}
.lce-faq-item:hover::before,
.lce-faq-item.is-open::before {
  opacity: 1;
  animation: lce-faq-shimmer 2.2s linear infinite;
}
@keyframes lce-faq-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Tombol pertanyaan */
.lce-faq-question {
  width: 100%;
  background: transparent;
  color: #ffcc00;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 18px;
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 220ms ease, color 220ms ease;
}
.lce-faq-question:hover { background: rgba(255,204,0,.06); color: #ffe680; }
.lce-faq-question:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Icon + / − */
.lce-faq-question::after {
  content: '+';
  position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%);
  font-weight: 900;
  color: #ffcc00;
  transition: transform 220ms ease, color 220ms ease;
}
.lce-faq-item.is-open .lce-faq-question::after {
  content: '−';
  color: #ffe680;
  transform: translateY(-50%) rotate(180deg);
}

/* Isi jawaban */
.lce-faq-answer {
  display: none;
  padding: 0 18px 16px 18px;
  color: #e6ebf2;
  line-height: 1.65;
  font-size: 15.5px;
}
.lce-faq-answer p { margin: 10px 0 10px; }
.lce-faq-answer a { color: #7ec8ff; text-decoration: underline; }
.lce-faq-answer a:hover { color: #a6dcff; }
.lce-faq-item.is-open .lce-faq-answer {
  display: block;
  animation: lce-faq-fadein .28s ease;
}
@keyframes lce-faq-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge */
.lce-faq-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1b2027;
  background: #ffcc00;
  border-radius: 999px;
}

/* Versi compact (opsional) */
.lce-faq-compact .lce-faq-question { padding: 12px 16px; font-size: 15px; }
.lce-faq-compact .lce-faq-answer   { padding: 0 16px 14px 16px; font-size: 14.5px; }