:root{
    --paper:#F6F4EC;
    --paper-2:#EFEBDD;
    --line:#DAD2B8;
    --ink:#1B231E;
    --ink-soft:#4B5750;
    --forest:#1F4A3B;
    --forest-deep:#153327;
    --gold:#B4872B;
    --gold-soft:#E7D6A6;
    --blue:#35586A;
    --ok:#2E6B4F;
    --ok-bg:#E4EFE7;
    --warn:#9A3B32;
    --warn-bg:#F3E4E1;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{font-family:'Newsreader',Georgia,serif;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

  /* ---------- Utility bar ---------- */
  .utility{background:var(--forest-deep);color:#CFE0D5;font-size:12.5px;}
  .utility .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;}
  .utility nav{display:flex;gap:20px;}
  .utility nav a{opacity:.85;}
  .utility nav a:hover{opacity:1;text-decoration:underline;}
  .utility .tag{display:flex;align-items:center;gap:6px;color:#9FC2AC;}

  /* ---------- Main header ---------- */
  header.main{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);background:rgba(246,244,236,.94);}
  header.main .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{width:42px;height:42px;}
  .brand .word{line-height:1.05;}
  .brand .word strong{display:block;font-family:'Newsreader',serif;font-size:19px;font-weight:600;letter-spacing:.2px;}
  .brand .word span{display:block;font-size:11px;color:var(--ink-soft);letter-spacing:.4px;}
  nav.primary{display:flex;align-items:center;gap:2px;}
  nav.primary > a, .has-menu > button{
    font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:var(--radius);
    display:flex;align-items:center;gap:5px;background:none;border:none;font-family:inherit;cursor:pointer;
  }
  nav.primary > a:hover, .has-menu:hover > button{color:var(--forest);}
  .has-menu{position:relative;}
  .dropdown{
    position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);min-width:230px;
    box-shadow:0 12px 28px -12px rgba(21,51,39,.25);opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;padding:6px;
  }
  .has-menu:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{display:flex;justify-content:space-between;padding:9px 12px;font-size:13.5px;border-radius:2px;}
  .dropdown a:hover{background:var(--paper-2);color:var(--forest);}
  .dropdown a.all{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;font-weight:600;color:var(--forest);}
  .header-actions{display:flex;align-items:center;gap:10px;}
  .icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;cursor:pointer;}
  .icon-btn:hover{border-color:var(--forest);color:var(--forest);}
  .btn-ghost{border:1px solid var(--forest);color:var(--forest);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:2px;white-space:nowrap;}
  .btn-ghost:hover{background:var(--forest);color:#fff;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;color:#F3F1E6;overflow:hidden;
    background:
      linear-gradient(180deg, rgba(13,34,26,.92) 0%, rgba(13,34,26,.58) 40%, rgba(13,34,26,.78) 75%, rgba(13,34,26,.97) 100%),
      url("/images/hero-kantor-bupati.jpg") center 32%/cover no-repeat;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle at 82% 12%, rgba(180,135,43,.22), transparent 42%);
    pointer-events:none;
  }
  .hero .wrap{position:relative;padding:64px 28px 0;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
  .kicker{font-size:12.5px;letter-spacing:.5px;color:var(--gold-soft);display:flex;align-items:center;gap:8px;margin-bottom:18px;}
  .kicker .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;}
  .hero h1{font-size:42px;line-height:1.14;font-weight:600;margin:0 0 20px;max-width:15ch;letter-spacing:-.2px;}
  .hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:500;}
  .hero p.lead{font-size:16px;line-height:1.65;color:#C9D6CB;max-width:46ch;margin:0 0 30px;}
  .search-box{display:flex;align-items:stretch;background:#fff;border-radius:2px;overflow:hidden;max-width:560px;box-shadow:0 20px 40px -18px rgba(0,0,0,.45);}
  .search-box input{flex:1;border:none;padding:0 18px;font-size:14.5px;font-family:inherit;color:var(--ink);}
  .search-box input:focus{outline:none;}
  .search-box button{border:none;background:var(--gold);color:#241a05;font-weight:700;padding:0 24px;font-size:14px;cursor:pointer;}
  .search-box button:hover{background:#c79934;}
  .chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
  .chip{font-size:12.5px;border:1px solid rgba(255,255,255,.22);color:#DCE7DF;padding:7px 13px;border-radius:20px;}
  .chip:hover{border-color:var(--gold-soft);color:#fff;}

  /* Ledger stat card */
  .ledger{background:var(--paper);color:var(--ink);border-radius:2px 2px 0 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);}
  .ledger-head{background:var(--forest);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;}
  .ledger-head span{font-size:11.5px;letter-spacing:.4px;opacity:.85;}
  .ledger-head strong{font-family:'Newsreader',serif;font-size:15px;font-weight:600;}
  .ledger-body{padding:22px;}
  .ledger-total{display:flex;align-items:baseline;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:18px;margin-bottom:16px;}
  .ledger-total .num{font-family:'Newsreader',serif;font-size:48px;font-weight:600;color:var(--forest);}
  .ledger-total .lbl{font-size:13px;color:var(--ink-soft);line-height:1.4;max-width:16ch;}
  .ledger-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;border-bottom:1px solid var(--paper-2);}
  .ledger-row .n{font-family:'Newsreader',serif;font-weight:600;color:var(--forest);}
  .sync{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--ok);}
  .pulse{width:8px;height:8px;background:var(--ok);border-radius:50%;position:relative;}
  .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;}
  @keyframes ping{75%,100%{transform:scale(2.4);opacity:0;}}

  /* ---------- Sections ---------- */
  section{padding:64px 0;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:18px;}
  .section-head .eyebrow{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.3px;margin-bottom:6px;display:block;}
  .section-head h2{font-size:27px;font-weight:600;margin:0;}
  .section-head a.more{font-size:13.5px;font-weight:600;color:var(--forest);white-space:nowrap;}
  .section-head a.more:hover{text-decoration:underline;}

  /* Category registry rows */
  .cat-list{border-top:1px solid var(--line);}
  .cat-row{
    display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:20px;
    padding:20px 4px;border-bottom:1px solid var(--line);transition:background .15s;
  }
  .cat-row:hover{background:var(--paper-2);}
  .cat-idx{font-family:'Newsreader',serif;color:var(--gold);font-size:20px;font-weight:600;}
  .cat-name{font-size:16.5px;font-weight:600;}
  .cat-desc{font-size:13px;color:var(--ink-soft);margin-top:3px;font-weight:400;}
  .cat-count{font-size:13px;color:var(--ink-soft);white-space:nowrap;}
  .cat-count strong{color:var(--forest);font-size:15px;}
  .cat-arrow{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cat-row:hover .cat-arrow{background:var(--forest);border-color:var(--forest);color:#fff;}

  /* Document gazette list */
  .doc-list{border-top:1px solid var(--line);}
  .doc-item{padding:24px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:20px;}
  .doc-num{font-family:'Newsreader',serif;font-size:26px;font-weight:600;color:var(--gold);}
  .doc-tags{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
  .tag-cat{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--blue);border:1px solid var(--blue);padding:3px 8px;border-radius:2px;}
  .tag-status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:2px;}
  .tag-status.ok{color:var(--ok);background:var(--ok-bg);}
  .doc-title{font-size:17px;font-weight:600;line-height:1.45;margin:0 0 8px;font-family:'Newsreader',serif;}
  .doc-title a:hover{color:var(--forest);text-decoration:underline;}
  .doc-meta{font-size:12.5px;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
  .doc-meta b{color:var(--ink);font-weight:600;}
  .doc-actions{display:flex;gap:10px;}
  .doc-actions a{font-size:12.5px;font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:2px;}
  .doc-actions a.dl{background:var(--forest);color:#fff;border-color:var(--forest);}
  .doc-actions a.dl:hover{background:var(--forest-deep);}
  .doc-actions a:not(.dl):hover{border-color:var(--forest);color:var(--forest);}

  /* Split panel: profil + peta */
  .panel-2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:#fff;}
  .panel{padding:38px;}
  .panel + .panel{border-left:1px solid var(--line);}
  .panel h3{font-size:20px;margin:0 0 12px;}
  .panel p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .stat-grid div{border-top:2px solid var(--gold);padding-top:10px;}
  .stat-grid .num{font-family:'Newsreader',serif;font-size:26px;font-weight:600;color:var(--forest);display:block;}
  .stat-grid .lbl{font-size:12px;color:var(--ink-soft);}
  .panel.dark{background:var(--forest-deep);color:#EDEBDD;}
  .panel.dark p{color:#B9C9BF;}
  .contact-row{display:flex;gap:12px;font-size:13.5px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);color:#D9E3DB;}
  .contact-row:first-of-type{border-top:none;margin-top:6px;}

  footer{background:var(--forest-deep);color:#B9C9BF;padding:56px 0 22px;margin-top:20px;}
  .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);}
  .foot-brand{display:flex;gap:12px;align-items:flex-start;}
  .foot-brand img{width:38px;filter:brightness(1.4);}
  .foot-brand strong{color:#fff;font-family:'Newsreader',serif;font-size:16px;display:block;margin-bottom:8px;}
  .foot-brand p{font-size:13px;line-height:1.6;margin:0;color:#9FB4A6;}
  footer h4{color:#fff;font-size:12.5px;letter-spacing:.4px;margin:0 0 14px;font-weight:600;}
  footer ul{list-style:none;padding:0;margin:0;}
  footer li{margin-bottom:9px;font-size:13.5px;}
  footer a:hover{color:#fff;text-decoration:underline;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:20px;font-size:12px;color:#84987F;flex-wrap:wrap;gap:10px;}
  .visit-stats{display:flex;flex-direction:column;gap:11px;}
  .visit-stats li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:9px;}
  .visit-stats li span{font-size:12.5px;color:#9FB4A6;}
  .visit-stats li strong{font-family:'Newsreader',serif;font-size:16px;font-weight:600;color:#fff;letter-spacing:.2px;}

  .stack-badge{background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:6px;}

  @media (max-width: 980px){
    nav.primary, .header-actions .btn-ghost{display:none;}
    .hero .wrap{grid-template-columns:1fr;padding-top:40px;}
    .hero h1{font-size:32px;}
    .panel-2{grid-template-columns:1fr;}
    .panel + .panel{border-left:none;border-top:1px solid var(--line);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .doc-item{grid-template-columns:1fr;}
    .doc-num{display:none;}
  }
  @media (max-width: 600px){
    .cat-row{grid-template-columns:40px 1fr auto;}
    .cat-count{display:none;}
    .foot-grid{grid-template-columns:1fr;}
    .utility nav{display:none;}
  }

  /* Halaman Profil */
  .profil-hero{padding-top:44px;padding-bottom:10px;}
  .profil-hero .eyebrow{color:var(--gold);font-weight:600;font-size:12px;letter-spacing:.3px;}
  .profil-hero h1{font-size:30px;margin:8px 0 16px;max-width:22ch;}
  .profil-hero p.lead{color:var(--ink-soft);line-height:1.75;max-width:70ch;font-size:15px;}
  .profil-block{border-top:1px solid var(--line);padding:40px 0;}
  .profil-block .eyebrow{color:var(--gold);font-weight:600;font-size:12px;letter-spacing:.3px;display:block;margin-bottom:6px;}
  .profil-block h2{font-size:22px;margin:0 0 22px;}
  .icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
  .icon-card{background:#fff;padding:22px;}
  .icon-card .ic{font-size:22px;margin-bottom:10px;}
  .icon-card h4{font-size:14.5px;margin:0 0 6px;}
  .icon-card p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0;}
  .timeline{border-left:2px solid var(--line);margin-left:6px;}
  .timeline-item{position:relative;padding:0 0 28px 26px;}
  .timeline-item::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--paper);}
  .timeline-year{font-family:'Newsreader',serif;color:var(--forest);font-weight:600;font-size:14px;margin-bottom:4px;}
  .timeline-item h4{font-size:15px;margin:0 0 6px;}
  .timeline-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0;max-width:60ch;}
  .field-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);}
  .field-table th, .field-table td{text-align:left;padding:14px 18px;font-size:13.5px;border-bottom:1px solid var(--line);}
  .field-table th{width:220px;color:var(--ink-soft);font-weight:600;background:var(--paper-2);}
  .field-table tr:last-child th, .field-table tr:last-child td{border-bottom:none;}
  .note-box{background:var(--paper-2);border-left:3px solid var(--gold);padding:16px 20px;font-size:13.5px;color:var(--ink-soft);margin-top:28px;}
  .note-box a{color:var(--forest);font-weight:600;}
  @media (max-width:700px){
    .field-table th{width:140px;}
  }

/* ---------- Mobile menu ---------- */
.menu-toggle{display:none;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);}
.menu-toggle:hover{border-color:var(--forest);color:var(--forest);}
.mobile-menu{display:none;flex-direction:column;background:var(--paper);border-top:1px solid var(--line);padding:8px 20px 20px;}
.mobile-menu.is-open{display:flex;}
.mobile-menu > a{padding:13px 4px;font-size:15px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);}
.mobile-submenu{border-bottom:1px solid var(--line);}
.mobile-submenu-toggle{width:100%;text-align:left;background:none;border:none;font:inherit;padding:13px 4px;font-size:15px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.mobile-submenu-list{display:none;flex-direction:column;padding:0 0 8px 12px;}
.mobile-submenu-list.is-open{display:flex;}
.mobile-submenu-list a{display:flex;justify-content:space-between;padding:9px 4px;font-size:14px;color:var(--ink-soft);}
.mobile-submenu-list a.all{color:var(--forest);font-weight:600;}
.mobile-btn-ghost{display:block;margin-top:14px;text-align:center;border:1px solid var(--forest);color:var(--forest);font-weight:600;padding:11px 16px;border-radius:2px;}

@media (max-width: 980px){
  .menu-toggle{display:flex;}
}

/* ---------- Pagination ---------- */
.pagination-nav{margin-top:24px;}
.pagination-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;}
.pagination-list li a, .pagination-list li span{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:2px;font-size:14px;color:var(--ink);background:#fff;
}
.pagination-list li a:hover{border-color:var(--forest);color:var(--forest);}
.pagination-list li.active span{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:600;}
.pagination-list li.disabled span{color:var(--ink-soft);opacity:.5;background:transparent;}