:root{
  --accent: #00ff88;          /* Neon Green Gaming */
  --accent-2: #ff00ff;        /* Neon Magenta Gaming */
  --glass: rgba(255,255,255,0.08);
  --card-grad: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(255,0,255,0.2));
}

/* Background pakai gambar */
body {
  background: 
    linear-gradient(rgba(10,10,25,0.75), rgba(10,10,25,0.75)),
    url('banner/Baground_gaming1.webp') no-repeat center center fixed;
    
  background-size: cover;
  color: #e0e0e0;
}

/* Animasi grid bergerak */
@keyframes gridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 50px 50px, 25px 25px; }
}

/* Animasi pulse neon gaming */
@keyframes gridPulse {
  0% { opacity: 0.4; box-shadow: 0 0 20px rgba(0,255,136,0.4); }
  100% { opacity: 0.7; box-shadow: 0 0 40px rgba(0,255,136,0.6), 0 0 40px rgba(255,0,255,0.5); }
}

/* Partikel gaming */
@keyframes particleFall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(100vh) rotate(360deg); }
}

.font-gaming {
  font-family: 'Orbitron', 'Rajdhani', monospace;
}

.sticky-etalase {
  position: sticky;
  top: 65px;
  z-index: 400;
  backdrop-filter: blur(12px);
  background: rgba(15,15,35,0.9);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 20px;
  padding: 12px 18px;
  box-shadow: 0 0 30px rgba(0,255,136,0.2);
}

/* Header Gaming Shop */
header.site-top {
  backdrop-filter: blur(15px);
  background: linear-gradient(90deg, rgba(15,15,35,0.95), rgba(25,25,55,0.9));
  border-bottom: 2px solid rgba(0,255,136,0.5);
  box-shadow: 0 0 30px rgba(0,255,136,0.3);
}

/* Neon text gaming super glow */
.neon-text {
  color: #fff;
  text-shadow:
    0 0 10px #00ff88,
    0 0 20px #00ff88,
    0 0 30px #ff00ff,
    0 0 40px #ff00ff;
  animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {
  0% { text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 30px #ff00ff; }
  100% { text-shadow: 0 0 15px #00ff88, 0 0 25px #00ff88, 0 0 35px #ff00ff, 0 0 45px #ff00ff; }
}

/* Card Game - Gaming Shop Neon */
.card-game {
  background: linear-gradient(
    135deg,
    rgba(0,255,136,0.2),
    rgba(255,0,255,0.15)
  );
  border: 2px solid rgba(0,255,136,0.5);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  box-shadow:
    0 15px 35px rgba(0,0,0,0.7),
    0 0 30px rgba(0,255,136,0.3),
    inset 0 0 20px rgba(255,255,255,0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.card-game::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.2), transparent);
  transition: left 0.5s;
}

.card-game:hover::before {
  left: 100%;
}

.card-game:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.8),
    0 0 50px rgba(0,255,136,0.5),
    0 0 70px rgba(255,0,255,0.4);
}

/* Price tag gaming neon */
.price-tag {
  background: linear-gradient(90deg, rgba(0,255,136,0.3), rgba(255,0,255,0.25));
  border-left: 5px solid #00ff88;
  color: #fff;
  box-shadow: 0 0 20px rgba(0,255,136,0.4);
}

