/* ===================================================================
   VARS (gabungan)
=================================================================== */
:root{
  --neon:#39ff14;
  --neon-1:#5dff3a;     /* terang */
  --neon-2:#20cc0a;     /* tengah */
  --neon-3:#0f9a05;     /* gelap */
  --ink:#051105;        /* teks di atas neon */
  --g1:rgba(12,12,12,.96);
  --g2:rgba(5,5,5,.98);
  --carbon-1:#131313;
  --carbon-2:#0c0c0c;

  /* ukuran kartu pasaran (uniform) */
  --cardW:190px;
  --cardH:180px;
  --headH:44px;
  --subH:18px;
  --resultH:96px;
  --timerH:36px;
}

/* ===================================================================
   KEYFRAMES (satu kali saja)
=================================================================== */
@keyframes neonSpin { to { --a: 1turn; } }
@keyframes spinBorder { to { --a: 1turn; } }
@keyframes nudgeRight { 0%,100%{transform:translateX(0);opacity:.9;} 50%{transform:translateX(3px);opacity:1;} }

/* ===================================================================
   TOMBOL INJECT (layout & anti-underline) — ringkas
=================================================================== */
.btn-container{ display:flex; flex-direction:column; gap:12px; }
.btn-row{ display:flex; align-items:stretch; gap:12px; }
.btn-row.full a{ flex:1 1 auto; width:100%; }
.btn-row.half a{
  flex:1 1 0; min-width:0; width:auto !important;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.btn-row a[class^="btn-box"], .btn-row a[class*=" btn-box"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:.9rem 1.25rem; border-radius:14px;
}
#row-injected-after-member-status-panel a[class*="btn-box"]{
  text-decoration:none !important; border-bottom:0 !important;
}
@media (max-width:420px){ .btn-row.half{ flex-direction:column; } .btn-row.half a{ width:100% !important; } }

/* ===================================================================
   TOMBOL 1–6 (btn-box) — standby kalau kamu pakai varian ini
=================================================================== */
.btn-box1,.btn-box2,.btn-box3,.btn-box4,.btn-box5,.btn-box6,
.btn.btn-box1,.btn.btn-box2,.btn.btn-box3,.btn.btn-box4,.btn.btn-box5,.btn.btn-box6{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.9rem 1.25rem; border-radius:14px; border:0;
  cursor:pointer; user-select:none; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-box1 i,.btn-box2 i,.btn-box3 i,.btn-box4 i,.btn-box5 i,.btn-box6 i{ line-height:0; }
.btn-box1:focus-visible,.btn-box2:focus-visible,.btn-box3:focus-visible,.btn-box4:focus-visible,.btn-box5:focus-visible,.btn-box6:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(57,255,20,.2);
}
.btn-box1:disabled,.btn-box2:disabled,.btn-box3:disabled,.btn-box4:disabled,.btn-box5:disabled,.btn-box6:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

/* Standout (1 & 2) */
a.btn-box1, a.btn-box2, .btn.btn-box1, .btn.btn-box2{
  color:var(--ink) !important;
  background:linear-gradient(180deg,var(--neon-1) 0%,var(--neon) 28%,var(--neon-2) 68%,var(--neon-3) 100%) !important;
  box-shadow:0 14px 28px rgba(57,255,20,.28), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -10px 16px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  border:0 !important;
}
a.btn-box1:hover, a.btn-box2:hover, .btn.btn-box1:hover, .btn.btn-box2:hover{
  filter:saturate(112%) brightness(1.03); transform:translateY(-1px);
}
a.btn-box1:active, a.btn-box2:active, .btn.btn-box1:active, .btn.btn-box2:active{
  transform:translateY(1px);
  box-shadow:0 10px 20px rgba(57,255,20,.24), inset 0 4px 12px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* Unified (3–6) */
a.btn-box3, a.btn-box4, a.btn-box5, a.btn-box6,
.btn.btn-box3, .btn.btn-box4, .btn.btn-box5, .btn.btn-box6{
  color:#eaffea !important;
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--g1), var(--g2)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.12), 0 10px 22px rgba(0,0,0,.55) !important;
}
a.btn-box3:hover,a.btn-box4:hover,a.btn-box5:hover,a.btn-box6:hover,
.btn.btn-box3:hover,.btn.btn-box4:hover,.btn.btn-box5:hover,.btn.btn-box6:hover{
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.07) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(16,16,16,.98), rgba(8,8,8,1)) !important;
  border-color: rgba(57,255,20,.26) !important;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.16), 0 12px 26px rgba(0,0,0,.6) !important;
  transform:translateY(-1px);
}
@media (max-width:520px){ .btn-box1,.btn-box2,.btn-box3,.btn-box4,.btn-box5,.btn-box6{ width:100%; } }

