/* ============================================================
   PIXEL RETRO THEME — "SYNTHWAVE ARCADE"
   Palet: Deep Space Violet #0a051d + Acid Pink #ff007f + Electric Cyan #00f0ff + Gold #ffb700
   Font: Press Start 2P + IBM Plex Sans Condensed (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap');

/* ── ROOT VARIABLES ── */
:root {
  --px-bg:        #0a051d;
  --px-bg2:       #2c1f5e;
  --px-bg3:       #3b2c76;
  --px-cyan:      #00f0ff;
  --px-magenta:   #ff007f;
  --px-yellow:    #ffb700;
  --px-green:     #39ff14;
  --px-red:       #ff3355;
  --px-white:     #f0e6ff;
  --px-dim:       rgba(0,240,255,0.12);
  --px-border:    3px solid var(--px-cyan);
  --px-shadow:    0 0 0 3px var(--px-cyan), 0 0 12px var(--px-cyan), 0 0 24px rgba(0,240,255,0.3);
  --px-shadow-mg: 0 0 0 3px var(--px-magenta), 0 0 12px var(--px-magenta), 0 0 24px rgba(255,0,127,0.3);
  --px-shadow-yl: 0 0 0 3px var(--px-yellow), 0 0 12px var(--px-yellow);
  --px-font:      'Press Start 2P', monospace;
  --px-radius:    0px; /* pixel art = no round corners */
  /* Override warna penjual */
  --warna_1: #0a051d;
  --warna_2: #2c1f5e;
  --warna_3: #ff007f;
  --warna_4: #00f0ff;
  --warna-gold: #ffb700;
}

/* ── GLOBAL RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  background-color: var(--px-bg) !important;
  background-image:
    linear-gradient(rgba(0,240,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--px-white) !important;
  min-height: 100vh;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
  animation: px-grid-scroll 5s linear infinite;
}

/* Animated retro cybergrid (lantai digital bergerak) */
@keyframes px-grid-scroll {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}

/* CRT scanline overlay — di belakang konten agar tidak menimpa teks */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}
/* Konten utama di atas scanline */
main, header, nav, footer {
  position: relative;
  z-index: 1;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--px-font) !important;
  color: var(--px-cyan) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* Body text: readable sans-serif (paragraf, list, link, sel, deskripsi) */
p, li, a, td, dd, dt, figcaption {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* Short/interactive elements: pixel font */
button, .btn, [class*="btn-"],
label, input, select, textarea, th, .badge,
.tab-button, .search-button,
[class*="font-semibold"], [class*="font-bold"],
[class*="uppercase"][class*="tracking"] {
  font-family: var(--px-font) !important;
  font-size: 9px !important;
  line-height: 1.8;
}

a {
  color: var(--px-cyan) !important;
  text-decoration: none;
}
a:hover {
  color: var(--px-yellow) !important;
  text-shadow: 0 0 8px var(--px-yellow);
}

/* ── PIXEL BLOCK UTILITY ── */
.px-block {
  background: var(--px-bg2);
  border: 3px solid var(--px-cyan);
  box-shadow: var(--px-shadow);
  padding: 16px;
}

/* ── BACKGROUND & GRADIENT ── */
.bg-gradient-theme,
.bg-gradient-to-l,
.bg-gradient-to-r {
  background: var(--px-bg) !important;
}

.bg-murky-700, .bg-murky-800, .bg-secondary,
.bg-muted\/50, [class*="bg-murky"],
[class*="bg-secondary"] {
  background-color: var(--px-bg2) !important;
  border-color: var(--px-cyan) !important;
}

/* ── PIXEL BORDER STYLE ── */
.rounded-2xl, .rounded-3xl, .rounded-xl,
.rounded-lg, .rounded-md, .rounded-full,
.rounded-sm, .rounded {
  border-radius: 0 !important;
}

/* ── CARDS & PANELS ── */
[class*="card"], .card,
.rounded-2xl.bg-muted,
div[class*="rounded"][class*="bg-"] {
  border: 2px solid var(--px-cyan) !important;
  background: var(--px-bg2) !important;
  box-shadow: 4px 4px 0px var(--px-cyan) !important;
}

/* ── BUTTONS ── */
button, .btn, [class*="btn-"],
a[class*="inline-flex"][class*="rounded"],
[class*="items-center"][class*="justify-center"][class*="rounded"] {
  font-family: var(--px-font) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.1s !important;
  cursor: pointer;
}

/* Primary button (cyan) */
.bg-primary-500, [class*="bg-primary"],
button.bg-primary-500 {
  background: transparent !important;
  color: var(--px-cyan) !important;
  border: 2px solid var(--px-cyan) !important;
  box-shadow: 3px 3px 0 var(--px-cyan) !important;
}
.bg-primary-500:hover, [class*="bg-primary"]:hover {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  box-shadow: none !important;
  transform: translate(3px, 3px);
}

/* Secondary / outline button */
button[class*="transparent"],
button[class*="border"] {
  background: transparent !important;
  border: 2px solid var(--px-cyan) !important;
  color: var(--px-cyan) !important;
}
button[class*="transparent"]:hover,
button[class*="border"]:hover {
  background: var(--px-dim) !important;
}

/* Danger / red button */
button[class*="destructive"], .btn-danger {
  border: 2px solid var(--px-red) !important;
  color: var(--px-red) !important;
  box-shadow: 3px 3px 0 var(--px-red) !important;
  background: transparent !important;
}

/* ── INPUTS & FORMS ── */
input, select, textarea {
  background: var(--px-bg3) !important;
  border: 2px solid var(--px-cyan) !important;
  color: var(--px-cyan) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  caret-color: var(--px-cyan);
}
input::placeholder, textarea::placeholder {
  color: rgba(0,255,255,0.35) !important;
  font-family: var(--px-font) !important;
  font-size: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--px-yellow) !important;
  box-shadow: 0 0 0 2px var(--px-yellow), 0 0 8px var(--px-yellow) !important;
}

