:root {
    --bg-dark: #0f1c15; /* Hijau sangat gelap */
    --uin-green: #00693e;
    --uin-gold: #ffd700;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-white: #ffffff;
    --text-gold: #ffecb3;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(circle at top right, #1b5e20, #000);
    color: var(--text-white);
    height: 100vh;
    overflow: hidden; /* Mencegah scroll halaman utama */
    display: flex;
    flex-direction: column;
}

/* --- HEADER --- */
header {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    height: 80px;
}
.logo h1 { margin: 0; font-size: 1.8rem; color: var(--uin-gold); text-transform: uppercase; letter-spacing: 2px; }
.logo span { color: #fff; font-weight: 300; }
.datetime { text-align: right; }
.time { font-size: 2rem; font-weight: bold; line-height: 1; }
.date { font-size: 0.9rem; color: #ccc; }

/* --- MAIN LAYOUT (GRID) --- */
.main-content {
    flex: 1;
    display: grid;
    grid-template-columns: 60% 40%; /* Kiri: Banner, Kanan: Jadwal */
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

/* --- SLIDER (BANNER) --- */
.slider-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
}
.slide.active { opacity: 1; }
/* Placeholder jika gambar rusak/tidak ada */
.slide-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background: linear-gradient(45deg, var(--uin-green), #004d40);
}

/* --- SCHEDULE LIST (KANAN) --- */
.schedule-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.section-title {
    color: var(--uin-gold);
    border-bottom: 2px solid var(--uin-green);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}
.schedule-scroll {
    overflow-y: auto; /* Bisa discroll jika konten banyak */
    padding-right: 5px;
    height: 100%;
}
/* Scrollbar Custom */
.schedule-scroll::-webkit-scrollbar { width: 5px; }
.schedule-scroll::-webkit-scrollbar-thumb { background: var(--uin-green); border-radius: 5px; }

/* Kartu Jadwal */
.event-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-left: 5px solid var(--uin-green);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    transition: transform 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Highlight acara yang sedang berlangsung sekarang */
.event-card.live {
    background: rgba(0, 105, 62, 0.4); /* Hijau transparan */
    border-left: 5px solid var(--uin-gold);
    box-shadow: 0 0 15px rgba(0, 105, 62, 0.5);
}
.ev-time { font-size: 1.1rem; font-weight: bold; color: var(--uin-gold); min-width: 100px; }
.ev-details h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: #fff; }
.ev-details p { margin: 0; font-size: 0.9rem; color: #ccc; }
.status-badge {
    padding: 5px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
}
.bg-live { background: #c00; color: white; animation: blink 2s infinite; }
.bg-upcoming { background: var(--uin-green); color: white; }

@keyframes blink { 50% { opacity: 0.5; } }

/* --- RUNNING TEXT (FOOTER) --- */
footer {
    background: var(--uin-green);
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    border-top: 2px solid var(--uin-gold);
}
.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    font-size: 1.2rem;
    font-weight: 500;
}
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Responsif untuk layar kecil (Opsional) */
@media (max-width: 768px) {
    .main-content { grid-template-columns: 1fr; }
    .slider-container { display: none; } /* Sembunyikan banner di HP */
}