/* ===================================================================
   TOMBOL UTAMA SITE — .btn-primary / .btn-secondary / .btn-danger
   (KUATKAN lawan Bootstrap)
=================================================================== */
/* Base ukuran & tipografi */
.btn-primary, .btn-secondary, .btn-danger{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:1rem 1.4rem; border-radius:999px !important;
  font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  border:0 !important; outline:0; user-select:none; cursor:pointer;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible{
  box-shadow:0 0 0 3px rgba(57,255,20,.20), 0 10px 22px rgba(0,0,0,.55) !important; outline:none;
}

/* PRIMARY — 3D neon */
.btn-primary{
  color:#061206 !important;
  background:linear-gradient(180deg,var(--neon-1) 0%,var(--neon) 24%,var(--neon-2) 60%,var(--neon-3) 100%) !important;
  box-shadow:0 14px 28px rgba(57,255,20,.28), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -10px 16px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.btn-primary:hover{ filter:saturate(110%) brightness(1.02); }
.btn-primary:active{
  transform:translateY(2px);
  box-shadow:0 8px 16px rgba(57,255,20,.22), inset 0 4px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* SECONDARY — glass gelap + outline neon */
.btn-secondary{
  color:#eaffea !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--carbon-1), var(--carbon-2)) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.60), inset 0 2px 0 rgba(255,255,255,.16),
             inset 0 -10px 16px rgba(0,0,0,.55), inset 0 0 0 2px rgba(57,255,20,.34),
             inset 0 0 22px rgba(57,255,20,.10) !important;
  backdrop-filter: blur(4px) saturate(115%); -webkit-backdrop-filter: blur(4px) saturate(115%);
}
.btn-secondary:hover{ filter:brightness(1.05); }
.btn-secondary:active{
  transform:translateY(2px);
  box-shadow:0 8px 18px rgba(0,0,0,.55), inset 0 6px 14px rgba(0,0,0,.55),
             inset 0 0 0 2px rgba(57,255,20,.34) !important;
}

/* DANGER — carbon + inner neon ridge */
.btn-danger{
  color:#dfffdf !important;
  background:linear-gradient(180deg,#0f0f0f,#121212 60%,#0a0a0a 100%) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.10),
             inset 0 -10px 16px rgba(0,0,0,.55), inset 0 0 0 2px rgba(57,255,20,.28),
             inset 0 0 18px rgba(57,255,20,.10) !important;
}
.btn-danger:hover{ filter:brightness(1.06); }
.btn-danger:active{
  transform:translateY(2px);
  box-shadow:0 8px 18px rgba(0,0,0,.6), inset 0 6px 14px rgba(0,0,0,.55),
             inset 0 0 0 2px rgba(57,255,20,.24) !important;
}

/* ===================================================================
   SEARCH INPUT
=================================================================== */
.form-control{
  background:#000 !important; color:#39FF88 !important;
  border:2px solid #39FF88 !important;
}
.form-control::placeholder{ color:#39FF88; }
.form-control:focus{
  background:#000 !important; color:#39FF88 !important;
  border-color:#39FF88 !important; box-shadow:0 0 5px #39FF88 !important;
}

/* ===================================================================
   GLASSMORPHISM CARD (umum) + LOGIN CARD
=================================================================== */
.glassmorphism{
  --a:0turn; position:relative; isolation:isolate;
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(20,20,20,.88), rgba(5,5,5,.92));
  backdrop-filter:blur(6px) saturate(120%); -webkit-backdrop-filter:blur(6px) saturate(120%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(57,255,20,.16) inset, 0 0 40px rgba(57,255,20,.08) inset;
  color:#e8ffe8;
}
.glassmorphism::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--a), var(--neon) 0 25%, transparent 25% 50%, var(--neon) 50% 75%, transparent 75% 100%);
  -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:.7; animation:neonSpin 6s linear infinite;
}
.glassmorphism::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  background:radial-gradient(closest-side, rgba(57,255,20,.25), transparent 70%); filter:blur(10px); z-index:-1;
}
.glassmorphism .progress,.glassmorphism .progress-bar{ border-radius:999px; }
.glassmorphism .progress{ background:rgba(255,255,255,.12) !important; }

/* LOGIN CARD */
.container .card.p-3.my-3.shadow{
  --a:0turn; position:relative; isolation:isolate; border-radius:16px !important;
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(15,15,15,.92), rgba(5,5,5,.95));
  border:1px solid rgba(255,255,255,.06); color:#e8ffe8;
  box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(57,255,20,.16) inset, 0 0 40px rgba(57,255,20,.08) inset;
  backdrop-filter:blur(6px) saturate(120%); -webkit-backdrop-filter:blur(6px) saturate(120%);
}
.container .card.p-3.my-3.shadow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--a), var(--neon) 0 25%, transparent 25% 50%, var(--neon) 50% 75%, transparent 75% 100%);
  -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:.75; animation:neonSpin 6s linear infinite;
}
.container .card.p-3.my-3.shadow::after{
  content:""; position:absolute; inset:-10px; border-radius:inherit;
  background:radial-gradient(closest-side, rgba(57,255,20,.25), transparent 70%); filter:blur(12px); z-index:-1;
}
.container .card .text-center.mb-5{ color:#ccffd1; letter-spacing:.5px; text-shadow:0 2px 12px rgba(57,255,20,.25); }
.container .card .form-label{ color:#b8ffbf; font-weight:600; }
.container .card .form-control{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#eaffea; border-radius:10px; padding:.65rem .9rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.container .card .form-control::placeholder{ color:#a0b5a0; }
.container .card .form-control:focus{
  background:rgba(255,255,255,.06); border-color:rgba(57,255,20,.6);
  box-shadow:0 0 0 3px rgba(57,255,20,.15), 0 8px 24px rgba(0,0,0,.5) inset;
}
.container .card .btn.btn-primary{
  --btnBg1:#19b80c; --btnBg2:#39ff14;
  background:linear-gradient(135deg,var(--btnBg1),var(--btnBg2)); border:0; color:#00E676;
  font-weight:700; border-radius:12px; padding:.8rem 1rem;
  box-shadow:0 12px 24px rgba(57,255,20,.25), inset 0 1px 0 rgba(255,255,255,.15); transform:translateZ(0);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.container .card .btn.btn-primary:hover{ filter:saturate(110%); transform:translateY(-1px); box-shadow:0 16px 32px rgba(57,255,20,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.container .card .btn.btn-primary:active{ transform:translateY(0); box-shadow:0 10px 18px rgba(57,255,20,.25), inset 0 2px 8px rgba(0,0,0,.25); }
.container .card a{ color:#7dff90; text-decoration:none; border-bottom:1px dotted rgba(125,255,144,.35); transition:color .2s, border-color .2s, text-shadow .2s; }
.container .card a:hover{ color:#baffc3; border-color:rgba(125,255,144,.6); text-shadow:0 0 8px rgba(57,255,20,.35); }
.container .card .d-grid.gap-3{ gap:.9rem !important; }

/* ===================================================================
   NAVBAR ATAS (.menubar) & NAVBAR BOTTOM — konsisten
=================================================================== */
.menubar.navbar.bg-dark,
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark{
  --a:0turn; position:relative; isolation:isolate;
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--g1), var(--g2)) !important;
  border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  box-shadow:0 10px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(57,255,20,.12);
  border-radius:14px;
}
.menubar.navbar.bg-dark::before,
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--a), var(--neon) 0 25%, transparent 25% 50%, var(--neon) 50% 75%, transparent 75% 100%);
  -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:.7; animation:neonSpin 7s linear infinite;
}
.menubar.navbar.bg-dark::after{
  content:""; position:absolute; inset:-10px; border-radius:inherit;
  background:radial-gradient(closest-side, rgba(57,255,20,.22), transparent 70%); filter:blur(10px); z-index:-1;
}
.menubar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#dfffdf !important; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  text-decoration:none !important; transition: color .2s, transform .2s, text-shadow .2s; position:relative;
}
.menubar a div{ font-size:.70rem !important; line-height:1; }
.menubar img{ width:auto; height:38px; max-height:38px; display:block; filter:grayscale(35%) brightness(.95); transition: filter .25s, transform .2s, drop-shadow .2s; }
.menubar a:hover,.menubar a:focus{ color:#baffc3 !important; text-shadow:0 0 8px rgba(57,255,20,.35); transform:translateY(-1px); }
.menubar a:hover img,.menubar a:focus img{ filter:grayscale(0%) brightness(1.05) drop-shadow(0 0 8px rgba(57,255,20,.45)); transform:translateY(-1px) scale(1.03); }
.menubar a.active,.menubar a[aria-current="page"]{ color:#39ff14 !important; text-shadow:0 0 10px rgba(57,255,20,.6); }
.menubar a.active img,.menubar a[aria-current="page"] img{ filter:grayscale(0%) brightness(1.15) drop-shadow(0 0 10px rgba(57,255,20,.6)); }
.menubar a::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-6px; height:3px; border-radius:6px;
  background:linear-gradient(45deg, transparent, rgba(57,255,20,.8), transparent); opacity:0; transform:translateY(4px);
  transition:opacity .2s, transform .2s;
}
.menubar a:hover::after,.menubar a.active::after,.menubar a[aria-current="page"]::after{ opacity:1; transform:translateY(0); }
@media (max-width:420px){ .menubar img{ height:34px; max-height:34px; } .menubar a div{ font-size:.66rem !important; } }

/* Bottom bar específica */
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark{
  position:fixed; left:0; right:0; bottom:0; z-index:1080; border-radius:14px 14px 0 0; margin:0 auto;
  border-bottom:none;
  box-shadow:0 -12px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.12);
}
.menubar.navbar.fixed-bottom.navbar-dark.bg-dark::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:24px; border-radius:14px 14px 0 0;
  background:linear-gradient(0deg, rgba(57,255,20,.22), transparent 70%); filter:blur(10px); pointer-events:none;
}
.menubar.navbar.fixed-bottom a{ gap:4px; padding:6px 4px; }
.menubar.navbar.fixed-bottom a div{ font-size:.72rem; }
.menubar.navbar.fixed-bottom img{ height:32px; max-height:32px; }
.menubar.navbar.fixed-bottom a::after{ left:16%; right:16%; bottom:2px; }

/* Beri jarak dari tepi atas untuk NAVBAR ATAS saja (bukan footer) */
.menubar.navbar.bg-dark:not(.fixed-bottom){
  margin-top: max(10px, env(safe-area-inset-top));
  overflow: visible;                /* biar glow/border gak kepotong */
  z-index: 1030;                    /* di atas konten lain jika perlu */
}

.menubar.navbar.bg-dark.fixed-top{
  top: max(8px, env(safe-area-inset-top));
}


/* Sedikit lebih lega di desktop */
@media (min-width: 992px){
  .menubar.navbar.bg-dark:not(.fixed-bottom){
    margin-top: 14px;
  }
}

/* Kalau ada tombol burger di kiri, turunin dikit biar simetris */
#sidebarCollapse{
  margin-top: 2px;
}