/* ── NAVBAR ── */
header, nav, .blurred-navbar {
  background: var(--px-bg) !important;
  border-bottom: 3px solid var(--px-cyan) !important;
  box-shadow: 0 3px 0 var(--px-cyan),
              0 6px 0 rgba(0,255,255,0.2) !important;
  backdrop-filter: none !important;
}

/* Navbar logo glow */
header img {
  filter: drop-shadow(0 0 6px var(--px-cyan));
}

/* Search button navbar */
header button, nav button {
  border: 2px solid var(--px-cyan) !important;
  color: var(--px-cyan) !important;
  background: transparent !important;
  box-shadow: 2px 2px 0 var(--px-cyan) !important;
}
header button:hover, nav button:hover {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  box-shadow: none !important;
  transform: translate(2px, 2px);
}

/* Dropdown menu */
.dropdown-menu, [class*="origin-top-right"][class*="absolute"],
[class*="absolute"][class*="z-10"][class*="w-48"] {
  background: var(--px-bg2) !important;
  border: 2px solid var(--px-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--px-cyan) !important;
}
.dropdown-menu a, .dropdown-menu button,
[class*="origin-top-right"] a,
[class*="origin-top-right"] button {
  color: var(--px-cyan) !important;
  font-size: 8px !important;
}
.dropdown-menu a:hover,
[class*="origin-top-right"] a:hover {
  background: var(--px-dim) !important;
}
[class*="origin-top-right"] [class*="bg-black"],
[class*="origin-top-right"] [class*="py-1"] {
  background: var(--px-bg2) !important;
  border-top: 1px solid rgba(0,255,255,0.2) !important;
}

/* ── FOOTER ── */
footer {
  background: var(--px-bg) !important;
  border-top: 3px solid var(--px-cyan) !important;
  box-shadow: 0 -3px 0 var(--px-cyan) !important;
  color: var(--px-white) !important;
}
footer h3 {
  color: var(--px-yellow) !important;
  font-size: 9px;
  letter-spacing: 0.1em;
}
footer a {
  color: rgba(0,255,255,0.7) !important;
  font-size: 8px;
  transition: color 0.1s;
}
footer a:hover {
  color: var(--px-yellow) !important;
}
footer svg path {
  fill: var(--px-cyan) !important;
}
.social-item {
  border: 2px solid var(--px-cyan);
  box-shadow: 2px 2px 0 var(--px-cyan);
  transition: all 0.1s;
  width: 36px !important; height: 36px !important;
}
.social-item:hover {
  background: var(--px-cyan) !important;
  transform: translate(2px,2px);
  box-shadow: none;
}
.social-item:hover svg path { fill: var(--px-bg) !important; }

/* Footer SVG wave */
footer > svg { display: none !important; }

/* ── HERO / BANNER SLIDER (COMBINED NEON CYAN BLUE & ACID RED/PINK) ── */
#hero, .swiper-container, .hero-swiper, .swiper, .banner-slider {
  border: 3px solid #00f0ff !important;
  box-shadow: 4px 4px 0 #ff007f, 0 0 20px rgba(0, 240, 255, 0.45) !important;
  background: var(--px-bg2) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  overflow: hidden !important;
}
.swiper-wrapper, #heroo {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.swiper-slide {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.swiper-slide img, .hero-swiper img, #hero img {
  border: 2px solid #ff007f !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.5) !important;
  border-radius: 8px !important;
}
.swiper-pagination-bullet {
  background: #00f0ff !important;
  border-radius: 4px !important;
  width: 10px !important; height: 8px !important;
  opacity: 0.6 !important;
  transition: all 0.25s ease !important;
}
.swiper-pagination-bullet-active {
  background: #ff007f !important;
  width: 24px !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px #ff007f !important;
}

/* ── GAME KATEGORI CARDS (hanya dalam grid #game, jangan global) ── */
#content-melpa a,
#game .category-item,
#headlessui-tabs-panel-game .category-item {
  border: 3px solid #00f0ff !important;
  box-shadow: 4px 4px 0 #ff007f, 0 0 15px rgba(0,240,255,0.4) !important;
  background: var(--px-bg2) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}
#content-melpa a:hover,
#game .category-item:hover,
#headlessui-tabs-panel-game .category-item:hover {
  border-color: #ff007f !important;
  box-shadow: 4px 4px 0 #00f0ff, 0 0 20px rgba(255,0,127,0.6) !important;
  transform: translateY(-3px) !important;
}
/* Stripping inner borders to eliminate double lines */
#content-melpa a div,
#content-melpa a img,
#game .category-item div,
#headlessui-tabs-panel-game .category-item div,
.assdafsdvsvasgdsgsdgwgreragwgwrgeargwrgergegsvdsDVSVcsdvdszvsbwtergerg43t34f34343ff34g34gG2 {
  border: none !important;
  box-shadow: none !important;
}

