/* ================================
   🌌 FUTURISTIC LASER RTP BAR
   ================================ */
.progress {
  height: 22px;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid #0f0;
  box-shadow: 0 0 10px rgba(0,255,128,0.15), inset 0 0 6px rgba(0,255,128,0.1);
  overflow: hidden;
  position: relative;
}

/* Warna default (akan diubah via JS) */
.progress-bar {
  height: 100%;
  width: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition: width 1.2s ease-in-out, background 0.8s ease-in-out, box-shadow 1s ease;
  background: linear-gradient(90deg, #333 0%, #111 100%);
  position: relative;
  overflow: hidden;
}

/* Efek kilau di dalam bar */
.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0% { left: -50%; }
  100% { left: 120%; }
}

/* Warna dinamis */
.progress-bar.red {
  background: linear-gradient(90deg, #4b0000, #800000);
  box-shadow: 0 0 10px rgba(255,0,0,0.4), inset 0 0 10px rgba(255,0,0,0.3);
}
.progress-bar.yellow {
  background: linear-gradient(90deg, #665c00, #b39800);
  box-shadow: 0 0 10px rgba(255,255,0,0.4), inset 0 0 10px rgba(255,255,0,0.3);
}
.progress-bar.green {
  background: linear-gradient(90deg, #004d1a, #00b359);
  box-shadow: 0 0 10px rgba(0,255,128,0.5), inset 0 0 10px rgba(0,255,128,0.4);
}

.progress-text {
  position: relative;
  z-index: 2;
  font-size: 12px;
}


/* ================================================
   ⚡ LASER PROGRESS BAR SINKRON + EFEK ENERGI HIDUP
   ================================================ */
.progress {
  height: 22px;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid #0f0;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,255,128,0.15), inset 0 0 6px rgba(0,255,128,0.1);
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

.progress-bar {
  position: relative;
  height: 100%;
  width: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0,0,0,0.6);
  border-radius: 4px;
  overflow: hidden;
  transition: width 1.2s ease;
}

/* Efek energi berjalan di dalam bar */
.progress-inner {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 100%);
  animation: energyFlow 2.5s linear infinite;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

@keyframes energyFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Warna dinamis */
.progress-bar.red {
  background: linear-gradient(90deg, #3a0000, #660000);
  box-shadow: 0 0 10px rgba(255,0,0,0.3), inset 0 0 10px rgba(255,0,0,0.2);
}
.progress-bar.yellow {
  background: linear-gradient(90deg, #554b00, #a98a00);
  box-shadow: 0 0 10px rgba(255,255,0,0.3), inset 0 0 10px rgba(255,255,0,0.2);
}
.progress-bar.green {
  background: linear-gradient(90deg, #004d1a, #00b359);
  box-shadow: 0 0 10px rgba(0,255,128,0.4), inset 0 0 10px rgba(0,255,128,0.3);
}

.progress-text {
  z-index: 2;
  position: relative;
  font-size: 12px;
}


.member-count {
  font-weight: 700;
  color: #fff;
  margin-right: 6px;
  display: inline-block;
  min-width: 60px;
  text-align: left;
  transition: color 0.3s ease, transform 0.4s ease;
}
.member-count.up {
  color: #50ff88;
  transform: scale(1.05);
}
.member-count.down {
  color: #ff5555;
  transform: scale(0.95);
}

/* Efek titik sinyal hijau berdenyut seperti radio */
.signal-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #32ff78;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(50, 255, 120, 0.9);
  margin-left: 6px;
}
.signal-dot::before,
.signal-dot::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(50, 255, 120, 0.6);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(1);
  opacity: 0;
  animation: pulse 2s infinite;
}
.signal-dot::after {
  animation-delay: 1s;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}


.pola-jackpot-container {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(10, 20, 10, 0.4);
  box-shadow: 0 0 20px rgba(0,255,0,0.1);
}

/* Efek laser tepi berdenyut */
.pola-jackpot-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #00ff66;
  border-radius: 10px;
  box-shadow: 0 0 15px #00ff66, inset 0 0 8px #00ff66;
  animation: laserGlow 2s infinite ease-in-out alternate;
  pointer-events: none;
}

@keyframes laserGlow {
  0% { opacity: 0.5; box-shadow: 0 0 10px #00ff66, inset 0 0 6px #00ff66; }
  100% { opacity: 1; box-shadow: 0 0 25px #00ff99, inset 0 0 12px #00ff66; }
}

/* Tabs style */
.laser-tabs {
  background: rgba(0, 50, 0, 0.4);
  border-bottom: 1px solid rgba(0,255,0,0.3);
}
.laser-tabs .nav-link {
  color: #fff;
  text-shadow: 0 0 5px #00ff88;
  border-radius: 0;
  transition: all 0.3s ease;
}
.laser-tabs .nav-link.active {
  background: rgba(0,255,100,0.2);
  color: #00ff88;
  box-shadow: inset 0 0 10px #00ff66;
}

/* Content area */
.laser-content {
  padding: 10px;
}

.note-section {
  background: rgba(0,40,0,0.3);
  border: 1px solid rgba(0,255,0,0.2);
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0,255,0,0.15);
}


.jackpot-history {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,0,0.3) transparent;
}
.jackpot-history::-webkit-scrollbar {
  width: 6px;
}
.jackpot-history::-webkit-scrollbar-thumb {
  background: rgba(0,255,0,0.3);
  border-radius: 5px;
}

/* === ROW JACKPOT FUTURISTIK PREMIUM === */
.jackpot-row {
  position: relative;
  border-radius: 12px;
  margin: 6px 0;
  padding: 6px 10px;
  background: radial-gradient(circle at top left, rgba(0, 255, 120, 0.12), rgba(0, 20, 0, 0.5));
  overflow: hidden;
  transition: 0.3s ease;
  box-shadow: 0 0 4px rgba(0,255,136,0.3), inset 0 0 6px rgba(0,255,136,0.15);
}

/* === Garis laser di tepi yang hidup === */
.jackpot-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(0,255,136,0.1),
    rgba(0,255,136,0.8),
    rgba(0,255,136,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: borderFlow 3.5s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #00ff88);
}

/* === Efek cahaya menyapu di tengah === */
.jackpot-row::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.25), transparent);
  animation: sweepLight 2.8s linear infinite;
  pointer-events: none;
}

