:root {
    --primary: #0b1329;       
    --secondary: #1c2541;     
    --accent: #3a86ff;        
    --accent-glow: rgba(58, 134, 255, 0.3);
    --bg-light: #f4f7fa;      
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --card-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.6);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); -webkit-font-smoothing: antialiased; }
.container { width: 92%; max-width: 1240px; margin: 0 auto; }

/* Topbar */
.topbar { background: var(--primary); color: #94a3b8; padding: 10px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 1000; }
.topbar-flex { display: flex; justify-content: space-between; align-items: center; }
.topbar-flex div { display: flex; align-items: center; gap: 8px; }
.topbar-flex i { color: var(--accent); }

/* ==========================================================================
   NAVBAR STICKY GLASSMORPHISM (PERBAIKAN SPESIFIK & AKURAT)
   ========================================================================== */
.navbar-area { 
    background: transparent; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    position: fixed; 
    top: 37px; 
    left: 0;
    width: 100%;
    z-index: 999; 
    padding: 20px 0; 
    transition: var(--transition);
}

/* Mengunci warna menu UTAMA saja di luar dropdown (Garis bawah dihapus dengan text-decoration: none) */
.navbar-area .nav-item,
.navbar-area .nav-menu > .nav-item,
.navbar-area .nav-menu > .dropdown > .dropdown-toggle { 
    color: #ffffff !important;
    text-decoration: none !important;
}
.navbar-area .main-title { color: #ffffff; }
.navbar-area .sub-title { color: #cbd5e1; }
.navbar-area .brand-icon { background: #ffffff; color: var(--primary); }

/* Kondisi setelah halaman di-scroll ke bawah */
.navbar-area.scrolled {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border); 
    top: 0;
    padding: 14px 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

/* Mengubah warna menu UTAMA menjadi gelap setelah di-scroll */
.navbar-area.scrolled .nav-item,
.navbar-area.scrolled .nav-menu > .nav-item,
.navbar-area.scrolled .nav-menu > .dropdown > .dropdown-toggle { 
    color: var(--text-dark) !important; 
}
.navbar-area.scrolled .main-title { color: var(--primary); }
.navbar-area.scrolled .sub-title { color: var(--text-muted); }
.navbar-area.scrolled .brand-icon { 
    background: linear-gradient(135deg, var(--accent), var(--secondary)); 
    color: #fff; 
    box-shadow: 0 8px 16px var(--accent-glow); 
}

.navbar-flex { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; text-decoration: none; gap: 14px; }
.brand-icon { font-size: 24px; padding: 12px; border-radius: var(--radius-md); transition: var(--transition); }
.brand-text { display: flex; flex-direction: column; }
.main-title { font-weight: 800; font-size: 22px; line-height: 1.1; }
.sub-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.nav-menu { display: flex; gap: 8px; align-items: center; }
.nav-item { text-decoration: none; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--radius-sm); transition: var(--transition); }

/* Efek Hover Menu Utama */
.navbar-area:not(.scrolled) .nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
}
.navbar-area.scrolled .nav-item:hover { 
    background: rgba(58, 134, 255, 0.08); 
    color: var(--accent) !important; 
}

/* Dropdown (Warna teks menu di dalam kotak dipaksa gelap secara spesifik agar nampak jelas) */
.dropdown { position: relative; }
.dropdown-menu { 
    position: absolute; top: calc(100% + 10px); left: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); min-width: 240px; border-radius: var(--radius-md); border: 1px solid var(--glass-border);
    display: block; opacity: 0; visibility: hidden; transform: translateY(12px); transition: var(--transition); padding: 8px; z-index: 1000;
}
.dropdown-menu a { 
    display: block; 
    padding: 12px 16px; 
    color: var(--text-dark) !important; 
    text-decoration: none !important; 
    font-size: 14px; 
    font-weight: 500; 
    border-radius: var(--radius-sm); 
    transition: var(--transition); 
}
.dropdown-menu a:hover { 
    background: var(--accent); 
    color: #ffffff !important; 
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-toggle { display: none; }


/* SLIDER */
.slider-container { position: relative; height: 550px; overflow: hidden; background: var(--primary); width: 100%; z-index: 10; }
.slide { position: absolute; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s; display: flex; align-items: center; z-index: 11; }
.slide.active { opacity: 1; visibility: visible; z-index: 12; }

/* DIUBAH: Opacity gambar dinaikkan dari 0.35 menjadi 0.75 agar foto asli muncul terang */
.slide img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; left: 0; top: 0; }

/* DIUBAH: Efek gelap diturunkan menjadi sangat tipis (0.4 dan 0.05) agar slider terang benderang */
.slide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(11, 19, 41, 0.4) 0%, rgba(11, 19, 41, 0.05) 100%); z-index: 13; }