/* Jaga konten tak ketutup footer */
@media (max-width:1200px){ body{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* ===================================================================
   SIDEBAR
=================================================================== */
#sidebarCollapse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border-color: #39FF88;
  font-weight: 800;
  text-transform: uppercase;
  background: #12161B;
  color: #000000;
  z-index: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease;
}


#sidebarCollapse::after {
  content: "";
  position: absolute;
  inset: 4px; 
  border-radius: inherit;
  background: linear-gradient(180deg,#1ae83c 0%,#31d64c 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.08), 
    inset 0 -3px 6px rgba(0,0,0,.35),      
    0 6px 18px rgba(0,0,0,.45);    
  z-index: -1;
}

#sidebarCollapse:hover {
  background: #d4d6d5;
  color: #000000;
  border-color: #d4d6d5;
}

#sidebar.bg-dark{
  --a:0turn; background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--g1), var(--g2)) !important;
  color:#eaffea; backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
  border-right:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(57,255,20,.12) inset; position:fixed;
}
#sidebar.bg-dark::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:12px;
  background:linear-gradient(180deg, rgba(57,255,20,.15), rgba(57,255,20,.05), rgba(57,255,20,.15));
  filter:blur(10px); pointer-events:none;
}
#sidebar .d-flex.justify-content-between.p-3{ border-bottom:1px solid rgba(57,255,20,.22); background:linear-gradient(180deg, rgba(57,255,20,.10), rgba(57,255,20,.02)); }
#dismiss.btn.no-glass{
  color:#dfffdf; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.35rem .6rem;
  transition:filter .2s, transform .15s, box-shadow .2s;
}
#dismiss.btn.no-glass:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 0 12px rgba(57,255,20,.3) inset, 0 8px 16px rgba(0,0,0,.45); }
#sidebar .d-flex.justify-content-start.align-items-center.py-3.px-4{
  color:#ceffd6; background:linear-gradient(180deg, rgba(57,255,20,.12), rgba(57,255,20,.03)) !important; border-bottom:1px solid rgba(57,255,20,.18);
}
#sidebar .bi-person-circle{ color:#baffc3; text-shadow:0 0 10px rgba(57,255,20,.35); }
#sidebar a.text-white.text-decoration-none strong{ color:#eaffea; letter-spacing:.4px; }
#sidebar a.text-white.text-decoration-none span{ color:#a9ffb3; }
#sidebar .nav-item hr{
  border:0; height:1px; background:linear-gradient(90deg, rgba(57,255,20,0), rgba(57,255,20,.45), rgba(57,255,20,0)); margin:.6rem 0; opacity:1;
}
#sidebar .nav-pills .nav-link{
  display:flex; align-items:center; gap:.75rem; color:#dfffdf !important; padding:.68rem .9rem; margin:.15rem 0; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:background .2s, border-color .2s, box-shadow .2s, transform .12s; position:relative; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
}
#sidebar .nav-pills .nav-link::before{
  content:""; position:absolute; left:8px; top:10px; bottom:10px; width:3px; border-radius:6px;
  background:linear-gradient(180deg, transparent, rgba(57,255,20,.85), transparent);
  transform:scaleY(0); transition:transform .18s;
}
#sidebar .nav-pills .nav-link:hover,#sidebar .nav-pills .nav-link:focus{
  background:rgba(57,255,20,.10); border-color:rgba(57,255,20,.28); box-shadow:inset 0 0 0 1px rgba(57,255,20,.14); transform:translateY(-1px);
}
#sidebar .nav-pills .nav-link:hover::before,#sidebar .nav-pills .nav-link:focus::before{ transform:scaleY(1); }
#sidebar .nav-pills .nav-link i{ color:#a9ffb3; text-shadow:0 0 8px rgba(57,255,20,.35); min-width:1.25em; }
#sidebar .nav-pills .nav-link:hover i{ color:#eaffea; }
#sidebar .nav-pills .nav-link.active{
  background:linear-gradient(135deg, rgba(57,255,20,.22), rgba(57,255,20,.14)); border-color:rgba(57,255,20,.45);
  box-shadow:inset 0 0 0 1px rgba(57,255,20,.22), 0 0 12px rgba(57,255,20,.15);
}
#sidebar .nav-pills .nav-link.active::before{ transform:scaleY(1); }
#sidebar::-webkit-scrollbar{ width:10px; }
#sidebar::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
#sidebar::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(57,255,20,.55), rgba(57,255,20,.28)); border-radius:999px; border:2px solid rgba(0,0,0,.25); }
#sidebar a{ text-decoration:none; }
@media (max-width:380px){ #sidebar .nav-pills .nav-link{ padding:.6rem .8rem; } }

/* ===================================================================
   SECTION TITLES / LIST “Lihat lebih banyak”
=================================================================== */
.d-flex.justify-content-between.align-items-center.mt-3{ margin-bottom:15px; }
.d-flex.justify-content-between.align-items-center.mt-3 > h3{
  position:relative; color:#c8ffd2; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
  text-shadow:0 2px 12px rgba(57,255,20,.22); margin-bottom:.75rem;
}
.d-flex.justify-content-between.align-items-center.mt-3 > h3::after{
  content:""; position:absolute; left:0; bottom:-8px; height:3px; width:34%; max-width:120px;
  background:linear-gradient(90deg, rgba(57,255,20,0), rgba(57,255,20,.9), rgba(57,255,20,0)); border-radius:999px;
  box-shadow:0 0 10px rgba(57,255,20,.35);
}
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none{
  --neon:#39ff14; position:relative; display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .8rem; border-radius:999px; font-weight:700; letter-spacing:.02em;
  color:#eaffea !important; background:linear-gradient(135deg, rgba(57,255,20,.18), rgba(57,255,20,.12));
  border:1px solid rgba(57,255,20,.34);
  box-shadow:0 8px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(57,255,20,.22) inset, 0 0 14px rgba(57,255,20,.12) inset;
  transition: color .2s, transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-6px; height:3px; border-radius:6px;
  background:linear-gradient(45deg, transparent, rgba(57,255,20,.95), transparent); opacity:0; transform:translateY(4px);
  transition:opacity .2s, transform .2s;
}
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none:hover,
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none:focus{
  color:#dfffdf !important; background:linear-gradient(135deg, rgba(57,255,20,.26), rgba(57,255,20,.20));
  border-color:rgba(57,255,20,.45);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(57,255,20,.30) inset, 0 0 18px rgba(57,255,20,.18) inset;
  transform:translateY(-1px);
}
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none:hover::after,
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none:focus::after{ opacity:1; transform:translateY(0); }
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none i{
  color:#dfffdf; text-shadow:0 0 12px rgba(57,255,20,.5);
}
.d-flex.justify-content-between.align-items-center.mt-3 > a.text-decoration-none:focus{
  outline:none; box-shadow:0 0 0 3px rgba(57,255,20,.18), 0 10px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(57,255,20,.25);
}

/* ===================================================================
   TITLE SECTION & FORM DEPOSIT / WITHDRAW (ringkas)
=================================================================== */
.container > h1.text-center.my-3{
  color:#ceffd6; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
  text-shadow:0 2px 12px rgba(57,255,20,.22); position:relative; margin-bottom:1.75rem;
}
.container > h1.text-center.my-3::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:160px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,rgba(57,255,20,0),rgba(57,255,20,.9),rgba(57,255,20,0));
  box-shadow:0 0 10px rgba(57,255,20,.35);
}