/* === Hover glowing lembut === */
.jackpot-row:hover {
  background: rgba(0,255,136,0.12);
  box-shadow: 0 0 12px #00ff88, inset 0 0 12px rgba(0,255,136,0.4);
  transform: scale(1.01);
}

/* === Efek nafas border === */
@keyframes borderFlow {
  0% {
    box-shadow: 0 0 8px rgba(0,255,136,0.3);
    background-position: -200% 0;
  }
  50% {
    box-shadow: 0 0 16px rgba(0,255,136,0.7);
    background-position: 200% 0;
  }
  100% {
    box-shadow: 0 0 8px rgba(0,255,136,0.3);
    background-position: -200% 0;
  }
}

/* === Efek cahaya menyapu === */
@keyframes sweepLight {
  0% { left: -60%; opacity: 0; }
  40% { left: 110%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* === TEKS NEON === */
.neon-text {
  color: #00ff99;
  font-weight: 600;
  text-shadow: 0 0 6px #00ff99, 0 0 12px #00ffaa;
  letter-spacing: 0.5px;
  animation: glowPulse 1.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 6px #00ff99, 0 0 12px #00ffaa; }
  50% { text-shadow: 0 0 12px #00ffcc, 0 0 22px #00ffee; }
}

/* === TABEL === */
#jackpotTable td {
  font-size: 13px;
  color: #e9ffe9;
  padding: 7px 10px;
  z-index: 2;
  position: relative;
}

#jackpotTable tr td span.text-warning {
  color: #00ffcc !important;
  font-weight: 600;
  text-shadow: 0 0 6px #00ffcc;
}

/* === Responsif === */
@media (max-width: 768px) {
  #jackpotTable td { font-size: 12px; }
}

/* === FUTURISTIC NOTE STYLE === */
.note-section {
  position: relative;
  background: rgba(0, 15, 0, 0.85);
  border: 2px solid #00ff88;
  border-radius: 10px;
  padding: 10px 15px;
  color: #b8ffda;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 0 12px #00ff88, inset 0 0 8px rgba(0, 255, 150, 0.5);
  overflow: hidden;
  animation: greenGlow 3s infinite ease-in-out;
}

@keyframes greenGlow {
  0%, 100% {
    box-shadow: 0 0 10px #00ff88, inset 0 0 6px #00ff88;
    border-color: #00ff88;
  }
  50% {
    box-shadow: 0 0 18px #00ffcc, inset 0 0 10px #00ffcc;
    border-color: #00ffcc;
  }
}

.note-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-dot {
  width: 10px;
  height: 10px;
  background-color: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff88;
  animation: blinkDot 2s infinite;
}

@keyframes blinkDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.note-title {
  color: #00ff88;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #00ff88;
  text-transform: uppercase;
}

.note-content {
  color: #d4ffea;
}

.note-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent, rgba(0, 255, 150, 0.25), transparent);
  transform: rotate(45deg);
  opacity: 0;
  transition: 0.6s;
}