/* Category/game name text — pixel font hanya utk label bold/semibold */
[class*="font-semibold"] {
  font-family: var(--px-font) !important;
  font-size: 8px !important;
}

/* ── FLASH SALE / PROMO SECTION ── */
#fs, #fs .rounded-2xl {
  border: 3px solid #00f0ff !important;
  box-shadow: 4px 4px 0 #ff007f, 0 0 20px rgba(0, 240, 255, 0.45) !important;
  background: var(--px-bg2) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.fs-countdown {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}
.fs-countdown .time,
.fs-countdown .separator {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#fs h3 > div,
#fs .uppercase {
  white-space: nowrap !important;
}
.item[data-item-theme], #special_deals .item {
  background: var(--px-bg3) !important;
  border: 2px solid #00f0ff !important;
  box-shadow: 3px 3px 0 #ff007f !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.item[data-item-theme]:hover, #special_deals .item:hover {
  border-color: #ff007f !important;
  box-shadow: 3px 3px 0 #00f0ff, 0 0 15px rgba(255, 0, 127, 0.6) !important;
  transform: translateY(-2px) !important;
}
.item[data-item-theme] img, #special_deals img {
  border: none !important;
  box-shadow: none !important;
}

/* DISC badge */
.bg-hemat, [class*="bg-hemat"],
.absolute.block[class*="rotate-45"] {
  background: var(--px-magenta) !important;
  color: var(--px-bg) !important;
  font-size: 7px !important;
}

/* Countdown */
.fs-countdown .time {
  background: var(--px-bg3) !important;
  border: 2px solid var(--px-yellow) !important;
  color: var(--px-yellow) !important;
  box-shadow: 2px 2px 0 var(--px-yellow) !important;
  border-radius: 0 !important;
  min-width: 28px;
  text-align: center;
  padding: 2px 4px;
  font-size: 10px !important;
}
.fs-countdown .separator {
  color: var(--px-yellow) !important;
  margin: 0 4px;
}

/* Marquee section title */
[class*="PROMO"], [class*="uppercase"][class*="tracking"] {
  color: var(--px-yellow) !important;
  text-shadow: 0 0 8px var(--px-yellow);
}

/* ── SEARCH MODAL ── */
#dialog-panel-\:r4g\:,
[id*="dialog-panel"],
[class*="max-w-2xl"][class*="bg-murky"] {
  background: var(--px-bg2) !important;
  border: 3px solid var(--px-cyan) !important;
  box-shadow: var(--px-shadow) !important;
  border-radius: 0 !important;
}
[class*="max-w-2xl"] input {
  background: var(--px-bg3) !important;
  border-bottom: 2px solid var(--px-cyan) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--px-cyan) !important;
  font-size: 9px !important;
}
.resultsearch li {
  border-bottom: 1px solid rgba(0,255,255,0.15) !important;
}
.resultsearch a {
  color: var(--px-cyan) !important;
}
.resultsearch a:hover {
  background: var(--px-dim) !important;
}

/* ── PRICE / TEXT COLORS ── */
.text-primary, .text-primary-500,
[class*="text-primary"] {
  color: var(--px-cyan) !important;
}
.text-destructive, [class*="text-destructive"] {
  color: var(--px-red) !important;
}
.text-foreground, [class*="text-foreground"] {
  color: var(--px-white) !important;
}
.text-muted, [class*="text-muted"] {
  color: rgba(0,255,255,0.5) !important;
}
.line-through { opacity: 0.6; }

/* ── TABS / PILL NAVIGATION ── */
[role="tablist"],
[class*="pills"], [class*="tabs"] {
  border-bottom: 3px solid var(--px-cyan) !important;
  gap: 4px;
}
[role="tab"], [class*="tab-"] {
  background: transparent !important;
  border: 2px solid rgba(0,255,255,0.3) !important;
  color: var(--px-white) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  font-size: 8px !important;
  padding: 6px 12px !important;
  transition: all 0.1s;
}
[role="tab"][aria-selected="true"],
[class*="tab-active"], [class*="active"][role="tab"] {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  border-color: var(--px-cyan) !important;
}
[role="tab"]:hover:not([aria-selected="true"]) {
  border-color: var(--px-cyan) !important;
  background: var(--px-dim) !important;
}

/* ── ALERTS & TOASTR ── */
.toast, [class*="alert"] {
  border-radius: 0 !important;
  border-left: 4px solid var(--px-cyan) !important;
  background: var(--px-bg2) !important;
  color: var(--px-white) !important;
}
.toast-success { border-left-color: var(--px-green) !important; }
.toast-error { border-left-color: var(--px-red) !important; }
.toast-warning { border-left-color: var(--px-yellow) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--px-bg); }
::-webkit-scrollbar-thumb {
  background: var(--px-cyan);
  border-radius: 0;
  box-shadow: inset 0 0 4px rgba(0,255,255,0.5);
}
::-webkit-scrollbar-thumb:hover { background: var(--px-yellow); }

/* ── PIXEL DECORATIONS ── */

