/* Background gradasi putih */
body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,#ffffff,#f2f2f2,#ffffff);
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Petak biru glow */
.container-box{
  margin-top:40px;
  padding:25px 20px;
  border-radius:18px;
  background:rgba(0,70,255,0.15);
  box-shadow:
    0 0 12px #007bff,
    0 0 28px #0057ff,
    0 0 42px #003bff;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:90%;
  max-width:430px;
}

/* H1 */
.title{
  font-size:22px;
  margin-bottom:18px;
  text-align:center;
  color:#000;
}

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

/* ANIMASI GERAK ATAS–BAWAH */
@keyframes floatBtn{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0); }
}

/* Tombol DAFTAR – biru terang glow + animasi */
.btn{
  background:linear-gradient(90deg,#1fb6ff,#64d2ff);
  color:white;
  border:none;
  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:floatBtn 2.2s ease-in-out infinite;
}

/* Tombol LOGIN – biru gelap glow + animasi */
.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:floatBtn 2.2s ease-in-out infinite;
  animation-delay:0.4s; /* biar geraknya selang-seling */
}

/* Gambar persegi di tengah */
.hero-wrapper{
  display:flex;
  justify-content:center;
  width:100%;
}

.hero-image{
  width:100%;
  max-width:300px;
  height:300px;
  object-fit:cover;
  border-radius:8px;
}

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

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