.note-section:hover::before {
  opacity: 1;
  animation: sweepGlow 1.5s linear;
}

@keyframes sweepGlow {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* Responsif */
@media (max-width: 768px) {
  .note-section {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* === MINI LASER BORDER FUTURISTIK === */
.provider-box {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(0, 20, 0, 0.4);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0,255,136,0.3), inset 0 0 6px rgba(0,255,136,0.15);
  transition: 0.3s ease-in-out;
}

/* Garis tepi laser hijau mini */
.provider-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1.2px;
  background: linear-gradient(120deg,
    rgba(0,255,136,0.2),
    rgba(0,255,136,0.8),
    rgba(0,255,136,0.2));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: borderLaser 3s linear infinite;
  pointer-events: none;
}

/* Efek laser bergerak lembut */
@keyframes borderLaser {
  0% { background-position: 0 0; box-shadow: 0 0 4px rgba(0,255,136,0.3); }
  50% { background-position: 200% 0; box-shadow: 0 0 8px rgba(0,255,136,0.7); }
  100% { background-position: 0 0; box-shadow: 0 0 4px rgba(0,255,136,0.3); }
}

/* Efek hover glowing */
.provider-box:hover {
  box-shadow: 0 0 10px #00ff88, inset 0 0 10px #00ff88;
  transform: scale(1.02);
}

/* Teks neon halus */
.provider-name {
  font-weight: 600;
  color: #00ffcc;
  text-shadow: 0 0 4px #00ffcc, 0 0 10px #00ffaa;
}

/* === WINRATE MINI LASER FUTURISTIK === */
.winrate-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 20, 0, 0.45);
  color: #00ff99;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0,255,128,0.2), inset 0 0 8px rgba(0,255,128,0.15);
}

/* Garis tepi menyapu laser hijau */
.winrate-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(0,255,128,0.1),
    rgba(0,255,128,0.8),
    rgba(0,255,128,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: laserSweep 3s linear infinite;
  pointer-events: none;
}

/* Efek laser bergerak lembut */
@keyframes laserSweep {
  0% { background-position: 0 0; opacity: 0.7; }
  50% { background-position: 200% 0; opacity: 1; }
  100% { background-position: 0 0; opacity: 0.7; }
}