/* Blinking cursor animation */
@keyframes px-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* Glow pulse */
@keyframes px-glow {
  0%, 100% { box-shadow: var(--px-shadow); }
  50% { box-shadow: 0 0 0 3px var(--px-cyan), 0 0 20px var(--px-cyan), 0 0 40px rgba(0,255,255,0.4); }
}
/* Float up */
@keyframes px-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
/* Scanline slide */
@keyframes px-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
/* Text flicker */
@keyframes px-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 99% { opacity: 0.4; }
}

/* ── BADGES & LABELS ── */
.badge, [class*="badge"],
span[class*="font-semibold"][class*="rounded"] {
  border-radius: 0 !important;
  border: 2px solid currentColor !important;
  font-size: 7px !important;
  font-family: var(--px-font) !important;
  text-transform: uppercase;
}

/* ── SEPARATORS / DIVIDERS ── */
hr, .divider, [class*="divider"] {
  border-color: var(--px-cyan) !important;
  border-style: dashed !important;
  opacity: 0.4;
}
.bg-primary-400 {
  background: var(--px-cyan) !important;
}

/* ── TABLE ── */
table {
  border: 2px solid var(--px-cyan) !important;
  border-collapse: collapse !important;
}
th {
  background: var(--px-bg3) !important;
  color: var(--px-cyan) !important;
  border: 1px solid rgba(0,255,255,0.3) !important;
  font-size: 8px !important;
  text-transform: uppercase;
}
td {
  border: 1px solid rgba(0,255,255,0.15) !important;
  color: var(--px-white) !important;
  font-size: 8px !important;
}
tr:hover td { background: var(--px-dim) !important; }

/* ── LOADING PLACEHOLDER ── */
.ph-item, [class*="placeholder"] {
  background: var(--px-bg2) !important;
  border: 2px solid rgba(0,255,255,0.15) !important;
}
.ph-avatar, .ph-row > div {
  background: linear-gradient(90deg, var(--px-bg2) 25%, rgba(0,255,255,0.1) 50%, var(--px-bg2) 75%) !important;
  background-size: 200% 100% !important;
  animation: ph-slide 1.5s infinite ease-in-out !important;
}
@keyframes ph-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── PIXEL COIN (navbar balance) ── */
.px-coin-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  font-size: 10px;
  animation: px-coin-spin 1.2s infinite linear;
}
@keyframes px-coin-spin {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); opacity: 0.3; }
  100% { transform: rotateY(0deg); }
}

/* ── SWEETALERT2 OVERRIDE ── */
.swal2-popup {
  background: var(--px-bg2) !important;
  border: 3px solid var(--px-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--px-cyan) !important;
  font-family: var(--px-font) !important;
}
.swal2-title {
  color: var(--px-cyan) !important;
  font-family: var(--px-font) !important;
  font-size: 14px !important;
}
.swal2-content, .swal2-html-container {
  color: var(--px-white) !important;
  font-family: var(--px-font) !important;
  font-size: 9px !important;
}
.swal2-confirm {
  background: transparent !important;
  border: 2px solid var(--px-cyan) !important;
  color: var(--px-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-cyan) !important;
  font-family: var(--px-font) !important;
  font-size: 9px !important;
}
.swal2-confirm:hover {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  box-shadow: none !important;
}
.swal2-cancel {
  background: transparent !important;
  border: 2px solid var(--px-magenta) !important;
  color: var(--px-magenta) !important;
  border-radius: 0 !important;
  font-family: var(--px-font) !important;
  font-size: 9px !important;
}

/* ── SPECIFIC PAGE OVERRIDES ── */

/* Invoice */
[class*="invoice"], dt, dd {
  font-family: var(--px-font) !important;
  font-size: 8px !important;
}

/* Rating stars */
[class*="bintang"] {
  color: var(--px-yellow) !important;
  text-shadow: 0 0 4px var(--px-yellow);
}

/* Leaderboard */
[class*="leaderboard"] th:first-child {
  color: var(--px-yellow) !important;
}

/* Dashboard member balance */
[class*="text-primary-500"][class*="text-\[24px\]"],
[class*="text-primary-500"][class*="font-bold"] {
  color: var(--px-yellow) !important;
  text-shadow: 0 0 8px var(--px-yellow);
  font-size: 16px !important;
}

/* Nav items active */
[href="/id"] [class*="active"],
a[class*="active"] {
  color: var(--px-yellow) !important;
  border-color: var(--px-yellow) !important;
}

/* Price list section */
[class*="pricelist"] table thead th {
  background: var(--px-bg3) !important;
  color: var(--px-cyan) !important;
}

/* ── PIXEL ART DECORATIVE ELEMENTS ── */

/* Footer pixel line */
footer::before {
  content: '';
  display: block;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--px-cyan) 0px, var(--px-cyan) 8px,
    transparent 8px, transparent 16px,
    var(--px-magenta) 16px, var(--px-magenta) 24px,
    transparent 24px, transparent 32px
  );
  margin-bottom: 16px;
}

/* PRESS START blinking on search */
#lottie-container span {
  font-size: 8px !important;
  color: rgba(0,255,255,0.5) !important;
}
#lottie-container::before {
  content: '[ INSERT COIN ]';
  display: block;
  color: var(--px-yellow);
  font-family: var(--px-font);
  font-size: 9px;
  text-align: center;
  animation: px-blink 1s infinite;
  margin-bottom: 8px;
}

