:root{
    --navy: #0f1b3d;
    --blue: #0f8a6a;
    --blue-dark: #0a6650;
    --teal: #10b981;
    --bg: #f4f6fa;
    --white: #ffffff;
    --gray: #64748b;
    --border: #e5e9f0;
    --radius: 14px;
    --islamic-1: #063a2e;
    --islamic-2: #0c7c5f;
    --gold: #e0b043;
  }
  
  *{ box-sizing: border-box; margin:0; padding:0; }
  
  body{
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--navy);
    line-height: 1.5;
  }
  
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }
  
  .container{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* ---------- HEADER ---------- */
  header{
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 78px;
  }
  
  .brand{ display:flex; align-items:center; gap:12px; }
  
  .brand-icon{
    width:38px; height:38px;
    border-radius:10px;
    background: linear-gradient(135deg, var(--blue), #3fc79a);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-icon svg{ width:20px; height:20px; }
  
  .brand-text h1{ font-size: 1.05rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
  .brand-text span{ font-size: 0.78rem; color: var(--gray); }
  
  nav.main-nav{ display:flex; align-items:center; gap: 30px; }
  nav.main-nav ul{ display:flex; align-items:center; gap: 26px; }
  
  nav.main-nav a.nav-link{
    font-size: 0.93rem; font-weight: 600; color: var(--navy);
    display:flex; align-items:center; gap:4px; padding: 6px 0;
    transition: color .15s ease;
  }
  nav.main-nav a.nav-link:hover{ color: var(--blue); }
  
  .has-dropdown{ position:relative; }
  .dropdown{
    position:absolute; top: calc(100% + 14px); left: 50%;
    transform: translate(-50%, 8px);
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    min-width: 210px; padding: 8px;
    box-shadow: 0 18px 34px rgba(15,27,61,.14);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 60;
  }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
  .dropdown li a{ display:block; padding: 10px 12px; border-radius: 8px; font-size: 0.87rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
  .dropdown li a:hover{ background: #e2f5ee; color: var(--blue); }
  
  .chevron{
    width:9px; height:9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-top:-3px; opacity:.7; transition: transform .15s ease;
  }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:0.93rem; padding: 12px 22px; border-radius: 10px;
    border: none; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn-primary{ background: var(--blue); color: var(--white); box-shadow: 0 8px 18px rgba(15,138,106,.28); }
  .btn-primary:hover{ background: var(--blue-dark); transform: translateY(-1px); }
  .btn-icon{ width:15px; height:15px; }
  
  .menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px; }
  .menu-toggle span{ width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; }
  
  .mobile-panel{ display:none; flex-direction:column; background: var(--white); border-top: 1px solid var(--border); padding: 10px 24px 20px; }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{ padding: 12px 0; font-weight:600; border-bottom: 1px solid var(--border); }
  .mobile-panel .btn{ margin-top: 14px; width:100%; }
  
  .mobile-item{ border-bottom: 1px solid var(--border); }
  .mobile-item .mobile-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:none; border:none; padding: 12px 0; font-family: inherit; font-size: 1rem;
    font-weight:600; color: var(--navy); cursor:pointer;
  }
  .mobile-item.open .mobile-toggle .chevron{ transform: rotate(225deg); margin-top:3px; }
  .mobile-submenu{ max-height: 0; overflow:hidden; transition: max-height .25s ease; }
  .mobile-item.open .mobile-submenu{ max-height: 260px; }
  .mobile-submenu a{ padding: 10px 0 10px 14px; font-size: 0.9rem; font-weight:500; color: var(--gray); border-bottom: none; }
  .mobile-submenu a:hover{ color: var(--blue); }
  
  @media (max-width: 960px){
    nav.main-nav ul{ display:none; }
    .header-btn{ display:none; }
    .menu-toggle{ display:flex; }
  }
  
  /* ---------- PAGE INTRO ---------- */
  .page-intro{ padding: 32px 0 4px; }
  .page-intro h1{ font-size: 1.5rem; font-weight:800; color: var(--navy); }
  .page-intro p{ font-size: 0.88rem; color: var(--gray); margin-top:4px; }
  
  /* ---------- PAGE LAYOUT: SIDEBAR + CONTENT ---------- */
  .page-layout{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items:start;
    padding: 20px 0 70px;
  }
  
  .sidebar-stack{ display:flex; flex-direction:column; gap:20px; }
  
  .sidebar-card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow:hidden;
  }
  
  .sidebar-header{
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color:#fff;
    padding: 15px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:0.92rem;
  }
  .sidebar-header svg{ width:17px; height:17px; }
  
  .sidebar-menu{ padding: 10px; }
  .sidebar-menu li a{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size:0.88rem;
    font-weight:600;
    color: var(--navy);
    border-left: 3px solid transparent;
  }
  .sidebar-menu li a svg{ width:16px; height:16px; opacity:.7; flex-shrink:0; }
  .sidebar-menu li a:hover{ background: #f4f6fa; }
  .sidebar-menu li a.active{
    background: #e2f5ee;
    color: var(--blue-dark);
    border-left: 3px solid var(--blue);
    padding-left: 11px;
  }
  .sidebar-menu li a.active svg{ opacity:1; }
  
  .sidebar-cta{ padding: 4px 14px 16px; }
  .sidebar-cta .btn{ width:100%; }
  
  /* Fasilitas Utama list card */
  .facility-list-card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
  }
  .facility-list-card h5{
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .07em;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .facility-list-card ul li{
    display:flex;
    align-items:center;
    gap: 10px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--navy);
    padding: 7px 0;
  }
  .facility-dot{
    width:8px; height:8px;
    border-radius:50%;
    flex-shrink:0;
  }
  .dot-green{ background: var(--blue); }
  .dot-teal{ background: var(--islamic-2); }
  .dot-gold{ background: var(--gold); }
  .dot-maroon{ background: #9c3d54; }
  .dot-olive{ background: #7a8c34; }
  .dot-emerald{ background: #1f9d6e; }
  
  /* ---------- CONTENT CARD ---------- */
  .content-card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
  }
  
  .content-head{
    display:flex;
    align-items:center;
    gap:14px;
    background: #f0faf6;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 26px;
  }
  .content-head-icon{
    width:42px; height:42px;
    border-radius:10px;
    background: var(--blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .content-head-icon svg{ width:20px; height:20px; }
  .content-head h2{ font-size:1.05rem; font-weight:800; color: var(--navy); }
  .content-head p{ font-size:0.8rem; color: var(--gray); margin-top:2px; }
  
  /* Section title with accent bar */
  .section-title-bar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 18px;
  }
  .section-title-bar .bar{
    width:5px; height:22px;
    border-radius: 3px;
    background: var(--blue);
  }
  .section-title-bar h3{ font-size: 1.15rem; font-weight:800; color: var(--navy); }
  
  /* Filter tabs */
  .filter-tabs{
    display:flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .filter-tab{
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight:700;
    background: #f0f2f6;
    color: var(--gray);
    border: none;
    cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .filter-tab.active{
    background: var(--blue);
    color: #fff;
  }
  .filter-tab:hover:not(.active){ background:#e5e9f0; }
  
  /* Gallery grid */
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  
  .gallery-card{
    border-radius: 14px;
    overflow:hidden;
    background: var(--white);
    border: 1px solid var(--border);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .gallery-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15,27,61,.1); }
  
  .gallery-media{
    position:relative;
    aspect-ratio: 4/3;
    overflow:hidden;
  }
  .gallery-media img{ width:100%; height:100%; object-fit:cover; }
  
  .gallery-tag{
    position:absolute;
    top: 10px; left: 10px;
    background: rgba(15,138,106,.92);
    color:#fff;
    font-size: 0.68rem;
    font-weight:700;
    padding: 5px 12px;
    border-radius: 999px;
  }
  
  .gallery-body{ padding: 16px; }
  .gallery-body h4{ font-size: 0.98rem; font-weight:800; color: var(--blue-dark); margin-bottom:6px; }
  .gallery-body p{
    font-size: 0.82rem;
    color: var(--gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
  
  @media (max-width: 960px){
    .page-layout{ grid-template-columns: 1fr; }
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (max-width: 620px){
    .gallery-grid{ grid-template-columns: 1fr; }
    .content-card{ padding: 18px; }
    .filter-tabs{ gap:8px; }
  }