:root[data-theme="daylight"] {
    --bg: #f8fafc;
    --text: #1e293b;
    --nav-bg: #ffffff;
    --primary: #047857; 
    --primary-text: #ffffff; /* White text on dark green */
    --accent: #b45309;  
    --footer-bg: #0f172a;
    --footer-text: #f1f5f9;
    --card-bg: #ffffff;
}

:root[data-theme="night"] {
    --bg: #0f172a;
    --text: #e2e8f0;
    --nav-bg: #1e293b;
    --primary: #10b981; 
    --primary-text: #ffffff; /* White text on emerald green */
    --accent: #f59e0b;  
    --footer-bg: #020617;
    --footer-text: #cbd5e1;
    --card-bg: #1e293b;
}

:root[data-theme="blind"] {
    --bg: #000000;
    --text: #ffffff;
    --nav-bg: #000000;
    --primary: #ffff00; 
    --primary-text: #000000; /* Black text on bright yellow for high contrast */
    --accent: #00ffff;  
    --footer-bg: #000000;
    --footer-text: #ffffff;
    --card-bg: #111111;
}

/* Add the helper utility class below your other mapping classes */
.text-var-primary-text { color: var(--primary-text) !important; }

.bg-var-bg { background-color: var(--bg); }
.text-var-text { color: var(--text); }
.bg-var-nav-bg { background-color: var(--nav-bg); }
.text-var-primary { color: var(--primary); }
.bg-var-primary { background-color: var(--primary); }
.bg-var-footer-bg { background-color: var(--footer-bg); }
.text-var-footer-text { color: var(--footer-text); }
.bg-var-card-bg { background-color: var(--card-bg); }

.arabesque-bg {
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z M30 10 L50 30 L30 50 L10 30 Z M30 20 L40 30 L30 40 L20 30 Z' fill='%23047857' fill-opacity='0.03'/%3E%3C/svg%3E");
}

:root[data-theme="blind"] .arabesque-bg {
    background-image: none;
}

.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--primary); transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.islamic-pattern-line {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 6 L10 0 L20 6 L10 12 Z' fill='%23ffffff' fill-opacity='0.4'/%3E%3C/svg%3E");
    background-size: contain;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

.accordion-content.active {
    max-height: 1000px; /* Nilai yang cukup besar untuk menampung konten */
    opacity: 1;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Animasi berkedip untuk hitung mundur */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.countdown-active {
    color: #ef4444 !important; /* Merah terang */
    font-weight: 900 !important;
    animation: blink 1s infinite;
    font-family: monospace; /* Agar lebar angka stabil */
}

.countdown-now {
    color: #ffffff !important;
    background-color: #ef4444;
    padding: 2px 8px;
    border-radius: 4px;
}