/* ====================================================
   JWS HUMAIRA - RESPONSIVE & MODERN DISPLAY STYLES
   Redesigned for beautiful, responsive mosque display
   ==================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ====================================================
   THEME VARIABLES
   ==================================================== */

/* 1. TEMA MODERN */
:root, .theme-modern {
    --bg-main: #0f0c29;
    --bg-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --text-main: #ffffff;
    --text-date: #b8c5d6;
    --box-clock: linear-gradient(135deg, #ff416c, #ff4b2b);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #11998e, #38ef7d);
    --box-hadits-txt: #000000;
    --accent: #ff416c;
    --accent-glow: rgba(255, 65, 108, 0.4);
    --border-color: rgba(255,255,255,0.1);
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.1);
    --popup-bg: rgba(15, 12, 41, 0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #4db6ac, #26a69a);
    --c-subuh: linear-gradient(135deg, #7c4dff, #536dfe);
    --c-dzuhur: linear-gradient(135deg, #ff9800, #ff5722);
    --c-ashar: linear-gradient(135deg, #f44336, #e91e63);
    --c-maghrib: linear-gradient(135deg, #827717, #9e9d24);
    --c-isya: linear-gradient(135deg, #1b5e20, #2e7d32);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.3);
}

/* 2. TEMA CLASSIC */
.theme-classic {
    --bg-main: #1a3a1a;
    --bg-gradient: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 50%, #1e4d1e 100%);
    --text-main: #ffffff;
    --text-date: #a5d6a7;
    --box-clock: linear-gradient(135deg, #2e7d32, #1b5e20);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #66bb6a, #43a047);
    --box-hadits-txt: #ffffff;
    --accent: #ffd54f;
    --accent-glow: rgba(255, 213, 79, 0.4);
    --border-color: rgba(255,255,255,0.1);
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.1);
    --popup-bg: rgba(26, 58, 26, 0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #aed581, #8bc34a);
    --c-subuh: linear-gradient(135deg, #66bb6a, #43a047);
    --c-dzuhur: linear-gradient(135deg, #4caf50, #388e3c);
    --c-ashar: linear-gradient(135deg, #43a047, #2e7d32);
    --c-maghrib: linear-gradient(135deg, #388e3c, #1b5e20);
    --c-isya: linear-gradient(135deg, #2e7d32, #1b5e20);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.3);
}

/* 3. TEMA MINIMAL */
.theme-minimal {
    --bg-main: #0a0a0a;
    --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    --text-main: #ffffff;
    --text-date: #8899aa;
    --box-clock: linear-gradient(135deg, #1a1a2e, #16213e);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #0f3460, #16213e);
    --box-hadits-txt: #e0e0e0;
    --accent: #00d2ff;
    --accent-glow: rgba(0, 210, 255, 0.4);
    --border-color: rgba(255,255,255,0.08);
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --popup-bg: rgba(10,10,10,0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #1a1a2e, #16213e);
    --c-subuh: linear-gradient(135deg, #16213e, #1a1a2e);
    --c-dzuhur: linear-gradient(135deg, #1a1a2e, #0f3460);
    --c-ashar: linear-gradient(135deg, #0f3460, #1a1a2e);
    --c-maghrib: linear-gradient(135deg, #1a1a2e, #16213e);
    --c-isya: linear-gradient(135deg, #16213e, #1a1a2e);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.5);
}

/* 4. TEMA COLORFUL */
.theme-colorful {
    --bg-main: #1a1a2e;
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --text-main: #ffffff;
    --text-date: #a3bffa;
    --box-clock: linear-gradient(135deg, #e17055, #d63031);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #0984e3, #6c5ce7);
    --box-hadits-txt: #ffffff;
    --accent: #fdcb6e;
    --accent-glow: rgba(253, 203, 110, 0.4);
    --border-color: rgba(255,255,255,0.12);
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.12);
    --popup-bg: rgba(26,26,46,0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #00cec9, #00b894);
    --c-subuh: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --c-dzuhur: linear-gradient(135deg, #fdcb6e, #f39c12);
    --c-ashar: linear-gradient(135deg, #e84393, #fd79a8);
    --c-maghrib: linear-gradient(135deg, #d63031, #e17055);
    --c-isya: linear-gradient(135deg, #00b894, #55efc4);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.4);
}

/* 5. TEMA ROYAL GOLD */
.theme-gold {
    --bg-main: #0a0a0a;
    --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
    --text-main: #d4af37;
    --text-date: #b89947;
    --box-clock: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    --box-clock-txt: #d4af37;
    --box-hadits: linear-gradient(135deg, #141414, #1a1a1a);
    --box-hadits-txt: #d4af37;
    --accent: #d4af37;
    --accent-glow: rgba(212, 175, 55, 0.4);
    --border-color: rgba(212,175,55,0.2);
    --glass-bg: rgba(212,175,55,0.03);
    --glass-border: rgba(212,175,55,0.2);
    --popup-bg: rgba(10,10,10,0.95);
    --popup-txt: #d4af37;
    --c-imsak: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    --c-subuh: linear-gradient(135deg, #222222, #1a1a1a);
    --c-dzuhur: linear-gradient(135deg, #1a1a1a, #222222);
    --c-ashar: linear-gradient(135deg, #222222, #2a2a2a);
    --c-maghrib: linear-gradient(135deg, #1a1a1a, #222222);
    --c-isya: linear-gradient(135deg, #222222, #1a1a1a);
    --t-imsak: #d4af37; --t-subuh: #d4af37; --t-dzuhur: #d4af37;
    --t-ashar: #d4af37; --t-maghrib: #d4af37; --t-isya: #d4af37;
    --shadow-color: rgba(212,175,55,0.15);
}

/* 6. TEMA OCEAN BLUE */
.theme-ocean {
    --bg-main: #0a192f;
    --bg-gradient: linear-gradient(135deg, #0a192f 0%, #0d2137 50%, #112240 100%);
    --text-main: #ffffff;
    --text-date: #81ecec;
    --box-clock: linear-gradient(135deg, #0984e3, #0652DD);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #00cec9, #0984e3);
    --box-hadits-txt: #ffffff;
    --accent: #74b9ff;
    --accent-glow: rgba(116, 185, 255, 0.4);
    --border-color: rgba(116,185,255,0.15);
    --glass-bg: rgba(116,185,255,0.05);
    --glass-border: rgba(116,185,255,0.15);
    --popup-bg: rgba(10,25,47,0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #00cec9, #00b894);
    --c-subuh: linear-gradient(135deg, #0984e3, #0652DD);
    --c-dzuhur: linear-gradient(135deg, #74b9ff, #0984e3);
    --c-ashar: linear-gradient(135deg, #00a8ff, #0097e6);
    --c-maghrib: linear-gradient(135deg, #192a56, #273c75);
    --c-isya: linear-gradient(135deg, #273c75, #192a56);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.4);
}

/* 7. TEMA MOCCA PASTEL */
.theme-mocca {
    --bg-main: #2c1810;
    --bg-gradient: linear-gradient(135deg, #2c1810 0%, #3e2723 50%, #4e342e 100%);
    --text-main: #ffffff;
    --text-date: #d7ccc8;
    --box-clock: linear-gradient(135deg, #8d6e63, #6d4c41);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #a1887f, #8d6e63);
    --box-hadits-txt: #ffffff;
    --accent: #ffab91;
    --accent-glow: rgba(255, 171, 145, 0.4);
    --border-color: rgba(255,171,145,0.15);
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: rgba(255,171,145,0.15);
    --popup-bg: rgba(44,24,16,0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, #bcaaa4, #a1887f);
    --c-subuh: linear-gradient(135deg, #a1887f, #8d6e63);
    --c-dzuhur: linear-gradient(135deg, #d4a373, #bc8a5f);
    --c-ashar: linear-gradient(135deg, #bc8a5f, #a1887f);
    --c-maghrib: linear-gradient(135deg, #8d6e63, #6d4c41);
    --c-isya: linear-gradient(135deg, #5d4037, #4e342e);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.4);
}

/* 8. TEMA EMERALD MOSQUE */
.theme-emerald {
    --bg-main: #041F1A;
    --bg-gradient: linear-gradient(135deg, #041F1A 0%, #064E3B 50%, #065F46 100%);
    --text-main: #F8FAFC;
    --text-date: #A7F3D0;
    --box-clock: linear-gradient(135deg, #0F766E, #047857);
    --box-clock-txt: #F8FAFC;
    --box-hadits: linear-gradient(135deg, #064E3B, #065F46);
    --box-hadits-txt: #A7F3D0;
    --accent: #FACC15;
    --accent-glow: rgba(250, 204, 21, 0.4);
    --border-color: rgba(250,204,21,0.15);
    --glass-bg: rgba(250,204,21,0.03);
    --glass-border: rgba(250,204,21,0.15);
    --popup-bg: rgba(4,31,26,0.95);
    --popup-txt: #F8FAFC;
    --c-imsak: linear-gradient(135deg, #064E3B, #065F46);
    --c-subuh: linear-gradient(135deg, #0F766E, #047857);
    --c-dzuhur: linear-gradient(135deg, #065F46, #064E3B);
    --c-ashar: linear-gradient(135deg, #0F766E, #065F46);
    --c-maghrib: linear-gradient(135deg, #064E3B, #047857);
    --c-isya: linear-gradient(135deg, #0F766E, #064E3B);
    --t-imsak: #A7F3D0; --t-subuh: #F8FAFC; --t-dzuhur: #A7F3D0;
    --t-ashar: #F8FAFC; --t-maghrib: #A7F3D0; --t-isya: #F8FAFC;
    --shadow-color: rgba(0,0,0,0.4);
}

/* 9. TEMA MIDNIGHT GOLD */
.theme-midnight {
    --bg-main: #020617;
    --bg-gradient: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%);
    --text-main: #F8FAFC;
    --text-date: #CBD5E1;
    --box-clock: linear-gradient(135deg, #1e1b4b, #312e81);
    --box-clock-txt: #FACC15;
    --box-hadits: linear-gradient(135deg, #0F172A, #1e1b4b);
    --box-hadits-txt: #CBD5E1;
    --accent: #F59E0B;
    --accent-glow: rgba(245, 158, 11, 0.4);
    --border-color: rgba(245,158,11,0.2);
    --glass-bg: rgba(245,158,11,0.03);
    --glass-border: rgba(245,158,11,0.2);
    --popup-bg: rgba(2,6,23,0.95);
    --popup-txt: #F8FAFC;
    --c-imsak: linear-gradient(135deg, #0F172A, #1e1b4b);
    --c-subuh: linear-gradient(135deg, #1e1b4b, #312e81);
    --c-dzuhur: linear-gradient(135deg, #0F172A, #1e1b4b);
    --c-ashar: linear-gradient(135deg, #312e81, #1e1b4b);
    --c-maghrib: linear-gradient(135deg, #0F172A, #1e1b4b);
    --c-isya: linear-gradient(135deg, #1e1b4b, #0F172A);
    --t-imsak: #CBD5E1; --t-subuh: #F8FAFC; --t-dzuhur: #CBD5E1;
    --t-ashar: #F8FAFC; --t-maghrib: #CBD5E1; --t-isya: #F8FAFC;
    --shadow-color: rgba(0,0,0,0.5);
}

/* 10. TEMA SOFT MINIMAL */
.theme-soft {
    --bg-main: #f0f4f8;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text-main: #ffffff;
    --text-date: #e2e8f0;
    --box-clock: linear-gradient(135deg, #667eea, #764ba2);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    --box-hadits-txt: #ffffff;
    --accent: #fbbf24;
    --accent-glow: rgba(251, 191, 36, 0.4);
    --border-color: rgba(255,255,255,0.2);
    --glass-bg: rgba(255,255,255,0.1);
    --glass-border: rgba(255,255,255,0.2);
    --popup-bg: rgba(102, 126, 234, 0.95);
    --popup-txt: #ffffff;
    --c-imsak: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    --c-subuh: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
    --c-dzuhur: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    --c-ashar: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
    --c-maghrib: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    --c-isya: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.15);
}

/* 11. TEMA LIGHT (Terang - Langit Biru) */
.theme-light {
    --bg-main: #e8f4fd;
    --bg-gradient: linear-gradient(180deg, #87CEEB 0%, #b8e2f8 40%, #e8f4fd 100%);
    --text-main: #1a1a2e;
    --text-date: #334155;
    --box-clock: linear-gradient(135deg, #1e3a5f, #2c5282);
    --box-clock-txt: #ffffff;
    --box-hadits: linear-gradient(135deg, #ffffff, #f0f9ff);
    --box-hadits-txt: #1e293b;
    --accent: #f59e0b;
    --accent-glow: rgba(245, 158, 11, 0.5);
    --border-color: rgba(0,0,0,0.08);
    --glass-bg: rgba(255,255,255,0.7);
    --glass-border: rgba(0,0,0,0.08);
    --popup-bg: rgba(255,255,255,0.97);
    --popup-txt: #1a1a2e;
    --c-imsak: linear-gradient(135deg, #1e293b, #334155);
    --c-subuh: linear-gradient(135deg, #1e3a5f, #2c5282);
    --c-dzuhur: linear-gradient(135deg, #f59e0b, #d97706);
    --c-ashar: linear-gradient(135deg, #334155, #475569);
    --c-maghrib: linear-gradient(135deg, #7c3aed, #6d28d9);
    --c-isya: linear-gradient(135deg, #1e293b, #0f172a);
    --t-imsak: #fff; --t-subuh: #fff; --t-dzuhur: #fff;
    --t-ashar: #fff; --t-maghrib: #fff; --t-isya: #fff;
    --shadow-color: rgba(0,0,0,0.1);
}
.theme-light .date-box {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    color: #1e293b;
}
.theme-light .countdown-box {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
}
.theme-light #status_sholat,
.theme-light #countdown_waktu {
    color: #1e3a5f;
}
.theme-light .header-masjid {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.06);
}
.theme-light .header-masjid h1,
.theme-light .header-masjid p {
    color: #1a1a2e;
}
.theme-light .overlay-gelap {
    background: rgba(0,0,0,0.05);
}
.theme-light .running-text-box {
    color: #1e3a5f;
    text-shadow: none;
    background: rgba(255,255,255,0.6);
    border-top: 1px solid rgba(0,0,0,0.08);
}
.theme-light .schedule-section {
    background: rgba(255,255,255,0.4);
}


/* ====================================================
   MAIN LAYOUT STYLES
   ==================================================== */
body {
    background: var(--bg-gradient);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transition: background 0.8s ease;
    position: fixed;
    top: 0;
    left: 0;
}

html {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.app-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    padding: 0.8vw;
    gap: 0.7vw;
    overflow: hidden;
}

/* --- TOP SECTION --- */
.top-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    gap: 1.5vw;
    min-height: 0;
    overflow: hidden;
}

.sidebar {
    width: 28%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 28%;
    flex: 0 0 28%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 1.2vw;
    min-height: 0;
    overflow: hidden;
}

.main-content {
    width: 72%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 1.2vw;
    min-height: 0;
    overflow: hidden;
}

/* --- DATE BOX --- */
.date-box {
    flex-shrink: 0;
    padding: 1vw 1.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1vw;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#tgl_masehi {
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 28px);
    line-height: 1.3;
    color: var(--text-main);
}

#tgl_hijriah {
    font-size: clamp(10px, 1.1vw, 22px);
    font-weight: 500;
    color: var(--accent);
    margin-top: 0.3vw;
}

/* --- CLOCK BOX --- */
.clock-box {
    flex: 1.5;
    background: var(--box-clock);
    border-radius: 1.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 32px var(--shadow-color);
    position: relative;
    overflow: hidden;
}

.clock-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#jam_besar {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 4.8vw, 96px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 2px;
    transform: scaleY(1.5);
    display: inline-block;
    transform-origin: center;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
    padding: 0 0.3vw;
}

/* --- COUNTDOWN BOX --- */
.countdown-box {
    flex: 1;
    background: var(--glass-bg);
    border: 2px solid var(--accent);
    border-radius: 1.2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 20px var(--accent-glow), inset 0 0 20px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

#status_sholat {
    font-size: clamp(10px, 1.2vw, 24px);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.9;
}

#countdown_waktu {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(18px, 3.5vw, 72px);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    text-shadow: 0 0 15px var(--accent-glow);
}

/* --- HADITS BOX --- */
.hadits-box {
    flex: 1.2;
    background: var(--box-hadits);
    border-radius: 1.2vw;
    padding: 1.5vw 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 32px var(--shadow-color);
    overflow: hidden;
    position: relative;
}

.hadits-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: hadits-shine 6s ease-in-out infinite;
}

@keyframes hadits-shine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

#txt_hadits {
    position: relative;
    z-index: 1;
}

/* --- HEADER MASJID --- */
.header-masjid {
    flex-shrink: 0;
    padding: 0.8vw 1.5vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5vw;
    text-align: right;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1vw;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.text-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-logo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.5vw;
    border-left: 2px solid var(--border-color);
}

.box-logo img {
    height: 5vw;
    max-height: 60px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

#txt_nama {
    font-size: clamp(16px, 2.8vw, 64px);
    font-weight: 800;
    line-height: 1;
    color: var(--text-main);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

#txt_alamat {
    font-size: clamp(8px, 1vw, 18px);
    color: var(--text-date);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.3vw;
}

/* --- SLIDESHOW --- */
.slider-box {
    flex: 1;
    position: relative;
    border-radius: 1.2vw;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-color);
    background: #000;
    border: 1px solid var(--glass-border);
}

.bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    transform: scale(1.02);
}

.bg-layer.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
    transition: opacity 1.8s ease-in-out, transform 8s ease-out;
}

.overlay-gelap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 3;
}

/* --- YOUTUBE LAYER --- */
.youtube-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9;
    background: #000;
    overflow: hidden;
}

/* --- INFO OVERLAY --- */
.slide-info-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.info-card {
    width: 92%;
    max-height: 96%;
    background: var(--popup-bg);
    color: var(--popup-txt);
    border: 2px solid var(--accent);
    border-radius: 1.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px var(--accent-glow);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.info-title {
    font-size: clamp(12px, 1.8vw, 32px);
    color: var(--accent);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5vw;
    margin-bottom: 0.8vw;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-weight: 700;
}

/* --- KAS STYLES --- */
.kas-container {
    display: flex;
    width: 100%;
    gap: 1.5vw;
    align-items: center;
    justify-content: center;
}

.kas-table-wrapper { flex: 1; }

.table-kas {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(10px, 1.5vw, 26px);
}

.table-kas td {
    padding: 0.5vw 1vw;
    border-bottom: 1px solid var(--border-color);
    color: var(--popup-txt);
}

.table-kas .angka {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    color: var(--popup-txt);
}

.table-kas .total-row td {
    font-weight: bold;
    font-size: clamp(12px, 1.7vw, 30px);
    color: var(--accent);
    border-top: 2px solid var(--accent);
    border-bottom: none;
}

.kas-qris-wrapper {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 2px dashed var(--border-color);
    padding-left: 1.5vw;
}

.qris-title {
    font-size: clamp(7px, 0.8vw, 14px);
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 0.5vw;
    text-transform: uppercase;
    text-align: center;
}

#img_qris {
    width: 100%;
    max-width: 160px;
    border-radius: 0.6vw;
    border: 2px solid var(--accent);
    padding: 4px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.kas-periode {
    font-size: 0.45em;
    color: var(--popup-txt);
    opacity: 0.7;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 0;
    display: block;
    margin-top: 0.3vw;
}

.txt-hijau { color: #4ade80 !important; }
.txt-merah { color: #f87171 !important; }

/* --- PETUGAS & AGENDA --- */
.petugas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8vw;
    width: 100%;
}

.petugas-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6vw;
    margin-top: 0.5vw;
}

.p-item {
    background: var(--glass-bg);
    border: 2px solid var(--border-color);
    padding: 0.8vw;
    border-radius: 0.6vw;
    text-align: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.p-label {
    font-size: clamp(7px, 0.8vw, 14px);
    color: var(--popup-txt);
    opacity: 0.7;
    margin-bottom: 0.2vw;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p-name {
    font-size: clamp(10px, 1.4vw, 24px);
    font-weight: bold;
    color: var(--popup-txt);
}

.table-agenda {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(9px, 1.2vw, 20px);
    text-align: left;
}

.table-agenda th {
    background: var(--glass-bg);
    padding: 0.5vw 0.8vw;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0.3vw;
}

.table-agenda td {
    padding: 0.6vw 0.8vw;
    border-bottom: 1px solid var(--border-color);
    color: var(--popup-txt);
}

/* --- SCHEDULE SECTION --- */
.schedule-section {
    height: 16vh;
    min-height: 100px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    gap: 0.6vw;
    padding: 0;
    overflow: hidden;
}

.jadwal-card {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 1vw;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.jadwal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.jadwal-card .label {
    font-size: clamp(11px, 1.8vw, 30px);
    font-weight: 700;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

.jadwal-card .waktu {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(20px, 4.4vw, 84px);
    font-weight: 700;
    line-height: 1.05;
    position: relative;
    z-index: 1;
}

.box-imsak { background: var(--c-imsak); color: var(--t-imsak); }
.box-subuh { background: var(--c-subuh); color: var(--t-subuh); }
.box-dzuhur { background: var(--c-dzuhur); color: var(--t-dzuhur); }
.box-ashar { background: var(--c-ashar); color: var(--t-ashar); }
.box-maghrib { background: var(--c-maghrib); color: var(--t-maghrib); }
.box-isya { background: var(--c-isya); color: var(--t-isya); }

.active-prayer {
    transform: scale(1.05);
    z-index: 5;
    border: 3px solid #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    background: #e11d48 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.5), 0 0 40px rgba(225, 29, 72, 0.25), 0 6px 24px var(--shadow-color);
    -webkit-animation: prayer-pulse 1.5s ease-in-out infinite;
    animation: prayer-pulse 1.5s ease-in-out infinite;
}
.active-prayer .label,
.active-prayer .waktu {
    color: #ffffff !important;
}
@-webkit-keyframes prayer-pulse {
    0%, 100% { -webkit-transform: scale(1.05); box-shadow: 0 0 20px rgba(225, 29, 72, 0.5), 0 0 40px rgba(225, 29, 72, 0.25); }
    50% { -webkit-transform: scale(1.07); box-shadow: 0 0 28px rgba(225, 29, 72, 0.6), 0 0 50px rgba(225, 29, 72, 0.35); }
}
@keyframes prayer-pulse {
    0%, 100% { transform: scale(1.05); box-shadow: 0 0 20px rgba(225, 29, 72, 0.5), 0 0 40px rgba(225, 29, 72, 0.25); }
    50% { transform: scale(1.07); box-shadow: 0 0 28px rgba(225, 29, 72, 0.6), 0 0 50px rgba(225, 29, 72, 0.35); }
}

/* --- RUNNING TEXT --- */
.running-text-box {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 4.5vh;
    min-height: 32px;
    max-height: 44px;
    overflow: hidden;
    color: var(--accent);
    font-size: clamp(13px, 1.6vw, 28px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--accent-glow);
}
.marquee-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.marquee-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    -webkit-animation: marquee-scroll 25s linear infinite;
    animation: marquee-scroll 25s linear infinite;
}
.marquee-track span {
    display: block;
    white-space: nowrap;
    padding-right: 120px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
@-webkit-keyframes marquee-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes marquee-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* --- OVERLAYS --- */
.overlay-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.judul-overlay {
    font-size: clamp(24px, 5vw, 100px);
    color: var(--accent);
    margin-bottom: 2vw;
    font-weight: 800;
    text-shadow: 0 0 30px var(--accent-glow);
}

.timer-besar {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(48px, 18vw, 300px);
    font-weight: bold;
    line-height: 0.9;
    margin-bottom: 3vw;
    text-shadow: 0 0 40px rgba(255,255,255,0.3);
}

.blink { animation: blinker 1s infinite; }
@keyframes blinker { 50% { opacity: 0.3; } }

/* ====================================================
   RESPONSIVE BREAKPOINTS
   ==================================================== */

/* Force landscape & no scroll on all devices */
@media (orientation: portrait) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}

/* Small screens (mobile/tablet in landscape) - scale down proportionally */
@media (max-height: 500px) {
    .app-wrapper { padding: 0.8vw; gap: 0.8vw; }
    .sidebar { gap: 0.8vw; }
    .main-content { gap: 0.8vw; }
    .schedule-section { height: 11vh; }
    #jam_besar { font-size: clamp(18px, 4.5vw, 80px); }
    #countdown_waktu { font-size: clamp(14px, 3vw, 60px); }
    .jadwal-card .waktu { font-size: clamp(16px, 3.4vw, 60px); }
    .jadwal-card .label { font-size: clamp(9px, 1.4vw, 22px); }
    .running-text-box { font-size: clamp(11px, 1.5vw, 24px); height: 4.5vh; min-height: 28px; }
}

/* Very small landscape screens (phones) */
@media (max-height: 400px) {
    .app-wrapper { padding: 0.5vw; gap: 0.5vw; }
    .sidebar { gap: 0.5vw; }
    .main-content { gap: 0.5vw; }
    .date-box { padding: 0.5vw 1vw; }
    #tgl_masehi { font-size: clamp(8px, 1.2vw, 18px); }
    #tgl_hijriah { font-size: clamp(7px, 1vw, 16px); }
    .clock-box { border-radius: 0.8vw; }
    .countdown-box { border-radius: 0.8vw; }
    .hadits-box { padding: 0.8vw 1.2vw; border-radius: 0.8vw; }
    .slider-box { border-radius: 0.8vw; }
    .header-masjid { padding: 0.4vw 1vw; }
    #txt_nama { font-size: clamp(10px, 2.2vw, 48px); }
    #txt_alamat { font-size: clamp(6px, 0.8vw, 14px); }
    .box-logo img { height: 4vw; max-height: 40px; }
    .schedule-section { height: 11vh; }
    .jadwal-card { border-radius: 0.6vw; }
}

/* ====================================================
   PERFORMANCE / LITE MODE
   Aktif otomatis pada perangkat lemah (STB / RAM kecil).
   Ditandai dengan class .perf-lite pada elemen <html>.
   Tujuan: hilangkan efek paling berat (backdrop blur,
   animasi dekoratif yang repaint terus, Ken Burns zoom)
   agar running text & pergantian slide tetap mulus.
   ==================================================== */

/* 1) Matikan SEMUA backdrop-filter (paling berat di GPU lemah) */
.perf-lite .date-box,
.perf-lite .countdown-box,
.perf-lite .header-masjid,
.perf-lite .info-card,
.perf-lite .slide-info-layer,
.perf-lite .p-item,
.perf-lite .overlay-fullscreen {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 2) Matikan animasi dekoratif yang memaksa repaint terus-menerus */
.perf-lite .clock-box::before { display: none !important; }      /* shimmer gradient muter */
.perf-lite .hadits-box::after { display: none !important; }      /* shine animasi 'left' */

/* 3) Background slide: tanpa Ken Burns zoom, crossfade ringan */
.perf-lite .bg-layer {
    transition: opacity 0.6s linear !important;
    -webkit-transform: none !important;
    transform: none !important;
}
.perf-lite .bg-layer.active {
    -webkit-transform: none !important;
    transform: none !important;
}

/* 4) Highlight waktu sholat aktif: statis, tanpa animasi box-shadow per-frame */
.perf-lite .active-prayer {
    -webkit-animation: none !important;
    animation: none !important;
    box-shadow: 0 0 18px rgba(225, 29, 72, 0.55) !important;
}

/* 5) Marquee: tanpa text-shadow agar lebih ringan saat bergerak */
.perf-lite .running-text-box { text-shadow: none !important; }

/* 6) Kurangi shadow halus & blur lain yang memicu repaint berat */
.perf-lite .clock-box,
.perf-lite .info-card,
.perf-lite .slider-box,
.perf-lite .jadwal-card { box-shadow: none !important; }
.perf-lite .overlay-fullscreen {
    background: rgba(0, 0, 0, 0.98) !important;
}