/* Efek teks bercahaya */
.winrate-mini .value {
  color: #00ffaa;
  text-shadow: 0 0 5px #00ffaa, 0 0 10px #00ff99;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Efek bernafas cahaya */
@keyframes pulseGlow {
  0%,100% { text-shadow: 0 0 5px #00ffaa, 0 0 10px #00ff99; }
  50% { text-shadow: 0 0 8px #00ffee, 0 0 18px #00ffcc; }
}

/* Label warna putih halus */
.winrate-mini .label {
  color: #ffffffb3;
  font-weight: 500;
  text-shadow: 0 0 3px rgba(0,255,128,0.3);
}



/* === MEMBER MINI LASER FUTURISTIK === */
.member-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 20, 0, 0.45);
  color: #00ff99;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0,255,128,0.2), inset 0 0 8px rgba(0,255,128,0.15);
}

/* Garis tepi laser hijau bergerak */
.member-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(0,255,128,0.1),
    rgba(0,255,128,0.8),
    rgba(0,255,128,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: laserSweepMember 3s linear infinite;
  pointer-events: none;
}

@keyframes laserSweepMember {
  0% { background-position: 0 0; opacity: 0.7; }
  50% { background-position: 200% 0; opacity: 1; }
  100% { background-position: 0 0; opacity: 0.7; }
}

/* Label dan teks halus */
.member-mini .label {
  color: #ffffffb3;
  font-weight: 500;
  text-shadow: 0 0 3px rgba(0,255,128,0.3);
}
.member-mini .text {
  color: #00ffaa;
  text-shadow: 0 0 5px #00ffaa, 0 0 10px #00ff99;
}

/* Titik sinyal hijau aktif berdenyut */
.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff99;
  box-shadow: 0 0 5px #00ff99, 0 0 10px #00ffaa;
  animation: signalPulse 1.5s ease-in-out infinite;
}

@keyframes signalPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 6px #00ffaa, 0 0 12px #00ff99;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
    box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ff99;
  }
}

    /* === FUTURISTIC INFO HEADER === */
.info-header-futuristic {
  position: relative;
  border-radius: 10px;
  padding: 10px 15px;
  background: rgba(0, 20, 0, 0.65);
  color: #00ffcc;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0,255,128,0.25), inset 0 0 8px rgba(0,255,128,0.25);
}

/* Tepi laser bernafas */
.info-header-futuristic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1.5px;
  background: linear-gradient(120deg,
    rgba(0,255,128,0.1),
    rgba(0,255,128,0.9),
    rgba(0,255,128,0.1));
  background-size: 200% 100%;
  animation: infoLaserMove 3s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* Efek nyala bernafas di dalam */
.info-header-futuristic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(0,255,128,0.25), transparent 70%);
  animation: infoPulse 2s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Animasi laser bergerak */