.slide-content { position: relative; z-index: 14; color: #fff; max-width: 800px; padding: 0 6%; transform: translateY(30px); transition: transform 0.8s; }
.slide.active .slide-content { transform: translateY(0); }
.slide-content h2 { font-size: 46px; font-weight: 800; line-height: 1.2; margin-bottom: 18px; color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.slide-content p { font-size: 17px; color: #e2e8f0; max-width: 650px; line-height: 1.6; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }

.slide-btn {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 20; cursor: pointer;
}
.prev-btn { left: 30px; }
.next-btn { right: 30px; }
.slider-dots { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.dot { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; }
.dot.active { background: var(--accent); width: 28px; border-radius: 6px; }

/* MAIN LAYOUT GRID (KADIS & BERITA SEJAJAR) */
.main-layout-grid { display: grid; grid-template-columns: 350px 1fr; gap: 40px; margin: -50px auto 60px auto; position: relative; z-index: 30; }
.kadis-card { background: #ffffff; border-radius: var(--radius-lg); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05); padding: 24px; }
.kadis-img-frame { width: 100%; height: 320px; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 20px; }
.kadis-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kadis-badge { position: absolute; bottom: 14px; left: 14px; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kadis-info h3 { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.kadis-info .kadis-nip { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 16px; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.kadis-quote { position: relative; background: var(--bg-light); padding: 16px; border-radius: var(--radius-md); }
.kadis-quote p { font-size: 13.5px; line-height: 1.6; color: #475569; font-style: italic; }

/* SEKSI BERITA TERKINI DI INDEKS UTAMA */
.news-section { display: flex; flex-direction: column; }
.section-title { font-size: 26px; font-weight: 800; margin-bottom: 24px; color: var(--primary); display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.section-title::before { content: ''; display: inline-block; width: 6px; height: 26px; background: var(--accent); border-radius: 4px; }

.news-vertical-stack { display: flex; flex-direction: column; gap: 20px; }
.news-card { display: grid; grid-template-columns: 200px 1fr; background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.05); transition: var(--transition); }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(15,23,42,0.08); }
.news-img { position: relative; width: 100%; height: 100%; min-height: 160px; }
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-tag { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.news-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.news-date { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
.news-body h3 { font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 8px; line-height: 1.4; }
.news-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.news-link { text-decoration: none; color: var(--accent); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* SEKSI SISTEM INFORMASI TERINTEGRASI APPS */
.apps-section { padding: 20px 0 60px 0; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.app-item { background: #ffffff; padding: 24px; border-radius: var(--radius-lg); text-align: center; text-decoration: none; color: var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.02); border: 1px solid rgba(15,23,42,0.05); transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-item i { font-size: 32px; color: var(--secondary); transition: var(--transition); }
.app-item span { font-weight: 700; font-size: 14px; }
.app-item:hover { background: var(--primary); color: #fff; transform: translateY(-4px); }
.app-item:hover i { color: var(--accent); }

/* Footer */
.footer { background: var(--primary); color: #94a3b8; padding: 60px 0 30px 0; font-size: 14px; border-top: 4px solid var(--accent); position: relative; z-index: 20; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer h3, .footer h4 { color: #fff; margin-bottom: 20px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 12px; }
.footer ul li a { color: #94a3b8; text-decoration: none; transition: var(--transition); }
.footer ul li a:hover { color: #fff; }
.footer-contact p { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-contact i { color: var(--accent); }
.social-icons { display: flex; gap: 12px; margin-top: 20px; }
.social-icons a { width: 40px; height: 40px; background: rgba(255,255,255,0.03); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: var(--transition); border: 1px solid rgba(255,255,255,0.08); }
.social-icons a:hover { background: var(--accent); }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; color: #475569; font-size: 13px; }

/* Responsive Query */
@media (max-width: 1024px) {
    .main-layout-grid { grid-template-columns: 1fr; margin-top: 20px; }
    .navbar-area { top: 0; background: rgba(11, 19, 41, 0.95); }
}
@media (max-width: 768px) {
    .menu-toggle { display: block; background:none; border:none; color:#fff; font-size:20px; }
    .nav-menu { display: none; flex-direction: column; width: 100%; position: absolute; top: 100%; left: 0; background: #fff; padding: 24px; box-shadow: 0 20px 30px rgba(0,0,0,0.1); gap: 10px; }
    .nav-menu.active { display: flex; }
    .nav-menu .nav-item, .nav-menu .nav-item a { color: var(--text-dark) !important; }
    .news-card { grid-template-columns: 1fr; }
    .topbar-flex { flex-direction: column; gap: 8px; text-align: center; }
    .slide-content h2 { font-size: 28px; }
    .slider-container { height: 420px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}