/* Badge gaming */
.badge-mode {
  padding: 0.4rem 0.8rem;
  border-radius: 25px;
  font-weight: 800;
  font-size: 0.8rem;
  background: linear-gradient(45deg, #00ff88, #ff00ff);
  box-shadow: 0 0 20px rgba(0,255,136,0.6);
  color: #000;
}

/* Button gaming neon */
.btn-neon {
  background: linear-gradient(45deg, #00ff88, #ff00ff, #00ff88);
  background-size: 300% 300%;
  animation: gradientShift 3s ease infinite;
  box-shadow: 
    0 8px 25px rgba(0,255,136,0.5),
    0 0 30px rgba(255,0,255,0.3);
  color: #000;
  font-weight: 800;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-neon:hover {
  animation-play-state: paused;
  transform: scale(1.05);
  box-shadow: 
    0 12px 35px rgba(0,255,136,0.7),
    0 0 50px rgba(255,0,255,0.6);
}

img[loading="lazy"] {
  filter: blur(8px) brightness(0.7);
  transition: all .4s ease;
}

img[loading="lazy"].loaded {
  filter: blur(0) brightness(1);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* POPUP FIX - POSISI ASLI + Z-INDEX MAX */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7); / gelap */
z-index: 9998;
}

/* GAMING SHOP POPUP - POSISI ASLI */
.newyear-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: linear-gradient(135deg, #0a0a20, #001133, #00ff88) !important;
  border: 3px solid #00ff88 !important;
  border-radius: 25px !important;
  padding: 30px !important;
  max-width: 90vw !important;
  width: 420px !important;
  text-align: center !important;
  box-shadow: 
    0 30px 80px rgba(0,0,0,0.95),
    0 0 80px rgba(0,255,136,0.7) !important;
  z-index: 2147483647 !important; /* MAXIMUM */
  color: #fff !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: gamingPopup 0.6s ease-out !important;
}

.newyear-popup .close-btn {
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(45deg, #ff00ff, #00ff88) !important;
  border: 4px solid #fff !important;
  cursor: pointer !important;
  font-size: 26px !important;
  font-weight: bold !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(255,0,255,0.8) !important;
  transition: all 0.3s ease !important;
  z-index: 2147483647 !important;
}

.newyear-popup .close-btn:hover {
  transform: scale(1.3) rotate(180deg) !important;
  box-shadow: 0 0 50px rgba(0,255,136,1) !important;
}

@media (max-width: 768px) {
.newyear-popup {
width: 80vw;
font-size: 1rem;
padding: 15px;
}
}


/* Hide */
.hidden {
display: none;
}

/* STEAM POPUP JUGA */
.steam-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460) !important;
  border: 3px solid #ff00ff !important;
  border-radius: 20px !important;
  padding: 25px !important;
  width: 450px !important;
  max-width: 95vw !important;
  text-align: center !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 60px rgba(255,0,255,0.6) !important;
  z-index: 2147483646 !important; /* 1 dibawah newyear */
  color: #fff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* PASTIKAN TIDAK ADA YANG NGEBLOCK */
.hidden {
  display: none !important;
}

.steam-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #1b1b1b;
border: 2px solid #ff4d4d;
border-radius: 16px;
padding: 20px;
width: 420px;
max-width: 90vw;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
z-index: 10000; /* lebih tinggi dari promo */
color: #fff;
font-size: 1rem;
font-weight: normal;
}


.steam-popup h3 {
color: #ff4d4d;
margin-bottom: 10px;
}


.steam-popup a {
color: #ffd966;
word-break: break-all;
}


.agree-btn {
margin-top: 15px;
padding: 10px 18px;
background: #ff4d4d;
border: none;
border-radius: 10px;
color: white;
font-weight: bold;
cursor: pointer;
}


.agree-btn:hover {
opacity: 0.9;
}

/* Gaming Moon - Neon Orb */
.moon {
  background: radial-gradient(circle, #00ff88, #ff00ff);
  box-shadow: 
    -30px 0 0 15px #0a0a20,
    0 0 50px rgba(0,255,136,0.6),
    0 0 100px rgba(255,0,255,0.4);
  animation: moonPulse 3s ease-in-out infinite alternate;
}

@keyframes moonPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Gaming Scroll To Top */
#btnTop {
  background: linear-gradient(135deg, #00ff88, #ff00ff);
  color: #000;
  border: 3px solid #fff;
  font-weight: 900;
  text-shadow: none;
  box-shadow: 
    0 0 25px rgba(0,255,136,0.8),
    0 0 50px rgba(255,0,255,0.6);
}

#btnTop:hover {
  background: linear-gradient(135deg, #ff00ff, #00ff88);
  box-shadow: 
    0 0 40px rgba(0,255,136,1),
    0 0 70px rgba(255,0,255,0.8);
  transform: translateY(-8px) scale(1.1) rotate(360deg);
}