@keyframes infoLaserMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Animasi bernafas dalam */
@keyframes infoPulse {
  0% { opacity: 0.3; box-shadow: 0 0 4px #00ff99, inset 0 0 4px #00ff99; }
  100% { opacity: 0.7; box-shadow: 0 0 10px #00ffaa, inset 0 0 10px #00ffaa; }
}

/* Judul teks futuristik */
.info-header-futuristic .modal-title {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00ffaa;
  text-shadow: 0 0 4px #00ff88, 0 0 10px #00ffcc, 0 0 18px #00ffaa;
  animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% { text-shadow: 0 0 4px #00ff88, 0 0 10px #00ffcc; }
  100% { text-shadow: 0 0 8px #00ffaa, 0 0 20px #00ffaa; }
}




    /* === GARIS LASER FUTURISTIK KIRI KANAN UNTUK AREA INFO TERUPDATE === */
.modal-header.text-center.border-0.bg-main-3 + div {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

/* Garis laser kiri & kanan */
.modal-header.text-center.border-0.bg-main-3 + div::before,
.modal-header.text-center.border-0.bg-main-3 + div::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0,255,128,0.1),
    rgba(0,255,128,1),
    rgba(0,255,128,0.1)
  );
  animation: laserFlowY 3s linear infinite;
  box-shadow: 0 0 8px rgba(0,255,128,0.6);
  z-index: 2;
}

/* Posisi kiri dan kanan */
.modal-header.text-center.border-0.bg-main-3 + div::before {
  left: 0;
}
.modal-header.text-center.border-0.bg-main-3 + div::after {
  right: 0;
}

/* Animasi aliran laser dari atas ke bawah */
@keyframes laserFlowY {
  0% {
    background-position: 0% 0%;
    opacity: 0.5;
  }
  50% {
    background-position: 0% 100%;
    opacity: 1;
  }
  100% {
    background-position: 0% 0%;
    opacity: 0.5;
  }
}

/* Efek glow halus di area info */
.modal-header.text-center.border-0.bg-main-3 + div {
  box-shadow: inset 0 0 10px rgba(0,255,128,0.25);
  background: rgba(0, 15, 0, 0.55);
  animation: glowPulse 3s ease-in-out infinite alternate;
}

/* Efek “bernafas” lembut */
@keyframes glowPulse {
  0% {
    box-shadow: inset 0 0 8px rgba(0,255,128,0.25);
  }
  100% {
    box-shadow: inset 0 0 14px rgba(0,255,128,0.5);
  }
}


    /* === FUTURISTIC GREEN BUTTON === */
.btn-futuristic-green {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: #00ff9d;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,160,0.15), rgba(0,255,100,0.05) 80%);
  border: 2px solid rgba(0,255,150,0.6);
  border-radius: 10px;
  padding: 8px 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 0 5px #00ffb3, 0 0 10px #00ffb3;
  box-shadow: 0 0 12px rgba(0,255,150,0.3), inset 0 0 12px rgba(0,255,150,0.2);
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  z-index: 1;
  animation: pulseButton 2.2s ease-in-out infinite alternate;
}

/* Denyut lembut tombol */
@keyframes pulseButton {
  0% {
    box-shadow: 0 0 8px rgba(0,255,120,0.3), inset 0 0 5px rgba(0,255,120,0.2);
  }
  100% {
    box-shadow: 0 0 18px rgba(0,255,150,0.9), inset 0 0 10px rgba(0,255,150,0.4);
  }
}

/* Laser bergerak di tepi tombol */
.btn-futuristic-green::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(120deg,
    rgba(0,255,150,0),
    rgba(0,255,150,0.9),
    rgba(0,255,150,0)
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: laserBorderMove 3s linear infinite;
  pointer-events: none;
}

/* Efek laser mengalir di border */
@keyframes laserBorderMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Efek saat hover — tombol makin menyala */
.btn-futuristic-green:hover {
  color: #0dffb2;
  background: radial-gradient(circle at center, rgba(0,255,160,0.2), rgba(0,255,100,0.05) 85%);
  box-shadow: 0 0 25px #00ff9d, inset 0 0 18px rgba(0,255,120,0.6);
  transform: scale(1.05);
}

/* Efek klik (active) */
.btn-futuristic-green:active {
  transform: scale(0.98);
  box-shadow: 0 0 10px #00ff99 inset;
}

/* === GAMBAR LASER FUTURISTIK === */
.img-fluid.rounded {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,255,150,0.3);
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
}

/* Garis tepi laser hijau */
.img-fluid.rounded::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(120deg,
    rgba(0,255,150,0),
    rgba(0,255,150,0.8),
    rgba(0,255,150,0)
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: neonSweep 3s linear infinite;
  pointer-events: none;
}

/* Animasi laser menyapu tepi gambar */
@keyframes neonSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Efek “bernafas” neon */
.img-fluid.rounded {
  animation: imageGlow 3s ease-in-out infinite alternate;
}

@keyframes imageGlow {
  0% {
    box-shadow: 0 0 6px rgba(0,255,130,0.25),
                0 0 10px rgba(0,255,130,0.3) inset;
  }
  100% {
    box-shadow: 0 0 15px rgba(0,255,150,0.8),
                0 0 25px rgba(0,255,150,0.6) inset;
  }
}

/* Hover: efek glow makin kuat */
.img-fluid.rounded:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px #00ff9d, 0 0 35px rgba(0,255,150,0.5) inset;
}

/* === AREA KONTAINER TOMBOL (GARIS TEPI LASER) === */
.text-center.mt-2.mb-4 {
  position: relative;
  border-radius: 12px;
  padding: 10px;
  background: rgba(0, 20, 0, 0.4);
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 100, 0.2);
}

/* Efek garis laser mengelilingi container */
.text-center.mt-2.mb-4::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(120deg,
    rgba(0,255,120,0),
    rgba(0,255,120,0.8),
    rgba(0,255,120,0)
  );
  background-size: 200% 100%;
  animation: borderSweep 3s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animasi garis laser bergerak */