/* Tabs di halaman deposit (ul.nav.nav-tabs setelah H1) */
.row.justify-content-lg-center h1[data-template="classic"] + .nav.nav-tabs{
  display:flex; gap:8px; padding:8px 10px; border:none; border-radius:14px;
  background:repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
             linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.10);
}
.row.justify-content-lg-center .nav.nav-tabs .nav-link{
  color:#baffc3; border:1px solid rgba(255,255,255,.08); border-bottom-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.03); border-radius:10px !important; font-weight:800; letter-spacing:.04em;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
}
.row.justify-content-lg-center .nav.nav-tabs .nav-link:hover{ color:#eaffea; background:rgba(57,255,20,.10); border-color:rgba(57,255,20,.26); transform:translateY(-1px); }
.row.justify-content-lg-center .nav.nav-tabs .nav-link.active{
  color:#061206 !important; background:linear-gradient(135deg,#18b10a,var(--neon)) !important;
  border-color:rgba(57,255,20,.48) !important; box-shadow:0 12px 24px rgba(57,255,20,.28), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Panel konten (border-top-0 wrapper) */
.row.justify-content-lg-center .border.border-top-0.p-2{
  border:1px solid rgba(255,255,255,.10) !important; border-top:0 !important; border-radius:0 0 14px 14px;
  background:repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
             linear-gradient(135deg, var(--g1), var(--g2));
  color:#eaffea; box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.10);
}

/* Alert tujuan transfer */
#deposit-form .alert.alert-primary{
  margin: .8rem 0 1rem; border-radius:12px;
  color:#0a180a; background:linear-gradient(135deg,#ffffff,#ffffff);
  border:1px solid rgba(57,255,20,.45); box-shadow:0 10px 22px rgba(57,255,20,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
#deposit-form .alert .fw-bold{ font-weight:900 !important; }
#receiver-number, #receiver-bank{ font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; letter-spacing:.06em; }
#deposit-form .alert .text-truncate{ max-width: 100%; }

/* QR image */
/* Hapus putih & padding Bootstrap thumbnail */
#deposit-form #receiver-qrcode.img-thumbnail,
#deposit-form #receiver-qrcode.bg-white{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* QR tampil rapi + frame neon */
#deposit-form #receiver-qrcode{
  display: block;
  margin-inline: auto;
  max-width: 90%;
  border-radius: 14px;

  /* border neon (inner) + glow halus */
  box-shadow:
    inset 0 0 0 2px rgba(57,255,20,.55),     /* garis hijau di dalam */
    0 0 0 4px rgba(57,255,20,.18),           /* ring luar tipis */
    0 12px 24px rgba(0,0,0,.55);             /* drop shadow */
  filter: drop-shadow(0 0 12px rgba(57,255,20,.25)); /* glow lembut */
}

/* Kalau mau tanpa garis (glow only), pakai ini sebagai alternatif:
#deposit-form #receiver-qrcode{ box-shadow:none; filter: drop-shadow(0 0 16px rgba(57,255,20,.35)); }
*/

/* Label form */
#deposit-form .form-label{ color:#ccffd4; font-weight:700; letter-spacing:.02em; margin-bottom:.35rem; }

/* Input & Select */
#deposit-form .form-control, #deposit-form .form-select{
  background: rgba(255,255,255,.04); color:#eaffea;
  border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:.7rem .85rem;
  font-size:1rem; line-height:1.25; transition:border-color .2s, box-shadow .2s, background .2s;
}
#deposit-form .form-control::placeholder{ color:#c1dcc2; opacity:.95; }
#deposit-form .form-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2339ff14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
#deposit-form .form-control:focus, #deposit-form .form-select:focus{
  outline:none; background:rgba(255,255,255,.06);
  border-color:rgba(57,255,20,.55); box-shadow:0 0 0 3px rgba(57,255,20,.18), inset 0 0 0 1px rgba(57,255,20,.22);
}

