.rating-container {
    direction: rtl; /* Mengubah arah agar klik di bintang kanan memilih rating tertinggi */
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating-container input {
    display: none; /* Sembunyikan input radio */
}

.rating-star {
    font-size: 40px; /* Ukuran bintang */
    color: #e1e1e1; /* Warna bintang tidak terpilih */
    cursor: pointer;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
    color: #f39c12; /* Warna saat hover */
}

input:checked ~ .rating-star {
    color: #f39c12; /* Warna bintang terpilih */
}

.rating-result {
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
}

.button-container {
    text-align: center; /* Menyelaraskan tombol di tengah */
    margin-top: 20px; /* Jarak atas untuk pemisahan */
}

.edu-btn {
    background-color: #132b50; /* Warna latar belakang tombol */
    color: #fff; /* Warna teks */
    padding: 10px 20px; /* Padding dalam tombol */
    border: none; /* Tanpa border */
    border-radius: 5px; /* Sudut melengkung */
    font-size: 16px; /* Ukuran font */
    cursor: pointer; /* Kursor tangan saat hover */
    transition: background-color 0.3s, transform 0.3s; /* Efek transisi */
}

.edu-btn:hover {
    background-color: #333; /* Warna latar saat hover */
    transform: translateY(-2px); /* Efek angkat saat hover */
}

.edu-btn:focus {
    outline: 2px solid #ffcc00; /* Outline saat fokus */
    outline-offset: 2px; /* Jarak outline dari tombol */
}

.edu-btn:active {
    transform: translateY(0); /* Kembali ke posisi awal saat diklik */
}

/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
    .edu-btn {
        font-size: 14px; /* Ukuran font lebih kecil di layar lebih kecil */
    }
}

@media (max-width: 480px) {
    .edu-btn {
        font-size: 12px; /* Ukuran font lebih kecil untuk layar sangat kecil */
        padding: 8px 16px; /* Padding yang lebih kecil */
    }
}