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

*{
    margin: 0; /* Menghilangkan margin default dari semua elemen */
    padding: 0; /* Menghilangkan padding default dari semua elemen */
    box-sizing: border-box; /* Memastikan ukuran elemen termasuk padding dan border */
    font-family: 'Poppins', sans-serif; /* Mengatur font default untuk semua elemen */
}

body{
    display: flex; /* Menggunakan flexbox untuk tata letak */
    align-items: center; /* Menengahkan elemen secara vertikal */
    justify-content: center; /* Menengahkan elemen secara horizontal */
    padding: 15px; /* Memberikan padding di sisi kiri dan kanan */
    min-height: 100vh; /* Mengatur tinggi minimum agar sesuai dengan tinggi viewport */
    background: #5372F0; /* Mengatur warna latar belakang */
}

.container{
    max-width: 690px; /* Lebar maksimum container */
    width: 100%; /* Mengisi seluruh lebar yang tersedia */
    border-radius: 7px; /* Membulatkan sudut container */
    padding: 30px; /* Memberikan padding di dalam container */
    background: #fff; /* Warna latar belakang putih */
    border: 1px solid #ccc; /* Membuat border berwarna abu-abu */
    box-shadow: 0 10px 20px rgba(0,0,0,0.01); /* Menambahkan efek bayangan */
}

.wrapper{
    border-radius: 5px; /* Membuat sudut elemen melengkung */
    border: 1px solid #ccc; /* Membuat border abu-abu */
}

.wrapper .text-input{
    display: flex; /* Menyusun elemen dalam satu baris */
    border-bottom: 1px solid #ccc; /* Menambahkan garis bawah */
}

.text-input .to-text{
    border-radius: 0px; /* Tidak ada sudut melengkung */
    border-left: 1px solid #ccc; /* Menambahkan garis pemisah di sebelah kiri */
}

.text-input textarea{
    height: 250px; /* Mengatur tinggi area teks */
    width: 100%; /* Mengisi seluruh lebar yang tersedia */
    border: none; /* Menghilangkan border */
    outline: none; /* Menghilangkan outline saat diklik */
    resize: none; /* Mencegah pengguna mengubah ukuran area teks */
    background: none; /* Tidak ada warna latar belakang */
    font-size: 18px; /* Ukuran font */
    padding: 10px 15px; /* Mengatur padding */
    border-radius: 5px; /* Membuat sudut elemen melengkung */
}

.text-input textarea::placeholder{
    color: #b7b6b6; /* Warna teks placeholder */
}

.controls, li, .icons, .icons i{
    display: flex; /* Menggunakan flexbox */
    align-items: center; /* Pusat vertikal */
    justify-content: space-between; /* Spasi rata antara elemen */
}

.controls{
    list-style: none; /* Menghilangkan bullet pada daftar */
    padding: 12px 15px; /* Padding dalam elemen */
}

.controls .row .icons{
    width: 38%; /* Lebar ikon */
}

.controls .row .icons i{
    width: 50px; /* Ukuran ikon */
    color: #adadad; /* Warna ikon */
    font-size: 14px; /* Ukuran font ikon */
    cursor: pointer; /* Mengubah kursor menjadi pointer */
    transition: transform 0.2s ease; /* Animasi saat diklik */
    justify-content: center; /* Pusat ikon */
}

.controls .row .from .icons{
    padding-right: 15px; /* Memberikan ruang di sebelah kanan */
    border-right: 1px solid #ccc; /* Garis pemisah di sebelah kanan */
}

.controls .row .to .icons{
    padding-left: 15px; /* Memberikan ruang di sebelah kiri */
    border-left: 1px solid #ccc; /* Garis pemisah di sebelah kiri */
}

.controls .row select{
    color: #333; /* Warna teks */
    border: none; /* Menghilangkan border */
    outline: none; /* Menghilangkan outline */
    font-size: 18px; /* Ukuran font */
    background: none; /* Tidak ada warna latar belakang */
    padding-left: 5px; /* Padding kiri */
}

.text-input textarea::-webkit-scrollbar{
    width: 4px; /* Lebar scrollbar */
}

.controls .row select::-webkit-scrollbar{
    width: 8px; /* Lebar scrollbar */
}

.text-input textarea::-webkit-scrollbar-track,
.controls .row select::-webkit-scrollbar-track{
    background: #fff; /* Warna track scrollbar */
}

.text-input textarea::-webkit-scrollbar-thumb{
    background: #ddd; /* Warna thumb scrollbar */
    border-radius: 8px; /* Sudut melengkung scrollbar */
}

.controls .row select::-webkit-scrollbar-thumb{
    background: #999; /* Warna thumb scrollbar */
    border-radius: 8px; /* Sudut melengkung scrollbar */
    border-right: 2px solid #ffffff; /* Garis pemisah */
}

.controls .exchange{
    color: #adadad; /* Warna ikon */
    cursor: pointer; /* Mengubah kursor menjadi pointer */
    font-size: 16px; /* Ukuran font */
    transition: transform 0.2s ease; /* Animasi saat diklik */
}

.controls :active{
    transform: scale(0.9); /* Efek klik */
}

.container button{
    width: 100%; /* Lebar penuh */
    padding: 14px; /* Padding tombol */
    border: none; /* Menghilangkan outline */
    border-radius: 5px; /* Membulatkan border */
    color: #fff; /* Warna teks tombol */
    font-size: 17px; /* Ukuran font */
    cursor: pointer; /* Pointer untuk elemen UI atasnya */
    margin-top: 25px; /* Jarak dari atas */
    background: #5372f0; /* Warna latar belakang tombol */
}

@media (max-width: 660px){
    .container{
        padding: 20px; /* Mengurangi padding di layar kecil */
    }
    .wrapper .text-input{
        flex-direction: column; /* Mengatur tata letak kolom */
    }
    .text-input .to-text{
        border-left: 0px; /* Menghilangkan border kiri */
        border-top: 1px solid #ccc; /* Menambahkan border atas */
    }
    .text-input textarea{
        height: 200px; /* Mengatur tinggi area teks */
    }
    .controls .row .icons{
        display: none; /* Menyembunyikan ikon di layar kecil */
    }
}