:root {
    --primary: #0a4d2e;
    --primary-dark: #052b1a;
    --accent: #ffc107;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }

/* NAVBAR */
.navbar { background-color: var(--primary) !important; min-height: 70px; z-index: 2000; }
.logo-img { width: 45px; }

/* CLOCK BAR */
.clock-bar { margin-top: 70px; position: relative; z-index: 1000; }

/* HERO SECTION */
.hero-section {
    position: relative;
    height: 90vh;
    min-height: 600px;
    background-image: url('https://res.cloudinary.com/dsvym6npv/image/upload/v1713283877/IMG-20240416-WA0007_lcwa2a.jpg') !important;
    background-size: cover;
    background-position: center 25%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.hero-container { z-index: 10; position: relative; }

.hero-title {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9), 0px 0px 20px rgba(0,0,0,0.5);
}

.hero-desc {
    font-size: 1.15rem;
    color: #f8f9fa;
    max-width: 600px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
    font-weight: 500;
}

.hero-badge {
    background: var(--accent);
    color: #000;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-block;
    text-transform: uppercase;
}

.clickable-btn {
    position: relative;
    z-index: 50;
    pointer-events: auto !important;
    transition: all 0.3s ease;
}

.clickable-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* VISI MISI */
.visi-misi-section { background: #fdfdfd; }
.visi-box { background: white; border-left: 5px solid var(--primary); border-radius: 20px; }
.section-badge { display: inline-block; background: rgba(10, 77, 46, 0.1); color: var(--primary); padding: 5px 15px; border-radius: 50px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
.misi-number { background: var(--primary); color: var(--accent); min-width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 800; }

/* MODAL LOGIN */
.custom-modal { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 30px; }
.login-icon-box { width: 70px; height: 70px; background: rgba(255, 193, 7, 0.15); color: var(--accent); font-size: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: 20px; margin: 0 auto; }
.custom-input-group { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; overflow: hidden; }
.custom-input-group .input-group-text { background: transparent; border: 0; color: var(--accent); }
.custom-input-group .form-control, .custom-input-group .form-select { background: transparent; color: white; border: none; padding: 12px; }
.custom-input-group select option { background: var(--primary-dark); color: white; }

/* ANNOUNCEMENT BAR */
.announcement-bar { position: absolute; bottom: 0; width: 100%; background-color: var(--primary); height: 48px; display: flex; align-items: center; z-index: 100; border-top: 3px solid var(--accent); }
.ticker-label { background-color: var(--accent); color: #000; font-weight: 800; padding: 0 25px; height: 100%; display: flex; align-items: center; font-size: 0.85rem; }

/* FOOTER SOSMED */
.social-icons a { transition: transform 0.3s ease; display: inline-block; }
.social-icons a:hover { transform: translateY(-5px); color: var(--accent) !important; }

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .navbar { min-height: 65px; }
    .clock-bar { margin-top: 65px; }
    .hero-section { background-position: center 10%; text-align: center; }
    .hero-overlay { background: rgba(0,0,0,0.6); }
    .hero-title { font-size: 2rem; }
    .visi-misi-section { text-align: center; }
    .misi-item { text-align: left; }
}