:root {
    --primary-green: #1e5631;
    --accent-gold: #e6b800;
    --dark-bg: #121212;
    --light-text: #FFFFFF;
    --secondary-text: #CCCCCC;
    --highlight-bg: rgba(230, 184, 0, 0.15);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-bg);
    color: var(--light-text);
    margin: 0;
    background: var(--dark-bg) url('https://images.unsplash.com/photo-1519818187420-8e49de7adeef?auto=format&fit=crop&w=1920&q=80') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

/* =========================================== */
/* === GAYA DEFAULT UNTUK MOBILE (MOBILE FIRST) === */
/* =========================================== */
.display-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.main-info {
    padding: 20px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.lokasi {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 20px;
}

.location-filter {
    margin-bottom: 20px;
}

#filter-lokasi {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid var(--secondary-text);
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--light-text);
    cursor: pointer;
}

.next-prayer h2 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.next-prayer h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    margin: 5px 0 10px;
    font-weight: 700;
    color: var(--accent-gold);
}

.countdown p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--secondary-text);
}

.countdown h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    margin-top: 5px;
    color: var(--light-text);
}

.side-info {
    padding: 20px;
}

.header-info {
    text-align: center;
    margin-bottom: 20px;
}

.live-clock {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.date-info {
    font-size: 0.9rem;
}
.date-info p {
    margin: 0;
}

.full-schedule {
    margin-top: 20px;
}

.jadwal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 1.1rem;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.jadwal-item .waktu {
    font-weight: 700;
}

.jadwal-item .jam {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.jadwal-item.next {
    background-color: var(--highlight-bg);
    border-left: 5px solid var(--accent-gold);
}

.jadwal-item.next .waktu,
.jadwal-item.next .jam {
    color: var(--accent-gold);
}


/* ======================================================= */
/* === MEDIA QUERY UNTUK DESKTOP & TV (LAYAR LEBAR) === */
/* === Aktif jika lebar layar 768px atau lebih === */
/* ======================================================= */
@media screen and (min-width: 768px) {
    body {
        overflow: hidden;
    }

    .display-container {
        display: grid;
        grid-template-columns: 45% 55%;
        height: 100vh;
        width: 100vw;
    }

    .main-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4vw;
    }
    
    .location-filter {
        display: none; /* Sembunyikan filter di layar besar */
    }

    .lokasi {
        font-size: 2vw;
        margin-bottom: 5vh;
    }

    .next-prayer h2 {
        font-size: 4vw;
    }

    .next-prayer h1 {
        font-size: 12vw;
        margin: -1vh 0 2vh;
        letter-spacing: 0.5vw;
    }

    .countdown p {
        font-size: 1.5vw;
    }

    .countdown h3 {
        font-size: 4vw;
        margin-top: 1vh;
    }

    .side-info {
        display: flex;
        flex-direction: column;
        padding: 3vw;
    }

    .header-info {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        text-align: left;
        border-bottom: 2px solid var(--accent-gold);
        padding-bottom: 2vh;
        margin-bottom: 0;
    }

    .live-clock {
        font-size: 5vw;
        margin-bottom: 0;
    }

    .date-info {
        text-align: right;
        font-size: 1.5vw;
    }

    .full-schedule {
        margin-top: 4vh;
    }

    .jadwal-item {
        padding: 1.5vh 2vw;
        margin-bottom: 1.5vh;
        font-size: 2.2vw;
        background-color: transparent;
    }

    .jadwal-item.next {
        background-color: var(--highlight-bg);
        border-left: 8px solid var(--accent-gold);
        transform: scale(1.05);
    }
}

/* ======================================================= */
/* === GAYA TAMBAHAN UNTUK BRANDING/LOGO               === */
/* ======================================================= */

/* --- Tampilan Branding di Mobile --- */
.branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Jarak antara logo dan teks */
    margin: 30px 0;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.branding img {
    height: 50px; /* Ukuran logo di HP */
    width: auto;
}

.branding h2 {
    margin: 0;
    font-size: 0.9rem; /* Ukuran teks di HP */
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: var(--secondary-text);
}


/* --- Tampilan Branding di Desktop/TV --- */
@media screen and (min-width: 768px) {
    .branding {
        margin: 3vh 0;
        background-color: transparent; /* Hapus background di layar besar */
        justify-content: flex-start; /* Ratakan ke kiri */
        padding: 0;
    }

    .branding img {
        height: 5vw; /* Ukuran logo responsif di layar besar */
    }

    .branding h2 {
        font-size: 1.6vw; /* Ukuran teks responsif di layar besar */
        line-height: 1.3;
    }
}