/* 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 warna emas + 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 kiri–kanan */
@keyframes slideBtn{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(12px); }
  100%{ transform:translateX(0); }
}

/* Tombol DAFTAR – biru terang */
.btn{
  background:linear-gradient(90deg,#1fb6ff,#64d2ff);
  color:white;
  padding:12px 0;
  border-radius:10px;
  font-weight:600;
  font-size:18px;
  text-decoration:none;
  width:100%;
  text-align:center;
  box-shadow:
    0 0 10px #42c7ff,
    0 0 22px #1fb6ff,
    0 0 38px #64d2ff;
  animation:slideBtn 2.2s ease-in-out infinite;
}

/* Tombol LOGIN – biru gelap */
.ghost{
  background:linear-gradient(90deg,#003B8B,#0057C7);
  color:white;
  padding:12px 0;
  border-radius:10px;
  font-weight:600;
  font-size:18px;
  text-decoration:none;
  width:100%;
  text-align:center;
  box-shadow:
    0 0 10px #0057c7,
    0 0 22px #003b8b,
    0 0 38px #007bff;
  animation:slideBtn 2.2s ease-in-out infinite;
  animation-delay:0.4s;
}

/* Gambar bergerak */
@keyframes floatImage{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
  100%{ transform:translateY(0); }
}

/* Gambar petak di tengah */
.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:floatImage 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;
  }
}