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

/* Selector universal untuk semua elemen */
*{ 
    margin: 0; /* Menghilangkan margin default */
    padding: 0; /* Menghilangkan padding default */
    box-sizing: border-box; /* Mengatur box model agar padding dan border termasuk dalam width/height */
    font-family: "Poppins", sans-serif; /* Mengatur font utama */
}

/* Mengatur gaya pada elemen body */
body{ 
    display: flex; /* Mengaktifkan flexbox */
    padding: 0 10px; /* Memberikan padding samping */
    align-items: center; /* Meratakan konten secara vertikal */
    justify-content: center; /* Meratakan konten secara horizontal */
    min-height: 100vh; /* Tinggi minimal 100% viewport */
    background: #17A2B8; /* Warna background biru cyan */
}

/* Gaya ketika teks dipilih */
::selection{ 
    color: #fff; /* Warna teks saat diseleksi */
    background: #17A2B8; /* Warna background seleksi */
}

/* Kontainer utama */
.wrapper{ 
    width: 770px; /* Lebar wrapper */
    padding: 35px; /* Padding dalam */
    background: #fff; /* Background putih */
    border-radius: 10px; /* Sudut melengkung */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); /* Bayangan kotak */
}

/* Input tersembunyi untuk mengetik */
.wrapper .input-field{ 
    opacity: 0; /* Dibuat transparan */
    z-index: -999; /* Mengirim elemen ke belakang */
    position: absolute; /* Posisi absolut */
}

/* Kotak konten */
.wrapper .content-box{ 
    padding: 13px 20px 0; /* Padding dalam */
    border-radius: 10px; /* Sudut melengkung */
    border: 1px solid #bfbfbf; /* Border abu-abu */
}

/* Kontainer teks mengetik */
.content-box .typing-text{ 
    overflow: hidden; /* Menyembunyikan overflow */
    max-height: 256px; /* Tinggi maksimal */
}

/* Scrollbar tersembunyi untuk Chrome */
typing-text::-webkit-scrollbar{ 
    width: 0; /* Lebar scrollbar 0 */
}

/* Paragraf teks yang diketik */
.typing-text p{ 
    font-size: 21px; /* Ukuran font */
    text-align: justify; /* Rata kiri kanan */
    letter-spacing: 1px; /* Jarak antar huruf */
    word-break: break-all; /* Memecah kata jika melebihi batas */
}

/* Setiap huruf yang dibungkus span */
.typing-text p span{ 
    position: relative; /* Untuk efek cursor */
}

/* Huruf benar */
.typing-text p span.correct{ 
    color: #56964f; /* Warna hijau */
}

/* Huruf salah */
.typing-text p span.incorrect{ 
    color: #cb3439; /* Warna merah */
    outline: 1px solid #fff; /* Garis luar putih */
    background: #ffc0cb; /* Background pink */
    border-radius: 4px; /* Sudut melengkung */
}

/* Huruf aktif saat diketik */
.typing-text p span.active{ 
    color: #17A2B8; /* Berwarna cyan */
}

/* Garis bawah berkedip pada huruf aktif */
.typing-text p span.active::before{ 
    position: absolute; /* Posisi absolut */
    content: ""; /* Isi kosong */
    height: 2px; /* Tinggi garis */
    width: 100%; /* Lebar penuh */
    bottom: 0; /* Posisi bawah */
    left: 0; /* Posisi kiri */
    opacity: 0; /* Awalnya transparan */
    border-radius: 5px; /* Sudut garis melengkung */
    background: #17A2B8; /* Warna garis */
    animation: blink 1s ease-in-out infinite; /* Animasi berkedip */
}

/* Membuat animasi blink */
@keyframes blink{ 
    50%{
        opacity: 1; /* Pada 50% animasi garis terlihat */
    }
}

/* Bagian bawah berisi hasil & tombol */
.content-box .content{ 
    margin-top: 17px; /* Jarak atas */
    display: flex; /* Flexbox */
    padding: 12px 0; /* Padding vertikal */
    flex-wrap: wrap; /* Ketika layar kecil elemen turun */
    align-items: center; /* Rata tengah vertikal */
    justify-content: space-between; /* Ruang di antara elemen */
    border-top: 1px solid #bfbfbf; /* Garis atas */
}

/* Tombol */
.content button{ 
    outline: none; /* Menghilangkan outline */
    border: none; /* Tanpa border */
    width: 105px; /* Lebar tombol */
    color: #fff; /* Warna teks putih */
    padding: 8px 0; /* Padding */
    font-size: 16px; /* Ukuran font */
    cursor: pointer; /* Ubah cursor menjadi pointer */
    border-radius: 5px; /* Sudut melengkung */
    background: #17A2B8; /* Background tombol */
    transition: transfrom 0.3s ease; /* Transisi animasi */
}

/* Efek saat tombol ditekan */
.content button:active{ 
    transform: scale(0.97); /* Mengecil sedikit */
}

/* Detail hasil */
.content .result-details{ 
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Responsif */
    align-items: center; /* Rata tengah */
    justify-content: space-between; /* Spasi antar elemen */
    width: calc(100% - 140px); /* Lebar dikurangi tombol */
}

/* Item daftar hasil */
.result-details li{ 
    display: flex; /* Flexbox */
    height: 20px; /* Tinggi elemen */
    list-style: none; /* Hilangkan bullet */
    position: relative; /* Posisi relatif */
    align-items: center; /* Rata tengah vertikal */
}

/* Responsif untuk layar kecil */
@media (max-width: 745px) { 
    .wrapper{
        padding: 20px; /* Padding lebih kecil */
    }
    .content-box .content{
        padding: 20px 0; /* Tambah padding */
    }
}

@media (max-width: 518px) { 
    .wrapper .content-box{
        padding: 10px 15px 0; /* Padding lebih kecil */
    }
    .content button{
        margin-top: 10px; /* Tombol turun ke bawah */
    }
}