/* Background hitam */
body{
  margin:0;
  padding:0;
  background:#000000;
  color:#ffffff;
  font-family:Arial, Helvetica, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Kotak hijau glow */
.container-box{
  margin-top:40px;
  padding:25px 20px;
  border-radius:18px;
  background:rgba(0,255,80,0.15);
  box-shadow:
    0 0 14px #00ff55,
    0 0 32px #00cc44,
    0 0 48px #009933;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:90%;
  max-width:430px;
}

/* H1 emas dengan garis */
.title{
  font-size:24px;
  margin-bottom:18px;
  text-align:center;
  color:#FFD700;
  position:relative;
}

.title::after{
  content:"";
  width:60%;
  height:3px;
  background:#FFD700;
  display:block;
  margin:8px auto 0 auto;
  border-radius:4px;
}

/* Wrapper tombol */
.buttons{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

/* Animasi tombol & gambar – seirama naik turun */
@keyframes floatSync{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
  100%{ transform:translateY(0); }
}

/* Tombol DAFTAR – emas terang */
.btn{
  background:linear-gradient(90deg,#FFD700,#FFEB77);
  color:#000;
  padding:12px 0;
  border-radius:10px;
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  width:100%;
  text-align:center;
  box-shadow:
    0 0 14px #FFD700,
    0 0 26px #FFEB77,
    0 0 40px #FFDF3A;
  animation:floatSync 3s ease-in-out infinite;
}

/* Tombol LOGIN – emas gelap */
.ghost{
  background:linear-gradient(90deg,#A67C00,#D4AF37);
  color:#000;
  padding:12px 0;
  border-radius:10px;
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  width:100%;
  text-align:center;
  box-shadow:
    0 0 14px #A67C00,
    0 0 26px #D4AF37,
    0 0 40px #FFD966;
  animation:floatSync 3s ease-in-out infinite;
}

/* Gambar mengikuti animasi yang sama */
.hero-wrapper{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:18px;
}

.hero-image{
  width:100%;
  max-width:300px;
  height:300px;
  object-fit:cover;
  border-radius:8px;
  animation:floatSync 3s ease-in-out infinite;
}

/* Footer */
footer{
  margin-top:35px;
  padding:15px 0;
  font-size:14px;
  opacity:0.7;
  color:white;
}

/* Responsif desktop */
@media (min-width:768px){
  .title{
    font-size:30px;
  }
  .hero-image{
    max-width:380px;
    height:380px;
  }
  .btn, .ghost{
    font-size:20px;
    padding:14px 0;
  }
}