/* Panel crypto & bank highlight */
#deposit-form .crypto-show-only, #deposit-form .bank-show-only{
  border:1px dashed rgba(57,255,20,.28); border-radius:12px; padding:.75rem .75rem .25rem; background:rgba(57,255,20,.06); margin-bottom:.75rem;
}

/* Ketentuan deposit */
#deposit-form > div[style*="font-size"]{ font-size:.95rem !important; line-height:1.65; color:#e9ffee; }
#deposit-form > div[style*="font-size"] strong{ color:#c8ffd2; font-weight:800; letter-spacing:.03em; }
#deposit-form > div[style*="font-size"] ul{ margin:.4rem 0 0 1.1rem; padding:0; }
#deposit-form > div[style*="font-size"] li{
  margin:.15rem 0; list-style:none; position:relative; padding-left:.9rem;
}
#deposit-form > div[style*="font-size"] li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #39ff14 0%, #28c50a 60%, #1a7f06 100%); box-shadow:0 0 8px rgba(57,255,20,.45);
}

/* Tombol submit lebar & tebal */
#deposit-form .d-grid .btn.btn-primary{
  width:100%; font-size:1.05rem; padding:.95rem 1rem !important; border-radius:12px !important;
}

/* Spasi field */
#deposit-form .form-group{ margin-bottom:.9rem !important; }

