:root {
  --warga-ink: #102a43;
  --warga-body: #334e68;
  --warga-navy: #102a43;
  --warga-navy-dark: #102a43;
  --warga-teal: #087f8c;
  --warga-teal-dark: #05636d;
  --warga-teal-soft: #e6fffa;
  --warga-amber: #8a5a00;
  --warga-warm: #f5f7fa;
  --warga-surface: #fff;
  --warga-border: #d9e2ec;
  --warga-muted: #627d98;
  --warga-focus: #f6c344;
  --warga-success: #176b4d;
  --warga-danger: #b42318;
}

.wargaloka-body {
  background: var(--warga-warm);
  color: var(--warga-body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.wargaloka-body main { display: block; }
.wargaloka-body h1, .wargaloka-body h2, .wargaloka-body h3 { color: var(--warga-ink); }
.wargaloka-body h1, .wargaloka-body h2, .wargaloka-body h3, .wargaloka-body button, .wargaloka-body label { font-weight: 750; }
.wargaloka-body a { color: var(--warga-teal-dark); }
.wargaloka-body a:hover { color: var(--warga-teal); }
.wargaloka-body a { color: var(--warga-teal); }
.wargaloka-body a:hover { color: #0a665d; }

.wargaloka-nav {
  background: var(--warga-navy-dark) !important;
  box-shadow: 0 2px 14px rgba(16, 43, 61, .16);
}

.wargaloka-nav .container { min-height: 3.5rem; }
.wargaloka-brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff !important; font-size: 1rem; }
.wargaloka-brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--warga-teal); color: #fff; font-size: .8rem; }
.wargaloka-nav .nav-link { color: #dce9ec !important; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.wargaloka-nav .nav-link:hover, .wargaloka-nav .nav-link:focus-visible { color: #fff !important; }

.wargaloka-search-header { margin-top: 2rem !important; background: linear-gradient(135deg, #eef7f4, #fbfcfa); }
.wargaloka-search-section { padding: 3.5rem 0 2.75rem !important; }
.wargaloka-search-card { position: relative; padding: 0 !important; border: 1px solid var(--warga-border) !important; border-radius: 1rem !important; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(16,42,67,.08); }
.wargaloka-search-fields { padding: 1rem 1.25rem !important; }
.wargaloka-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem; }
.wargaloka-search-control { position: relative; min-width: 0; }
.wargaloka-search-label { display: block; margin-bottom: .45rem; color: var(--warga-ink); font-size: .84rem; font-weight: 800; letter-spacing: .045em; line-height: 1.3; text-transform: uppercase; }
.wargaloka-search-input { height: 3rem; min-height: 3rem; border: 2px solid #9fb3c8 !important; border-radius: .65rem !important; color: var(--warga-ink); font-size: 1rem !important; }
.wargaloka-search-input:focus { border-color: var(--warga-focus) !important; box-shadow: 0 0 0 .2rem rgba(31,102,163,.14) !important; }
.wargaloka-search-button { height: 3rem; min-height: 3rem; align-self: start; padding: 0 1.25rem; border: 0 !important; border-radius: .65rem !important; background: var(--warga-teal) !important; font-size: .9rem !important; font-weight: 800; line-height: 1; white-space: nowrap; }
.wargaloka-search-button:hover, .wargaloka-search-button:focus-visible { background: #0a665d !important; }

.wargaloka-page { min-height: 30rem; background: var(--warga-warm); }
.wargaloka-page > .container { padding-top: 2rem; padding-bottom: 2rem; }
.wargaloka-page-heading { margin: .2rem 0 .8rem; color: var(--warga-ink); font-size: clamp(1.45rem, 3.5vw, 2.1rem) !important; font-weight: 800 !important; line-height: 1.2; }
.wargaloka-kicker { display: block; margin-bottom: .35rem; color: var(--warga-teal); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.wargaloka-context { margin: 0 0 1rem; color: var(--warga-muted); font-size: .9rem; line-height: 1.55; }
.wargaloka-divider { margin: 0 0 1.4rem !important; }
.wargaloka-divider .divider-custom-line { background-color: #b7d9d3 !important; }
.wargaloka-divider .divider-custom-icon { color: var(--warga-teal) !important; }

.wargaloka-answer-card { margin: 1.2rem 0; padding: 1.15rem 1.25rem; border: 1px solid #b9ddd5; border-radius: .85rem; background: linear-gradient(135deg, #eefaf7, #fff); box-shadow: 0 5px 16px rgba(19,139,125,.08); }
.wargaloka-answer-label { display: block; margin-bottom: .3rem; color: var(--warga-muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wargaloka-answer-value { display: block; color: var(--warga-navy); font-size: clamp(1.75rem, 5vw, 2.6rem); font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
.wargaloka-answer-context { display: block; margin-top: .45rem; color: var(--warga-muted); font-size: .82rem; }
.wargaloka-answer-context a { font-weight: 800; }

.wargaloka-location-details { max-width: 52rem; margin: 1.2rem 0; padding: 1rem 1.1rem; border: 1px solid var(--warga-border); border-radius: .75rem; background: #fff; }
.wargaloka-location-details dt { color: var(--warga-muted); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.wargaloka-location-details dd { margin-bottom: .65rem; font-size: .9rem; overflow-wrap: anywhere; }
.wargaloka-location-details dd:last-child { margin-bottom: 0; }
.wargaloka-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0 1.3rem; }
.wargaloka-actions .btn { min-height: 2.45rem; border-radius: .55rem; font-size: .78rem; font-weight: 800; }
.wargaloka-actions .btn-danger { border-color: var(--warga-teal) !important; background: var(--warga-teal) !important; }
.wargaloka-actions .btn-danger:hover, .wargaloka-actions .btn-danger:focus-visible { background: #0a665d !important; }
.wargaloka-actions .btn-outline-danger { border-color: var(--warga-teal) !important; color: var(--warga-teal) !important; }
.wargaloka-actions .btn-outline-danger:hover, .wargaloka-actions .btn-outline-danger:focus-visible { background: var(--warga-teal) !important; color: #fff !important; }
.copy-feedback { min-height: 1.4rem; color: var(--warga-teal); font-size: .75rem; font-weight: 800; }

.wargaloka-table-shell { overflow: hidden; border: 1px solid var(--warga-border); border-radius: .8rem; background: #fff; box-shadow: 0 4px 15px rgba(23,59,83,.05); }
.wargaloka-table-shell table { margin-bottom: 0 !important; }
.wargaloka-table-shell .table > :not(:first-child) { border-top: 0 !important; }
.wargaloka-table-shell .table > thead { border-top: .2rem solid var(--warga-navy) !important; }
.wargaloka-table-shell caption { caption-side: top; padding: .8rem 1rem; color: var(--warga-muted); font-size: .74rem; line-height: 1.4; text-align: left; }
.wargaloka-table-shell thead { background: #eaf4f2; color: var(--warga-ink); }
.wargaloka-table-shell th { font-size: .74rem; }
.wargaloka-table-shell td, .wargaloka-table-shell th { border-color: var(--warga-border) !important; vertical-align: middle; }
.wargaloka-table-shell tbody tr:hover { background: #f2faf8; }
.wargaloka-table-shell td a { font-weight: 700; overflow-wrap: anywhere; }
.wargaloka-table-shell .copy-postal-code { border-color: var(--warga-teal); color: var(--warga-teal); font-size: .68rem; font-weight: 800; }
.wargaloka-table-shell .copy-postal-code:hover, .wargaloka-table-shell .copy-postal-code:focus-visible { background: var(--warga-teal); color: #fff; }

.wargaloka-hero { padding: 2.2rem 0 2.8rem; background: linear-gradient(135deg, #173b53, #23666b); color: #fff; }
.wargaloka-hero h1 { max-width: 52rem; color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem) !important; }
.wargaloka-hero p { max-width: 48rem; color: #d4e5e7; }

.wargaloka-page .table-responsive { margin: 1rem 0; }
.wargaloka-page .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; max-width: 100%; margin-top: 1.2rem !important; padding: 0 .5rem; }
.wargaloka-page .pagination .page-item { margin: 0; }
.wargaloka-page .pagination .page-link { margin: 0; border: 0; border-radius: .4rem; background: #e8f2f0 !important; color: var(--warga-teal) !important; font-size: .76rem; font-weight: 800; }
.wargaloka-page .pagination .page-link:hover, .wargaloka-page .pagination .page-link:focus-visible { background: var(--warga-teal) !important; color: #fff !important; }

.wargaloka-body a:focus-visible, .wargaloka-body button:focus-visible, .wargaloka-body input:focus-visible, .wargaloka-body .page-link:focus-visible { outline: 3px solid rgba(31,102,163,.48); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .wargaloka-search-section { padding: 2rem 0 1.75rem !important; }
  .wargaloka-search-card { border-radius: .85rem !important; }
  .wargaloka-search-fields { padding: .9rem 1rem !important; }
  .wargaloka-search-row { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .wargaloka-search-label { font-size: .78rem; letter-spacing: .04em; }
  .wargaloka-search-button { width: 100%; }
  .wargaloka-page > .container { padding-top: 1.25rem; }
  .wargaloka-location-details { padding: .85rem; }
  .wargaloka-actions { align-items: stretch; flex-direction: column; }
  .wargaloka-actions .btn { width: 100%; }
  .wargaloka-table-shell { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .wargaloka-table-shell .table-responsive { overflow: visible; }
  .wargaloka-table-shell .table > thead { border-top: 0 !important; }
  .wargaloka-table-shell tbody tr > * { background-color: transparent !important; box-shadow: none !important; }
  .wargaloka-table-shell caption { display: block; width: 100%; box-sizing: border-box; padding: .55rem .8rem; font-size: .74rem; line-height: 1.4; text-align: left; white-space: normal; }
  .wargaloka-table-shell table, .wargaloka-table-shell tbody, .wargaloka-table-shell tr, .wargaloka-table-shell td, .wargaloka-table-shell th { display: block; width: 100%; }
  .wargaloka-table-shell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wargaloka-table-shell tbody { display: grid; gap: .65rem; }
  .wargaloka-table-shell tr { padding: .7rem .8rem; border: 1px solid var(--warga-border); border-radius: .7rem; background: #fff; }
  .wargaloka-table-shell td, .wargaloka-table-shell th { min-height: 1.5rem; padding: .22rem 0 !important; border: 0 !important; overflow-wrap: anywhere; }
  .wargaloka-table-shell td::before { display: inline-block; width: 7rem; min-width: 7rem; margin-right: .5rem; color: var(--warga-muted); content: attr(data-label); font-size: .65rem; font-weight: 900; letter-spacing: .03em; line-height: 1.35; text-transform: uppercase; vertical-align: top; }
  .wargaloka-table-shell th[scope="row"] { display: none; }
  .wargaloka-overview-table td:nth-of-type(1)::before { content: "Provinsi"; }
  .wargaloka-overview-table td:nth-of-type(2)::before { content: "Kabupaten/Kota"; }
  .wargaloka-overview-table td:nth-of-type(3)::before { content: "Kecamatan"; }
  .wargaloka-overview-table td:nth-of-type(4)::before { content: "Desa/Kelurahan"; }
  .wargaloka-overview-table td:nth-of-type(5)::before { content: "Kode Pos"; }
  .wargaloka-district-table td:nth-of-type(1)::before { content: "Kabupaten/Kota"; }
  .wargaloka-district-table td:nth-of-type(2)::before { content: "Provinsi"; }
  .wargaloka-district-table td:nth-of-type(3)::before { content: "Kecamatan"; }
  .wargaloka-district-table td:nth-of-type(4)::before { content: "Desa/Kelurahan"; }
  .wargaloka-district-table td:nth-of-type(5)::before { content: "Kode Pos"; }
  .wargaloka-subdistrict-table td:nth-of-type(1)::before { content: "Kecamatan"; }
  .wargaloka-subdistrict-table td:nth-of-type(2)::before { content: "Provinsi"; }
  .wargaloka-subdistrict-table td:nth-of-type(3)::before { content: "Desa/Kelurahan"; }
  .wargaloka-subdistrict-table td:nth-of-type(4)::before { content: "Kode Pos"; }
  .wargaloka-village-table td:nth-of-type(1)::before { content: "Desa/Kelurahan"; }
  .wargaloka-village-table td:nth-of-type(2)::before { content: "Kode Pos"; }
  .wargaloka-village-table td:nth-of-type(3)::before { content: "Kecamatan"; }
  .wargaloka-village-table td:nth-of-type(4)::before { content: "Kabupaten/Kota"; }
  .wargaloka-village-table td:nth-of-type(5)::before { content: "Provinsi"; }
  .wargaloka-province-table td:nth-of-type(1)::before { content: "Kabupaten/Kota"; }
  .wargaloka-province-table td:nth-of-type(2)::before { content: "Kecamatan"; }
  .wargaloka-province-table td:nth-of-type(3)::before { content: "Desa/Kelurahan"; }
  .wargaloka-province-table td:nth-of-type(4)::before { content: "Kode Pos"; }
  .wargaloka-district-detail-table td:nth-of-type(1)::before { content: "Kecamatan"; }
  .wargaloka-district-detail-table td:nth-of-type(2)::before { content: "Desa/Kelurahan"; }
  .wargaloka-district-detail-table td:nth-of-type(3)::before { content: "Kode Pos"; }
  .wargaloka-subdistrict-detail-table td:nth-of-type(1)::before { content: "Desa/Kelurahan"; }
  .wargaloka-subdistrict-detail-table td:nth-of-type(2)::before { content: "Kode Pos"; }
  .wargaloka-postal-detail-table td:nth-of-type(1)::before { content: "Desa/Kelurahan"; }
  .wargaloka-postal-detail-table td:nth-of-type(2)::before { content: "Kecamatan"; }
  .wargaloka-postal-detail-table td:nth-of-type(3)::before { content: "Kabupaten/Kota"; }
  .wargaloka-postal-detail-table td:nth-of-type(4)::before { content: "Provinsi"; }
  .wargaloka-search-table td:nth-of-type(1)::before { content: "Kode Pos"; }
  .wargaloka-search-table td:nth-of-type(2)::before { content: "Desa/Kelurahan"; }
  .wargaloka-search-table td:nth-of-type(3)::before { content: "Kecamatan"; }
  .wargaloka-search-table td:nth-of-type(4)::before { content: "Kabupaten/Kota"; }
  .wargaloka-search-table td:nth-of-type(5)::before { content: "Provinsi"; }
  .wargaloka-table-shell .copy-postal-code { margin: .3rem 0 0 5.55rem !important; }
  .wargaloka-page .pagination { row-gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.wargaloka-skip-link {
  position: absolute;
  z-index: 1100;
  top: 12px;
  left: -9999px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warga-surface);
  color: var(--warga-ink);
  box-shadow: 0 4px 14px rgba(16, 42, 67, .2);
  font-weight: 800;
}
.wargaloka-skip-link:focus { left: 16px; outline: 3px solid var(--warga-focus); outline-offset: 3px; }
.wargaloka-search-hint { margin: .45rem 0 0; color: var(--warga-muted); font-size: .875rem; line-height: 1.4; }
.wargaloka-state { margin: 1.2rem 0; padding: 1rem 1.1rem; border: 1px solid var(--warga-border); border-radius: 12px; background: var(--warga-surface); }
.wargaloka-state[role="alert"] { border-color: #e7a59f; background: #fff7f6; }
.wargaloka-state h1, .wargaloka-state h2, .wargaloka-state h3 { margin: 0 0 .45rem; font-size: clamp(1.25rem, 3vw, 1.75rem); }
.wargaloka-state p { margin: 0 0 .8rem; }
.flynews-frame { max-width: 64rem; margin: 0 auto; }
.flynews-page .wargaloka-page-heading h1 { margin-bottom: .4rem; }
.flynews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.flynews-card, .flynews-article { padding: 1.15rem; border: 1px solid var(--warga-border); border-radius: .85rem; background: var(--warga-surface); box-shadow: 0 5px 16px rgba(16,42,67,.06); }
.flynews-card { display: flex; min-height: 10rem; flex-direction: column; }
.flynews-card time, .flynews-article time { color: var(--warga-muted); font-size: .75rem; font-weight: 700; }
.flynews-card h2, .flynews-article h1 { color: var(--warga-ink); line-height: 1.3; }
.flynews-card h2 { margin: .55rem 0 .7rem; font-size: 1.05rem; }
.flynews-card h2 a { color: inherit; text-decoration: none; }
.flynews-card h2 a:hover, .flynews-card h2 a:focus-visible { color: var(--warga-teal); text-decoration: underline; }
.flynews-card p { color: var(--warga-muted); }
.flynews-link { margin-top: auto; font-weight: 800; text-decoration: none; }
.flynews-pagination { margin-top: 1.25rem; }
.flynews-back { display: inline-flex; min-height: 2.75rem; align-items: center; margin-bottom: 1rem; padding: .55rem .9rem; border-radius: .55rem; font-weight: 800; }
.flynews-content { margin-top: 1.4rem; color: var(--warga-body); line-height: 1.8; overflow-wrap: anywhere; }
.flynews-content p { margin: 0 0 1rem; }
.flynews-content h1, .flynews-content h2, .flynews-content h3 { margin: 1.4rem 0 .6rem; color: var(--warga-ink); }
.flynews-content a { color: var(--warga-teal-dark); font-weight: 700; }
@media (max-width: 767px) { .flynews-grid { grid-template-columns: 1fr; } }
.wargaloka-nav { border-bottom: 1px solid rgba(217, 226, 236, .2); }
.wargaloka-nav .navbar-toggler { min-height: 44px; }
.wargaloka-page > .container { max-width: 1120px; }
.wargaloka-footer { background: var(--warga-ink); }
.wargaloka-footer .copyright { background: transparent !important; }
.wargaloka-answer-value { font-variant-numeric: tabular-nums; }
.wargaloka-table-shell { box-shadow: 0 8px 24px rgba(16, 42, 67, .08); }
.wargaloka-body :focus-visible { outline: 3px solid var(--warga-focus); outline-offset: 3px; }

@media (min-width: 768px) {
  .wargaloka-search-card { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 767.98px) {
  .wargaloka-page > .container { padding-inline: 20px; }
  .wargaloka-search-hint { font-size: .875rem; }
}

/* FSD-122: the header and search remain in normal document flow. */
.wargaloka-nav {
  position: relative !important;
  top: auto !important;
  z-index: 10;
}
.wargaloka-search-section { padding-top: 1rem !important; padding-bottom: .75rem !important; }
.wargaloka-nav .nav-link[aria-current="page"] {
  color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--warga-focus);
}
.wargaloka-search-option { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .wargaloka-search-section { padding-top: .65rem !important; padding-bottom: .75rem !important; }
  .wargaloka-nav .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--warga-focus); }
}

/* FSD-99 answer-first composition */
.wargaloka-search-intro { max-width: 760px; margin: 0 auto .8rem; }
.wargaloka-search-lede { max-width: 680px; margin: .35rem 0 .45rem; color: var(--warga-ink); font-size: clamp(1.65rem, 4vw, 2.75rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.08; }
.wargaloka-search-description { max-width: 620px; margin: 0; color: var(--warga-body); font-size: 1.125rem; line-height: 1.55; }
.wargaloka-page-subheading { margin: 0 0 .65rem; color: var(--warga-ink); font-size: 1.2rem !important; font-weight: 800 !important; line-height: 1.3; }
.wargaloka-answer-card { border-left: 5px solid var(--warga-teal); }
.wargaloka-answer-value { overflow-wrap: anywhere; }
.wargaloka-pagination { margin-top: 1rem; }
.wargaloka-pagination .page-link[aria-current="page"] { background: var(--warga-teal) !important; color: #fff !important; }

@media (max-width: 767.98px) {
  .wargaloka-search-intro { margin-bottom: .6rem; }
  .wargaloka-search-lede { font-size: 1.8rem; }
  .wargaloka-search-description { font-size: .95rem; }
}

.wargaloka-news-section { padding: 3rem 0; background: var(--warga-warm); border-top: 1px solid var(--warga-border); }
.wargaloka-news-frame { max-width: 76rem; }
.wargaloka-news-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.wargaloka-news-heading h2 { margin: .35rem 0 .4rem; color: var(--warga-ink); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.wargaloka-news-heading p { margin: 0; color: var(--warga-muted); }
.wargaloka-news-heading .btn { min-height: 2.75rem; }
@media (max-width: 700px) { .wargaloka-news-heading { align-items: flex-start; flex-direction: column; } }