/* ═══════════════════════════════════════════════════════════════
   🌌 GLOBAL & BASE
   ═══════════════════════════════════════════════════════════════ */
:root {
  --depth-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --depth-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --depth-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.3);
  --depth-4: 0 8px 16px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45), 0 32px 80px rgba(0, 0, 0, 0.35);
  --glow-indigo: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.2);
  --glow-emerald: 0 0 20px rgba(16, 185, 129, 0.4), 0 0 40px rgba(16, 185, 129, 0.2);
  --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.4), 0 0 40px rgba(34, 211, 238, 0.2);
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(99, 102, 241, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(16, 185, 129, 0.1), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(30, 41, 59, 0.8), transparent 80%),
    #020617;
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}

nav, main, footer, .glass-nav, header {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   💎 GLASS CARD 3D — realistis dengan highlight atas & depth
   ═══════════════════════════════════════════════════════════════ */
.glass-card {
  position: relative;
  background:
    linear-gradient(145deg,
      rgba(30, 41, 59, 0.85) 0%,
      rgba(15, 23, 42, 0.75) 50%,
      rgba(2, 6, 23, 0.85) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    var(--depth-3);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Highlight diagonal khas 3D glossy */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    transparent 100%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Border cahaya tipis di tepi */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 30%,
    transparent 70%,
    rgba(99, 102, 241, 0.15) 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;
  z-index: 2;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    var(--depth-4),
    0 0 40px rgba(99, 102, 241, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   🧭 GLASS NAV 3D
   ═══════════════════════════════════════════════════════════════ */
.glass-nav {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.95) 0%,
      rgba(2, 6, 23, 0.9) 100%);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -8px 24px rgba(0, 0, 0, 0.5),
    0 -20px 60px rgba(99, 102, 241, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   🎯 NAVBAR ATAS (top sticky)
   ═══════════════════════════════════════════════════════════════ */
nav.sticky, nav[class*="border-b"] {
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(2, 6, 23, 0.88) 100%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Logo icon 3D */
nav .w-10.h-10,
nav .rounded-xl {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(99, 102, 241, 0.5),
    0 8px 24px rgba(99, 102, 241, 0.3);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav .w-10.h-10:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 18px rgba(99, 102, 241, 0.7),
    0 12px 32px rgba(99, 102, 241, 0.4);
}

/* Nav buttons 3D */
.nav-btn {
  position: relative;
  padding: 8px 14px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.nav-btn.active {
  background: rgba(99, 102, 241, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   🔘 BUTTONS 3D — dengan gradient + hard inset shadow
   ═══════════════════════════════════════════════════════════════ */
button[type="submit"],
#btn-cancel-qris {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button[type="submit"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}

button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

button[type="submit"]:active {
  transform: translateY(1px) scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════
   💰 BALANCE CARD — efek holografik premium
   ═══════════════════════════════════════════════════════════════ */
#tab-dashboard > .glass-card:first-child {
  background:
    linear-gradient(135deg,
      rgba(16, 185, 129, 0.15) 0%,
      rgba(30, 41, 59, 0.9) 30%,
      rgba(15, 23, 42, 0.85) 60%,
      rgba(99, 102, 241, 0.12) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    var(--depth-3),
    0 0 60px rgba(16, 185, 129, 0.15);
}

#tab-dashboard > .glass-card:first-child::before {
  background:
    radial-gradient(circle at 20% 0%, rgba(16, 185, 129, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 60%);
}

#user-balance {
  text-shadow:
    0 0 20px rgba(16, 185, 129, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

/* Icon wallet 3D */
#tab-dashboard > .glass-card:first-child .w-16.h-16 {
  background: linear-gradient(145deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(16, 185, 129, 0.5),
    0 16px 48px rgba(16, 185, 129, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🖼️ QRIS BOX 3D
   ═══════════════════════════════════════════════════════════════ */
#qris-box {
  background:
    linear-gradient(145deg,
      rgba(2, 6, 23, 0.95) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(16, 185, 129, 0.15) !important;
}

#qris-amount {
  text-shadow:
    0 0 20px rgba(16, 185, 129, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

#qris-image {
  border: 4px solid #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 20px 60px rgba(16, 185, 129, 0.3) !important;
  background: white;
  padding: 8px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#qris-image:hover {
  transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════════════════
   📊 HISTORY TABLE 3D
   ═══════════════════════════════════════════════════════════════ */
#history-table tr {
  transition: background 0.2s ease;
}

#history-table tr:hover {
  background: rgba(99, 102, 241, 0.08);
}

#history-table td {
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   📝 FORM INPUTS 3D
   ═══════════════════════════════════════════════════════════════ */
input[type="number"],
input[type="text"],
input[type="password"],
select,
#user-apikey {
  background: linear-gradient(180deg,
    rgba(2, 6, 23, 0.9) 0%,
    rgba(15, 23, 42, 0.7) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: rgba(99, 102, 241, 0.7) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(99, 102, 241, 0.15),
    0 0 20px rgba(99, 102, 241, 0.3) !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   📜 CODE BLOCKS 3D
   ═══════════════════════════════════════════════════════════════ */
pre {
  position: relative;
  background:
    linear-gradient(145deg,
      rgba(2, 6, 23, 0.98) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(34, 211, 238, 0.08) !important;
}

pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.6) 50%,
    transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════
   🏷️ BADGES / PILLS 3D (GET /topup, dsb)
   ═══════════════════════════════════════════════════════════════ */
span[class*="bg-emerald-500/10"],
span[class*="bg-indigo-500/10"],
span[class*="bg-red-500/10"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

span[class*="bg-emerald-500/10"]:hover,
span[class*="bg-indigo-500/10"]:hover,
span[class*="bg-red-500/10"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   📱 MOBILE NAV BUTTONS 3D
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav-btn {
  position: relative;
  padding: 8px 16px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-btn:hover {
  transform: translateY(-3px);
  background: rgba(99, 102, 241, 0.1);
}

.mobile-nav-btn.active,
.mobile-nav-btn[class*="text-indigo-400"] {
  background: linear-gradient(180deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(99, 102, 241, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(99, 102, 241, 0.3);
}

.mobile-nav-btn i {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.mobile-nav-btn.active i,
.mobile-nav-btn[class*="text-indigo-400"] i {
  filter: drop-shadow(0 0 8px currentColor);
}

/* ═══════════════════════════════════════════════════════════════
   🎬 ANIMASI
   ═══════════════════════════════════════════════════════════════ */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      var(--depth-3),
      0 0 30px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      var(--depth-3),
      0 0 60px rgba(16, 185, 129, 0.4);
  }
}

#tab-dashboard > .glass-card:first-child {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   🔔 ALERT BOX 3D
   ═══════════════════════════════════════════════════════════════ */
#topup-alert,
#wd-alert {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

#topup-alert:not(.hidden),
#wd-alert:not(.hidden) {
  border: 1px solid currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   🖱️ SCROLLBAR 3D
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
  border-radius: 6px;
  border: 2px solid rgba(2, 6, 23, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
}

/* ═══════════════════════════════════════════════════════════════
   ✨ EFEK TAMBAHAN — text glow untuk angka & judul penting
   ═══════════════════════════════════════════════════════════════ */
h2, h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

button {
  cursor: pointer;
}