body, #payment-header { font-family: Arial, sans-serif; background-color: #0a0a0a; color: #cceeff; margin: 0; padding: 0; text-align: center; }

.banner { width: 100%; max-height: 250px; object-fit: cover; }

.intro-video { max-width: 70%; width: 100%; margin-bottom: 20px; border-radius: 12px; display: block; height: auto; margin-left: auto; margin-right: auto; margin-top: 40px; }

.gwaris { border: none; height: 1px; background-color: #333; margin: 40px 0 20px; }

.footer { margin-top: 30px; text-align: center; font-size: 13px; color: #fff; padding: 20px 0; }

.footer a { color: #fff; text-decoration: none; }

.subtitle, #subtitle { display: block; font-size: 1.5rem; margin-top: 6px; font-weight: 500; letter-spacing: 1px; }

h1, #main-title { font-size: 24px; margin: 15px 0 5px; color: #9eeaff; text-shadow: 0 0 6px #00ccff; }

.description, #payment-description { margin: 10px auto 20px; font-size: 16px; color: #cceeff; background-color: #00121c; padding: 10px; border-radius: 8px; max-width: 600px; box-shadow: 0 0 12px rgba(0,183,255,0.2); }

.method-list, #method-list { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; padding: 20px; }

.method-toggle, 
#toggle-dana, 
#toggle-gopay, 
#toggle-ovo, 
#toggle-bri, 
#toggle-qris, 
#toggle-saweria { 
  position: relative; 
  background: #002e3f; 
  color: #cceeff; 
  font-weight: bold; 
  padding: 12px 18px; 
  border-radius: 10px; 
  cursor: pointer; 
  box-shadow: 0 0 12px rgba(0, 183, 255, 0.5), 0 0 6px #00ccff; 
  text-shadow: 0 0 4px #00ccff; 
  overflow: hidden; 
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.method-toggle::before,
#toggle-dana::before,
#toggle-gopay::before,
#toggle-ovo::before,
#toggle-bri::before,
#toggle-qris::before,
#toggle-saweria::before {
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  background: #00bfff; 
  border-radius: 50%; 
  transform: translate(-50%, -50%); 
  opacity: 0.5; 
  transition: width 0.4s ease, height 0.4s ease; 
  z-index: 0;
}

.method-toggle.clicked,
#toggle-dana.clicked,
#toggle-gopay.clicked,
#toggle-ovo.clicked,
#toggle-bri.clicked,
#toggle-qris.clicked,
#toggle-saweria.clicked {
  background: #00bfff !important; 
  color: #fff; 
  text-shadow: 0 0 6px #ffffff; 
  box-shadow: 0 0 20px #00ccff;
}

.method-toggle.clicked:hover,
#toggle-dana.clicked:hover,
#toggle-gopay.clicked:hover,
#toggle-ovo.clicked:hover,
#toggle-bri.clicked:hover,
#toggle-qris.clicked:hover,
#toggle-saweria.clicked:hover {
  transform: scale(1.03);
}

.method-toggle span { position: relative; z-index: 1; }

.method-detail,
#dana-detail,
#gopay-detail,
#ovo-detail,
#bri-detail,
#qris-detail {
  display: none; 
  background-color: #001a26; 
  padding: 12px; 
  margin: -10px auto 10px; 
  border-radius: 10px; 
  width: 90%; 
  max-width: 400px; 
  box-shadow: 0 0 10px rgba(0,183,255,0.25);
}

.method-detail p { margin: 8px 0; }

.copy-button, 
.qris-full-button, 
.back-button,
#copy-dana,
#copy-gopay,
#copy-ovo,
#copy-bri,
#qris-full-button {
  background: #00bfff; 
  color: white; 
  border: none; 
  padding: 10px 18px; 
  border-radius: 8px; 
  cursor: pointer; 
  box-shadow: 0 0 10px rgba(0,183,255,0.4), 0 0 4px #00ccff inset; 
  text-shadow: 0 0 4px #ffffff; 
  transition: 0.3s; 
  margin-top: 10px;
}

.copy-button:hover, 
.qris-full-button:hover, 
.back-button:hover,
#copy-dana:hover,
#copy-gopay:hover,
#copy-ovo:hover,
#copy-bri:hover,
#qris-full-button:hover {
  background: #0099cc; 
  box-shadow: 0 0 15px #00ccff;
}

.qris-img, #qris-img { 
  width: 100%; 
  max-width: 300px; 
  margin-top: 10px; 
  border-radius: 10px; 
  box-shadow: 0 0 10px rgba(0,183,255,0.3);
}

.divider, #divider { 
  width: 80%; 
  height: 2px; 
  margin: 25px auto 15px; 
  background: linear-gradient(90deg, transparent, #00bfff, transparent); 
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 5px #00bfff; }
  50% { opacity: 1; box-shadow: 0 0 15px #00bfff; }
}