/* YouTube Embed Wrapper for Responsiveness */
.youtube-wrapper {
    position: relative; /* Penting untuk posisi absolut iframe dan overlay */
    width: 100%; /* Pastikan wrapper mengisi lebar yang tersedia */
    padding-bottom: 56.25%; /* Ini menjaga rasio aspek 16:9 (tinggi / lebar * 100%) */
    height: 100%; /* Set tinggi ke 0 karena tinggi diatur oleh padding-bottom */
    overflow: hidden; /* **Sangat Penting:** Menyembunyikan konten yang melampaui batas, termasuk video yang terpotong */
    background-color: #000; /* Opsional: background hitam saat loading */
    max-width: 100%; /* Pastikan tidak melebihi lebar induknya */
    margin: 0 auto; /* Tengah-kan jika ada ruang ekstra */
}

/* YouTube Player Container (akan menjadi parent dari iframe) */
.youtube-player-container {
    position: absolute; /* Penting agar iframe mengisi wrapper */
    top: 0;
    left: 0;
    width: 100%; /* Pastikan iframe mengisi 100% lebar wrapper */
    height: 100%; /* Pastikan iframe mengisi 100% tinggi wrapper */
}

/* Overlay to block clicks */
.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Lebih tinggi dari video */
    cursor: default;
    background: transparent;
}

/* Unmute Button Styling */
.unmute-button {
    position: absolute;
    top: 10px; /* Posisi relatif terhadap wrapper */
    right: 10px; /* Posisi relatif terhadap wrapper */
    z-index: 11; /* Di atas overlay */
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;

    background: linear-gradient(to right, #ff416c, #ff4b2b);
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.2s ease;
}

.unmute-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.unmute-button i {
    color: #fff;
}

/* Media Query untuk Perangkat Kecil (mobile) */
@media (max-width: 768px) { /* Umumnya untuk tablet dan ponsel */
    .unmute-button {
        padding: 6px 10px; /* Sesuaikan padding agar tombol tidak terlalu besar */
        font-size: 14px; /* Kecilkan ukuran font */
        gap: 5px; /* Kurangi jarak antar ikon dan teks */
        top: 5px; /* Geser sedikit ke atas */
        right: 5px; /* Geser sedikit ke kanan */
    }

    /* Jika ada teks "Penting!..." di atas video, pastikan tidak mengganggu */
    /* Misalnya, jika teks tersebut adalah bagian dari plugin, kita bisa atur posisinya */
    /* Ini hanya contoh jika teks tersebut adalah elemen terpisah */
    .important-message-text { /* Ganti dengan kelas/ID sebenarnya dari teks itu */
        font-size: 14px; /* Kecilkan font teks pesan */
        padding: 5px;
        margin-bottom: 0; /* Hilangkan margin bawah jika mendorong video */
    }
}

/* Media Query untuk Perangkat Sangat Kecil (contoh: di bawah 400px) */
@media (max-width: 400px) {
    .unmute-button {
        padding: 4px 8px; /* Lebih kecil lagi */
        font-size: 12px; /* Lebih kecil lagi */
        gap: 3px;
        top: 3px;
        right: 3px;
    }
    .unmute-button span {
        /* Sembunyikan teks di layar sangat kecil jika ruang sangat terbatas */
        /* Atau pastikan teksnya singkat */
        /* display: none; */
    }
}