/* 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 */
}

/* Mengatur 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; /* Memberikan jarak atas tombol dari elemen sebelumnya */
    border-radius: 5px; /* Membuat sudut tombol melengkung */
    background: #4A98F7; /* Memberikan warna latar belakang tombol biru */
}