/* ── RESPONSIVE FIXES ── */
@media (max-width: 640px) {
  body { font-size: 8px; }
  header::before { font-size: 6px; letter-spacing: 0.1em; }
  h1, h2, h3 { font-size: 10px !important; }
}

/* ── CONTAINER PADDING ── */
.container {
  padding-left: 12px;
  padding-right: 12px;
}

/* ── Z-INDEX FIX for scanline ── */
.swal2-container { z-index: 99999 !important; }

/* ============================================================
   EXTENDED ARCADE COVERAGE
   ============================================================ */

/* ── AUTH PAGES (login / register / forgot) ── */
/* Form cabinet */
form[class*="max-w"], form.my-form,
[class*="grid"][class*="place-items-center"] form,
main form {
  background: var(--px-bg2) !important;
  border: 3px solid var(--px-cyan) !important;
  box-shadow: 6px 6px 0 var(--px-cyan), 0 0 20px rgba(0,255,255,0.15) !important;
  padding: 20px !important;
}
form[class*="max-w"]::before {
  content: '◄ INSERT COIN ►';
  display: block;
  text-align: center;
  color: var(--px-yellow);
  font-family: var(--px-font);
  font-size: 9px;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  animation: px-blink 2s infinite;
}
/* Auth labels */
form label, label[for] {
  color: var(--px-cyan) !important;
  font-family: var(--px-font) !important;
  font-size: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
/* Auth section titles */
[class*="font-bold"][class*="text-2xl"],
[class*="text-3xl"][class*="font-bold"] {
  color: var(--px-cyan) !important;
  text-shadow: 0 0 10px var(--px-cyan);
  font-size: 14px !important;
  letter-spacing: 0.05em;
}

/* ── ORDER / PRODUCT PAGE ── */
/* Product/item selection */
[class*="grid"][class*="lg:grid-cols"] a,
[class*="cursor-pointer"] [class*="rounded"],
div[class*="border"][class*="hover"] {
  transition: all 0.12s !important;
}
[class*="selected"], [class*="active"] [class*="rounded"] {
  border-color: var(--px-cyan) !important;
  box-shadow: 3px 3px 0 var(--px-cyan) !important;
  background: var(--px-dim) !important;
}
/* Price display */
[class*="Rp"], [class*="text-primary-500"][class*="font-bold"],
[class*="font-bold"][class*="text-foreground"] {
  color: var(--px-yellow) !important;
  text-shadow: 0 0 6px rgba(255,238,0,0.5);
}

/* ── PRICE LIST PAGE ── */
[class*="pricelist"] th,
table th {
  background: var(--px-bg3) !important;
  color: var(--px-yellow) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[class*="pricelist"] tr:hover td {
  background: var(--px-dim) !important;
}

/* ── INVOICE / CONFIRMATION ── */
[class*="invoice"], [class*="invoicedeposit"] {
  border: 3px solid var(--px-cyan) !important;
  box-shadow: 6px 6px 0 var(--px-cyan) !important;
  background: var(--px-bg2) !important;
}
[class*="invoice"] dt {
  color: var(--px-cyan) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[class*="invoice"] dd {
  color: var(--px-white) !important;
}

/* ── HOME: category items & tabs (melpazoom/melpaSlideUp/tab-button) ── */
.melpazoom, .melpaSlideUp, .category-item {
  transition: all 0.12s !important;
}
#content-melpa a:hover,
#game .category-item:hover,
#headlessui-tabs-panel-game .category-item:hover {
  border-color: var(--px-cyan) !important;
  box-shadow: 4px 4px 0 var(--px-cyan) !important;
  transform: translate(-2px,-2px) !important;
}
.tab-button {
  border-radius: 0 !important;
  border: 2px solid var(--px-cyan) !important;
  background: transparent !important;
  color: var(--px-white) !important;
  text-transform: uppercase;
  font-size: 8px !important;
  letter-spacing: 0.05em;
  margin-right: 4px !important;
  box-shadow: 2px 2px 0 var(--px-cyan) !important;
}
.tab-button:hover {
  background: var(--px-dim) !important;
  color: var(--px-cyan) !important;
}
.tab-button.active {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  box-shadow: none !important;
  transform: translate(2px,2px);
}

/* ── MEMBER AREA (dashboard / riwayat / deposit / profile) ── */
/* Sidebar menu */
aside a, [class*="sidebar"] a {
  border: 1px solid rgba(0,255,255,0.15) !important;
  border-radius: 0 !important;
  margin-bottom: 3px;
  transition: all 0.1s;
}
aside a:hover, [class*="sidebar"] a:hover {
  background: var(--px-dim) !important;
  border-color: var(--px-cyan) !important;
}
/* Member cards */
[class*="grid"][class*="grid-cols-3"] > div,
[class*="card"],
[class*="rounded-lg"][class*="border"] {
  border: 2px solid rgba(0,255,255,0.25) !important;
  background: var(--px-bg2) !important;
}

/* ── LEADERBOARD ── */
[class*="leaderboard"] tr:first-child td,
[class*="leaderboard"] tr:nth-child(2) td {
  color: var(--px-yellow) !important;
}

/* ── RATING / REVIEWS ── */
[class*="rating"] [class*="star"], [class*="bintang"] {
  color: var(--px-yellow) !important;
  filter: drop-shadow(0 0 3px var(--px-yellow));
}

/* ── BREADCRUMB ── */
[class*="breadcrumb"] {
  color: var(--px-cyan) !important;
  font-size: 8px !important;
}
[class*="breadcrumb"] a {
  color: rgba(0,255,255,0.6) !important;
}
[class*="breadcrumb"] a:hover { color: var(--px-yellow) !important; }

/* ── PAGINATION ── */
[class*="pagination"] a, [class*="pagination"] span, .pagination li a {
  background: var(--px-bg2) !important;
  border: 2px solid var(--px-cyan) !important;
  color: var(--px-cyan) !important;
  border-radius: 0 !important;
  margin: 0 2px !important;
  font-size: 8px !important;
  padding: 4px 8px !important;
  transition: all 0.1s;
}
[class*="pagination"] a:hover, .pagination li a:hover,
[class*="pagination"] .active {
  background: var(--px-cyan) !important;
  color: var(--px-bg) !important;
  box-shadow: none !important;
  transform: translate(2px,2px);
}

/* ── BOOTSTRAP MODAL ── */
.modal-content {
  background: var(--px-bg2) !important;
  border: 3px solid var(--px-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--px-cyan) !important;
}
.modal-header { border-bottom: 2px solid var(--px-cyan) !important; }
.modal-footer { border-top: 2px solid var(--px-cyan) !important; }
.modal-title {
  color: var(--px-cyan) !important;
  font-family: var(--px-font) !important;
  font-size: 10px !important;
  text-transform: uppercase;
}
.close { color: var(--px-cyan) !important; text-shadow: none !important; }

/* ── CALCULATOR PAGES (magic wheel / zodiac / winrate) ── */
[class*="calculator"], [class*="hitung"],
main section[class*="calculator"] {
  border: 2px solid rgba(255,0,255,0.3) !important;
  background: var(--px-bg2) !important;
}

/* ── NAVBAR SEARCH & MENU mobile ── */
[class*="resultsearch"] {
  background: var(--px-bg2) !important;
  border: 2px solid var(--px-cyan) !important;
  box-shadow: 4px 4px 0 var(--px-cyan) !important;
}

/* ============================================================
   LEGIBILITY FIXES (Dark theme readability)
   ============================================================ */

/* 1) Paksa teks gelap jadi terang agar terbaca di background navy/indigo */
.text-black, .text-gray, .text-gray-900, .text-gray-800, .text-gray-700,
.text-neutral-900, .text-neutral-800, .text-neutral-700,
.text-murky-900, .text-murky-800, .text-murky-700, .text-murky-600,
.text-murky-500, .text-murky-400, .text-murky-300, .text-murky-200, .text-murky-100,
.text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500,
.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-600, .text-zinc-500,
.text-secondary-900, .text-secondary-800, .text-secondary-700,
.text-primary-900, .text-primary-800,
.text-foreground-900 {
  color: #ffffff !important;
}
/* Sub-text warna gelap muda → cyan & kuning terang agar 100% terbaca */
.text-gray-600, .text-gray-500, .text-neutral-600, .text-neutral-500,
.text-murky-500, .text-murky-400, .text-murky-300, .text-murky-200,
.text-slate-500, .text-zinc-500, .text-xxs, small, .text-muted {
  color: #00f0ff !important;
  font-weight: 500 !important;
}
/* Badges Instant, Terverifikasi, Sub-nama */
.bg-title-product span, .bg-title-product p, [class*="bg-title"] span {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.6) !important;
}

/* 2) Logo e-wallet / metode bayar: beri chip terang agar jelas di bg gelap */
img[src*="payment"], img[src*="payment/"],
img[alt*="QRIS"], img[alt*="DANA"], img[alt*="GOPAY"], img[alt*="GoPay"],
img[alt*="SHOPEEPAY"], img[alt*="OVO"], img[alt*="LINKAJA"], img[alt*="LINK"],
img[alt*="VIRGO"], img[alt*="ASTRAPAY"], img[alt*="DANAMON"],
img[alt*="PERMATA"], img[alt*="BCA"], img[alt*="BNI"], img[alt*="MANDIRI"],
img[alt*="BRI"], img[alt*="CIMB"], img[alt*="BSI"], img[alt*="ALFAMART"],
img[alt*="INDOMARET"], img[alt*="QRIS"], img[alt*="Shopeepay"] {
  background: #ffffff !important;
  border-radius: 3px !important;
  padding: 2px !important;
  filter: brightness(1.05) contrast(1.05);
}

/* FIX DISCOUNT OFF RIBBON BADGE & SECTION NUMBER BOXES */
.w-square-diagonal, [class*="w-square-diagonal"], .bg-hemat {
    background: linear-gradient(135deg, #ff007f 0%, #ff3355 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0 2px 8px rgba(255, 0, 127, 0.5) !important;
}

.clip-path-number {
    background: linear-gradient(135deg, #00f0ff 0%, #00a8cc 100%) !important;
    color: #050a14 !important;
    font-weight: 900 !important;
}
.clip-path-number span, .clip-path-number svg {
    color: #050a14 !important;
    fill: #050a14 !important;
}

/* Fix Instant Delivery SVG Badge in nominal item cards */
div.mt-1.flex.items-center.h-full.rounded.bg-white {
    background-color: #ffffff !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}
div.mt-1.flex.items-center.h-full.rounded.bg-white svg path {
    fill: #059669 !important;
}

/* 3) Input ID & Server: jelas di tema gelap (atasi !bg-murky-200 terang) */
#user_id, #zone_id, input[name="user_id"], input[name="zone_id"], input.form-control {
  background: var(--px-bg3) !important;
  border: 1px solid rgba(0,255,255,0.45) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  caret-color: var(--px-cyan);
}
#user_id::placeholder, #zone_id::placeholder,
input[name="user_id"]::placeholder, input[name="zone_id"]::placeholder,
input.form-control::placeholder {
  color: rgba(255,255,255,0.55) !important;
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-size: 13px !important;
}
#user_id:focus, #zone_id:focus,
input[name="user_id"]:focus, input[name="zone_id"]:focus,
input.form-control:focus {
  border-color: var(--px-cyan) !important;
  box-shadow: 0 0 10px rgba(0,255,255,0.5) !important;
  outline: none !important;
}

/* 4) Harga paket → hijau neon agar menarik & kontras */
.hargapembayaran,
[class*="harga"][class*="text"],
[class*="price"][class*="text"],
h6[class*="harga"] {
  color: #39ff14 !important;
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-shadow: 0 0 8px rgba(57,255,20,0.6);
}

/* 5) Judul deskripsi: boleh wrap & terpasang di mobile */
[class*="title-description"], [class*="desc-title"],
h2, h3, h4 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* 6) Teks ulasan/rating: sans-serif agar mudah dibaca */
[class*="rating"], [class*="ulasan"], [class*="review"],
[class*="rating-desc"], [class*="rating"] p, [class*="ulasan"] p {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* 7) Line-height deskripsi & syarat biar nyaman dibaca */
[class*="deskripsi"], [class*="description"], [class*="ketentuan"],
[class*="petunjuk"], .prose p {
  line-height: 1.5 !important;
}

/* ============================================================
   SYNTHWAVE ARCADE — component polish
   ============================================================ */

/* Arcade 3D button: tebal di bawah + efek tekan turun saat diklik */
.tab-button, .tab-filter-btn {
  border-bottom: 6px solid var(--px-cyan) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
button:active, .btn:active, .tab-button:active, .tab-filter-btn:active,
[class*="btn-"]:active, .search-button:active {
  transform: translateY(4px) !important;
  box-shadow: none !important;
  border-bottom-width: 2px !important;
}

/* Neon tube glow pada kartu game grid (hover → pink), hanya dalam #game */
#game .category-item, .product-card-item, .item,
[class*="grid"][class*="lg:grid-cols"] a[class*="group"],
[class*="grid"][class*="grid-cols"] a[class*="group"] {
  transition: all 0.25s cubic-bezier(0.175,0.885,0.32,1.275) !important;
}
#game .category-item:hover, .product-card-item:hover, .item:hover,
[class*="grid"][class*="lg:grid-cols"] a[class*="group"]:hover,
[class*="grid"][class*="grid-cols"] a[class*="group"]:hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: var(--px-magenta) !important;
  box-shadow:
    0 10px 25px -10px var(--px-magenta),
    0 0 15px 3px rgba(255,0,127,0.35),
    inset 0 0 15px rgba(255,0,127,0.15) !important;
}

/* Smooth hover: zoom image + lift (kartu game grid) */
#game .category-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
#game .category-item img {
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1) !important;
  transform: scale(1);
  will-change: transform;
}
#game .category-item:hover img {
  transform: scale(1.09) !important;
}
#game .category-item .bg-murky-900 {
  transition: background-color 0.3s ease !important;
}
#game .category-item:hover .bg-murky-900 {
  background-color: #ff007f22 !important;
}

