/* Reset & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
:root { --primary-color: #0b5e46; --primary-light: #e8f5e9; --text-dark: #1f2937; --text-muted: #6b7280; --border-color: #f3f4f6; --bg-color: #f4f7f6; --white: #ffffff; }
html { height: 100%; }
body { background-color: var(--bg-color); color: var(--text-dark); padding-bottom: 0; min-height:100vh; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }

/* Utility Classes */
.desktop-only { display: none !important; }
.desktop-only-flex { display: none !important; }

/* --- Mobile First Components --- */

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: var(--white); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.header-brand-group { display: flex; align-items: center; gap: 10px; }
.header-brand-group .menu-toggle { padding: 6px 4px; line-height: 1; }
.header-left { display: flex; align-items: center; gap: 12px; }
.logo img { width: 40px; height: 40px; object-fit: contain; }
.header-titles h1 { font-size: 14px; font-weight: 700; color: var(--primary-color); margin-bottom: 2px; }
.header-titles p { font-size: 10px; color: var(--text-muted); }
.menu-toggle { background: none; border: none; font-size: 20px; color: var(--primary-color); cursor: pointer; }

/* Main Container Base */
.main-container { padding: 0; }
.content-center { width: 100%; }

/* Buttons */
.btn-primary { width: 100%; padding: 14px; background-color: var(--primary-color); color: var(--white); border: none; border-radius: 25px; font-size: 14px; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 6px rgba(11, 94, 70, 0.2); text-decoration: none; }
.btn-primary:hover { opacity: 0.9; }

