:root {
      --blue-primary: #0d3b7c;
      --blue-mid: #1a5bb5;
      --blue-light: #2979d4;
      --gold: #d4a017;
      --gold-light: #f0c040;
      --red-accent: #c0392b;
      --green-accent: #1e8449;
      --teal-accent: #148f77;
      --text-dark: #1a1a2e;
      --text-muted: #5a6270;
      --bg-light: #f4f7fb;
      --bg-white: #ffffff;
      --border: #dce4f0;
       --white: #ffffff;
             --primary:   #1a3a6e;
      --primary-light: #1e4899;
      --accent:    #c8102e;
      --accent-light: #e63950;
    }
    * { box-sizing: border-box; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--text-dark);
      background: var(--bg-white);
      margin: 0;
    }

    /* ===== TOP BAR ===== */
    .topbar {
      background: var(--blue-primary);
      color: #fff;
      font-size: 0.78rem;
      padding: 6px 0;
    }
    .topbar a { color: rgba(255,255,255,.75); text-decoration: none; }
    .topbar a:hover { color: #fff; }

    /* ===== NAVBAR ===== */
    .main-navbar {
      background: #fff;
      box-shadow: 0 2px 12px rgba(13,59,124,.10);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .navbar-brand img { height: 48px; }
    .navbar-brand .brand-text { font-size: .85rem; font-weight: 700; color: var(--blue-primary); line-height: 1.2; }
    .navbar-brand .brand-sub { font-size: .7rem; font-weight: 500; color: var(--text-muted); }
    .main-navbar .nav-link {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text-dark) !important;
      padding: 8px 12px !important;
      border-radius: 6px;
      transition: background .2s;
    }
    .main-navbar .nav-link:hover, .main-navbar .nav-link.active { background: var(--bg-light); color: var(--blue-primary) !important; }
    .btn-admin {
      background: var(--blue-primary);
      color: #fff !important;
      font-size: .8rem;
      font-weight: 700;
      border-radius: 8px;
      padding: 7px 18px;
    }
    .btn-admin:hover { background: var(--blue-mid); }

    /* ===== HERO ===== */
    .hero-section {
      background: linear-gradient(120deg, var(--blue-primary) 55%, #1a5bb5 100%);
      position: relative;
      overflow: hidden;
      padding: 56px 0 0;
      min-height: 340px;
    }
    .hero-section::before {
      content: '';
      position: absolute;
        pointer-events: none;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .hero-badge {
      display: inline-block;
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: .75rem;
      font-weight: 600;
      border-radius: 20px;
      padding: 4px 14px;
      border: 1px solid rgba(255,255,255,.25);
      margin-bottom: 14px;
    }
    .hero-title {
      font-family: 'Merriweather', serif;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .hero-desc { color: rgba(255,255,255,.82); font-size: .9rem; margin-bottom: 24px; }
    .btn-hero-primary {
      background: var(--gold);
      color: var(--blue-primary);
      font-weight: 700;
      font-size: .85rem;
      border-radius: 8px;
      padding: 10px 22px;
      border: none;
      transition: background .2s, transform .15s;
    }
    .btn-hero-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
    .btn-hero-outline {
      background: transparent;
      color: #fff;
      font-weight: 600;
      font-size: .85rem;
      border-radius: 8px;
      padding: 10px 22px;
      border: 1.5px solid rgba(255,255,255,.45);
      transition: background .2s;
    }
    .btn-hero-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
  .hero-search-bar {
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 12px;
    padding: 6px 6px 6px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    margin-top: 24px;
    position: relative; /* ← tambah */
    z-index: 2;         /* ← tambah */
}
    .hero-search-bar input {
      background: transparent;
      border: none;
      outline: none;
      color: #fff;
      font-size: .88rem;
      flex: 1;
      font-family: inherit;
    }
    .hero-search-bar input::placeholder { color: rgba(255,255,255,.55); }
    .hero-search-bar button {
      background: var(--gold);
      color: var(--blue-primary);
      border: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: .82rem;
      padding: 8px 18px;
    }
    .hero-img-wrap {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 100%;
    }
    .hero-stats {
      display: flex;
      gap: 20px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .hero-stat {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,.85);
      font-size: .8rem;
    }
    .hero-stat .num { font-weight: 800; font-size: 1.1rem; color: var(--gold-light); }
    .hero-official-photo {
      width: 100%;
      max-width: 380px;
      border-radius: 16px 16px 0 0;
      object-fit: cover;
      filter: drop-shadow(0 8px 32px rgba(0,0,0,.35));
    }

    /* PAGE HERO */
    .page-hero {
      background: linear-gradient(120deg, var(--blue-primary) 60%, #1a5bb5 100%);
      padding: 60px 0 52px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E");
    }
    .page-hero-badge-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.15); color: #fff;
      font-size: .8rem; font-weight: 600;
      border-radius: 30px; padding: 6px 20px;
      border: 1px solid rgba(255,255,255,.25); margin-bottom: 18px;
    }
    .page-hero h1 { font-family: 'Merriweather', serif; font-size: 2.1rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
    .page-hero p { color: rgba(255,255,255,.78); font-size: .9rem; }

    /* BREADCRUMB */
    .breadcrumb-wrap { padding: 18px 0; border-bottom: 1px solid var(--border); }
    .breadcrumb { margin: 0; font-size: .85rem; }
    .breadcrumb-item a { color: var(--blue-primary); text-decoration: none; font-weight: 600; }
    .breadcrumb-item a:hover { text-decoration: underline; }
    .breadcrumb-item.active { color: var(--text-muted); }
    .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }


    /* CATEGORY CARDS */
    .category-section { padding: 48px 0 64px; background: #fff; }
   .cat-card {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.12);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    transition: border-color .18s, box-shadow .18s;
    }
    .cat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
    .cat-card::before {
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 120px; height: 120px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
    }
    .cat-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .cat-card::after {
      content: '';
      position: absolute;
      bottom: -40px; left: -20px;
      width: 100px; height: 100px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
    }

    .cat-icon-wrap {
    width: 36px; height: 36px;
    background: #e8f1fb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #185fa5;
    }
    .cat-label {
    font-size: 13px;
    font-weight: 500;
    color: #888;
    }

    /* Biru (default) */
    .cat-icon-wrap {
    background: #e8f1fb;
    color: #185fa5;
    }

    /* Hijau */
    .cat-card--green .cat-icon-wrap {
    background: #eaf3de;
    color: #3b6d11;
    }

    /* Amber */
    .cat-card--amber .cat-icon-wrap {
    background: #faeeda;
    color: #854f0b;
    }

    /* Merah */
    .cat-card--red .cat-icon-wrap {
    background: #fcebeb;
    color: #a32d2d;
    }

    /* Teal */
    .cat-card--teal .cat-icon-wrap {
    background: #e1f5ee;
    color: #0f6e56;
    }

    /* Ungu */
    .cat-card--purple .cat-icon-wrap {
    background: #eeedfe;
    color: #534ab7;
    }
    .cat-icon {
      font-size: 3.2rem;
      color: rgba(255,255,255,.9);
      margin-bottom: 18px;
      display: block;
      position: relative;
      z-index: 1;
    }
    .cat-card h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.5;
    }
   .btn-cat-detail {
    align-self: flex-start;
    font-size: 12px;
    color: #185fa5;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
    }
    .btn-cat-detail:hover {
    border-bottom-color: #185fa5;
    color: #185fa5;
    }
       /* ── FILTER CARD ── */
    .filter-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 4px 24px rgba(26,58,110,.08);
      padding: 20px 24px;
      margin-top: -28px;
      position: relative; z-index: 10;
    }
    .filter-card .filter-title {
      font-size: .78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--primary); margin-bottom: 14px;
    }
    .filter-card .form-select,
    .filter-card .form-control {
      border-color: var(--border);
      border-radius: 8px;
      font-size: .84rem;
      height: 42px;
      color: var(--text);
    }
    .filter-card .form-select:focus,
    .filter-card .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(26,58,110,.1);
    }
     .btn-search {
      background: var(--accent); color: var(--white);
      border: none; border-radius: 8px;
      font-size: .84rem; font-weight: 600;
      height: 42px; padding: 0 1.4rem;
      transition: background .2s, transform .15s;
    }
    .btn-search:hover {
      background: var(--accent-light); color: var(--white);
      transform: translateY(-1px);
    }
    /* ===== SECTION GENERIC ===== */
    .section-title { font-family: 'Merriweather', serif; font-size: 1.45rem; font-weight: 700; color: var(--blue-primary); }
    .section-sub { font-size: .88rem; color: var(--text-muted); }
    .section-badge {
      display: inline-block;
      background: var(--blue-primary);
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      border-radius: 20px;
      padding: 3px 14px;
      margin-bottom: 8px;
      letter-spacing: .04em;
    }

    /* ===== EXPLORE CARDS ===== */
    .explore-section { background: #fff; padding: 64px 0 40px; }
    .explore-card {
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 28px 20px 22px;
      text-align: center;
      transition: box-shadow .25s, transform .2s, border-color .2s;
      cursor: pointer;
      background: #fff;
    }
    .explore-card:hover {
      box-shadow: 0 8px 28px rgba(13,59,124,.13);
      transform: translateY(-4px);
      border-color: var(--blue-light);
    }
    .explore-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
      font-size: 1.6rem;
    }
    .explore-icon.blue { background: #e8f0fb; color: var(--blue-primary); }
    .explore-icon.green { background: #e6f4ec; color: var(--green-accent); }
    .explore-icon.gold { background: #fdf4dc; color: var(--gold); }
    .explore-icon.red { background: #fdecea; color: var(--red-accent); }
    .explore-card h6 { font-weight: 700; font-size: .92rem; color: var(--text-dark); margin-bottom: 4px; }
    .explore-card small { color: var(--text-muted); font-size: .78rem; }

    /* ===== LATEST DOCS ===== */
    .docs-section { background: var(--bg-light); padding: 56px 0; }
    .doc-badge {
      font-size: .7rem;
      font-weight: 700;
      border-radius: 6px;
      padding: 3px 10px;
      display: inline-block;
      margin-bottom: 8px;
    }
    .doc-badge.peraturan { background: #e8f0fb; color: var(--blue-primary); }
    .doc-badge.surat { background: #e6f4ec; color: var(--green-accent); }
    .doc-badge.keputusan { background: #fdf4dc; color: #a07800; }
    .doc-card {
      background: #fff;
      border-radius: 12px;
      border: 1.5px solid var(--border);
      padding: 18px 18px 14px;
      height: 100%;
      transition: box-shadow .2s, transform .18s;
    }
    .doc-card:hover { box-shadow: 0 6px 22px rgba(13,59,124,.11); transform: translateY(-3px); }
    .doc-card h6 { font-size: .88rem; font-weight: 700; color: var(--text-dark); line-height: 1.5; margin-bottom: 10px; }
    .doc-card .doc-meta { font-size: .75rem; color: var(--text-muted); }
    .btn-doc-detail {
      background: transparent;
      border: 1.5px solid var(--blue-primary);
      color: var(--blue-primary);
      font-size: .78rem;
      font-weight: 600;
      border-radius: 7px;
      padding: 5px 14px;
      transition: background .18s, color .18s;
    }
    .btn-doc-detail:hover { background: var(--blue-primary); color: #fff; }
    .btn-load-more {
      background: var(--blue-primary);
      color: #fff;
      font-weight: 700;
      font-size: .85rem;
      border-radius: 8px;
      padding: 11px 28px;
      border: none;
      transition: background .2s;
    }
    .btn-load-more:hover { background: var(--blue-mid); }

    /* ===== NEWS ===== */
    .news-section { background: #fff; padding: 56px 0; }
    .news-card {
      border-radius: 14px;
      overflow: hidden;
      border: 1.5px solid var(--border);
      transition: box-shadow .22s, transform .18s;
    }
    .news-card:hover { box-shadow: 0 8px 28px rgba(13,59,124,.12); transform: translateY(-4px); }
    .news-card img { width: 100%; height: 170px; object-fit: cover; }
    .news-card-body { padding: 16px; }
    .news-date { font-size: .75rem; color: var(--text-muted); margin-bottom: 6px; }
    .news-card h6 { font-size: .9rem; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
    .news-card p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
    .btn-read-more {
      font-size: .8rem;
      font-weight: 600;
      color: var(--blue-primary);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-read-more:hover { color: var(--blue-mid); }

    /* ── CARDS GRID ── */
    .cards-section {
    max-width: 1200px; margin: 0 auto;
    padding: 36px 24px 64px;
    }
    .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    .cardmenu {
    border-radius: 16px;
    padding: 36px 28px 32px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 12px;
    position: relative; overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
    animation: cardIn .5s ease both;
    }
    .cardmenu:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,.18); }

    .cardmenu-blue  { background: linear-gradient(140deg, #1e4db7, #1a2d6b); }
    .cardmenu-green { background: linear-gradient(140deg, #2a7a3b, #1a5c2a); }
    .cardmenu-teal  { background: linear-gradient(140deg, #0e8c8c, #075f5f); }
    .cardmenu-gold  { background: linear-gradient(140deg, #d4a017, #a87c0f); }

    .cardmenu:nth-child(1) { animation-delay: .1s; }
    .cardmenu:nth-child(2) { animation-delay: .2s; }
    .cardmenu:nth-child(3) { animation-delay: .3s; }
    .cardmenu:nth-child(4) { animation-delay: .4s; }

    .cardmenu::before {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.07);
    }
    .cardmenu-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; flex-shrink: 0;
    }
    .cardmenu h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 600;
    color: var(--white); line-height: 1.3;
    }
    .cardmenu p {
    font-size: 13px; color: rgba(255,255,255,.78);
    line-height: 1.6;
    }
    .btn-cardmenu {
    margin-top: 8px;
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,.6);
    color: var(--white);
    font-size: 13px; font-weight: 600;
    padding: 10px 28px; border-radius: 8px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    letter-spacing: .3px;
    }
    .btn-cardmenu:hover { background: rgba(255,255,255,.18); border-color: var(--white); }

    /* cardmenu-gold 4th: only spans 1 col (left-aligned) */
    .cardmenu-gold { grid-column: 1; }

    /* ===== NOT FOUND ===== */
    .not-found-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 1rem;
    }

    .not-found-inner {
    text-align: center;
    max-width: 360px;
    }

    .not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #f5f5f4;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: #aaa;
    }

    .not-found-code {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 8px;
    }

    .not-found-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px;
    }

    .not-found-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 2rem;
    }

    .not-found-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    }

    .btn-nf-secondary, .btn-nf-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
    transition: opacity .15s;
    }
    .btn-nf-secondary:hover, .btn-nf-primary:hover { opacity: .8; }

    .btn-nf-secondary {
    color: #111;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    }

    .btn-nf-primary {
    color: #0c447c;
    background: #e6f1fb;
    border: 1px solid #b5d4f4;
    }

    /* ===== AGENDA ===== */
    .agenda-section { background: var(--bg-light); padding: 56px 0; }
    .agenda-empty {
      text-align: center;
      padding: 48px;
      color: var(--text-muted);
    }
    .agenda-icon { font-size: 2.8rem; color: var(--border); margin-bottom: 12px; }

    /* ===== SERVICES ===== */
    .services-section { background: var(--blue-primary); padding: 56px 0; position: relative; overflow: hidden; }
    .services-section::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/g%3E%3C/svg%3E");
    }
    .services-section .section-title { color: #fff; }
    .services-section .section-sub { color: rgba(255,255,255,.7); }
    .service-card {
      background: rgba(255,255,255,.09);
      border: 1.5px solid rgba(255,255,255,.15);
      border-radius: 16px;
      padding: 28px 22px;
      text-align: center;
      transition: background .22s, transform .2s;
    }
    .service-card:hover { background: rgba(255,255,255,.16); transform: translateY(-4px); }
    .service-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      font-size: 1.7rem;
    }
    .service-icon.green { background: rgba(30,132,73,.25); color: #6ee7a0; }
    .service-icon.teal { background: rgba(20,143,119,.25); color: #5de0d0; }
    .service-icon.red { background: rgba(192,57,43,.25); color: #f9a8a0; }
    .service-icon.blue { background: rgba(41,121,212,.3); color: #93c4f8; }
    .service-card h6 { color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
    .service-card p { color: rgba(255,255,255,.7); font-size: .8rem; line-height: 1.6; }
    .service-card a { color: var(--gold-light); font-size: .8rem; font-weight: 600; text-decoration: none; }
    .service-card a:hover { color: #fff; }

    /* ===== MITRA ===== */
    .mitra-section { background: #fff; padding: 48px 0; }
    .mitra-logo {
      background: var(--bg-light);
      border-radius: 10px;
      padding: 16px 24px;
      display: flex; align-items: center; justify-content: center;
      height: 72px;
      border: 1.5px solid var(--border);
      font-weight: 700; font-size: .85rem; color: var(--text-muted);
      transition: border-color .18s;
    }
    .mitra-logo:hover { border-color: var(--blue-light); }

    /* ===== SOCMED ===== */
    .socmed-section { background: var(--bg-light); padding: 48px 0; }
    .gallery-thumb {
      aspect-ratio: 1;
      background: var(--border);
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .gallery-thumb .overlay {
      position: absolute; inset: 0;
      background: rgba(13,59,124,.45);
      opacity: 0;
      transition: opacity .2s;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.4rem;
    }
    .gallery-thumb:hover .overlay { opacity: 1; }
    .video-thumb {
      border-radius: 14px;
      overflow: hidden;
      border: 3px solid var(--blue-primary);
      position: relative;
    }
    .video-thumb img { width: 100%; height: 200px; object-fit: cover; }
    .play-btn {
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 52px; height: 52px;
      background: rgba(255,255,255,.9);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; color: var(--blue-primary);
    }

    /* ===== CTA ===== */
    .cta-section {
      background: linear-gradient(135deg, var(--blue-mid), var(--blue-primary));
      padding: 56px 0;
      text-align: center;
    }
    .cta-section h2 { font-family: 'Merriweather', serif; color: #fff; font-size: 1.65rem; font-weight: 700; }
    .cta-section p { color: rgba(255,255,255,.8); font-size: .92rem; }
    .btn-cta {
      background: var(--gold);
      color: var(--blue-primary);
      font-weight: 800;
      font-size: .9rem;
      border-radius: 10px;
      padding: 13px 32px;
      border: none;
      transition: background .2s, transform .15s;
    }
    .btn-cta:hover { background: var(--gold-light); transform: translateY(-2px); }

    /* ===== SECONDARY CTA ===== */
    .secondary-cta { background: var(--bg-light); padding: 40px 0; }
    .social-btn {
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 12px 20px;
      display: flex; align-items: center; gap: 10px;
      font-weight: 600; font-size: .85rem;
      color: var(--text-dark);
      transition: box-shadow .18s, border-color .18s;
      background: #fff;
      text-decoration: none;
    }
    .social-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); border-color: var(--blue-light); color: var(--blue-primary); }
    .social-icon { font-size: 1.35rem; }
    .social-icon.fb { color: #1877f2; }
    .social-icon.tw { color: #1da1f2; }
    .social-icon.yt { color: #ff0000; }
    .social-icon.ig { color: #e1306c; }

    /* ===== FOOTER ===== */
    .main-footer {
      background: var(--blue-primary);
      color: rgba(255,255,255,.8);
      padding: 52px 0 0;
    }
    .footer-brand { font-family: 'Merriweather', serif; font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
    .footer-desc { font-size: .82rem; line-height: 1.75; }
    .footer-heading { font-size: .82rem; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: .06em; text-transform: uppercase; }
    .footer-link { display: block; color: rgba(255,255,255,.72); text-decoration: none; font-size: .82rem; margin-bottom: 8px; }
    .footer-link:hover { color: var(--gold-light); }
    .footer-contact { font-size: .82rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
    .footer-contact i { margin-top: 2px; color: var(--gold-light); }
    .footer-bottom {
      background: rgba(0,0,0,.22);
      margin-top: 40px;
      padding: 16px 0;
      font-size: .78rem;
      color: rgba(255,255,255,.55);
      text-align: center;
    }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: .95rem;
      margin-right: 6px;
      transition: background .18s;
    }
    .footer-social a:hover { background: var(--gold); color: var(--blue-primary); }

    /* misc */
    .divider { height: 3px; width: 48px; background: var(--gold); border-radius: 4px; margin: 12px 0 20px; }
    .btn-see-all {
      font-size: .8rem; font-weight: 600; color: var(--blue-primary);
      border: 1.5px solid var(--blue-primary);
      border-radius: 8px; padding: 6px 16px;
      text-decoration: none; transition: background .18s, color .18s;
    }
    .btn-see-all:hover { background: var(--blue-primary); color: #fff; }
    /* ── DOCUMENT CARD ── */
    .hukum-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 22px;
      transition: box-shadow .22s, border-color .22s, transform .2s;
      position: relative;
      overflow: hidden;
    }
    .hukum-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--accent);
      border-radius: 4px 0 0 4px;
      opacity: 0;
      transition: opacity .22s;
    }
    .hukum-card:hover {
      box-shadow: 0 8px 32px rgba(26,58,110,.13);
      border-color: rgba(26,58,110,.2);
      transform: translateY(-2px);
    }
    .hukum-card:hover::before { opacity: 1; }
        /* ── DOCUMENT CARD ── */
    .hukum-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 22px;
      transition: box-shadow .22s, border-color .22s, transform .2s;
      position: relative;
      overflow: hidden;
    }
    .hukum-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--accent);
      border-radius: 4px 0 0 4px;
      opacity: 0;
      transition: opacity .22s;
    }
    .hukum-card:hover {
      box-shadow: 0 8px 32px rgba(26,58,110,.13);
      border-color: rgba(26,58,110,.2);
      transform: translateY(-2px);
    }
    .hukum-card:hover::before { opacity: 1; }
        .hukumdoc-icon {
      width: 46px; height: 52px;
      background: #ffeef1;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .hukumdoc-icon i { color: var(--accent); font-size: 1.6rem; }

    .hukumdoc-title {
      font-size: .9rem; font-weight: 600;
      color: var(--primary); line-height: 1.45;
      text-decoration: none;
      transition: color .2s;
    }
    .hukumdoc-title:hover { color: var(--accent); }

    .hukumdoc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

    .badge-type {
      font-size: .68rem; font-weight: 600; letter-spacing: .04em;
      padding: .28rem .7rem; border-radius: 50px;
    }
    .badge-perda  { background: #e8edf8; color: var(--primary); }
    .badge-tahun  { background: #eef6ee; color: #1a6e2e; }
    .badge-status { background: #e8f5e9; color: #1a6e2e; }

    .hukumdoc-stats {
      font-size: .73rem; color: var(--muted);
      display: flex; gap: 14px; flex-wrap: wrap;
    }
    .hukumdoc-stats span { display: flex; align-items: center; gap: 4px; }
    .stat-views  i { color: #3b82f6; }
    .stat-dl     i { color: #22c55e; }

    .hukumdoc-excerpt {
      font-size: .78rem; color: var(--muted); line-height: 1.6;
      margin-top: 8px;
    }

    .btn-detail {
      font-size: .75rem; font-weight: 600;
      border-radius: 7px; padding: .32rem .85rem;
      border: 1.5px solid var(--primary); color: var(--primary);
      background: transparent;
      transition: all .2s;
    }
    .btn-detail:hover { background: var(--primary); color: var(--white); }

    .btn-download-sm {
      font-size: .75rem; font-weight: 600;
      border-radius: 7px; padding: .32rem .85rem;
      border: 1.5px solid var(--accent); color: var(--accent);
      background: transparent;
      transition: all .2s;
    }

        /* MAIN CONTENT AREA */
    .content-area { padding: 32px 0 56px; }
        /* DETAIL CARD */
    .detail-card {
      background: #fff;
      border-radius: 16px;
      border: 1.5px solid var(--border);
      padding: 28px 28px 24px;
      margin-bottom: 20px;
    }

     /* BADGES */
    .badge-type {
      display: inline-block;
      font-size: .72rem; font-weight: 700;
      border-radius: 6px; padding: 4px 12px;
      margin-right: 6px; margin-bottom: 12px;
    }
    .badge-perwal { background: #e8f0fb; color: var(--blue-primary); }
    .badge-nomor { background: #e6f4ec; color: #1a7a44; }
    .badge-tahun { background: #fdf4dc; color: #a07800; }

    .docdetail-title {
      font-family: 'Merriweather', serif;
      font-size: 1.25rem; font-weight: 700;
      color: var(--text-dark); line-height: 1.5;
      margin-bottom: 10px;
    }
    .docdetail-stats { font-size: .8rem; color: var(--text-muted); margin-bottom: 20px; }
    .docdetail-stats i { margin-right: 4px; }
    .docdetail-stats span { margin-right: 16px; }

        /* ACTION BUTTONS */
    .btn-download {
      background: var(--blue-primary); color: #fff;
      font-weight: 700; font-size: .85rem;
      border-radius: 9px; padding: 10px 22px;
      border: none; display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s, transform .15s;
      text-decoration: none;
    }
    .btn-download:hover { background: var(--blue-mid); color: #fff; transform: translateY(-1px); }
    .btn-abstrak {
      background: transparent; color: var(--blue-primary);
      font-weight: 700; font-size: .85rem;
      border-radius: 9px; padding: 10px 22px;
      border: 2px solid var(--blue-primary);
      display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s, color .2s;
      text-decoration: none;
    }
       .btn-abstrak:hover { background: var(--blue-primary); color: #fff; }
    .btn-pdf {
      background: #e74c3c; color: #fff;
      font-weight: 700; font-size: .85rem;
      border-radius: 9px; padding: 10px 22px;
      border: none; display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s; text-decoration: none;
    }
    .btn-pdf:hover { background: #c0392b; color: #fff; }
    .btn-settings {
      background: var(--bg-light); color: var(--text-muted);
      border: 1.5px solid var(--border);
      border-radius: 9px; padding: 10px 14px;
      font-size: 1rem; transition: background .2s;
    }
    .btn-settings:hover { background: var(--border); }
       /* METADATA */
    .meta-section-title {
      font-size: .9rem; font-weight: 800;
      color: var(--blue-primary); margin-bottom: 18px;
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--border);
    }
    .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .meta-item { padding: 13px 0; border-bottom: 1px solid var(--border); }
    .meta-item:nth-last-child(-n+2) { border-bottom: none; }
    .meta-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
    .meta-value { font-size: .88rem; font-weight: 700; color: var(--text-dark); }
    .meta-item.full { grid-column: 1 / -1; }

    /* TAGS */
    .tag-section-title {
      font-size: .9rem; font-weight: 800; color: var(--text-dark);
      margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
    }
    .tag-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--bg-light); border: 1.5px solid var(--border);
      color: var(--text-muted); font-size: .8rem; font-weight: 600;
      border-radius: 20px; padding: 5px 14px;
      transition: border-color .18s, color .18s;
    }
    .tag-pill:hover { border-color: var(--blue-light); color: var(--blue-primary); }

    /* SHARE BUTTON */
    .btn-share {
      background: transparent; color: var(--blue-primary);
      border: 1.5px solid var(--blue-primary);
      font-weight: 700; font-size: .82rem;
      border-radius: 8px; padding: 8px 20px;
      display: inline-flex; align-items: center; gap: 7px;
      transition: background .18s, color .18s;
      text-decoration: none;
    }
    .btn-share:hover { background: var(--blue-primary); color: #fff; }

    /* PDF VIEWER */
    .pdf-viewer-card {
      background: #333;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid #555;
      margin-top: 20px;
    }
    .pdf-toolbar {
      background: #404040;
      padding: 8px 14px;
      display: flex; align-items: center; gap: 10px;
      font-size: .78rem; color: #ccc;
    }
    .pdf-toolbar .pdf-filename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdf-toolbar .pdf-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .pdf-toolbar button {
      background: transparent; border: none;
      color: #ccc; font-size: .85rem;
      padding: 3px 6px; cursor: pointer; border-radius: 4px;
      transition: background .15s;
    }
    .pdf-toolbar button:hover { background: rgba(255,255,255,.12); color: #fff; }
    .pdf-toolbar input[type=text] {
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      color: #fff; font-size: .78rem; width: 36px; text-align: center;
      border-radius: 4px; padding: 2px 4px;
    }
    .pdf-content {
      background: #525659;
      display: flex; justify-content: center;
      padding: 24px 16px;
      min-height: 480px;
    }
    .pdf-page {
      background: #fff;
      width: 100%; max-width: 520px;
      min-height: 420px;
      border-radius: 4px;
      box-shadow: 0 8px 32px rgba(0,0,0,.4);
      padding: 48px 48px 40px;
      display: flex; flex-direction: column; align-items: center;
    }
    .pdf-garuda { font-size: 3.5rem; margin-bottom: 18px; }
    .pdf-page-content { text-align: center; width: 100%; font-size: .8rem; line-height: 1.9; color: #111; }
    .pdf-page-content .city { font-weight: 700; font-size: .85rem; text-transform: uppercase; }
    .pdf-page-content .province { font-size: .8rem; }
    .pdf-page-content .peraturan-title { font-weight: 800; font-size: .9rem; text-transform: uppercase; margin: 12px 0 4px; }
    .pdf-page-content .peraturan-nomor { font-weight: 700; }
    .pdf-page-content .tentang { font-size: .78rem; margin: 10px 0 4px; }
    .pdf-page-content .peraturan-subject { font-weight: 700; font-size: .82rem; text-transform: uppercase; line-height: 1.5; }
    .pdf-page-content .bismillah { font-size: .78rem; margin: 14px 0 10px; }
    .pdf-page-content .walikota-name { font-weight: 700; font-size: .85rem; text-transform: uppercase; border-bottom: 1.5px solid #000; display: inline-block; padding-bottom: 2px; margin-bottom: 12px; }
    .pdf-menimbang { text-align: left; width: 100%; margin-top: 10px; }
    .pdf-menimbang .label { font-weight: 700; font-size: .8rem; margin-bottom: 6px; }
    .pdf-menimbang ol { font-size: .78rem; line-height: 1.75; padding-left: 20px; color: #222; }
     /* SIDEBAR */
    .sidebar-card {
      background: #fff; border-radius: 16px;
      border: 1.5px solid var(--border); padding: 22px;
      margin-bottom: 20px;
    }
    .sidebar-title { font-weight: 800; font-size: .95rem; color: var(--text-dark); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
    .popular-item {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .popular-item:last-child { border-bottom: none; padding-bottom: 0; }
    .popular-item a {
      font-size: .85rem; font-weight: 600;
      color: var(--blue-primary); text-decoration: none;
      line-height: 1.45; display: block; margin-bottom: 4px;
      transition: color .15s;
    }
    .popular-item a:hover { color: var(--blue-mid); text-decoration: underline; }
    .popular-item .views { font-size: .74rem; color: var(--text-muted); }
    .popular-item .views i { margin-right: 3px; }

    .btn-download-sm:hover { background: var(--accent); color: var(--white); }
    @media (max-width: 767px) {
      .hero-title { font-size: 1.45rem; }
      .hero-section { padding: 36px 0 0; }
    }