/* ===== GLOBAL STYLE ===== */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center; /* Posisikan konten ke tengah secara vertikal & horizontal */
  min-height: 100vh; /* Agar full tinggi layar */
  background: 
    linear-gradient(rgba(23, 78, 129, 0.6), rgba(19, 122, 204, 0.6)), 
    url("https://samoedera.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhome-hero.443c1537.webp&w=1920&q=75");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== FORM WRAPPER ===== */
.wrapper {
  width: 80%;
  min-height: 100vh; /* Supaya wrapper tetap memenuhi layar */
  padding: 20px;
  box-sizing: border-box; /* Padding tidak menambah lebar total */
}

/* ===== FORM CONTAINER ===== */
form {
  background: #ffffff;
  padding: 40px;
  border-radius: 20px; /* Sudut membulat */
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); /* Bayangan lembut */
  animation: fadeIn 0.5s ease; /* Animasi muncul */
  width: 100%;        /* Responsif: isi hampir penuh layar */
  max-width: 1200px; /* Batasi lebar maksimum */
  margin: 40px auto; /* Tengah + ada spasi atas bawah */
}

/* ===== ANIMASI ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== HEADING ===== */
h1 {
  text-align: center;
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  color: #174e81; /* Biru branding */
}

h2 {
  text-align: center;
  margin-bottom: 40px; /* diperbesar biar ada jarak dengan input 'Nama' */
  font-size: 16px;
  font-weight: 500;
  color: #444;
}

/* ===== LABEL ===== */
label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* ===== INPUT, SELECT & TEXTAREA ===== */
input,
select,
textarea {
  width: 100%;                /* biar full lebar container */
  padding: 12px 16px;         /* bikin lebih tinggi & lega */
  font-size: 16px !important;            /* perbesar tulisan */
  border: 1px solid #ccc;
  line-height: 1.4; 
  border-radius: 10px;        /* sudut agak membulat */
  background-color: #fff;
  appearance: none;           /* hilangkan style default browser */
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-bottom: 16px;
  box-sizing: border-box;
  resize: vertical;           /* textarea bisa resize hanya vertikal */
}

input:focus,
select:focus,
textarea:focus {
  border-color: #137acc; /* Highlight biru */
  box-shadow: 0 0 0 3px rgba(19, 122, 204, 0.3); /* Glow biru lembut */
  outline: none;
  transition: all 0.3s ease;
}

/* ===== BUTTON ===== */
button[type="submit"] {
  display: block;
  margin: 0 auto; /* Tengah */
  width: 120px;               /* lebih lebar dikit biar proporsional */
  padding: 12px 16px;         /* tinggi & luas */
  font-size: 16px;            /* perbesar tulisan */
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #174e81 , #137acc); /* Gradasi biru */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  transform: translateY(-2px); /* Sedikit naik */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Bayangan saat hover */
}