/* Harga paket tetap hijau neon (kontras & menarik) */
.hargapembayaran {
  color: #39ff14 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(57,255,20,0.6) !important;
  line-height: 1.4 !important;
}

/* ============================================================
   PERBESAR LOGO E-WALLET / METODE BAYAR (halaman order)
   ============================================================ */
/* Kontainer logo metode bayar (aspect-[6/2] w-10) diperbesar */
div[class*="aspect-[6/2]"] {
  width: 64px !important;
  height: 22px !important;
  aspect-ratio: auto !important;
}
div[class*="aspect-[6/2]"] img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  inset: auto !important;
}

/* ============================================================
   MOBILE MODAL RESPONSIVE (hindari terpotong di layar kecil)
   ============================================================ */
@media (max-width: 768px) {
  .relative.z-50 [role="dialog"] > div,
  div[class*="modal-content"],
  .modal-dialog,
  [class*="popup"][class*="sm:max-w"],
  [class*="overflow-y-auto"] [class*="max-w"] {
    width: 90% !important;
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Modal info produk (WEEKLY DIAMOND PASS dll) */
  #popupdppp, [id*="popup"] {
    padding: 0 !important;
  }
  #popupdppp .popup-content,
  [id*="popup"] .popup-content {
    width: 92% !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   EQUAL HEIGHT CARD — HANYA grid game (bukan tombol/populer)
   ============================================================ */
#headlessui-tabs-panel-game a[class*="melpazoom"],
#game a[class*="melpazoom"] {
  height: 100% !important;
}
#game .category-item {
  height: 100% !important;
  /* TIDAK memaksa display:flex !important — biar JS "Tampilkan Lainnya" bisa
     toggle visibility via style.display (block/none) */
}
#game .category-item h2 {
  min-height: 40px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
}

