/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Mengimpor font "Poppins" dari Google Fonts dengan berbagai ketebalan (400, 500, 600) */

/* Reset default margin dan padding untuk semua elemen, serta menggunakan box-sizing border-box */
* {
  margin: 0; /* Menghapus margin default */
  padding: 0; /* Menghapus padding default */
  box-sizing: border-box; /* Mengatur box model agar padding dan border termasuk dalam ukuran elemen */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins sebagai font utama, dengan sans-serif sebagai alternatif */
}

/* Menentukan tata letak body, .wrapper, dan .content agar berada di tengah secara vertikal dan horizontal */
body, .wrapper, .content {
  display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
  align-items: center; /* Menengahkan elemen secara vertikal */
  justify-content: center; /* Menengahkan elemen secara horizontal */
}

body {
  padding: 0 10px; /* Memberikan padding horizontal pada body */
  min-height: 100vh; /* Mengatur tinggi minimal body agar setara dengan tinggi viewport (layar) */
  background: #4A98F7; /* Memberikan warna latar belakang biru */
}

.wrapper {
  width: 440px; /* Mengatur lebar container utama */
  padding: 30px 30px 38px; /* Memberikan ruang di dalam container */
  background: #fff; /* Memberikan warna latar belakang putih */
  border-radius: 10px; /* Membuat sudut elemen menjadi melengkung */
  flex-direction: column; /* Mengatur elemen dalam .wrapper menjadi kolom */
  box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Memberikan efek bayangan untuk tampilan lebih menarik */
}

.wrapper img {
  max-width: 103px; /* Mengatur ukuran maksimum gambar agar tidak melebihi 103px */
}

.wrapper h1 {
  font-size: 38px; /* Menentukan ukuran font h1 */
  font-weight: 500; /* Mengatur ketebalan font */
  margin: 30px 0; /* Memberikan ruang di atas dan bawah elemen */
}

.wrapper .content {
  width: 100%; /* Mengatur lebar elemen content agar menyesuaikan container */
  justify-content: space-between; /* Menyebarkan elemen secara merata dalam container */
}

.content.disable {
  cursor: no-drop; /* Mengubah kursor menjadi tanda larangan saat content dalam keadaan disable */
}

.content .column {
  padding: 0 10px; /* Memberikan ruang dalam elemen column */
  border-radius: 5px; /* Membuat sudut elemen menjadi melengkung */
  border: 1px solid #bfbfbf; /* Menambahkan border dengan warna abu-abu */
  width: calc(100% / 3 - 5px); /* Mengatur lebar setiap kolom agar proporsional dan mempertimbangkan jarak antar elemen */
}

.content.disable .column {
  opacity: 0.6; /* Mengurangi opasitas elemen saat dalam keadaan disable */
  pointer-events: none; /* Menonaktifkan interaksi pengguna dengan elemen */
}

.column select {
  width: 100%; /* Membuat elemen select menyesuaikan lebar container */
  height: 53px; /* Mengatur tinggi dropdown */
  border: none; /* Menghapus border bawaan */
  outline: none; /* Menghilangkan efek outline saat elemen dipilih */
  background: none; /* Menghilangkan warna latar belakang */
  font-size: 19px; /* Menentukan ukuran font */
}

.wrapper button {
  width: 100%; /* Mengatur lebar tombol agar sesuai dengan container */
  border: none; /* Menghapus border bawaan */
  outline: none; /* Menghilangkan efek outline saat tombol dipilih */
  color: #fff; /* Memberikan warna teks putih */
  cursor: pointer; /* Mengubah kursor menjadi tangan saat tombol dapat diklik */
  font-size: 20px; /* Menentukan ukuran font */
  padding: 17px 0; /* Memberikan ruang di dalam tombol */
  margin-top: 20px; /* Menambahkan jarak atas tombol dari elemen sebelumnya */
  border-radius: 5px; /* Membuat sudut tombol melengkung */
  background: #4A98F7; /* Memberikan warna latar belakang tombol biru */
}