*{
  box-sizing:border-box;
  font-family: Arial, sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:url('../img/lt.png') no-repeat center center;
  background-size:cover;
}

/* WRAPPER */
.wrapper{
  width:92%;
  max-width:420px;
}

/* ===== SLIDER ===== */
.slider{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.slides{
  display:flex;
  width:300%;
  animation:geser 20s infinite;
}

.slides img{
  width:100%;
  height:150px;
  object-fit:cover;
}

@keyframes geser{
  0%{transform:translateX(0);}
  33%{transform:translateX(-100%);}
  66%{transform:translateX(-200%);}
  100%{transform:translateX(0);}
}

/* ===== CARD ===== */
.card{
  background:#ffffff;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  border:2px solid rgba(53,196,138,.25);
}

/* HEADER */
.header{
  text-align:center;
  margin-bottom:15px;
}

.header h2{
  margin:0;
  color:#2f6fff;
  font-size:22px;
  font-weight:900;
}

.ramadhan{
  font-size:13px;
  color:#6c8f86;
}

/* LABEL */
label{
  display:block;
  margin-top:14px;
  font-weight:900;
  color:#000000;
}

/* INPUT */
input{
  width:100%;
  padding:14px;
  margin-top:6px;
  border-radius:10px;
  border:2px solid #d6e6e1;
  font-size:15px;
  outline:none;
  background:#ffffff;
  color:#355f56;
}

input:focus{
  border-color:#4a90ff;
  box-shadow:0 0 0 3px rgba(74,144,255,.25);
}

/* ===== BUTTON ===== */
button{
  width:100%;
  margin-top:22px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:linear-gradient(90deg,#4a90ff,#2f6fff);
  color:#ffffff;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  letter-spacing:.5px;
  transition:.2s;
  box-shadow:0 6px 16px rgba(47,111,255,.35);
}

button:hover{
  filter:brightness(1.05);
}

button:active{
  transform:scale(.97);
}

/* FOOTER */
.footer{
  text-align:center;
  font-size:12px;
  color:#6c8f86;
  margin-top:18px;
}

/* ===== SPINNER ===== */
.spin{
  animation:putar 1s linear infinite;
}

@keyframes putar{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ===== RESPONSIVE ===== */
@media (max-width:480px){
  .slides img{
    height:140px;
  }
}