/* Fix payment accordion preview logos cutoff */
[x-ref*="logo"] {
    max-height: 48px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: visible !important;
}
[x-ref*="logo"] img {
    max-height: 24px !important;
    object-fit: contain !important;
}

/* ============================================================
   UNIFIED DUAL-NEON BORDER (CYAN BLUE & ACID RED/PINK) ACROSS ALL SECTIONS
   ============================================================ */

/* 0. Navbar & Header */
header, nav, .navbar {
    border-bottom: 3px solid #00f0ff !important;
    box-shadow: 0 4px 0 #ff007f, 0 0 20px rgba(0, 240, 255, 0.4) !important;
}

/* 1. Main Sections, Step Cards, & Section Wrappers */
.rounded-xl.bg-murky-800,
#section-payment-channel,
form[class*="max-w"],
[class*="invoice"],
[class*="invoicedeposit"] {
    border: 3px solid #00f0ff !important;
    box-shadow: 4px 4px 0 #ff007f, 0 0 15px rgba(0, 240, 255, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* Strip duplicate inner borders inside section containers */
.rounded-xl.bg-murky-800 > div,
#section-payment-channel > div {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* 2. All Cards (Game Cards, Flash Sale Cards, Nominal Cards, & Payment Method Cards) */
.product-list,
.method-list,
.item-card,
#game .category-item,
.item,
[data-item-theme],
.payment-method,
#specialList > div,
#eWalletList > div,
#paymentList > div,
div[role="radio"],
div[method-id],
div[product-id],
div[class*="product-list"],
div[class*="method-list"],
div[class*="bg-murky-200"],
div[class*="bg-murky-600"],
.accordion-header {
    border: 2px solid #00f0ff !important;
    box-shadow: 3px 3px 0 #ff007f, 0 0 10px rgba(0, 240, 255, 0.35) !important;
    border-radius: 8px !important;
}

/* Hover State on All Cards */
.product-list:hover,
.method-list:hover,
.item-card:hover,
#game .category-item:hover,
.item:hover,
[data-item-theme]:hover,
.payment-method:hover,
div[role="radio"]:hover,
div[method-id]:hover,
div[product-id]:hover {
    border-color: #ff007f !important;
    box-shadow: 3px 3px 0 #00f0ff, 0 0 18px rgba(255, 0, 127, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Selected Product Item / Selected Payment Method */
.product-list.ring-2,
.method-list.ring-2,
div[class*="ring-primary-500"],
.product-list[class*="ring-2"],
.method-list[class*="ring-2"],
div[role="radio"][class*="ring-2"],
div[class*="bg-white"][class*="bj-shadow"] {
    border-color: #ff007f !important;
    box-shadow: 3px 3px 0 #00f0ff, 0 0 18px rgba(255, 0, 127, 0.7) !important;
    background: rgba(255, 0, 127, 0.08) !important;
}

/* 3. Category Buttons & Tabs */
.tab-button,
.button-3d,
.nav-pills .nav-link,
.btn-category {
    border: 2px solid #00f0ff !important;
    box-shadow: 3px 3px 0 #ff007f !important;
    border-radius: 6px !important;
}

.tab-button:hover,
.button-3d:hover,
.nav-pills .nav-link.active,
.btn-category.active {
    border-color: #ff007f !important;
    box-shadow: 3px 3px 0 #00f0ff !important;
    background: #ff007f !important;
    color: #ffffff !important;
}

/* 4. Form Inputs & Search Bars */
#user_id, #zone_id, input[name="user_id"], input[name="zone_id"], input.form-control, .search-input {
    border: 2px solid #00f0ff !important;
    box-shadow: 3px 3px 0 #ff007f !important;
    border-radius: 6px !important;
}

#user_id:focus, #zone_id:focus, input.form-control:focus, .search-input:focus {
    border-color: #ff007f !important;
    box-shadow: 3px 3px 0 #00f0ff, 0 0 12px rgba(255, 0, 127, 0.5) !important;
}

/* X close button — Retro Pixel-Art (border cyan + shadow magenta + tekan) */
[x-ref="closeButton"],
button:has(.lucide-x),
button:has(svg path[d="M6 18L18 6M6 6l12 12"]) {
    border: 3px solid #00f0ff !important;
    box-shadow: 3px 3px 0 #ff007f !important;
    border-radius: 4px !important;
    background: #0d1220 !important;
    color: #00f0ff !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}
[x-ref="closeButton"] svg,
button:has(.lucide-x) svg,
button:has(svg path[d="M6 18L18 6M6 6l12 12"]) svg {
    width: 18px !important;
    height: 18px !important;
}
[x-ref="closeButton"]:hover,
button:has(.lucide-x):hover {
    border: 3px solid #ff007f !important;
    box-shadow: 3px 3px 0 #00f0ff !important;
    background: #ff007f !important;
    color: #ffffff !important;
    transform: translate(2px,2px) !important;
}

/* 5. Footer Bar */
footer {
    border-top: 3px solid #00f0ff !important;
    box-shadow: 0 -4px 0 #ff007f, 0 0 20px rgba(0, 240, 255, 0.3) !important;
}