/* =====================================================================
   TEMA BASE - gaya bersama untuk semua tema (pratinjau)
   Hanya tampilan. Tidak menyentuh logika PHP.
   ===================================================================== */

/* Bar pembanding tema (hanya muncul di index_tema.php) */
.tm-switcher {
    position: sticky; top: 0; z-index: 3000;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 12px;
    background: #111827; color: #e5e7eb;
    font: 600 12.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.tm-switcher-label { opacity: .75; margin-right: 4px; }
.tm-switcher-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    color: #e5e7eb; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2);
    transition: all .2s ease;
}
.tm-switcher-btn:hover { background: rgba(255,255,255,.12); }
.tm-switcher-btn.active { background: #fff; color: #111827; border-color: #fff; }

/* Navbar tempel di bawah bar pembanding */
body[class*="tema-"] .navbar { top: 42px; }
@media (max-width: 640px) { body[class*="tema-"] .navbar { top: 0; } .tm-switcher { position: static; } }

/* Aksesibilitas: hormati preferensi kurangi animasi */
@media (prefers-reduced-motion: reduce) {
    body[class*="tema-"] *, body[class*="tema-"] *::before, body[class*="tema-"] *::after {
        animation-duration: .01ms !important; transition-duration: .01ms !important;
    }
}

/* Label pengelompokan di bar pembanding (Hari Besar) */
.tm-switcher-sep { flex-basis: 100%; justify-content: center; text-align: center; margin: 4px 0 0; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.2); color: #f6e3a1; opacity: 1; }

/* Situs sungguhan (bukan pratinjau): tidak ada bar pembanding, jadi navbar tidak diberi offset */
body.tema-live .navbar { top: 0; }