/* Mobile tweaks */
@media (max-width:420px){
  .row.justify-content-lg-center h1[data-template="classic"].text-center.mb-5{ font-size:1.6rem; }
  #deposit-form > div[style*="font-size"]{ font-size:.98rem !important; }
}
/* ===================================================================
   CARD PASARAN (dua varian) + UNIFORM SIZE
=================================================================== */
.row.g-3 .card.border.border-5.border-primary,
.card.border.border-primary.rounded-3{
  --a:0turn; position:relative; overflow:hidden; border:0 !important; border-radius:18px !important;
  background:repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
             linear-gradient(135deg, rgba(15,15,15,.94), rgba(5,5,5,.98));
  box-shadow:0 12px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.12);
  transform:translateZ(0);
}
.row.g-3 .card.border.border-5.border-primary::before,
.card.border.border-primary.rounded-3::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--a), var(--neon) 0 25%, transparent 25% 50%, var(--neon) 50% 75%, transparent 75% 100%);
  -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:.7; animation:spinBorder 7s linear infinite;
}
.row.g-3 .card .text-center .my-1:first-child,
.card.border.border-primary.rounded-3 .text-center .my-1:first-child{
  color:#c8ffd2 !important; background:linear-gradient(180deg, rgba(57,255,20,.12), rgba(57,255,20,.02));
  border-bottom:1px solid rgba(57,255,20,.18); font-weight:800; letter-spacing:.04em; padding:.45rem .6rem;
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.row.g-3 .card h2{ background:transparent !important; color:#ceffcf !important; text-shadow:0 0 18px rgba(57,255,20,.35); letter-spacing:.06em; }
.row.g-3 .card h2 a{ color:inherit !important; text-decoration:none !important; }
.row.g-3 .card h2 a:hover{ filter:brightness(1.08); }
.row.g-3 .card .togel-countdown-timer,
.card.border.border-primary.rounded-3 .togel-countdown-timer{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.08em; color:#b7ffbf; padding:.35rem .6rem .5rem; display:inline-block; border-top:1px dashed rgba(57,255,20,.25);
}
.row.g-3 .card .togel-countdown-timer[data-status="1"],
.card.border.border-primary.rounded-3 .togel-countdown-timer[data-status="1"]{ color:#39ff14; }
.row.g-3 .card .togel-countdown-timer[data-status="0"],
.card.border.border-primary.rounded-3 .togel-countdown-timer[data-status="0"]{ color:#ffb86b; }
.row.g-3 .card.border.border-5.border-primary:hover,
.card.border.border-primary.rounded-3:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 32px rgba(0,0,0,.6), inset 0 0 0 1px rgba(57,255,20,.16);
}
.row.g-3 .card .card-body, .card.border.border-primary.rounded-3 .card-body{ padding:0 !important; }
.card.border.border-primary.rounded-3{ width:var(--cardW) !important; height:var(--cardH); display:flex; flex-direction:column; }
.card.border.border-primary.rounded-3 .card-body{ display:flex; flex-direction:column; height:100%; padding:0 !important; }
.card.border.border-primary.rounded-3 .text-center{ display:flex; flex-direction:column; align-items:center; height:100%; padding:0; }
.card.border.border-primary.rounded-3 .text-center .my-1:first-child{
  min-height:var(--headH); max-height:var(--headH); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; padding:.42rem .5rem; width:100%;
}
.card.border.border-primary.rounded-3 .text-center .my-1:nth-child(2){
  min-height:var(--subH); max-height:var(--subH); display:flex; align-items:center; justify-content:center; width:100%;
}
.card.border.border-primary.rounded-3 h1, .card.border.border-primary.rounded-3 h2{
  min-height:var(--resultH); max-height:var(--resultH); display:flex; align-items:center; justify-content:center; margin:.15rem 0 .25rem 0 !important; width:100%;
}
.card.border.border-primary.rounded-3 .togel-countdown-timer{
  min-height:var(--timerH); max-height:var(--timerH); display:flex; align-items:center; justify-content:center; width:100%;
}
#carousel-togel .owl-stage, #carousel-togel .owl-item{ display:flex; }
#carousel-togel .owl-item > *{ height:100%; }
@media (max-width:420px){ :root{ --cardW:160px; --cardH:160px; --resultH:80px; } }

/* ===== FORM WD===== */
.card.p-1.my-3.shadow{
  --neon:#39ff14;
  --bg1: rgba(12,12,12,.96);
  --bg2: rgba(5,5,5,.98);
  color:#eaffea;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.08);
  background:
    /* tekstur diagonal halus 45° */
    repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  box-shadow:
    0 12px 26px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(57,255,20,.10);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  padding: 1.2rem !important;
}

/* Judul besar: sangat jelas */
.card.p-1.my-3.shadow > .text-center.mb-5,
.card.p-1.my-3.shadow > h1.text-center.mb-5{
  color:#d6ffe0;
  text-transform: uppercase;
  letter-spacing:.06em;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(57,255,20,.22);
  margin-bottom: 1.6rem !important;
  position: relative;
}
.card.p-1.my-3.shadow > h1.text-center.mb-5::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:140px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,.9), transparent);
  box-shadow: 0 0 10px rgba(57,255,20,.35);
}

/* Saldo chip */
#withdraw-form .mb-3 > h4{
  display:inline-block;
  margin: 0 0 .25rem 0 !important;
  padding:.35rem .65rem;
  border-radius:10px;
  font-weight:800;
  letter-spacing:.03em;
  color:#061206;
  background: linear-gradient(135deg, #18b10a, var(--neon));
  box-shadow: 0 8px 18px rgba(57,255,20,.25), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Label: tebal & kontras */
#withdraw-form .form-label{
  color:#ccffd4;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:.35rem;
}

/* Input & Select: readable, high-contrast */
#withdraw-form .form-control,
#withdraw-form .form-select{
  background: rgba(255,255,255,.04);
  color:#eaffea;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:.7rem .85rem;
  font-size: 1rem;
  line-height: 1.25;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#withdraw-form .form-control::placeholder{ color:#c1dcc2; opacity: .95; }
#withdraw-form .form-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right: 46px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2339ff14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center;
}
#withdraw-form .form-control:focus,
#withdraw-form .form-select:focus{
  outline:none;
  background: rgba(255,255,255,.06);
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 0 3px rgba(57,255,20,.18), inset 0 0 0 1px rgba(57,255,20,.22);
}

/* Crypto-only block: kasih pemisah agar jelas */
#withdraw-form .crypto-show-only{
  border: 1px dashed rgba(57,255,20,.28);
  border-radius: 12px;
  padding: .75rem .75rem .25rem;
  background: rgba(57,255,20,.06);
  margin-bottom: .75rem;
}

/* List ketentuan: typography jelas */
#withdraw-form > div[style*="font-size"]{
  font-size: .95rem !important;
  line-height: 1.65;
  color:#e9ffee;
}
#withdraw-form > div[style*="font-size"] strong{
  color:#c8ffd2;
  font-weight: 800;
  letter-spacing:.03em;
}
#withdraw-form > div[style*="font-size"] ul{
  margin:.4rem 0 0 1.1rem; padding:0;
}
#withdraw-form > div[style*="font-size"] li{
  margin:.15rem 0;
  list-style: none;
  position: relative;
  padding-left: .9rem;
}
#withdraw-form > div[style*="font-size"] li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #39ff14 0%, #28c50a 60%, #1a7f06 100%);
  box-shadow: 0 0 8px rgba(57,255,20,.45);
}