@keyframes borderSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === AREA NOTE + TOMBOL === */
.text-center.mt-2.mb-4 {
  position: relative;
  border-top: none; /* hilangkan batas atas */
  border-radius: 0 0 14px 14px;
  padding: 15px;
  margin-top: -8px; /* rapatkan ke box atas */
  background: rgba(0, 20, 0, 0.4);
  box-shadow: inset 0 0 8px rgba(0, 255, 120, 0.3);
  overflow: hidden;
}

/* sambungkan efek border luar */
.text-center.mt-2.mb-4::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 0 14px 14px;
  padding: 2px;
  background: linear-gradient(120deg,
    rgba(0,255,120,0),
    rgba(0,255,120,0.8),
    rgba(0,255,120,0)
  );
  background-size: 200% 100%;
  animation: borderSweep 3s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* animasi nyala laser */
@keyframes borderSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === TOMBOL OK === */
.text-center.mt-2.mb-4 .btn-primary {
  background: radial-gradient(circle at 50% 50%, #00ff99 0%, #008f5a 100%);
  color: #000;
  border: 1.5px solid rgba(0,255,150,0.8);
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(0,255,130,0.4), inset 0 0 8px rgba(0,255,100,0.3);
  transition: 0.25s ease;
  animation: btnPulse 2.5s ease-in-out infinite alternate;
}

/* tombol bernafas */
@keyframes btnPulse {
  0% {
    box-shadow: 0 0 8px rgba(0,255,130,0.3),
                inset 0 0 6px rgba(0,255,100,0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(0,255,150,0.8),
                inset 0 0 12px rgba(0,255,150,0.6);
  }
}

/* efek hover */
.text-center.mt-2.mb-4 .btn-primary:hover {
  transform: scale(1.05);
  background: radial-gradient(circle at 50% 50%, #00ffbb 0%, #00b36b 100%);
  box-shadow: 0 0 25px #00ff99, 0 0 40px rgba(0,255,150,0.5);
}

/* === Tambahan efek bintang kelap-kelip di area bawah tombol OK === */
.text-center.mt-2.mb-4 {
  position: relative;
  overflow: hidden; /* biar bintang tetap di dalam box */
}

/* layer bintang */
.text-center.mt-2.mb-4::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(0,255,120,0.9), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(0,255,180,0.8), transparent),
    radial-gradient(1.2px 1.2px at 80% 40%, rgba(0,255,100,0.8), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(0,255,140,0.7), transparent),
    radial-gradient(1.8px 1.8px at 70% 20%, rgba(0,255,160,0.9), transparent);
  animation: starsTwinkle 4s infinite ease-in-out alternate;
  opacity: 0.8;
  pointer-events: none;
}

/* animasi kelap kelip lembut */
@keyframes starsTwinkle {
  0% { opacity: 0.3; transform: scale(1) translateY(0px); }
  50% { opacity: 0.9; transform: scale(1.05) translateY(-1px); }
  100% { opacity: 0.4; transform: scale(1) translateY(0px); }
}

/* Tambahkan di CSS global */
.text-center.mt-2.mb-4 {
  position: relative;
  border-left: 2px solid rgba(0, 255, 120, 0.7);
  border-right: 2px solid rgba(0, 255, 120, 0.7);
  box-shadow: 0 0 12px rgba(0, 255, 120, 0.4), inset 0 0 8px rgba(0, 255, 120, 0.3);
  border-radius: 10px;
}

/* Efek bernafas lembut di tepi */
@keyframes borderGlow {
  0% { box-shadow: 0 0 10px rgba(0,255,120,0.3), inset 0 0 6px rgba(0,255,120,0.2); }
  50% { box-shadow: 0 0 18px rgba(0,255,160,0.7), inset 0 0 12px rgba(0,255,160,0.5); }
  100% { box-shadow: 0 0 10px rgba(0,255,120,0.3), inset 0 0 6px rgba(0,255,120,0.2); }
}

.text-center.mt-2.mb-4 {
  animation: borderGlow 3.5s infinite ease-in-out;
}