/* Sidebar Drawer (Mobile) */
.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 90; }
.sidebar-overlay.active { opacity: 1; visibility: visible; }
.sidebar { position: fixed; top: 0; left: -100%; width: 85%; max-width: 320px; height: 100%; background-color: var(--primary-color); color: var(--white); z-index: 100; transition: left 0.3s ease; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar.active { left: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-logo-container { display: flex; align-items: center; gap: 12px; }
.sidebar-titles h2 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.sidebar-titles p { font-size: 11px; opacity: 0.8; }
.close-btn { background: none; border: none; color: var(--white); font-size: 20px; cursor: pointer; }
.sidebar-menu { padding: 16px 0 32px; flex: 1; }
.sidebar-item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; color: var(--white); font-size: 15px; font-weight: 500; transition: background-color 0.2s; }
.sidebar-item:active { background-color: rgba(255, 255, 255, 0.1); }
.sidebar-item.active { background-color: rgba(255, 255, 255, 0.14); font-weight: 600; }
.sidebar-toggle { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.sidebar-chevron { margin-left: auto; font-size: 12px; opacity: 0.8; transition: transform 0.25s ease; }
.sidebar-toggle.open .sidebar-chevron { transform: rotate(180deg); }
.sidebar-submenu { max-height: 0; overflow: hidden; visibility: hidden; background-color: rgba(0, 0, 0, 0.14); transition: max-height 0.3s ease, visibility 0s linear 0.3s; }
.sidebar-submenu.open { max-height: 240px; visibility: visible; transition: max-height 0.3s ease, visibility 0s; }
.sidebar-subitem { display: flex; align-items: center; gap: 14px; padding: 13px 24px 13px 44px; color: var(--white); font-size: 14px; font-weight: 500; border-left: 3px solid transparent; transition: background-color 0.2s; }
.sidebar-subitem i { width: 18px; text-align: center; font-size: 14px; opacity: 0.9; }
.sidebar-subitem:active { background-color: rgba(255, 255, 255, 0.1); }
.sidebar-subitem.active { background-color: rgba(255, 255, 255, 0.14); border-left-color: var(--white); font-weight: 600; }
.sidebar-divider { height: 1px; background-color: rgba(255, 255, 255, 0.1); margin: 10px 24px; }

/* --- Desktop Styles --- */
@media (min-width: 992px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
    .desktop-only-flex { display: flex !important; }
    body { padding-bottom: 0; }

    /* Header Desktop */
    .header { padding: 12px 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .header-titles h1 { font-size: 18px; }
    .header-titles p { font-size: 12px; }
    .desktop-nav { gap: 24px; align-items: center; }
    .desktop-nav a { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color 0.2s; position: relative; }
    .desktop-nav a:hover, .desktop-nav a.active { color: var(--primary-color); }
    .desktop-nav a.active::after { content: ''; position: absolute; bottom: -18px; left: 0; width: 100%; height: 3px; background-color: var(--primary-color); border-radius: 3px 3px 0 0; }
    .header-right { align-items: center; gap: 16px; }
    .btn-icon { background: var(--bg-color); border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dark); cursor: pointer; }
    .btn-login { background-color: var(--primary-color); color: var(--white); border: none; padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; }

    /* Layout Desktop */
    .main-container { display: flex; flex-direction: row; gap: 24px; padding: 30px 40px; max-width: 1400px; margin: 0 auto; align-items: flex-start; margin-top: -60px; }
    .content-center { flex: 1; min-width: 0; margin-top: 0; display: flex; flex-direction: column; gap: 20px; }

    /* Left Sidebar */
    .sidebar-left { width: 260px; flex-shrink: 0; position: sticky; top: 95px; align-self: flex-start;}
    .side-menu { background: var(--white); border-radius: 16px; padding: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.03); }
    .side-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; color: var(--text-dark); font-size: 14px; font-weight: 600; border-radius: 8px; transition: all 0.2s; }
    .side-menu-item > div { display: flex; align-items: center; gap: 12px; }
    .icon-box { color: var(--text-muted); font-size: 16px; width: 20px; text-align: center; }
    .arrow { font-size: 12px; color: var(--text-muted); }
    .side-menu-item:hover { background-color: var(--bg-color); }
    .side-menu-item.active { background-color: var(--primary-color); color: var(--white); }
    .side-menu-item.active .icon-box, .side-menu-item.active .arrow { color: var(--white); }
    .sidebar-illustration { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; color: var(--primary-color); font-weight: 700; font-size: 15px; padding: 0 10px; }

    /* Footer Desktop */
    .desktop-footer { background-color: var(--text-dark); color: var(--white); padding: 40px 40px 20px; margin-top: 40px; }
    .footer-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; }
    .footer-brand { display: flex; align-items: center; gap: 16px; max-width: 300px; }
    .footer-logo { width: 60px; height: 60px; object-fit: contain; }
    .footer-brand h4 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
    .footer-brand p { font-size: 12px; opacity: 0.8; }
    .footer-info { display: flex; gap: 40px; flex: 1; justify-content: center; }
    .footer-item { display: flex; gap: 12px; font-size: 13px; }
    .footer-item i { font-size: 18px; margin-top: 2px; }
    .font-bold { font-weight: 700; margin-bottom: 4px; display: block; }
    .footer-item p { opacity: 0.8; line-height: 1.5; }
    .footer-social { text-align: right; }
    .slogan { font-size: 16px; font-weight: 700; margin-bottom: 16px; font-style: italic; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
    .social-icons { display: flex; gap: 12px; justify-content: flex-end; }
    .social-icons a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: var(--white); transition: background 0.2s; }
    .social-icons a:hover { background: var(--primary-color); }

    .social-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 18px 20px; border-radius: 20px; background: #fff; }
    .social-card-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #e53935; font-size: 28px; margin-bottom: 10px; }
    .social-card-title { font-size: 1.15rem; font-weight: 700; color: #1f2937; margin-bottom: 14px; }
    .social-link-group { width: 100%; display: flex; justify-content: center; margin-bottom: 12px; }
    .social-mini-group { display: flex; gap: 12px; justify-content: center; }
    .social-button { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; text-decoration: none; color: var(--white); font-size: 1.6rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .social-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }
    .social-button--main { width: 100%; max-width: 210px; height: 60px; border-radius: 14px; font-size: 2rem; }
    .social-button--facebook { background: linear-gradient(135deg, #0b5e46, #0d7a5e); }
    .social-button--instagram { background: linear-gradient(135deg, #ff5f6d, #f54268, #b13ad0); }
    .social-button--youtube { background: linear-gradient(135deg, #d11f2f, #ff2a2a); }
}

/* Search bar publik (Berita, Pengumuman, Pelayanan Online) */
.page-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
.search-bar{position:relative;display:flex;flex:1 1 240px;max-width:460px;align-items:center}
.search-bar>i{position:absolute;left:14px;color:#6b8a7c;font-size:14px;pointer-events:none}
.search-bar input{width:100%;height:42px;padding:0 84px 0 38px;border:1px solid #cfe0d6;border-radius:999px;background:#fff;color:#1f3d31;font-size:14px;box-shadow:0 2px 8px rgba(11,94,70,.06)}
.search-bar input:focus{outline:0;border-color:#0b8a65;box-shadow:0 0 0 3px rgba(11,138,101,.14)}
.search-bar button{position:absolute;right:4px;height:34px;padding:0 16px;border:0;border-radius:999px;background:#0b5e46;color:#fff;font-size:13px;font-weight:600}
.search-bar button:hover{background:#087a59}
.search-empty{margin:14px 0;padding:14px 16px;border:1px dashed rgba(11,94,70,.3);border-radius:12px;color:#4b5563;font-size:14px}
@media(max-width:575.98px){.search-bar{max-width:none;flex-basis:100%}}