.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1100px; /* Container lebar agar tombol meregang maksimal */
  margin: 5px auto;
  gap: 30px; /* Jarak megah antar tombol */
  padding: 0 20px;
}
/* Tombol Utama - Panjang Asli & Kokoh Berbasis Ungu Mewah */
.button {
  width: 460px; /* UKURAN ASLI PANJANG */
  height: 68px; /* Tebal dan berkarakter */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
 
  /* Tipografi: Tegas, Elegan, & Super Kontras */
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #000000; /* Teks HITAM PEKAT agar kontras mutlak */
 
  /* Pewarnaan: Gradasi Ungu Mewah */
  background: linear-gradient(135deg, #e34697 0%, #6A1B9A 50%, #e34697 100%);
  background-size: 200% auto;
  border: 2px solid #e34697;
  border-radius: 12px;
 
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 
  /* Efek Bayangan Ungu Mewah */
  box-shadow: 0 8px 25px rgba(227,70,151, 0.4),
              inset 0 1px 3px rgba(255, 255, 255, 0.5);
}
/* Animasi Kilatan Cahaya Kaca (Shimmer Effect) */
.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-30deg);
  z-index: 2;
  animation: purpleShine 3.5s infinite ease-in-out;
}
/* HOVER EFFECT - Ungu Mewah Menyala */
.button:hover {
  transform: translateY(-5px) scale(1.02);
 
  background-position: right center;
  background: linear-gradient(135deg, #ffd0e7 0%, #ff72b9 50%, #AB47BC 100%);
  border-color: #ffffff;
  color: #000000;
 
  /* Ledakan Efek Glow Ungu Mewah */
  box-shadow: 0 15px 35px rgba(227,70,151, 0.7),
              0 0 15px rgba(255,114,185, 0.4),
              inset 0 0 10px rgba(255, 255, 255, 0.8);
}
/* Efek Ketika Ditekan Klik */
.button:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 5px 15px rgba(227,70,151, 0.5);
}
/* Divider Pembatas Tengah Elegan Senada */
.divider {
  width: 4px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #6A1B9A, #ff72b9, transparent);
  box-shadow: 0 0 12px rgba(227,70,151, 0.5);
  border-radius: 50%;
  flex-shrink: 0;
}
/* --- KEYFRAMES ANIMASI KILATAN UNGU --- */
@keyframes purpleShine {
  0% { left: -150%; }
  30% { left: 150%; }
  100% { left: 150%; }
}
/* RESPONSIVE LAYOUT UNTUK HP */
@media (max-width: 992px) {
  .button-container {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }
  .button {
    width: 100%;
    max-width: 460px;
  }
  .divider {
    display: none;
  }
}