/* Tombol submit: full width, tebal */
#withdraw-form .d-grid .btn.btn-primary{
  width:100%;
  font-size:1.05rem;
  padding: .95rem 1rem !important;
  border-radius:12px !important;
}

/* Spasi antar field */
#withdraw-form .form-group{ margin-bottom: .9rem !important; }

/* Mobile tweaks */
@media (max-width: 420px){
  #withdraw-form .form-control, #withdraw-form .form-select{ font-size:1rem; }
  #withdraw-form > div[style*="font-size"]{ font-size: .98rem !important; }
}



/* ===================================================================
   BACKGROUND HITAM TRANSPARAN — gabungan
=================================================================== */
.container > .mb-3,
.container > .alert,
#promotion-content,
.tab-pane, .announcement {
  background:rgba(0,0,0,.60) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.container > .mb-3:has(img.w-100){ background:transparent !important; border:0; padding:0; box-shadow:none; border-radius:0; }
.alert.alert-primary{ background:rgba(0,0,0,.60) !important; border-color:rgba(255,255,255,.08) !important; color:#f1f5f9 !important; }
.container h1, .container .alert-heading{ color:#fff !important; margin-top:.25rem; margin-bottom:.5rem; }
.success-notif, .success-notif2{ color:#a7f3d0 !important; font-weight:600; }
@supports (backdrop-filter:blur(6px)){
  .container > .mb-3, .container > .alert, #promotion-content, .tab-pane, .announcement { backdrop-filter:blur(6px); }
}
.container .alert span, .container .alert a{ color:#e2e8f0 !important; word-break:break-all; }

/* ===================================================================
   BUTTON OUTLINE (tambahan yang kamu punya) — perbaikan kecil
=================================================================== */
.btn.btn-sm.btn-outline-primary.py-2{ background:rgba(0,0,0,.5); color:#fff; }
.btn.btn-outline-primary.rounded-3{ background:rgba(0,0,0,.5); color:#fff; }
.btn.btn-outline-primary.m-1{
  background:linear-gradient(270deg, rgba(139,0,0,1) 0%, rgba(210,0,0,1) 21%, rgba(139,0,0,1) 33%, rgba(210,0,0,1) 44%, rgba(139,0,0,1) 60%, rgba(210,0,0,1) 73%, rgba(139,0,0,1) 85%, rgba(210,0,0,1) 100%);
  border-color:transparent !important; color:#fff; background-size:400% 400%;
  animation:gradient 5s ease infinite;
  box-shadow:inset 0 0 5px 3px #e60e00, inset 0 2px 0 0 #fff, inset 0 0 0 2px #e20000, 3px 3px 3px 1px rgba(0,0,0,1);
  border-radius:8px;
}
@keyframes gradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ===================================================================
   PAGINATION (neon glass)
=================================================================== */
nav[aria-label="Page navigation"] .pagination{
  --a:0turn; gap:6px; padding:6px 8px; border-radius:14px;
  background:repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
             linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.10);
}
.pagination .page-link{
  min-width:40px; height:36px; display:grid; place-items:center; padding:0 .8rem;
  border-radius:10px !important; border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important; color:#eaffea !important; text-decoration:none;
  transition:background .2s, border-color .2s, box-shadow .2s, color .2s, transform .12s;
}
.pagination .page-link:hover{
  background:rgba(57,255,20,.12) !important; border-color:rgba(57,255,20,.28) !important;
  box-shadow:inset 0 0 0 1px rgba(57,255,20,.16); transform:translateY(-1px);
}
.pagination .page-link:focus{
  outline:none; box-shadow:0 0 0 3px rgba(57,255,20,.18), inset 0 0 0 1px rgba(57,255,20,.22) !important;
}
.pagination .page-item.active .page-link{
  color:#061206 !important; background:linear-gradient(135deg,#18b10a,var(--neon)) !important;
  border-color:rgba(57,255,20,.45) !important;
  box-shadow:0 12px 24px rgba(57,255,20,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform:translateY(-1px);
}
.pagination .page-item.disabled .page-link{
  color:#a0b5a0 !important; background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.08) !important; cursor:default; pointer-events:none;
}
.pagination .page-item.disabled:first-child .page-link{ text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:#cfeee0 !important; }
@media (max-width:420px){
  nav[aria-label="Page navigation"] .pagination{ gap:4px; padding:6px; }
  .pagination .page-link{ min-width:36px; height:34px; padding:0 .6rem; }
}

/* ===================================================================
   SOSMED ICON COLORS
=================================================================== */
.fa-whatsapp{ color:#25D366; } .fa-whatsapp:hover{ color:#128C7E; }
.fa-telegram{ color:#0088cc; } .fa-telegram:hover{ color:#0077b5; }
.fa-instagram{ color:#833AB4; } .fa-instagram:hover{ color:#d72d4d; }
.fa-youtube{ color:#FF0000; } .fa-youtube:hover{ color:#cc0000; }
.fa-facebook{ color:#1877F2; } .fa-facebook:hover{ color:#145dbf; }
.fa-tiktok{ color:#010101; } .fa-tiktok:hover{ color:#1c1c1c; }
.fa-twitter{ color:#1DA1F2; } .fa-twitter:hover{ color:#0d8ddf; }

/* ===================================================================
   BACKGROUND TRANSPARAN: tombol kecil tambahan yang kamu sebut
=================================================================== */
#promotion-content h1, #promotion-content h2, #promotion-content h3,
.tab-pane h1, .tab-pane h2, .tab-pane h3,
.border-top-0 h1, .border-top-0 h2, .border-top-0 h3{
  color:#fff !important;
}

/* =========== Palette / base =========== */
:root{
  --neon:#39ff14;
  --ink:#061206;
  --bg1:rgba(12,12,12,.96);
  --bg2:rgba(5,5,5,.98);
}

/* =========================
   1) SELECTOR PASARAN (select + button link)
   ========================= */
#select-market.form-select{
  color:#eaffea;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    /* tekstur diagonal halus */
    repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  padding-right: 46px;              /* ruang untuk panah */
  height: 44px;
  line-height: 44px;
  /* ganti panah default */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2339ff14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
#select-market.form-select:focus{
  border-color:rgba(57,255,20,.55);
  box-shadow:0 0 0 3px rgba(57,255,20,.18), inset 0 0 0 1px rgba(57,255,20,.22);
  outline:none;
}

/* tombol link "website" di sisi kanan select */
.input-group > #info-website.btn{
  border-radius:12px;
  border:1px solid rgba(57,255,20,.35)!important;
  color:#caffd2; background:rgba(255,255,255,.03);
  height:44px; display:flex; align-items:center; gap:.4rem;
}
.input-group > #info-website.btn:hover{
  color:var(--ink); background:linear-gradient(135deg,#18b10a,var(--neon));
  box-shadow:0 10px 22px rgba(57,255,20,.25), inset 0 1px 0 rgba(255,255,255,.18);
}

/* =========================
   2) GRID TOMBOL KATEGORI (rapi, hover tidak membesar)
   ========================= */
[name="category"].btn{
  border-radius:12px !important;
  font-weight:800; letter-spacing:.02em;
  color:#dfffdf; border:1px solid rgba(255,255,255,.10)!important;
  background:
    rgba(255,255,255,.02);
  height:44px;                       /* fix tinggi – no jump */
  padding:.6rem .5rem !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  transform:none !important;         /* matikan efek “gede” */
}
[name="category"].btn:hover,
[name="category"].btn:focus{
  background: rgba(57,255,20,.08);
  border-color: rgba(57,255,20,.28)!important;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.14);
  color:#eaffea;
}
[name="category"].btn.active{
  color:var(--ink) !important;
  background: linear-gradient(135deg,#18b10a,var(--neon)) !important;
  border-color: rgba(57,255,20,.45) !important;
  box-shadow: 0 12px 24px rgba(57,255,20,.28), inset 0 1px 0 rgba(255,255,255,.18);
}

/* =========================
   3) PANEL 4D – tombol mode & tabel input
   ========================= */

/* toggle Bet Diskon / Bet Full / Win BB */
#panel-4D .btn-group .btn{
  border-radius:10px !important;
  border:1px solid rgba(57,255,20,.28) !important;
  color:#caffd2; background:rgba(255,255,255,.03);
  padding:.45rem .8rem;
}
#panel-4D .btn-group .btn:hover{ background:rgba(57,255,20,.10); color:#eaffea; }
#panel-4D .btn-check:checked + .btn{
  color:var(--ink) !important;
  background:linear-gradient(135deg,#18b10a,var(--neon)) !important;
  border-color:rgba(57,255,20,.45) !important;
  box-shadow:0 10px 20px rgba(57,255,20,.25), inset 0 1px 0 rgba(255,255,255,.18);
}

/* tabel info kecil di atas (diskon/prize) */
#panel-4D .table.table-borderless td{
  padding:.2rem .4rem; color:#cfead1;
  border:0; background:transparent;
}
#panel-4D .table.table-borderless tr:first-child td{ color:#93d99b; }

/* ====== Tabel Input – simple & jelas ====== */
.table-input{
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.02);
  border-radius:12px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.08);
}
.table-input thead th{
  text-align:center;
  color:#dfffdf;
  font-weight:900; letter-spacing:.04em;
  border:0 !important;
  padding:.7rem .4rem;
  background:
    repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(16,16,16,.98), rgba(8,8,8,1));
  box-shadow: inset 0 -2px 0 rgba(57,255,20,.22);
}
.table-input tbody tr{
  background: rgba(0,0,0,.35);
}
.table-input tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02);
}
.table-input td{
  vertical-align: middle;
  padding:.5rem .4rem;
  border-color: rgba(255,255,255,.06) !important;
}

/* input field di sel */
.table-input .td-input .form-control{
  background:#0b0f0b; color:#eaffea;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; text-align:center;
  height: 38px; padding:.35rem .55rem;
  font-weight:800; letter-spacing:.06em;
  transition:border-color .15s, box-shadow .15s, background .15s;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}
.table-input .td-input .form-control::placeholder{ color:#a4dbab; }
.table-input .td-input .form-control:focus{
  outline:none;
  background:#101810;
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 0 3px rgba(57,255,20,.18), inset 0 0 0 1px rgba(57,255,20,.20);
}

/* checkbox BB – simple */
.table-input .form-check-input{
  width:20px; height:20px; margin:auto; display:block;
  accent-color: var(--neon);
  border-radius:6px;
}

/* baris 'Tambah Baris' */
.table-input .btn.btn-outline-primary.btn-sm{
  border-radius:10px; border:1px solid rgba(57,255,20,.35)!important; color:#caffd2;
  background:rgba(255,255,255,.03);
}
.table-input .btn.btn-outline-primary.btn-sm:hover{
  color:var(--ink); background:linear-gradient(135deg,#18b10a,var(--neon));
  box-shadow:0 8px 18px rgba(57,255,20,.22);
}

/* tombol aksi bawah */
#panel-4D .text-center .btn.btn-primary{
  border-radius:12px; font-weight:900;
  color:var(--ink); background:linear-gradient(135deg,#18b10a,var(--neon));
  border:1px solid rgba(57,255,20,.45);
  box-shadow:0 12px 24px rgba(57,255,20,.28), inset 0 1px 0 rgba(255,255,255,.18);
  padding:.65rem 1.1rem;
}
#panel-4D .text-center .btn.btn-outline-danger{
  border-radius:12px; font-weight:800; color:#ffd0d0;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.03);
}
#panel-4D .text-center .btn.btn-outline-danger:hover{
  color:#fff; border-color:#ff6b6b; background:rgba(255,0,0,.18);
}

/* Responsive kecil: rapikan padding & tinggi field */
@media (max-width: 540px){
  [name="category"].btn{ height:42px; font-size:.85rem !important; }
  .table-input .td-input .form-control{ height:36px; font-size:.95rem; }
}