/* Reset & Font */
* {
  margin: 0; /* Hilangkan jarak default semua elemen */
  padding: 0; /* Hilangkan padding default semua elemen */
  box-sizing: border-box; /* Supaya width & height termasuk padding dan border */
  font-family: 'Poppins', sans-serif; /* Gunakan font modern */
}

/* Background & Layout Center */
body {
  background: #f0f2f5; /* Warna abu muda untuk background halaman */
  display: flex; /* Gunakan Flexbox untuk tata letak */
  justify-content: center; /* Posisikan konten ke tengah secara horizontal */
  align-items: center; /* Posisikan konten ke tengah secara vertikal */
  height: 100vh; /* Tinggi halaman 100% layar */
}

/* Kotak Login */
.container {
  background: #fff; /* Warna putih untuk kotak login */
  padding: 30px 25px; /* Jarak dalam kotak (atas-bawah 30px, kiri-kanan 25px) */
  border-radius: 10px; /* Sudut kotak melengkung */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Bayangan halus di belakang kotak */
  width: 350px; /* Lebar kotak login */
}

/* Judul */
h1 {
  text-align: center; /* Teks judul di tengah */
  margin-bottom: 20px; /* Jarak bawah dari judul ke elemen berikutnya */
  color: #2c3e50; /* Warna teks judul */
  font-size: 24px; /* Ukuran teks judul */
}

/* Label */
label {
  display: block; /* Supaya label tampil di baris baru */
  margin-bottom: 5px; /* Jarak antara label dan input */
  color: #333; /* Warna teks label */
  font-size: 14px; /* Ukuran teks label */
  font-weight: 500; /* Tebal sedang */
}

/* Input */
input {
  width: 100%; /* Input selebar container */
  padding: 10px; /* Jarak dalam input */
  margin-bottom: 15px; /* Jarak antar input */
  border: 1px solid #ccc; /* Garis tepi input */
  border-radius: 6px; /* Sudut input melengkung */
  font-size: 14px; /* Ukuran teks input */
  outline: none; /* Hilangkan garis biru default saat fokus */
}

/* Tombol */
button {
  width: 100%; /* Tombol selebar container */
  background: linear-gradient(90deg, #2980b9, #3498db); /* Warna gradasi biru */
  border: none; /* Hilangkan border default */
  padding: 10px; /* Tinggi tombol */
  border-radius: 6px; /* Sudut tombol melengkung */
  color: white; /* Warna teks tombol */
  font-size: 16px; /* Ukuran teks tombol */
  cursor: pointer; /* Ubah kursor jadi tangan saat diarahkan */
  transition: 0.3s ease; /* Efek halus saat hover */
}

/* Efek saat tombol di-hover */
button:hover {
  background: linear-gradient(90deg, #3498db, #2980b9); /* Tukar arah gradasi saat hover */
}