/* Container untuk switcher yang melayang di pojok kanan bawah */
.language-switcher {
    position: fixed;
    bottom: 20px;
    
    /* [MODIFIKASI DESKTOP] 
       Jarak dari kanan diubah dari 20px menjadi 60px 
       agar tidak menimpa tombol 'back to top' */
    right: 80px; 
    
    z-index: 9999;
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;

    /* [BARU] Transisi untuk animasi muncul/sembunyi (fade & slide) */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: none; /* Default state untuk desktop */
}

/* Base styling untuk link (a) dan teks aktif (span) */
.language-switcher a,
.language-switcher span {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
        background-image: none !important; /* Hapus bendera */
        padding-left: 0; /* Hapus padding untuk bendera */
}

/* Styling untuk link bahasa yang tidak aktif */
.language-switcher a {
    color: #0073aa;
}

.language-switcher a:hover {
    color: #0a4b78;
}

/* Styling untuk teks bahasa yang sedang aktif */
.language-switcher span {
    color: #333333;
    font-weight: 700;
}

/* [BARU] Class untuk menyembunyikan switcher (digunakan oleh JS) */
.language-switcher.switcher-hidden {
    opacity: 0;
    pointer-events: none; /* Tidak bisa diklik saat tersembunyi */
    /* Bergeser ke bawah saat tersembunyi */
    transform: translateY(100%); 
}


/* --- [BARU] SEMUA STYLING MOBILE --- */
@media (max-width: 768px) {
    .language-switcher {
        /* [MOBILE Req 1] Posisikan di tengah bawah */
        left: 50%;
        transform: translateX(-50%);
        right: auto; /* Hapus properti 'right' */
        
        /* [MOBILE Req 2] Perkecil ukuran */
        padding: 8px 12px;
        font-size: 13px;
        gap: 6px;
    }

    /* [MOBILE Req 3] Sembunyikan bendera di mobile */
    .language-switcher a.lang-id,
    .language-switcher span.lang-id,
    .language-switcher a.lang-en,
    .language-switcher span.lang-en {
        background-image: none !important; /* Hapus bendera */
        padding-left: 0; /* Hapus padding untuk bendera */
    }

    /* [MOBILE Req 4] Atur posisi tersembunyi untuk mobile */
    /* Perlu `translateX` agar tetap di tengah */
    .language-switcher.switcher-hidden {
        opacity: 0;
        transform: translateX(-50%) translateY(100%);
    }

    /* [MOBILE Req 4] Atur posisi terlihat untuk mobile */
    .language-switcher:not(.switcher-hidden) {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* --- AKHIR STYLING MOBILE --- */


/* [SVG BENDERA] - Kode ini tidak berubah */
/* .lang-id {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6"><rect width="9" height="3" fill="%23CE1126"/><rect y="3" width="9" height="3" fill="%23FFF"/></svg>');
}

.lang-en {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="a"><path d="M0 0h60v30H0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15H30zm0-15h30v15H30zM0 15h30v15H0zM0 0h30v15H0z"/></clipPath><g clip-path="url(%23a)"><path d="M0 0v30h60V0z" fill="%23012169"/><path d="M0 0l60 30m0-30L0 30" stroke="%23fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(%23b)" stroke="%23C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="%23fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="%23C8102E" stroke-width="6"/></g></svg>');
}
*/