/*
Theme Name: Alfatwa Gov - Wibawa Nusantara
Theme URI: https://parigimoutong.go.id
Author: Alfatwa Gov Team
Author URI: https://parigimoutong.go.id
Description: Tema kustom resmi Pemerintah Kabupaten Parigi Moutong. Design System "Wibawa Nusantara" - mengedepankan Authority, Transparency, Modernity, dan Accessibility. Dibangun dengan HTML5 semantik, CSS3 murni, Vanilla JS, tanpa Page Builder. Pixel-perfect, cepat, responsif, dan aksesibel untuk layanan publik.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alfatwa-gov
Domain Path: /languages
Tags: government, accessibility-ready, custom-colors, custom-logo, featured-images, translation-ready, threaded-comments
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
*/

/* ==========================================================================
   Wibawa Nusantara - Design Tokens (Sumber: markdown/DESIGN.md)
   ========================================================================== */

:root {
  /* --- Colors: Surface & Background --- */
  --color-surface: #f8f9ff;
  --color-surface-dim: #ccdbf4;
  --color-surface-bright: #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e6eeff;
  --color-surface-container-high: #dde9ff;
  --color-surface-container-highest: #d5e3fd;
  --color-background: #f8f9ff;
  --color-on-surface: #0d1c2f;
  --color-on-surface-variant: #43474f;
  --color-on-background: #0d1c2f;
  --color-inverse-surface: #233144;
  --color-inverse-on-surface: #ebf1ff;
  --color-inverse-primary: #a7c8ff;
  --color-outline: #737780;
  --color-outline-variant: #c3c6d1;
  --color-surface-variant: #d5e3fd;
  --color-surface-tint: #3a5f94;

  /* --- Colors: Primary (Deep Batik Blue) --- */
  --color-primary: #001e40;
  --color-on-primary: #ffffff;
  --color-primary-container: #003366;
  --color-on-primary-container: #799dd6;
  --color-primary-fixed: #d5e3ff;
  --color-primary-fixed-dim: #a7c8ff;
  --color-on-primary-fixed: #001b3c;
  --color-on-primary-fixed-variant: #1f477b;

  /* --- Colors: Secondary (Heritage Gold) --- */
  --color-secondary: #775a19;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fed488;
  --color-on-secondary-container: #785a1a;
  --color-secondary-fixed: #ffdea5;
  --color-secondary-fixed-dim: #e9c176;
  --color-on-secondary-fixed: #261900;
  --color-on-secondary-fixed-variant: #5d4201;

  /* --- Colors: Tertiary --- */
  --color-tertiary: #171f24;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #2c3439;
  --color-on-tertiary-container: #949ca3;
  --color-tertiary-fixed: #dbe3ea;
  --color-tertiary-fixed-dim: #bfc8ce;
  --color-on-tertiary-fixed: #151d22;
  --color-on-tertiary-fixed-variant: #40484d;

  /* --- Colors: Error --- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* --- Typography Families --- */
  --font-heading: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* --- Typography Scales --- */
  --text-display-lg-size: 48px;
  --text-display-lg-weight: 700;
  --text-display-lg-line: 56px;
  --text-display-lg-spacing: -0.02em;

  --text-headline-lg-size: 32px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-line: 40px;

  --text-headline-lg-mobile-size: 24px;
  --text-headline-lg-mobile-weight: 700;
  --text-headline-lg-mobile-line: 32px;

  --text-headline-md-size: 24px;
  --text-headline-md-weight: 600;
  --text-headline-md-line: 32px;

  --text-body-lg-size: 18px;
  --text-body-lg-line: 28px;

  --text-body-md-size: 16px;
  --text-body-md-line: 24px;

  --text-body-sm-size: 14px;
  --text-body-sm-line: 20px;

  --text-label-md-size: 14px;
  --text-label-md-weight: 600;
  --text-label-md-line: 16px;
  --text-label-md-spacing: 0.05em;

  --text-label-sm-size: 12px;
  --text-label-sm-weight: 500;
  --text-label-sm-line: 16px;

  /* --- Rounded (Shapes) --- */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* --- Spacing & Layout --- */
  --spacing-base: 8px;
  --spacing-gutter: 24px;
  --spacing-stack-sm: 8px;
  --spacing-stack-md: 16px;
  --spacing-stack-lg: 32px;
  --spacing-margin-mobile: 16px;
  --spacing-margin-desktop: 40px;
  --container-max: 1280px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to content - Aksesibilitas */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-margin-desktop);
  z-index: 9999;
  padding: 12px 20px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}

/* ==========================================================================
   Typography Utilities (sesuai DESIGN.md)
   ========================================================================== */

.font-display-lg {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-spacing);
}

.font-headline-lg {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
}

.font-headline-md {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
}

.font-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
}

.font-body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
}

.font-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.font-label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: var(--text-label-md-spacing);
}

.font-label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
}

@media (max-width: 768px) {
  .font-display-lg {
    font-size: 32px;
    line-height: 40px;
  }

  .font-headline-lg {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
  }
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--spacing-margin-mobile);
  }
}

/* Screen reader only */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* WordPress align helpers */
.alignwide {
  max-width: var(--container-max);
  margin-inline: auto;
}

.alignfull {
  max-width: none;
  width: 100%;
}

/* ==========================================================================
   Header - Wibawa Nusantara (Top Bar + Main Nav)
   Referensi: markdown/header/header.php + screen.png
   HTML5 semantik, CSS3 murni, sticky, aksesibel
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-surface-dim);
}

/* --- Top Bar --- */
.top-bar {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
}

.top-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-gutter);
  min-height: 32px;
  padding-block: 4px;
}

.top-bar__lang {
  display: flex;
  gap: var(--spacing-stack-md);
}

.top-bar__lang button,
.top-bar__lang a {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 0;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}

.top-bar__lang button.is-active,
.top-bar__lang a.is-active,
.top-bar__lang button:hover,
.top-bar__lang a:hover {
  opacity: 1;
  color: var(--color-surface-bright);
}

.top-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-md);
}

.top-bar__icons {
  display: flex;
  gap: 12px;
  padding-right: var(--spacing-stack-md);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.top-bar__icons button,
.top-bar__icons a {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.top-bar__icons button:hover,
.top-bar__icons a:hover {
  opacity: 1;
}

.top-bar__search {
  position: relative;
  display: flex;
  align-items: center;
}

.top-bar__search .material-symbols-outlined,
.top-bar__search .ph {
  position: absolute;
  left: 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.top-bar__search input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-on-primary);
  font-size: var(--text-label-sm-size);
  padding: 6px 12px 6px 32px;
  border-radius: var(--radius-full);
  width: 192px;
  outline: none;
  transition: box-shadow 0.2s, background 0.2s;
}

.top-bar__search input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.top-bar__search input:focus {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* --- Main Nav --- */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-gutter);
  padding-block: 12px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand .custom-logo-link,
.brand__logo {
  display: inline-flex;
  align-items: center;
}

.brand .custom-logo,
.brand__logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.brand__subtitle {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2px;
}

/* Primary Menu - wp_nav_menu */
.primary-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.primary-menu a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 30, 64, 0.7);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
  color: var(--color-primary);
}

.primary-menu .current-menu-item>a,
.primary-menu .current_page_item>a,
.primary-menu .current-menu-ancestor>a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Nav actions (user + mobile toggle) */
.main-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-icon--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 4px rgba(0, 30, 64, 0.15);
}

.btn-icon--primary:hover {
  background: var(--color-primary-container);
}

.btn-icon--ghost {
  background: transparent;
  color: var(--color-primary);
  display: none;
}

.btn-icon--ghost:hover {
  background: var(--color-surface-container-low);
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-surface-dim);
  background: var(--color-surface-container-lowest);
  padding: 16px var(--spacing-margin-mobile);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav .primary-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.mobile-nav .primary-menu li {
  width: 100%;
  border-bottom: 1px solid var(--color-outline-variant);
}

.mobile-nav .primary-menu li:last-child {
  border-bottom: none;
}

.mobile-nav .primary-menu a {
  display: block;
  padding: 12px 0;
  border-bottom: none;
}

@media (max-width: 1024px) {
  .primary-menu--desktop {
    display: none;
  }

  .btn-icon--ghost {
    display: inline-flex;
  }

  .top-bar__search input {
    width: 140px;
  }
}

@media (max-width: 640px) {
  .top-bar__icons {
    display: none;
  }

  .top-bar__search input {
    width: 120px;
  }

  .brand__title {
    font-size: 16px;
  }
}

/* ==========================================================================
   Hero Section - Wibawa Nusantara
   Source: markdown/front-page/code.html - Hero Section
   Layout: CSS3 murni, flex + overlay gradient, tanpa Tailwind
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -80px;
  padding-top: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 30, 64, 0.9) 0%, rgba(0, 30, 64, 0.6) 50%, transparent 100%);
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content {
  max-width: 48rem;
}

.hero__label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin-bottom: var(--spacing-stack-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-spacing);
  color: var(--color-on-primary);
  margin-bottom: var(--spacing-stack-sm);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-surface-container-highest);
  margin-bottom: var(--spacing-stack-lg);
  max-width: 42rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: var(--text-label-md-spacing);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
  cursor: pointer;
}

.hero__btn .material-symbols-outlined {
  margin-left: 8px;
  font-size: 18px;
}

.hero__btn--primary {
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero__btn--primary:hover {
  background: var(--color-secondary-container);
  transform: translateY(-1px);
}

.hero__btn--ghost {
  background: rgba(248, 249, 255, 0.1);
  color: var(--color-on-primary);
  border: 1px solid rgba(213, 227, 253, 0.3);
  backdrop-filter: blur(8px);
}

.hero__btn--ghost:hover {
  background: rgba(248, 249, 255, 0.2);
}

@media (max-width: 1024px) {
  .hero__container {
    padding-inline: var(--spacing-margin-mobile);
  }
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 520px;
    padding-block: 120px 48px;
    margin-top: 0;
  }

  .hero__title {
    font-size: 32px;
    line-height: 40px;
  }

  .hero__desc {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ==========================================================================
   Layanan Publik Unggulan - Grid
   Source: markdown/front-page/code.html - Layanan Unggulan Grid
   Layout: CSS3 murni, display:grid 4 kol -> 2 kol -> 1 kol
   ========================================================================== */

.layanan {
  width: 100%;
  padding-block: var(--spacing-stack-lg);
  background: var(--color-surface-container-lowest);
}

.layanan__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

.layanan__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--spacing-stack-lg);
}

.layanan__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin-bottom: 8px;
}

.layanan__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  max-width: 42rem;
}

.layanan__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-gutter);
}

.layanan__card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid rgba(195, 198, 209, 0.3);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.layanan__card:hover {
  border-color: rgba(0, 30, 64, 0.5);
  box-shadow: 0 4px 16px rgba(0, 30, 64, 0.08);
}

.layanan__card-decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: rgba(213, 227, 253, 0.2);
  border-radius: 0 0 0 100%;
  pointer-events: none;
  transition: transform 0.3s;
}

.layanan__card:hover .layanan__card-decor {
  transform: scale(1.1);
}

.layanan__card-icon {
  width: 56px;
  height: 56px;
  background: var(--color-surface-container-highest);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-stack-md);
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.layanan__card:hover .layanan__card-icon {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.layanan__card-icon .material-symbols-outlined {
  font-size: 28px;
}

.layanan__card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.layanan__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  flex-grow: 1;
}

.layanan__card-link {
  margin-top: 16px;
  display: flex;
  align-items: center;
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: var(--text-label-md-spacing);
  transition: transform 0.2s;
}

.layanan__card:hover .layanan__card-link {
  transform: translateX(4px);
}

.layanan__card-link .material-symbols-outlined {
  margin-left: 4px;
  font-size: 16px;
}

@media (max-width: 1024px) {
  .layanan__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .layanan__container {
    padding-inline: var(--spacing-margin-mobile);
  }
}

@media (max-width: 640px) {
  .layanan__grid {
    grid-template-columns: 1fr;
  }

  .layanan__title {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
  }
}

/* ==========================================================================
   Sambutan Bupati - Card Flex
   Source: markdown/front-page/code.html - Sambutan Bupati Section
   Layout: CSS3 murni, display:flex col→row, tanpa Tailwind
   ========================================================================== */

.sambutan {
  width: 100%;
  padding-block: var(--spacing-stack-lg);
  background: var(--color-surface);
}

.sambutan__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

.sambutan__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gutter);
  background: var(--color-surface-container-low);
  border-radius: var(--radius-xl);
  padding: var(--spacing-stack-md);
  border: 1px solid rgba(195, 198, 209, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .sambutan__card {
    flex-direction: row;
    padding: var(--spacing-stack-lg);
  }
}

.sambutan__decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: rgba(255, 222, 165, 0.1);
  border-radius: 9999px;
  filter: blur(48px);
  margin-right: -8rem;
  margin-top: -8rem;
  pointer-events: none;
}

.sambutan__photo-col {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .sambutan__photo-col {
    width: 33.333%;
  }
}

.sambutan__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sambutan__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sambutan__photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 30, 64, 0.9), transparent);
  padding: 16px;
}

.sambutan__caption-text {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-on-primary);
}

.sambutan__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .sambutan__body {
    width: 66.666%;
  }
}

.sambutan__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-stack-sm);
}

.sambutan__eyebrow-line {
  width: 32px;
  height: 4px;
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
}

.sambutan__eyebrow-text {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.sambutan__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin-bottom: var(--spacing-stack-md);
}

@media (max-width: 768px) {
  .sambutan__title {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
  }
}

.sambutan__prose {
  max-width: none;
  color: var(--color-on-surface-variant);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
}

.sambutan__prose p {
  margin-bottom: 16px;
}

.sambutan__prose p:last-child {
  margin-bottom: 0;
}

.sambutan__prose .font-label-md {
  font-weight: 600;
  color: var(--color-primary);
}

/* ==========================================================================
   Statistik Daerah - Parigi Moutong dalam Angka
   Source: markdown/front-page/code.html - Statistik Daerah
   Layout: CSS3 murni, display:grid 3 kol + divide, overlay SVG
   ========================================================================== */

.statistik {
  width: 100%;
  padding-block: var(--spacing-stack-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  position: relative;
  overflow: hidden;
}

.statistik__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  color: var(--color-on-primary);
}

.statistik__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  position: relative;
  z-index: 10;
}

.statistik__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-stack-lg);
  border-bottom: 1px solid rgba(213, 227, 253, 0.2);
  padding-bottom: 16px;
  gap: var(--spacing-gutter);
}

@media (min-width: 768px) {
  .statistik__header {
    flex-direction: row;
  }
}

.statistik__header h2 {
  color: var(--color-on-primary);
}

.statistik__header p {
  color: var(--color-surface-container-highest);
  opacity: 0.9;
}

.statistik__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-secondary-fixed);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  transition: color 0.2s;
}

.statistik__link:hover {
  color: var(--color-secondary-fixed-dim);
}

.statistik__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .statistik__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-gutter);
  }
}

.statistik__item {
  display: flex;
  flex-direction: column;
  padding-block: 16px;
  border-bottom: 1px solid rgba(213, 227, 253, 0.2);
}

.statistik__item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .statistik__item {
    padding-block: 0;
    padding-inline: 24px;
    border-bottom: none;
    border-right: 1px solid rgba(213, 227, 253, 0.2);
  }

  .statistik__item:last-child {
    border-right: none;
  }
}

.statistik__item .counter {
  color: var(--color-secondary-fixed);
}

/* ==========================================================================
   Berita + Sidebar - Home Grid
   Source: markdown/front-page/code.html - News & Events Layout
   Layout: CSS3 murni, 12-col grid, berita 8col + sidebar 4col
   ========================================================================== */

.section-berita-agenda {
  width: 100%;
  padding-block: var(--spacing-stack-lg);
  background: var(--color-surface);
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
}

@media (min-width: 1024px) {
  .home-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .home-grid__main {
    grid-column: span 8;
  }

  .home-grid__sidebar {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
  }
}

/* Berita - Main Column */
.berita {
  display: flex;
  flex-direction: column;
}

.berita__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-stack-md);
  border-bottom: 2px solid rgba(0, 30, 64, 0.1);
  padding-bottom: 8px;
}

.berita__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.berita__featured {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.berita__featured:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.berita__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .berita__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.berita__card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.berita__card:hover {
  border-color: rgba(0, 30, 64, 0.3);
}

/* Line clamp fallback */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Card Berita - Semantik murni (tanpa Tailwind)
   Menggantikan utility absolute/object-cover/group-hover:scale-105/flex
   ========================================================================== */

/* --- Berita container semantik --- */
.berita__heading {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
}

.berita__index-link {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: var(--text-label-md-spacing);
  color: var(--color-secondary);
  text-decoration: none;
}

.berita__index-link:hover {
  text-decoration: underline;
}

.berita__empty {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  text-align: center;
  padding-block: 32px;
}

/* --- Card base --- */
.card-berita {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-berita:hover {
  border-color: rgba(0, 30, 64, 0.3);
}

.card-berita--featured {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card-berita--featured:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Image wrapper: position:relative + fixed height (h-64 / h-40) --- */
.card-berita__image-wrapper {
  position: relative;
  width: 100%;
  height: 10rem;
  /* h-40 = 160px untuk grid */
  background: var(--color-surface-container);
  overflow: hidden;
}

.card-berita__image-wrapper--hero {
  height: 16rem;
  /* h-64 = 256px untuk featured */
}

.card-berita__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Efek hover scale hanya saat .card-berita di-hover */
.card-berita:hover .card-berita__image {
  transform: scale(1.05);
}

/* --- Badge kategori: position:absolute di pojok kiri atas --- */
.card-berita__badge {
  position: absolute;
  top: 1rem;
  /* top-4 = 16px untuk hero */
  left: 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 4px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  z-index: 1;
}

.card-berita .card-berita__image-wrapper:not(.card-berita__image-wrapper--hero) .card-berita__badge {
  top: 0.5rem;
  /* top-2 = 8px untuk grid */
  left: 0.5rem;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: var(--radius);
}

.card-berita__badge--secondary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.card-berita__badge--tertiary {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
}

/* --- Content --- */
.card-berita__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-berita__content--grid {
  padding: 16px;
}

/* --- Meta: display:flex align-items:center horizontal --- */
.card-berita__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}

.card-berita__meta .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.card-berita__meta-dot {
  margin-inline: 4px;
}

.card-berita__date {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin-bottom: 4px;
}

/* --- Title & excerpt --- */
.card-berita__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin-bottom: 8px;
  transition: color 0.2s;
}

.card-berita:hover .card-berita__title {
  color: var(--color-surface-tint);
}

.card-berita__title--grid {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 8px;
}

.card-berita__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-berita__excerpt--grid {
  font-size: 13px;
  line-height: 18px;
  margin-top: auto;
}

.card-berita__title a,
.card-berita__title--grid a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Widget Agenda - Sidebar
   Source: markdown/front-page/code.html - Agenda Sidebar (Side Column)
   Layout: CSS3 murni semantik tanpa Tailwind, hover + flexbox + date-box
   ========================================================================== */

.widget-agenda {
  display: flex;
  flex-direction: column;
}

.widget-agenda__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-stack-md);
  border-bottom: 2px solid rgba(0, 30, 64, 0.1);
  padding-bottom: 8px;
}

.widget-agenda__heading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-primary);
}

.widget-agenda__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(195, 198, 209, 0.3);
  border-radius: var(--radius-xl);
}

.widget-agenda__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.2s;
}

.widget-agenda__item:hover {
  background: var(--color-surface-container);
}

.widget-agenda__date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 64px;
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.widget-agenda__item:hover .widget-agenda__date-box {
  border-color: var(--color-secondary);
}

.widget-agenda__month {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-error);
  text-transform: uppercase;
}

.widget-agenda__day {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  margin-top: 4px;
}

.widget-agenda__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 4px;
  flex: 1;
  min-width: 0;
}

.widget-agenda__item-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.widget-agenda__item:hover .widget-agenda__item-title {
  color: var(--color-surface-tint);
}

.widget-agenda__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-on-surface-variant);
  margin-top: 2px;
}

.widget-agenda__meta-icon {
  font-size: 14px;
  line-height: 1;
}

.widget-agenda__meta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-agenda__empty {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  text-align: center;
  padding: 16px;
}

.widget-agenda__more {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--text-label-md-spacing);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s;
}

.widget-agenda__more:hover {
  background: rgba(0, 30, 64, 0.05);
}

.widget-agenda__more .material-symbols-outlined {
  font-size: 18px;
}

.widget-agenda__banners {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fallback: support legacy Tailwind utility classes if masih dipakai di template lain */
.max-w-container-max {
  max-width: var(--container-max);
}

.mx-auto {
  margin-inline: auto;
}

.px-margin-desktop {
  padding-inline: var(--spacing-margin-desktop);
}

@media (max-width: 768px) {
  .px-margin-desktop {
    padding-inline: var(--spacing-margin-mobile);
  }

  .statistik__container {
    padding-inline: var(--spacing-margin-mobile);
  }
}

/* Utility fallback for berita grid cols when Tailwind CDN tidak ada */
.lg\:col-span-8 {
  grid-column: span 8;
}

@media (max-width: 1023px) {
  .lg\:col-span-8 {
    grid-column: span 12;
  }
}

.lg\:col-span-4 {
  grid-column: span 4;
}

/* ==========================================================================
   Footer - Wibawa Nusantara
   Source: markdown/footer/footer.php + screen.png
   Layout: CSS3 murni semantik, tanpa Tailwind
   ========================================================================== */

.site-footer {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-top: 64px;
  padding-bottom: 32px;
}

.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

@media (max-width: 768px) {
  .site-footer__inner {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-col__widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-secondary-fixed);
  margin: 0 0 16px 0;
}

.footer-col__widget .widget-title,
.footer-col__widget .footer-col__title {
  color: var(--color-secondary-fixed);
}

.footer-col__widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col__widget li a,
.footer-col__links li a {
  color: var(--color-surface-dim);
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-col__widget li a:hover,
.footer-col__links li a:hover {
  color: var(--color-on-primary);
}

.footer-col__widget li a::before,
.footer-col__links li a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: background 0.2s;
}

.footer-col__widget li a:hover::before,
.footer-col__links li a:hover::before {
  background: var(--color-on-primary);
}

.footer-col__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col__logo-wrap {
  padding: 16px;
  border-radius: var(--radius-lg);
  display: inline-block;
}

.footer-col__logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-col__text {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-surface-dim);
  margin: 0;
}

.footer-col__contact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-surface-dim);
}

.footer-col__contact .material-symbols-outlined {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  margin-top: 1px;
}

.footer-col__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col__map {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.footer-col__map-icon {
  font-size: 36px;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.2s;
}

.footer-col__map:hover .footer-col__map-icon {
  color: rgba(255, 255, 255, 0.4);
}

.footer-col__map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 30, 64, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-on-primary);
  text-decoration: none;
  backdrop-filter: blur(2px);
}

.footer-col__map:hover .footer-col__map-overlay {
  opacity: 1;
}

.footer-col__coords {
  font-size: 10px;
  color: rgba(204, 219, 244, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
}

/* Patch J.1 — Footer map responsive & iframe whitelist */
.footer-col__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Patch J.1 — Social brand icons: keep size/spacing/hover, use currentColor */
.top-bar__icons a svg,
.footer-col__socials a svg {
  display: block;
  flex-shrink: 0;
}

.top-bar__icons a svg {
  width: 16px;
  height: 16px;
}

.footer-col__socials a svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-surface-dim);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom__links {
  display: flex;
  gap: 24px;
}

.footer-bottom__links a {
  color: var(--color-surface-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom__links a:hover {
  color: var(--color-on-primary);
}

/* --- Top bar info text (Customizer) --- */
.top-bar__info {
  font-size: 12px;
  color: var(--color-surface-dim);
  margin-right: 8px;
}

/* --- Footer socials (di bawah alamat) --- */
.footer-col__socials {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.footer-col__socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--color-on-primary);
  transition: background 0.2s;
  text-decoration: none;
}

.footer-col__socials a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Footer bottom nav (wp_nav_menu) */
.footer-bottom__nav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom__nav li a {
  color: var(--color-surface-dim);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom__nav li a:hover {
  color: var(--color-on-primary);
}

/* ==========================================================================
   Single Berita - Detail Artikel (single.php)
   Source: markdown/single-post/code.html
   Layout: CSS3 murni semantik tanpa Tailwind, 12-col grid + sidebar
   Design System: Wibawa Nusantara
   ========================================================================== */

/* --- Wrapper & Breadcrumbs --- */
.single-berita {
  width: 100%;
  background: var(--color-surface);
}

.single-berita__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  padding-block: var(--spacing-stack-md);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
}

.single-berita__breadcrumbs-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.2s;
}

.single-berita__breadcrumbs-link:hover {
  color: var(--color-primary);
}

.single-berita__breadcrumbs-sep {
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}

.single-berita__breadcrumbs-current {
  color: var(--color-on-surface);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .single-berita__breadcrumbs {
    padding-inline: var(--spacing-margin-mobile);
  }
}

/* --- Layout Grid: 12 col desktop, 1 col mobile --- */
.single-berita__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  padding-bottom: var(--spacing-stack-lg);
}

@media (min-width: 1024px) {
  .single-berita__layout {
    grid-template-columns: repeat(12, 1fr);
  }

  .single-berita__article {
    grid-column: span 8;
  }

  .single-berita__sidebar {
    grid-column: span 4;
  }
}

@media (max-width: 768px) {
  .single-berita__layout {
    padding-inline: var(--spacing-margin-mobile);
  }
}

/* --- Article --- */
.single-berita__article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
  min-width: 0;
}

/* Header meta: kategori + tanggal */
.single-berita__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.single-berita__category {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 600;
  line-height: var(--text-label-sm-line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.2s;
}

.single-berita__category:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.single-berita__meta-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
}

.single-berita__meta-date .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

/* Judul */
.single-berita__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-spacing);
  color: var(--color-on-surface);
  margin: 0;
}

@media (max-width: 768px) {
  .single-berita__title {
    font-size: 28px;
    line-height: 36px;
  }
}

/* Byline: author + share */
.single-berita__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(195, 198, 209, 0.3);
}

.single-berita__author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.single-berita__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-variant);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.single-berita__author-avatar .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.single-berita__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.single-berita__author-name {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-on-surface);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-berita__author-name a {
  color: inherit;
  text-decoration: none;
}

.single-berita__author-name a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.single-berita__author-role {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.single-berita__share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.single-berita__share-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.single-berita__share-btn:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.single-berita__share-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

/* Thumbnail */
.single-berita__thumbnail {
  width: 100%;
  margin: 8px 0 0 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background: var(--color-surface-container);
}

.single-berita__thumbnail-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.single-berita__thumbnail-caption {
  padding: 12px 16px;
  background: var(--color-surface-container-low);
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* --- Content: Gutenberg-ready prose --- */
.single-berita__content {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: 28px;
  color: var(--color-on-surface);
  max-width: none;
}

/* Paragraf */
.single-berita__content p {
  margin: 0 0 20px 0;
  color: var(--color-on-surface);
  font-size: var(--text-body-md-size);
  line-height: 28px;
}

.single-berita__content p:last-child {
  margin-bottom: 0;
}

/* Drop-cap paragraf pertama (opsional — hanya jika konten diawali <p> pertama) */
.single-berita__content>p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--color-primary);
  float: left;
  margin-right: 8px;
  margin-top: 4px;
}

/* Heading di dalam konten */
.single-berita__content h2,
.single-berita__content h3,
.single-berita__content h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 32px 0 16px 0;
  line-height: 1.25;
}

.single-berita__content h2 {
  font-size: 28px;
  font-weight: 700;
}

.single-berita__content h3 {
  font-size: var(--text-headline-md-size);
  font-weight: 600;
  line-height: var(--text-headline-md-line);
}

.single-berita__content h4 {
  font-size: 20px;
  font-weight: 600;
}

/* Link di konten */
.single-berita__content a {
  color: var(--color-surface-tint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.single-berita__content a:hover {
  color: var(--color-primary);
}

/* List */
.single-berita__content ul,
.single-berita__content ol {
  margin: 0 0 20px 0;
  padding-left: 24px;
  color: var(--color-on-surface);
}

.single-berita__content li {
  margin-bottom: 8px;
  line-height: 28px;
}

.single-berita__content li::marker {
  color: var(--color-primary);
}

.single-berita__content ul {
  list-style: disc;
}

.single-berita__content ol {
  list-style: decimal;
}

/* Blockquote — seperti quote box di desain asli (secondary border-left) */
.single-berita__content blockquote {
  margin: 32px 0;
  padding: 24px;
  background: var(--color-surface-container-low);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-style: italic;
  color: var(--color-on-surface-variant);
}

.single-berita__content blockquote p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.single-berita__content blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: var(--text-body-sm-size);
  font-style: normal;
  color: var(--color-on-surface-variant);
  opacity: 0.8;
}

/* Gambar di konten (Gutenberg) */
.single-berita__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.single-berita__content figure {
  margin: 24px 0;
}

.single-berita__content figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.single-berita__content figcaption {
  margin-top: 8px;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  text-align: center;
  font-style: italic;
}

/* Grid 2 gambar inline (Gutenberg gallery / group) */
.single-berita__content .wp-block-columns,
.single-berita__content .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

@media (max-width: 640px) {

  .single-berita__content .wp-block-columns,
  .single-berita__content .gallery {
    grid-template-columns: 1fr;
  }
}

/* Code, pre */
.single-berita__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-surface-container);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.single-berita__content pre {
  background: var(--color-surface-container);
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 20px 0;
  font-size: 14px;
  line-height: 22px;
}

.single-berita__content pre code {
  background: none;
  padding: 0;
}

/* Tabel Gutenberg */
.single-berita__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: var(--text-body-sm-size);
}

.single-berita__content th,
.single-berita__content td {
  border: 1px solid var(--color-outline-variant);
  padding: 10px 12px;
  text-align: left;
}

.single-berita__content th {
  background: var(--color-surface-container-low);
  font-weight: 600;
  color: var(--color-primary);
}

/* HR */
.single-berita__content hr {
  border: none;
  border-top: 1px solid rgba(195, 198, 209, 0.3);
  margin: 32px 0;
}

/* Strong & em */
.single-berita__content strong {
  font-weight: 600;
  color: var(--color-on-surface);
}

.single-berita__content em {
  font-style: italic;
}

/* WordPress alignment helpers inside content */
.single-berita__content .alignwide {
  max-width: 100%;
}

.single-berita__content .alignfull {
  max-width: none;
  width: 100%;
}

/* Pagination (wp_link_pages) */
.single-berita__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(195, 198, 209, 0.3);
  font-size: var(--text-body-sm-size);
}

.single-berita__pagination-label {
  font-weight: 600;
  color: var(--color-primary);
}

.single-berita__pagination a,
.single-berita__pagination>span:not(.single-berita__pagination-label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-on-surface-variant);
}

/* Tags */
.single-berita__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(195, 198, 209, 0.3);
}

.single-berita__tags-label {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: 600;
  line-height: var(--text-label-md-line);
  color: var(--color-on-surface);
  margin-right: 4px;
}

.single-berita__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 500;
  line-height: var(--text-label-sm-line);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.single-berita__tag:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

/* --- Sidebar --- */
.single-berita__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
}

@media (max-width: 1023px) {
  .single-berita__sidebar {
    margin-top: 8px;
  }
}

/* Widget base */
.single-berita__widget {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 24px;
}

.single-berita__widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-secondary);
}

.single-berita__widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: 600;
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin: 0;
}

.single-berita__widget-icon {
  font-size: 20px !important;
  color: var(--color-secondary);
}

.single-berita__widget-empty {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  margin: 0;
  text-align: center;
  padding: 12px 0;
}

/* Popular list */
.single-berita__popular-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.single-berita__popular-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
}

.single-berita__popular-item:hover .single-berita__popular-rank {
  color: var(--color-secondary);
}

.single-berita__popular-item:hover .single-berita__popular-title {
  color: var(--color-primary);
}

.single-berita__popular-rank {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-surface-variant);
  flex-shrink: 0;
  margin-top: -4px;
  transition: color 0.2s;
}

.single-berita__popular-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.single-berita__popular-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.single-berita__popular-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
}

.single-berita__popular-date .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

/* Categories */
.single-berita__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.single-berita__categories-item {
  margin: 0;
}

.single-berita__categories-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.2s;
}

.single-berita__categories-link:hover {
  background: var(--color-surface-container);
}

.single-berita__categories-link:hover .single-berita__categories-name {
  color: var(--color-primary);
}

.single-berita__categories-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-on-surface);
  transition: color 0.2s;
}

.single-berita__categories-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 500;
  line-height: var(--text-label-sm-line);
}

/* CTA widget */
.single-berita__widget--cta {
  background: var(--color-primary);
  color: var(--color-on-primary);
  position: relative;
  overflow: hidden;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 30, 64, 0.15);
}

.single-berita__widget--cta::before {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 96px;
  height: 96px;
  background: var(--color-primary-container);
  border-radius: var(--radius-full);
  opacity: 0.5;
  filter: blur(20px);
  pointer-events: none;
}

.single-berita__cta-icon {
  font-size: 32px !important;
  color: var(--color-secondary-fixed);
  margin-bottom: 8px;
  display: block;
}

.single-berita__cta-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: 600;
  line-height: var(--text-headline-md-line);
  color: var(--color-on-primary);
  margin: 0 0 8px 0;
}

.single-berita__cta-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-surface-container-highest);
  margin: 0 0 16px 0;
}

.single-berita__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  letter-spacing: var(--text-label-md-spacing);
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, color 0.2s;
}

.single-berita__cta-btn:hover {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.single-berita__cta-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================================
   Sidebar Utama — Standard WordPress Widgets
   Ditarget: .widget, .widget-title, .widget_categories, .widget_recent_entries
   Mengadopsi gaya kotak putih + border tipis + judul bergaris bawah secondary
   agar identik dengan desain Popular/Kategori asli (Wibawa Nusantara)
   ========================================================================== */

/* Widget container — berlaku untuk semua widget WP di .single-berita__sidebar */
.single-berita__sidebar .widget {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 24px;
  margin: 0;
}

/* Judul widget — border bawah secondary 2px seperti desain asli */
.single-berita__sidebar .widget-title,
.single-berita__sidebar .widget .widget-title,
.single-berita__sidebar .widget h2.widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: 600;
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Daftar umum widget (categories, recent entries, archive, meta, pages, nav) */
.single-berita__sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.single-berita__sidebar .widget li {
  margin: 0;
}

/* Link di dalam widget list — gaya row hover seperti Kategori asli */
.single-berita__sidebar .widget_categories li,
.single-berita__sidebar .widget_archive li,
.single-berita__sidebar .widget_meta li,
.single-berita__sidebar .widget_pages li,
.single-berita__sidebar .widget_nav_menu li,
.single-berita__sidebar .widget_recent_comments li {
  border-radius: var(--radius-lg);
  transition: background 0.2s;
}

.single-berita__sidebar .widget li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.single-berita__sidebar .widget li>a:hover {
  background: var(--color-surface-container);
  color: var(--color-primary);
}

/* Hitungan kategori / arsip — badge abu variant */
.single-berita__sidebar .widget_categories li,
.single-berita__sidebar .widget_archive li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
}

.single-berita__sidebar .widget_categories li>a,
.single-berita__sidebar .widget_archive li>a {
  flex: 1;
  padding-right: 8px;
}

/* Count di widget_categories biasanya dalam teks "(12)" setelah <a>; style via li */
.single-berita__sidebar .widget_categories li,
.single-berita__sidebar .widget_archive li {
  font-size: 14px;
  color: var(--color-on-surface-variant);
}

/* Recent Entries — judul + tanggal di bawah */
.single-berita__sidebar .widget_recent_entries li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  transition: background 0.2s;
}

.single-berita__sidebar .widget_recent_entries li:hover {
  background: var(--color-surface-container);
}

.single-berita__sidebar .widget_recent_entries li a {
  padding: 0;
  background: none !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-berita__sidebar .widget_recent_entries .post-date {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.single-berita__sidebar .widget_recent_entries .post-date::before {
  content: "schedule";
  font-family: "Material Symbols Outlined";
  font-size: 14px;
  line-height: 1;
}

/* Tag Cloud — pill style seperti .single-berita__tag */
.single-berita__sidebar .widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.single-berita__sidebar .widget_tag_cloud a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-full);
  font-family: var(--font-body) !important;
  font-size: var(--text-label-sm-size) !important;
  font-weight: 500;
  line-height: var(--text-label-sm-line);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border: none;
}

.single-berita__sidebar .widget_tag_cloud a:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

/* Search widget */
.single-berita__sidebar .widget_search .wp-block-search__inside-wrapper,
.single-berita__sidebar .widget_search form {
  display: flex;
  gap: 8px;
}

.single-berita__sidebar .widget_search input[type="search"],
.single-berita__sidebar .widget_search .wp-block-search__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.single-berita__sidebar .widget_search input[type="search"]:focus,
.single-berita__sidebar .widget_search .wp-block-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 30, 64, 0.08);
}

.single-berita__sidebar .widget_search button,
.single-berita__sidebar .widget_search .wp-block-search__button {
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.single-berita__sidebar .widget_search button:hover,
.single-berita__sidebar .widget_search .wp-block-search__button:hover {
  background: var(--color-primary-container);
}

/* Text / Custom HTML widget */
.single-berita__sidebar .widget_text,
.single-berita__sidebar .widget_block,
.single-berita__sidebar .widget_custom_html {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
}

.single-berita__sidebar .widget_text p,
.single-berita__sidebar .widget_block p {
  margin: 0 0 12px 0;
}

.single-berita__sidebar .widget_text p:last-child,
.single-berita__sidebar .widget_block p:last-child {
  margin-bottom: 0;
}

/* Calendar widget */
.single-berita__sidebar .widget_calendar table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm-size);
}

.single-berita__sidebar .widget_calendar th,
.single-berita__sidebar .widget_calendar td {
  text-align: center;
  padding: 6px 4px;
}

.single-berita__sidebar .widget_calendar caption {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 8px;
}

/* RSS */
.single-berita__sidebar .widget_rss .rsswidget {
  font-weight: 600;
  color: var(--color-primary);
}

.single-berita__sidebar .widget_rss .rss-date,
.single-berita__sidebar .widget_rss cite {
  font-size: var(--text-label-sm-size);
  color: var(--color-on-surface-variant);
  display: block;
  margin-top: 4px;
}

/* Compatibility: blok Gutenberg di sidebar (core/categories, core/latest-posts) */
.single-berita__sidebar .wp-block-categories-list,
.single-berita__sidebar .wp-block-latest-posts__list,
.single-berita__sidebar .wp-block-archives-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.single-berita__sidebar .wp-block-categories-list li a,
.single-berita__sidebar .wp-block-latest-posts__list li a,
.single-berita__sidebar .wp-block-archives-list li a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.single-berita__sidebar .wp-block-categories-list li a:hover,
.single-berita__sidebar .wp-block-latest-posts__list li a:hover,
.single-berita__sidebar .wp-block-archives-list li a:hover {
  background: var(--color-surface-container);
  color: var(--color-primary);
}

/* --- Related News (full-width section di bawah grid) --- */
.single-berita__related {
  width: 100%;
  background: var(--color-surface-container);
  border-top: 1px solid rgba(195, 198, 209, 0.2);
  padding-block: var(--spacing-stack-lg);
  margin-top: var(--spacing-stack-md);
}

.single-berita__related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .single-berita__related-head {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.single-berita__related-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin: 0;
}

@media (max-width: 768px) {
  .single-berita__related-title {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
  }
}

.single-berita__related-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-secondary);
  text-decoration: none;
}

.single-berita__related-link:hover {
  text-decoration: underline;
}

.single-berita__related-link .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.single-berita__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-gutter);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

@media (max-width: 1024px) {
  .single-berita__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .single-berita__related-grid {
    grid-template-columns: 1fr;
  }

  .single-berita__related-grid {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.single-berita__related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.single-berita__related-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.single-berita__related-card:hover .single-berita__related-card-img {
  transform: scale(1.05);
}

.single-berita__related-card:hover .single-berita__related-card-title {
  color: var(--color-primary);
}

.single-berita__related-card-media {
  position: relative;
  width: 100%;
  height: 192px;
  overflow: hidden;
  background: var(--color-surface-container);
  display: block;
}

.single-berita__related-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.single-berita__related-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 30, 64, 0.9);
  backdrop-filter: blur(6px);
  color: var(--color-on-primary);
  padding: 4px 8px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.single-berita__related-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
  gap: 0;
}

.single-berita__related-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}

.single-berita__related-card-date .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.single-berita__related-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: 600;
  line-height: 28px;
  color: var(--color-on-surface);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.single-berita__related-card-excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}

/* ==========================================================================
   News Archive - Daftar Berita (home.php / archive.php)
   Source: markdown/news-archive/code.html
   Layout: dekor blur + header + grid asimetris 3/9, Bento featured, .card-berita reuse, pagination
   Semantik murni tanpa Tailwind
   ========================================================================== */

.news-archive {
  position: relative;
  width: 100%;
  background: var(--color-surface);
  overflow: clip;
}

.news-archive__decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.news-archive__decor-blob {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(100px);
}

.news-archive__decor-blob--left {
  top: -20%;
  left: -10%;
  width: 60%;
  height: 120%;
  background: rgba(213, 227, 253, 0.30);
  opacity: 0.7;
}

.news-archive__decor-blob--right {
  top: 10%;
  right: -20%;
  width: 50%;
  height: 80%;
  background: rgba(213, 227, 255, 0.20);
  opacity: 0.6;
  filter: blur(120px);
}

.news-archive__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  padding-top: var(--spacing-stack-lg);
  padding-bottom: var(--spacing-stack-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .news-archive__container {
    padding-inline: var(--spacing-margin-mobile);
  }
}

/* Header & Breadcrumbs */
.news-archive__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm);
  position: relative;
  z-index: 1;
}

.news-archive__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--spacing-stack-sm);
}

.news-archive__breadcrumbs-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.2s;
}

.news-archive__breadcrumbs-link:hover {
  color: var(--color-primary);
}

.news-archive__breadcrumbs-link .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.news-archive__breadcrumbs-sep {
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.7;
}

.news-archive__breadcrumbs-current {
  color: var(--color-primary);
  font-weight: 700;
}

.news-archive__title-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
  justify-content: space-between;
}

@media (min-width: 768px) {
  .news-archive__title-row {
    flex-direction: row;
    align-items: flex-end;
  }
}

.news-archive__title-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm);
  max-width: 32rem;
}

.news-archive__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

@media (max-width: 768px) {
  .news-archive__title {
    font-size: 32px;
    line-height: 40px;
  }
}

.news-archive__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.news-archive__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(195, 198, 209, 0.30);
  border-radius: var(--radius-xl);
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex: 1;
  max-width: 28rem;
}

.news-archive__search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface);
  padding-inline: 12px;
  width: 100%;
}

.news-archive__search input::placeholder {
  color: rgba(67, 71, 79, 0.60);
}

.news-archive__search button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  transition: background 0.2s;
  flex-shrink: 0;
}

.news-archive__search button:hover {
  background: var(--color-primary-container);
}

.news-archive__search button .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* Layout Grid 12 — 3 kiri, 9 kanan */
.news-archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-stack-md);
}

@media (min-width: 1024px) {
  .news-archive-layout {
    grid-template-columns: repeat(12, 1fr);
  }

  .news-archive__sidebar {
    grid-column: span 3;
  }

  .news-archive__main {
    grid-column: span 9;
  }
}

.news-archive__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
}

.news-archive__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
  min-width: 0;
}

/* Sidebar: Kategori Filter */
.sidebar-kategori {
  background: var(--color-surface-container);
  border-radius: var(--radius-xl);
  padding: var(--spacing-stack-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sidebar-kategori__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-stack-md) 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(195, 198, 209, 0.20);
}

.sidebar-kategori__title .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-secondary-fixed);
  line-height: 1;
}

.sidebar-kategori__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-kategori__item {
  margin: 0;
}

.sidebar-kategori__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.sidebar-kategori__link:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
}

.sidebar-kategori__link.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.sidebar-kategori__name {
  flex: 1;
}

.sidebar-kategori__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(195, 198, 209, 0.30);
  color: var(--color-on-surface-variant);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  transition: background 0.2s, color 0.2s;
}

.sidebar-kategori__link:hover .sidebar-kategori__count {
  background: rgba(0, 51, 102, 0.12);
  color: var(--color-primary);
}

.sidebar-kategori__link.is-active .sidebar-kategori__count {
  background: rgba(255, 255, 255, 0.20);
  color: var(--color-on-primary);
}

/* Walker's default wp_list_categories output filter compatibility — pill span dari filter PHP */
.sidebar-kategori__list .cat-item {
  display: flex;
}

.sidebar-kategori__list .cat-item a {
  flex: 1;
}

/* Sidebar: Pengumuman Mini (krem/secondary-fixed border kiri) */
.sidebar-pengumuman {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: var(--spacing-stack-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--color-secondary-fixed);
}

.sidebar-pengumuman__watermark {
  position: absolute;
  right: -24px;
  bottom: -24px;
  opacity: 0.05;
  pointer-events: none;
}

.sidebar-pengumuman__watermark img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  display: block;
}

.sidebar-pengumuman__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-secondary-fixed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px 0;
}

.sidebar-pengumuman__label .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.sidebar-pengumuman__text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface);
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-pengumuman__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 500;
  line-height: var(--text-label-sm-line);
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-pengumuman__link:hover {
  color: var(--color-surface-tint);
}

.sidebar-pengumuman__link .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

/* Archive sidebar — widget wrappers (Sidebar Arsip) */
.news-archive__sidebar .widget {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 24px;
  margin: 0;
}

.news-archive__sidebar .widget_alfatwa_pengumuman,
.news-archive__sidebar .widget-pengumuman {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.news-archive__sidebar .widget_alfatwa_pengaduan,
.news-archive__sidebar .widget-pengaduan {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Featured Bento */
.featured-bento {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 400px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  isolation: isolate;
}

.featured-bento__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.featured-bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 30, 64, 0.95) 0%, rgba(0, 30, 64, 0.60) 50%, transparent 100%);
  z-index: 1;
}

.featured-bento__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--spacing-stack-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .featured-bento__content {
    padding: var(--spacing-stack-lg);
  }
}

.featured-bento:hover .featured-bento__content {
  transform: translateY(-8px);
}

.featured-bento__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.featured-bento__badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 700;
  line-height: var(--text-label-sm-line);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.featured-bento__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: rgba(255, 255, 255, 0.80);
}

.featured-bento__date .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.featured-bento__title {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--color-on-primary);
  max-width: 48rem;
  display: block;
  transition: color 0.2s;
}

@media (min-width: 768px) {
  .featured-bento__title {
    font-size: 32px;
    line-height: 40px;
  }
}

.featured-bento:hover .featured-bento__title {
  color: var(--color-secondary-fixed);
}

.featured-bento__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: rgba(255, 255, 255, 0.90);
  max-width: 42rem;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .featured-bento__excerpt {
    display: none;
  }
}

/* Grid Standar — reuse .card-berita, layout 3 kolom */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
}

@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card fallback bg jika tanpa thumbnail */
.card-berita__image--fallback {
  background: linear-gradient(135deg, var(--color-surface-container-high) 0%, var(--color-surface-variant) 100%);
  min-height: 192px;
}

/* Badge di card-berita sudah absolute; di archive tambahkan flex icon gap */
.card-berita__badge .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.card-berita__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-berita__readmore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-primary);
  transition: color 0.2s, transform 0.2s;
}

.card-berita:hover .card-berita__readmore {
  color: var(--color-secondary);
}

.card-berita__readmore .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s;
}

.card-berita:hover .card-berita__readmore .material-symbols-outlined {
  transform: translateX(4px);
}

/* Empty */
.news-archive__empty {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface-variant);
  text-align: center;
  padding-block: 48px;
}

/* Pagination — gantikan div flex statis */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--spacing-stack-lg);
  border-top: 1px solid rgba(195, 198, 209, 0.20);
  padding-top: var(--spacing-stack-md);
}

.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pagination .page-numbers:hover {
  background: var(--color-surface-container-highest);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pagination .page-numbers.next,
.pagination .page-numbers.prev {
  color: var(--color-on-surface-variant);
}

.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:hover {
  background: var(--color-surface-container-highest);
}

.pagination .page-numbers.dots {
  background: transparent;
  pointer-events: none;
}

.pagination .page-numbers .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* ==========================================================================
   Pengumuman CPT - List View (archive-pengumuman.php) & Single minimalis
   ========================================================================== */

.pengumuman-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195, 198, 209, 0.20);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pengumuman-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(195, 198, 209, 0.15);
  background: var(--color-surface-container-lowest);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, transform 0.15s ease;
}

.pengumuman-list-item:last-child {
  border-bottom: none;
}

.pengumuman-list-item:hover {
  background: var(--color-surface-container-low);
}

.pengumuman-list-item:hover .pengumuman-list-item__title {
  color: var(--color-primary);
}

.pengumuman-list-item:hover .pengumuman-list-item__arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}

.pengumuman-list-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pengumuman-list-item__icon .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}

.pengumuman-list-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pengumuman-list-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
}

.pengumuman-list-item__meta .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.pengumuman-list-item__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--color-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.pengumuman-list-item__arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.pengumuman-list-item__arrow .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.pengumuman-list-item:hover .pengumuman-list-item__arrow {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Single pengumuman — varian minimalis (reuse .single-berita) */
.single-berita--pengumuman .single-berita__header .single-berita__category {
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
}

/* ==========================================================================
   Pariwisata — page-pariwisata.php
   Hero, Bento Destinasi, Kalender Agenda, Peta & Info Turis
   Semantik murni — grid bento, absolute teks, hover scale, responsif
   ========================================================================== */

/* Hero */
.wisata-hero {
  position: relative;
  width: 100%;
  height: 716px;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -80px;
  overflow: hidden;
}

.wisata-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wisata-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 30, 64, 0.90) 0%, rgba(0, 30, 64, 0.50) 50%, transparent 100%);
}

.wisata-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  text-align: center;
  margin-top: 80px;
  padding-top: 40px;
}

@media (max-width: 768px) {
  .wisata-hero__inner {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.wisata-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-secondary-fixed);
  margin-bottom: 16px;
}

.wisata-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-spacing);
  color: var(--color-on-primary);
  max-width: 48rem;
  margin: 0 auto 24px auto;
}

.wisata-hero__title-accent {
  color: var(--color-secondary-fixed);
}

.wisata-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-inverse-on-surface);
  max-width: 42rem;
  margin: 0 auto 40px auto;
  opacity: 0.90;
}

.wisata-hero__desc p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.wisata-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .wisata-hero__actions {
    flex-direction: row;
  }
}

.wisata-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.wisata-hero__btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.wisata-hero__btn--primary {
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
  box-shadow: 0 4px 12px rgba(255, 222, 165, 0.20);
}

.wisata-hero__btn--primary:hover {
  background: var(--color-secondary-container);
}

.wisata-hero__btn--ghost {
  background: transparent;
  color: var(--color-inverse-on-surface);
  border: 2px solid var(--color-inverse-on-surface);
}

.wisata-hero__btn--ghost:hover {
  background: rgba(235, 241, 255, 0.10);
}

/* Destinasi Unggulan — Bento Grid */
.wisata-destinasi {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  padding-block: var(--spacing-stack-lg);
  position: relative;
  z-index: 2;
  margin-top: -64px;
}

@media (max-width: 768px) {
  .wisata-destinasi {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.wisata-destinasi__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-gutter);
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(195, 198, 209, 0.10);
  margin-bottom: 0;
}

.wisata-destinasi__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin: 0;
}

.wisata-destinasi__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin-top: 8px;
}

.wisata-destinasi__more {
  display: none;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

@media (min-width: 768px) {
  .wisata-destinasi__more {
    display: inline-flex;
  }
}

.wisata-destinasi__more:hover {
  color: var(--color-secondary);
}

.wisata-destinasi__more .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.wisata-destinasi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  grid-auto-rows: 250px;
  background: var(--color-surface);
  padding: 16px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .wisata-destinasi__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wisata-destinasi__item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  display: block;
  isolation: isolate;
}

.wisata-destinasi__item--featured {
  grid-column: span 1;
  grid-row: span 1;
}

@media (min-width: 768px) {
  .wisata-destinasi__item--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.wisata-destinasi__item--small {
  grid-column: span 1;
  grid-row: span 1;
}

.wisata-destinasi__item--wide {
  grid-column: span 1;
  display: flex;
  background: var(--color-surface-container-low);
}

@media (min-width: 768px) {
  .wisata-destinasi__item--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.wisata-destinasi__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.wisata-destinasi__item:hover .wisata-destinasi__img {
  transform: scale(1.05);
}

.wisata-destinasi__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 30, 64, 0.90) 0%, rgba(0, 30, 64, 0.40) 50%, transparent 100%);
  z-index: 1;
}

.wisata-destinasi__item--small .wisata-destinasi__overlay {
  background: linear-gradient(to top, rgba(0, 30, 64, 0.80) 0%, transparent 100%);
}

.wisata-destinasi__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wisata-destinasi__item--small .wisata-destinasi__caption {
  padding: 16px;
}

.wisata-destinasi__badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 222, 165, 0.90);
  color: var(--color-on-secondary-fixed);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  width: fit-content;
  margin-bottom: 12px;
}

.wisata-destinasi__badge--muted {
  background: rgba(0, 30, 64, 0.08);
  color: var(--color-primary);
}

.wisata-destinasi__name {
  font-family: var(--font-heading);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-on-primary);
}

.wisata-destinasi__name--large {
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
}

.wisata-destinasi__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wisata-destinasi__excerpt--light {
  color: var(--color-surface-container-highest);
}

.wisata-destinasi__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-surface-container-highest);
}

.wisata-destinasi__location .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.wisata-destinasi__media {
  width: 50%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.wisata-destinasi__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.wisata-destinasi__item--wide:hover .wisata-destinasi__media img {
  transform: scale(1.05);
}

.wisata-destinasi__body {
  width: 50%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-surface);
}

.wisata-destinasi__body .wisata-destinasi__name {
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.3;
}

.wisata-destinasi__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: var(--text-label-sm-size);
  font-weight: 500;
  color: var(--color-primary);
}

.wisata-destinasi__link .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.wisata-destinasi__empty {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface-variant);
  text-align: center;
  padding: 32px;
}

/* Kalender Acara */
.wisata-agenda {
  width: 100%;
  background: var(--color-surface-container);
  padding-block: var(--spacing-stack-lg);
}

.wisata-agenda__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
}

@media (max-width: 768px) {
  .wisata-agenda__inner {
    padding-inline: var(--spacing-margin-mobile);
  }
}

@media (min-width: 1024px) {
  .wisata-agenda__inner {
    grid-template-columns: repeat(12, 1fr);
  }

  .wisata-agenda__intro {
    grid-column: span 4;
  }

  .wisata-agenda__list {
    grid-column: span 8;
  }
}

.wisata-agenda__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.wisata-agenda__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 222, 165, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}

.wisata-agenda__icon .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

.wisata-agenda__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin: 0;
}

.wisata-agenda__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0 0 16px 0;
}

.wisata-agenda__featured {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.wisata-agenda__featured::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 128px;
  height: 128px;
  background: rgba(255, 222, 165, 0.20);
  border-radius: var(--radius-full);
  filter: blur(20px);
  pointer-events: none;
}

.wisata-agenda__featured-label {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-secondary-fixed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px 0;
}

.wisata-agenda__featured-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  color: var(--color-on-primary);
  margin: 0 0 8px 0;
}

.wisata-agenda__featured-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-surface-container-highest);
  margin: 0 0 16px 0;
}

.wisata-agenda__featured-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.10);
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  font-size: var(--text-label-sm-size);
  font-weight: 500;
}

.wisata-agenda__featured-date .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.wisata-agenda__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wisata-agenda__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(195, 198, 209, 0.20);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}

@media (min-width: 640px) {
  .wisata-agenda__item {
    flex-direction: row;
  }
}

.wisata-agenda__item:hover {
  border-color: rgba(0, 30, 64, 0.30);
}

.wisata-agenda__datebox {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-high);
  border: 1px solid rgba(195, 198, 209, 0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wisata-agenda__day {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: 1;
  color: var(--color-primary);
}

.wisata-agenda__month {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
}

.wisata-agenda__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wisata-agenda__name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
}

.wisata-agenda__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
}

.wisata-agenda__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-primary-container);
  font-weight: 500;
}

.wisata-agenda__location .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.wisata-agenda__arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(195, 198, 209, 0.50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.wisata-agenda__item:hover .wisata-agenda__arrow {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.wisata-agenda__arrow .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.wisata-agenda__empty {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  text-align: center;
  padding: 16px;
}

/* Peta & Info Turis */
.info-turis {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  padding-block: var(--spacing-stack-lg);
}

@media (max-width: 768px) {
  .info-turis {
    padding-inline: var(--spacing-margin-mobile);
  }
}

.info-turis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
}

@media (min-width: 1024px) {
  .info-turis__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.info-turis__mapcol,
.info-turis__infocol {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-turis__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin: 0;
}

.info-turis__map {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(195, 198, 209, 0.30);
  position: relative;
}

.info-turis__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.info-turis__map-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.info-turis__legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(8px);
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(195, 198, 209, 0.20);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-turis__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.info-turis__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.info-turis__dot--primary {
  background: var(--color-primary);
}

.info-turis__dot--secondary {
  background: var(--color-secondary-fixed);
}

.info-turis__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  height: 100%;
}

@media (min-width: 640px) {
  .info-turis__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.info-turis__card {
  background: var(--color-surface-container-lowest);
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(195, 198, 209, 0.20);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.info-turis__card--action {
  background: var(--color-primary);
  border-color: rgba(195, 198, 209, 0.20);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.info-turis__card-icon {
  font-size: 32px !important;
  line-height: 1 !important;
  color: var(--color-primary);
}

.info-turis__card--action .info-turis__card-icon {
  color: var(--color-secondary-fixed);
}

.info-turis__card-title {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-primary);
  margin: 0;
}

.info-turis__card--action .info-turis__card-title {
  color: var(--color-on-primary);
}

.info-turis__card-text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  flex: 1;
  margin: 0;
}

.info-turis__btn {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-secondary-fixed);
  padding: 8px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.info-turis__btn:hover {
  background: var(--color-secondary-container);
}

.info-turis__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Custom Widgets - alias semantik untuk inc/widgets.php

/* Outer wrapper pengaduan — hilangkan card putih agar biru terlihat penuh */
.single-berita__sidebar .widget_alfatwa_pengaduan,
.single-berita__sidebar .widget-pengaduan {
  background: var(--color-primary);
  border: none;
  box-shadow: none;
  padding: 5px;
}

/* Alias: widget-populer memakai style yang sama dengan single-berita__popular */
.widget-populer__header {
  /* already styled via .single-berita__widget-header */
}

.widget-populer__list {
  /* alias for .single-berita__popular-list */
}

.widget-populer__number {
  /* alias for .single-berita__popular-rank */
}

.widget-kategori__list {
  /* alias for .single-berita__categories */
}

.widget-pengaduan__card {
  /* alias for .single-berita__widget--cta, blur handled via ::before */
}

/* ==========================================================================
   Profil Daerah — page-profil-daerah.php
   Layout: .profil-layout (sidebar sticky + content), .profil-hero, .profil-section,
           .profil-visimisi grid, .profil-geografi, .profil-lambang, .org-chart connectors
   Semantik murni — tanpa Tailwind, sticky sidebar, connector lines
   ========================================================================== */

.profil-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  position: relative;
}

@media (min-width: 1024px) {
  .profil-layout {
    flex-direction: row;
  }
}

/* Sidebar sticky */
.profil-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .profil-sidebar {
    display: block;
    width: 16rem;
    flex-shrink: 0;
    padding-inline: var(--spacing-margin-desktop);
    padding-block: var(--spacing-margin-desktop);
    position: sticky;
    top: 5rem;
    height: calc(100vh - 5rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.profil-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-on-surface-variant);
}

.profil-sidebar__link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.profil-sidebar__link:hover {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
}

.profil-sidebar__link.is-active {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
  font-weight: 700;
}

.profil-sidebar__download {
  margin-top: var(--spacing-stack-lg);
  padding: 16px;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.profil-sidebar__download-label {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profil-sidebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.profil-sidebar__btn:hover {
  background: var(--color-primary-container);
}

.profil-sidebar__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profil-sidebar__btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

/* Content */
.profil-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
  padding-inline: var(--spacing-margin-mobile);
  padding-block: var(--spacing-margin-desktop);
}

@media (min-width: 1024px) {
  .profil-content {
    padding-inline: var(--spacing-margin-desktop);
    gap: 80px;
  }
}

/* Hero */
.profil-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
  padding-top: var(--spacing-stack-sm);
}

.profil-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profil-eyebrow__line {
  width: 32px;
  height: 1px;
  background: var(--color-secondary);
  display: inline-block;
}

.profil-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-spacing);
  color: var(--color-primary);
  max-width: 48rem;
  margin: 0;
}

@media (max-width: 768px) {
  .profil-hero__title {
    font-size: 32px;
    line-height: 40px;
  }
}

.profil-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-on-surface-variant);
  max-width: 42rem;
  margin: 0;
}

.profil-hero__image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: var(--spacing-stack-md);
}

@media (min-width: 1024px) {
  .profil-hero__image {
    height: 500px;
  }
}

/* Section umum */
.profil-section {
  scroll-margin-top: 8rem;
}

.profil-section__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
}

@media (min-width: 1024px) {
  .profil-section__row {
    flex-direction: row;
  }
}

.profil-section__aside {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .profil-section__aside {
    width: 33.333%;
  }
}

.profil-section__heading {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-stack-sm) 0;
}

.profil-section__heading--sm {
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  margin: 0;
}

.profil-section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin-top: 8px;
}

.profil-section__divider {
  width: 48px;
  height: 4px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-stack-md);
}

.profil-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
}

@media (min-width: 1024px) {
  .profil-section__body {
    width: 66.666%;
  }
}

.profil-section__text {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.profil-sejarah__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-stack-sm);
  margin-top: var(--spacing-stack-sm);
}

.profil-sejarah__image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: block;
}

/* Visi Misi */
.profil-visimisi {
  background: var(--color-surface-container-low);
  border-radius: 1.5rem;
  padding: var(--spacing-margin-mobile);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .profil-visimisi {
    padding: var(--spacing-margin-desktop);
  }
}

.profil-visimisi__decor {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 16rem;
  height: 16rem;
  background: rgba(213, 227, 255, 0.20);
  border-radius: var(--radius-full);
  filter: blur(32px);
  pointer-events: none;
}

.profil-visimisi__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
}

.profil-visimisi__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profil-visimisi__eyebrow .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-secondary);
  line-height: 1;
}

.profil-visi__text {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary-container);
  max-width: 56rem;
  margin: 0 0 var(--spacing-stack-md) 0;
}

@media (max-width: 768px) {
  .profil-visi__text {
    font-size: 20px;
    line-height: 28px;
  }
}

.profil-divider {
  height: 1px;
  width: 100%;
  background: rgba(195, 198, 209, 0.30);
  margin-block: var(--spacing-stack-sm);
}

.profil-misi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-stack-md);
  margin-top: var(--spacing-stack-sm);
}

@media (min-width: 768px) {
  .profil-misi__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.profil-misi__card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.profil-misi__number {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  flex-shrink: 0;
}

.profil-misi__text {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Geografi */
.profil-geografi__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-gutter);
  margin-bottom: var(--spacing-stack-lg);
}

@media (min-width: 1024px) {
  .profil-geografi__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.profil-geografi__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
}

.profil-geografi__card {
  background: var(--color-surface-container);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.profil-geografi__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin: 0 0 16px 0;
}

.profil-geografi__text {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0 0 16px 0;
}

.profil-geografi__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface-variant);
}

.profil-geografi__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profil-geografi__icon {
  font-size: 20px !important;
  color: var(--color-secondary);
  line-height: 1 !important;
}

.profil-geografi__map {
  width: 100%;
  min-height: 300px;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(195, 198, 209, 0.20);
  background: var(--color-surface-container-low);
}

.profil-stat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .profil-stat__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.profil-stat__card {
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profil-stat__card--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.profil-stat__card--secondary {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.profil-stat__card--light {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

.profil-stat__icon {
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 16px;
  display: block;
  opacity: 0.9;
}

.profil-stat__card--primary .profil-stat__icon {
  color: var(--color-on-primary);
}

.profil-stat__card--light .profil-stat__icon {
  color: var(--color-primary);
}

.profil-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px 0;
  opacity: 0.9;
}

.profil-stat__card--primary .profil-stat__label {
  color: var(--color-primary-fixed-dim);
}

.profil-stat__card--secondary .profil-stat__label {
  color: var(--color-secondary);
}

.profil-stat__card--light .profil-stat__label {
  color: var(--color-on-surface-variant);
}

.profil-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line);
  margin: 0;
}

.profil-stat__card--secondary .profil-stat__value,
.profil-stat__card--light .profil-stat__value {
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line);
  font-weight: var(--text-headline-lg-weight);
}

.profil-stat__card--light .profil-stat__value {
  color: var(--color-primary);
}

.profil-stat__unit {
  font-size: 20px;
  font-weight: 600;
}

.profil-stat__note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  margin: 8px 0 0 0;
  opacity: 0.8;
}

/* Lambang */
.profil-lambang {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
  background: var(--color-surface-container-lowest);
  border-radius: 1.5rem;
  padding: var(--spacing-margin-mobile);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(195, 198, 209, 0.10);
}

@media (min-width: 1024px) {
  .profil-lambang {
    flex-direction: row;
    padding: var(--spacing-margin-desktop);
  }
}

.profil-lambang__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 32px;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-xl);
}

@media (min-width: 1024px) {
  .profil-lambang__figure {
    width: 33.333%;
  }
}

.profil-lambang__image {
  width: 12rem;
  height: 12rem;
  object-fit: contain;
  display: block;
}

.profil-lambang__caption {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin: 16px 0 0 0;
  text-align: center;
}

.profil-lambang__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md);
}

@media (min-width: 1024px) {
  .profil-lambang__content {
    width: 66.666%;
  }
}

.profil-lambang__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .profil-lambang__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.profil-lambang__meaning {
  padding: 16px;
  border-left: 4px solid var(--color-secondary);
  background: var(--color-surface-container-low);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.profil-lambang__meaning-title {
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line);
  color: var(--color-primary);
  margin: 0 0 4px 0;
}

.profil-lambang__meaning-text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Struktur / Org Chart */
.profil-section--struktur {
  margin-bottom: var(--spacing-stack-lg);
}

.profil-struktur__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-stack-md);
}

.org-chart {
  background: var(--color-surface-container-high);
  border-radius: 1.5rem;
  padding: 32px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border: 1px solid rgba(195, 198, 209, 0.20);
}

.org-chart__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.org-chart__avatar {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-full);
  border: 4px solid var(--color-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  background: var(--color-surface-container-low);
}

.org-chart__avatar--secondary {
  width: 7rem;
  height: 7rem;
}

@media (min-width: 768px) {
  .org-chart__avatar--secondary {
    margin-top: 4rem;
  }
}

.org-chart__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.org-chart__label {
  background: var(--color-surface);
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-top: -16px;
  z-index: 1;
  text-align: center;
  border: 1px solid rgba(195, 198, 209, 0.10);
}

.org-chart__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
  margin: 0;
}

.org-chart__name--sm {
  font-size: 16px;
  line-height: 24px;
}

.org-chart__role {
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line);
  color: var(--color-on-surface-variant);
  margin: 4px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.org-chart__connector--vertical {
  width: 2px;
  height: 32px;
  background: var(--color-outline-variant);
}

.org-chart__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media (min-width: 768px) {
  .org-chart__row {
    flex-direction: row;
    align-items: flex-start;
  }
}

.org-chart__connector--horizontal {
  display: none;
}

@media (min-width: 768px) {
  .org-chart__connector--horizontal {
    display: block;
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: var(--color-outline-variant);
    z-index: 0;
  }
}

.org-chart__connector--branch {
  display: none;
}

@media (min-width: 768px) {
  .org-chart__connector--branch {
    display: block;
    position: absolute;
    top: 0;
    width: 2px;
    height: 64px;
    background: var(--color-outline-variant);
    z-index: 0;
  }
}

/* Gutenberg content di dalam .profil-content — hybrid edit */
.profil-gutenberg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
}

.profil-gutenberg > * {
  scroll-margin-top: 8rem;
}

.profil-gutenberg h2 {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-stack-sm) 0;
}

.profil-gutenberg h3 {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-line);
  color: var(--color-primary);
  margin: var(--spacing-stack-md) 0 var(--spacing-stack-sm) 0;
}

.profil-gutenberg h4 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
  margin: var(--spacing-stack-md) 0 var(--spacing-stack-sm) 0;
}

.profil-gutenberg p {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.profil-gutenberg a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profil-gutenberg a:hover {
  color: var(--color-surface-tint);
}

.profil-gutenberg ul,
.profil-gutenberg ol {
  margin: 0;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profil-gutenberg ul {
  list-style: disc;
}

.profil-gutenberg ol {
  list-style: decimal;
}

.profil-gutenberg li::marker {
  color: var(--color-secondary);
}

.profil-gutenberg blockquote {
  border-left: 4px solid var(--color-secondary);
  background: var(--color-surface-container-low);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 16px 20px;
  margin: var(--spacing-stack-md) 0;
  font-style: italic;
  color: var(--color-on-surface-variant);
}

.profil-gutenberg img,
.profil-gutenberg figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: block;
}

.profil-gutenberg figure {
  margin: var(--spacing-stack-md) 0;
}

.profil-gutenberg figcaption {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
  text-align: center;
  margin-top: 8px;
}

.profil-layout > .single-berita__sidebar {
  width: 18rem;
  flex-shrink: 0;
  padding-block: var(--spacing-margin-desktop);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg);
}

@media (max-width: 1024px) {
  .profil-layout > .single-berita__sidebar {
    width: 100%;
    padding-block: 0;
  }
}

.profil-gutenberg hr {
  border: none;
  height: 1px;
  background: rgba(195, 198, 209, 0.30);
  margin: var(--spacing-stack-lg) 0;
}

/* ==========================================================================
   Layanan — Tombol "Lihat Semua" (Footer Homepage Section)
   ========================================================================== */

.layanan__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-stack-lg);
}

.layanan__lihat-semua {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-spacing);
  text-decoration: none;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 2px 8px rgba(0, 30, 64, 0.15);
}

.layanan__lihat-semua:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-fixed);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 30, 64, 0.2);
}

.layanan__lihat-semua .material-symbols-outlined {
  font-size: 18px;
  transition: transform 0.2s;
}

.layanan__lihat-semua:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* ==========================================================================
   Archive Layanan Publik — Hero Banner
   URL: /layanan-publik/
   ========================================================================== */

.archive-layanan__hero {
  position: relative;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: 64px;
  overflow: hidden;
}

.archive-layanan__hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
}

.archive-layanan__hero-blob--tr {
  top: -96px;
  right: -96px;
  width: 384px;
  height: 384px;
  background: var(--color-primary-container);
}

.archive-layanan__hero-blob--bl {
  bottom: -80px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: rgba(254, 212, 136, 0.08);
}

.archive-layanan__hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.archive-layanan__hero-content {
  max-width: 680px;
}

.archive-layanan__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 51, 102, 0.8);
  color: var(--color-secondary-fixed);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-spacing);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.archive-layanan__hero-badge .material-symbols-outlined {
  font-size: 18px;
}

.archive-layanan__hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -0.02em;
  color: var(--color-on-primary);
  margin-bottom: 16px;
}

.archive-layanan__hero-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-surface-container-highest);
  font-weight: 300;
  max-width: 560px;
}

/* Seal box (lambang) */
.archive-layanan__hero-seal {
  display: none;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  padding: 20px;
  border-radius: var(--radius-xl);
  flex-shrink: 0;
}

.archive-layanan__hero-seal-img {
  width: 64px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.archive-layanan__hero-seal-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.archive-layanan__hero-seal-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary-fixed);
}

.archive-layanan__hero-seal-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  color: var(--color-surface-variant);
}

.archive-layanan__hero-seal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  color: var(--color-secondary-fixed-dim);
  margin-top: 8px;
}

.archive-layanan__hero-seal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   Archive Layanan Publik — Grid & Cards
   ========================================================================== */

.archive-layanan__section {
  width: 100%;
  background: var(--color-surface);
  padding-block: var(--spacing-stack-lg) 80px;
}

.archive-layanan__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

.archive-layanan__section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}

.archive-layanan__section-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 4px;
}

.archive-layanan__section-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-line);
  color: var(--color-primary);
}

.archive-layanan__count {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
}

.archive-layanan__count strong {
  color: var(--color-primary);
}

/* Grid 3 kolom → 2 → 1 */
.archive-layanan__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-gutter);
}

/* Card */
.archive-layanan__card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 30, 64, 0.06);
  border: 1px solid rgba(195, 198, 209, 0.2);
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.archive-layanan__card:hover {
  box-shadow: 0 8px 32px rgba(0, 30, 64, 0.1);
  transform: translateY(-4px);
  border-color: rgba(0, 30, 64, 0.2);
}

.archive-layanan__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.archive-layanan__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
}

.archive-layanan__card-badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary-fixed);
  flex-shrink: 0;
}

.archive-layanan__card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-container-high);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}

.archive-layanan__card:hover .archive-layanan__card-icon {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.archive-layanan__card-icon .material-symbols-outlined {
  font-size: 26px;
}

.archive-layanan__card-body {
  flex-grow: 1;
  margin-bottom: 20px;
}

.archive-layanan__card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.archive-layanan__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
}

.archive-layanan__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(195, 198, 209, 0.25);
}

.archive-layanan__card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  color: var(--color-primary);
}

.archive-layanan__card-status .material-symbols-outlined {
  font-size: 14px;
  color: #16a34a;
}

.archive-layanan__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-spacing);
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.archive-layanan__card-btn:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-fixed);
  box-shadow: 0 2px 8px rgba(0, 30, 64, 0.15);
}

.archive-layanan__card-btn .material-symbols-outlined {
  font-size: 16px;
}

/* Empty state */
.archive-layanan__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 4px rgba(0, 30, 64, 0.06);
}

.archive-layanan__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-surface-container);
  color: var(--color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.archive-layanan__empty-icon .material-symbols-outlined {
  font-size: 36px;
}

.archive-layanan__empty-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.archive-layanan__empty-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  max-width: 420px;
  margin-bottom: 24px;
}

.archive-layanan__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  text-decoration: none;
  transition: background 0.2s;
}

.archive-layanan__empty-btn:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-fixed);
}

/* Responsive Archive Grid */
@media (max-width: 1024px) {
  .archive-layanan__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-layanan__container {
    padding-inline: var(--spacing-margin-mobile);
  }

  .archive-layanan__hero-inner {
    padding-inline: var(--spacing-margin-mobile);
  }

  .archive-layanan__section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .archive-layanan__grid {
    grid-template-columns: 1fr;
  }

  .archive-layanan__hero {
    padding-block: 48px;
  }

  .archive-layanan__hero-title {
    font-size: var(--text-headline-lg-mobile-size);
  }
}

@media (min-width: 1025px) {
  .archive-layanan__hero-seal {
    display: flex;
  }
}

/* ==========================================================================
   Single Layanan Publik
   URL: /layanan-publik/nama-layanan/
   ========================================================================== */

.single-layanan {
  background: var(--color-surface-container-low);
  min-height: 100vh;
}

/* Breadcrumb */
.single-layanan__breadcrumb-wrap {
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid rgba(195, 198, 209, 0.2);
  padding-block: 14px;
}

.single-layanan__container {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--spacing-margin-desktop);
}

.single-layanan__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  color: var(--color-on-surface-variant);
}

.single-layanan__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color 0.2s;
}

.single-layanan__breadcrumb-link:hover {
  color: var(--color-primary);
}

.single-layanan__breadcrumb-link .material-symbols-outlined {
  font-size: 16px;
}

.single-layanan__breadcrumb-sep {
  font-size: 14px;
  color: var(--color-outline);
}

.single-layanan__breadcrumb-current {
  color: var(--color-primary);
  font-weight: 600;
}

/* Body */
.single-layanan__body {
  padding-block: 40px 80px;
}

/* Card */
.single-layanan__card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 16px rgba(0, 30, 64, 0.08);
  border: 1px solid rgba(195, 198, 209, 0.15);
  overflow: hidden;
}

/* Card Header */
.single-layanan__card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 32px 0;
}

.single-layanan__icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-container-high);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.single-layanan__icon-wrap .material-symbols-outlined {
  font-size: 36px;
}

.single-layanan__meta {
  flex-grow: 1;
  padding-top: 4px;
}

.single-layanan__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: #166534;
  font-family: var(--font-body);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  margin-bottom: 10px;
}

.single-layanan__badge .material-symbols-outlined {
  font-size: 14px;
}

.single-layanan__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

/* Card Content */
.single-layanan__content {
  padding: 24px 32px;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  color: var(--color-on-surface);
}

.single-layanan__content p {
  margin-bottom: 16px;
}

.single-layanan__content p:last-child {
  margin-bottom: 0;
}

/* CTA */
.single-layanan__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 24px 32px 32px;
  border-top: 1px solid rgba(195, 198, 209, 0.25);
}

.single-layanan__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-spacing);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.single-layanan__btn .material-symbols-outlined {
  font-size: 18px;
}

.single-layanan__btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 8px rgba(0, 30, 64, 0.15);
}

.single-layanan__btn--primary:hover {
  background: var(--color-primary-container);
  color: var(--color-on-primary-fixed);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 30, 64, 0.2);
}

.single-layanan__btn--secondary {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
  border: 1px solid rgba(195, 198, 209, 0.4);
}

.single-layanan__btn--secondary:hover {
  background: var(--color-surface-container);
  border-color: rgba(0, 30, 64, 0.3);
}

/* Responsive Single */
@media (max-width: 640px) {
  .single-layanan__container {
    padding-inline: var(--spacing-margin-mobile);
  }

  .single-layanan__card-header {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px 0;
  }

  .single-layanan__content {
    padding: 20px;
  }

  .single-layanan__cta {
    padding: 20px 20px 24px;
    flex-direction: column;
    align-items: stretch;
  }

  .single-layanan__btn {
    justify-content: center;
  }
}

/* ==========================================================================
   Layanan Publik — Logo Images (Homepage, Archive, Single)
   ========================================================================== */
.layanan__card-logo {
  max-width: 36px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.archive-layanan__card-logo {
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.single-layanan__logo {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* ==========================================================================
   Phase E — Navigation Refinement (Desktop dropdown + Mobile submenu)
   ========================================================================== */

/* Desktop: parent has children */
.primary-menu li { position: relative; }
.primary-menu .menu-item-has-children > a::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  opacity: .6;
  transition: transform .2s;
}
.primary-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Sub-menu desktop: white bg, border, radius, shadow, min-width 220px */
.primary-menu .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(195,198,209,.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,30,64,.12), 0 1px 4px rgba(0,30,64,.08);
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
/* Arrow caret */
.primary-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--color-surface-container-lowest);
  border-left: 1px solid rgba(195,198,209,.25);
  border-top: 1px solid rgba(195,198,209,.25);
  transform: rotate(45deg);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-menu .sub-menu li { width: 100%; border: none; }
.primary-menu .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  transition: background .15s, color .15s;
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
}
.primary-menu .sub-menu .current-menu-item > a,
.primary-menu .sub-menu .current_page_item > a {
  background: var(--color-surface-container);
  color: var(--color-primary);
  border: none;
}
/* Level 2 to the right */
.primary-menu .sub-menu .sub-menu {
  left: 100%;
  top: -8px;
  margin-left: 8px;
}
.primary-menu .sub-menu .menu-item-has-children > a::after { content: "chevron_right"; margin-left: auto; }

/* Ensure header not clipped */
.site-header { overflow: visible; }
.main-nav { overflow: visible; }

/* Mobile submenu: indent, toggle button, 44px touch target */
.mobile-nav .sub-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--color-surface-container);
}
.mobile-nav .sub-menu.is-open { display: flex; }
.mobile-nav .menu-item-has-children { position: relative; }
.mobile-nav .submenu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
}
.mobile-nav .submenu-toggle .material-symbols-outlined { transition: transform .2s; font-size: 20px; }
.mobile-nav .menu-item-has-children.is-open > .submenu-toggle .material-symbols-outlined { transform: rotate(180deg); }
.mobile-nav .primary-menu a { padding-right: 44px; }
.mobile-nav .sub-menu a { padding: 12px 12px 12px 8px; min-height: 44px; font-size: 14px; }
.mobile-nav .sub-menu .sub-menu { padding-left: 12px; }

/* ==========================================================================
   Phase E — Agenda Archive & Single
   ========================================================================== */
.agenda-archive { width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.agenda-archive__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap: var(--spacing-stack-lg); }
@media (max-width:768px){ .agenda-archive__container{ padding-inline: var(--spacing-margin-mobile); } }
.agenda-archive__breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color: var(--color-on-surface-variant); flex-wrap:wrap; }
.agenda-archive__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.agenda-archive__breadcrumb a:hover{ color: var(--color-primary); }
.agenda-archive__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.7; }
.agenda-archive__header{ border-bottom:1px solid rgba(195,198,209,.3); padding-bottom:16px; }
.agenda-archive__title{ font-family: var(--font-heading); font-size: var(--text-headline-lg-size); font-weight:700; color: var(--color-primary); margin:0 0 8px; }
.agenda-archive__subtitle{ font-size:14px; color: var(--color-on-surface-variant); margin:0; }
.agenda-archive__section-title{ font-family: var(--font-heading); font-size:18px; font-weight:700; color: var(--color-primary); margin:0 0 16px; padding-left:12px; border-left:4px solid var(--color-secondary); }
.agenda-card--featured{ display:flex; gap:20px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:20px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
@media (max-width:640px){ .agenda-card--featured{ flex-direction:column; } }
.agenda-card__date, .agenda-list__date{ width:64px; height:72px; background: var(--color-surface-container-low); border:1px solid rgba(195,198,209,.25); border-radius: var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.agenda-card__month, .agenda-list__month{ font-size:12px; font-weight:600; color: var(--color-error); text-transform:uppercase; }
.agenda-card__day, .agenda-list__day{ font-family: var(--font-heading); font-size:26px; font-weight:700; color: var(--color-primary); line-height:1; margin-top:2px; }
.agenda-card__body{ flex:1; min-width:0; }
.agenda-card__cat{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-secondary); background: rgba(119,90,25,.08); padding:2px 8px; border-radius: var(--radius); margin-bottom:6px; }
.agenda-card__title{ font-family: var(--font-heading); font-size:20px; font-weight:600; color: var(--color-primary); margin:0 0 8px; }
.agenda-card__title a{ color:inherit; text-decoration:none; }
.agenda-card__title a:hover{ color: var(--color-surface-tint); }
.agenda-card__meta{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color: var(--color-on-surface-variant); margin-bottom:10px; }
.agenda-card__meta-item, .agenda-list__meta span{ display:inline-flex; align-items:center; gap:4px; }
.agenda-card__meta .material-symbols-outlined, .agenda-list__meta .material-symbols-outlined{ font-size:16px; }
.agenda-card__excerpt{ font-size:14px; line-height:22px; color: var(--color-on-surface-variant); margin:0 0 12px; }
.agenda-card__link{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; border:1px solid var(--color-primary); padding:8px 14px; border-radius: var(--radius); }
.agenda-card__link:hover{ background: var(--color-primary); color: var(--color-on-primary); }
.agenda-list{ display:flex; flex-direction:column; gap:12px; }
.agenda-list__item{ display:flex; align-items:center; gap:16px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-lg); padding:14px 16px; }
@media (max-width:640px){ .agenda-list__item{ flex-wrap:wrap; } }
.agenda-list__body{ flex:1; min-width:0; }
.agenda-list__title{ font-size:15px; font-weight:600; color: var(--color-primary); margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.agenda-list__title a{ color:inherit; text-decoration:none; }
.agenda-list__meta{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color: var(--color-on-surface-variant); }
.agenda-list__action{ white-space:nowrap; font-size:13px; font-weight:600; color: var(--color-primary); border:1px solid var(--color-outline-variant); padding:8px 12px; border-radius: var(--radius); text-decoration:none; }
.agenda-list__action:hover{ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.agenda-list--past{ opacity:.92; }
.agenda-archive__empty{ font-size:14px; color: var(--color-on-surface-variant); background: var(--color-surface-container-low); border:1px dashed rgba(195,198,209,.4); border-radius: var(--radius-lg); padding:20px; text-align:center; }

.single-agenda{ width:100%; background: var(--color-surface); }
.single-agenda__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width: var(--container-max); margin-inline:auto; padding:16px var(--spacing-margin-desktop); font-size:12px; color: var(--color-on-surface-variant); }
@media (max-width:768px){ .single-agenda__breadcrumb{ padding-inline: var(--spacing-margin-mobile); } }
.single-agenda__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.single-agenda__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.7; }
.single-agenda__container{ max-width: var(--container-max); margin-inline:auto; padding:0 var(--spacing-margin-desktop) 32px; }
@media (max-width:768px){ .single-agenda__container{ padding-inline: var(--spacing-margin-mobile); } }
.single-agenda__main{ max-width: 860px; }
.single-agenda__cat{ display:inline-flex; padding:4px 10px; background: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed); border-radius: var(--radius-full); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; margin-bottom:12px; }
.single-agenda__title{ font-family: var(--font-heading); font-size:32px; font-weight:700; line-height:40px; color: var(--color-primary); margin:0 0 20px; }
@media (max-width:640px){ .single-agenda__title{ font-size:24px; line-height:32px; } }
.single-agenda__panel{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.25); border-radius: var(--radius-xl); padding:20px; margin-bottom:20px; }
@media (max-width:640px){ .single-agenda__panel{ grid-template-columns:1fr; } }
.single-agenda__panel-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--color-secondary); margin-bottom:4px; }
.single-agenda__panel-value{ font-size:15px; font-weight:600; color: var(--color-primary); }
.single-agenda__thumb{ margin:0 0 20px; border-radius: var(--radius-xl); overflow:hidden; }
.single-agenda__thumb-img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.single-agenda__content{ font-size:16px; line-height:28px; color: var(--color-on-surface); }
.single-agenda__content-title{ font-family: var(--font-heading); font-size:22px; font-weight:700; color: var(--color-primary); margin:0 0 16px; }
.single-agenda__content p{ margin:0 0 16px; }
.single-agenda__back{ display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-size:14px; font-weight:600; color: var(--color-primary); border:1px solid var(--color-primary); padding:10px 16px; border-radius: var(--radius); text-decoration:none; }
.single-agenda__back:hover{ background: var(--color-primary); color: var(--color-on-primary); }


/* ==========================================================================
   Phase F — Profil Daerah & Pimpinan Daerah (terpusat Portal)
   ========================================================================== */
.profil-page{ width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.profil-page__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap: var(--spacing-stack-lg); }
@media (max-width:768px){ .profil-page__container{ padding-inline: var(--spacing-margin-mobile); } }
.profil-page__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--color-on-surface-variant); }
.profil-page__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.profil-page__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.7; }
.profil-page__header{ border-bottom:1px solid rgba(195,198,209,.3); padding-bottom:16px; }
.profil-page__title{ font-family: var(--font-heading); font-size: var(--text-headline-lg-size); font-weight:700; color: var(--color-primary); margin:0 0 8px; }
.profil-page__subtitle{ font-size:14px; color: var(--color-on-surface-variant); margin:0; }
.profil-page__identity{ font-size:12px; color: var(--color-on-surface-variant); margin-top:8px; }
.profil-section{ scroll-margin-top:88px; }
.profil-section__heading{ font-family: var(--font-heading); font-size:22px; font-weight:700; color: var(--color-primary); margin:0 0 16px; padding-left:12px; border-left:4px solid var(--color-secondary); }
.profil-section__content{ font-size:15px; line-height:26px; color: var(--color-on-surface-variant); }
.profil-section__content p{ margin:0 0 12px; }
.profil-section__empty{ font-size:13px; color: var(--color-on-surface-variant); background: var(--color-surface-container-low); border:1px dashed rgba(195,198,209,.4); border-radius: var(--radius-lg); padding:16px; }
.profil-section__head-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.profil-section__link{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; border:1px solid var(--color-outline-variant); padding:6px 12px; border-radius: var(--radius); }
.profil-section__link:hover{ background: var(--color-primary); color: var(--color-on-primary); }
.profil-angka__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .profil-angka__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .profil-angka__grid{ grid-template-columns:1fr; } }
.profil-angka__card{ background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:18px; display:flex; flex-direction:column; gap:6px; }
.profil-angka__icon{ font-size:28px; color: var(--color-primary); }
.profil-angka__label{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color: var(--color-on-surface-variant); }
.profil-angka__value{ font-family: var(--font-heading); font-size:28px; font-weight:700; color: var(--color-primary); line-height:1; }
.profil-angka__unit{ font-size:16px; font-weight:600; }
.profil-angka__meta{ font-size:12px; color: var(--color-on-surface-variant); }
.profil-visi-misi__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:768px){ .profil-visi-misi__grid{ grid-template-columns:1fr; } }
.profil-visi-misi__card{ background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:20px; }
.profil-visi-misi__title{ font-family: var(--font-heading); font-size:16px; font-weight:700; color: var(--color-primary); margin:0 0 10px; }
.profil-visi-misi__content{ font-size:14px; line-height:24px; color: var(--color-on-surface-variant); }
.profil-lambang__row{ display:flex; gap:24px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:20px; align-items:center; }
@media (max-width:768px){ .profil-lambang__row{ flex-direction:column; } }
.profil-lambang__fig{ flex-shrink:0; width:160px; height:160px; background: var(--color-surface-container-low); border-radius: var(--radius-xl); display:flex; align-items:center; justify-content:center; padding:16px; }
.profil-lambang__fig img{ max-width:100%; max-height:100%; object-fit:contain; }
.profil-lambang__motto{ font-family: var(--font-heading); font-size:18px; font-weight:700; color: var(--color-primary); display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.profil-lambang__desc{ font-size:14px; line-height:24px; color: var(--color-on-surface-variant); }
.profil-pimpinan__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:1024px){ .profil-pimpinan__grid{ grid-template-columns:1fr; } }
.profil-pimpinan__card{ background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); overflow:hidden; display:flex; flex-direction:column; }
.profil-pimpinan__card--top{ border-top:4px solid var(--color-primary); }
.profil-pimpinan__foto{ width:100%; height:220px; object-fit:cover; display:block; background: var(--color-surface-container); }
.profil-pimpinan__foto--placeholder{ width:100%; height:220px; display:flex; align-items:center; justify-content:center; background: var(--color-surface-container); color: var(--color-outline); }
.profil-pimpinan__foto--placeholder .material-symbols-outlined{ font-size:48px; }
.profil-pimpinan__info{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.profil-pimpinan__jabatan{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color: var(--color-secondary); }
.profil-pimpinan__nama{ font-family: var(--font-heading); font-size:18px; font-weight:700; color: var(--color-primary); margin:0; }
.profil-pimpinan__periode{ font-size:12px; color: var(--color-on-surface-variant); }
.profil-pimpinan__biodata{ font-size:13px; line-height:20px; color: var(--color-on-surface-variant); margin-top:6px; }
.profil-pimpinan__link{ margin-top:auto; display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; padding-top:10px; }
.profil-pimpinan__link:hover{ color: var(--color-surface-tint); }
.profil-struktur{ display:flex; flex-direction:column; align-items:center; gap:8px; background: var(--color-surface-container-low); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:24px; }
.profil-struktur__item{ min-width:220px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-lg); padding:14px 20px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.profil-struktur__item--bupati{ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.profil-struktur__item--bupati .profil-struktur__label, .profil-struktur__item--bupati .profil-struktur__nama{ color: var(--color-on-primary); }
.profil-struktur__item--opd{ text-decoration:none; color: var(--color-primary); border-style:dashed; }
.profil-struktur__item--opd:hover{ background: var(--color-surface-container); }
.profil-struktur__label{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.profil-struktur__nama{ font-size:13px; font-weight:600; color: var(--color-primary); }
.profil-struktur__arrow{ color: var(--color-outline); }
.profil-struktur__arrow .material-symbols-outlined{ font-size:20px; }
.profil-struktur__hint{ font-size:11px; color: var(--color-on-surface-variant); }

/* Pimpinan Detail */
.pimpinan-detail{ width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.pimpinan-detail__container{ max-width:860px; margin-inline:auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap:24px; }
@media (max-width:768px){ .pimpinan-detail__container{ padding-inline: var(--spacing-margin-mobile); } }
.pimpinan-detail__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--color-on-surface-variant); }
.pimpinan-detail__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.pimpinan-detail__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.7; }
.pimpinan-detail__card{ display:flex; gap:24px; background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:24px; }
@media (max-width:640px){ .pimpinan-detail__card{ flex-direction:column; } }
.pimpinan-detail__photo{ width:220px; height:280px; flex-shrink:0; border-radius: var(--radius-xl); overflow:hidden; background: var(--color-surface-container); display:flex; align-items:center; justify-content:center; }
.pimpinan-detail__photo img{ width:100%; height:100%; object-fit:cover; }
.pimpinan-detail__placeholder{ color: var(--color-outline); }
.pimpinan-detail__placeholder .material-symbols-outlined{ font-size:56px; }
.pimpinan-detail__name{ font-family: var(--font-heading); font-size:28px; font-weight:700; color: var(--color-primary); margin:0 0 6px; }
.pimpinan-detail__jabatan{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-secondary); margin:0; }
.pimpinan-detail__periode{ font-size:13px; color: var(--color-on-surface-variant); margin:6px 0 0; }
.pimpinan-detail__biodata{ font-size:14px; line-height:24px; color: var(--color-on-surface-variant); margin-top:12px; }
.pimpinan-detail__heading{ font-family: var(--font-heading); font-size:18px; font-weight:700; color: var(--color-primary); margin:0 0 12px; }
.pimpinan-detail__sambutan{ background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:20px; }
.pimpinan-detail__sambutan-content{ font-size:14px; line-height:24px; color: var(--color-on-surface-variant); }
.pimpinan-detail__back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--color-primary); border:1px solid var(--color-primary); padding:8px 14px; border-radius: var(--radius); text-decoration:none; width:fit-content; }
.pimpinan-detail__back:hover{ background: var(--color-primary); color: var(--color-on-primary); }

/* ==========================================================================
   Phase G — Statistik /statistik/ (CPT indikator)
   ========================================================================== */
.statistik-page{ width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.statistik-page__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap: var(--spacing-stack-lg); }
@media (max-width:768px){ .statistik-page__container{ padding-inline: var(--spacing-margin-mobile); } }
.statistik-page__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--color-on-surface-variant); }
.statistik-page__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.statistik-page__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.7; }
.statistik-page__header{ border-bottom:1px solid rgba(195,198,209,.3); padding-bottom:16px; }
.statistik-page__title{ font-family: var(--font-heading); font-size: var(--text-headline-lg-size); font-weight:700; color: var(--color-primary); margin:0 0 8px; }
.statistik-page__desc{ font-size:14px; color: var(--color-on-surface-variant); margin:0; }
.statistik-page__period{ font-size:12px; color: var(--color-on-surface-variant); margin-top:8px; font-style:italic; }
.statistik-page__filter{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; overflow-x:auto; scrollbar-width:thin; }
.statistik-filter__chip{ display:inline-flex; align-items:center; padding:8px 16px; border-radius: var(--radius-full); font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--color-outline-variant); color: var(--color-primary); background: var(--color-surface-container-lowest); transition: background .15s, color .15s; white-space:nowrap; }
.statistik-filter__chip:hover{ background: var(--color-surface-container); }
.statistik-filter__chip.is-active{ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.statistik-group{ display:flex; flex-direction:column; gap:16px; }
.statistik-group__title{ font-family: var(--font-heading); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-primary); margin:0; padding-left:12px; border-left:4px solid var(--color-secondary); }
.statistik-group__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .statistik-group__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .statistik-group__grid{ grid-template-columns:1fr; } }
.statistik-card{ background: var(--color-surface-container-lowest); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-xl); padding:20px; display:flex; flex-direction:column; gap:4px; min-height:160px; }
.statistik-card__icon{ font-size:28px; color: var(--color-primary); opacity:.8; }
.statistik-card__nilai{ font-family: var(--font-heading); font-size:32px; font-weight:700; color: var(--color-primary); line-height:1; margin-top:4px; }
.statistik-card__satuan{ font-size:14px; font-weight:600; color: var(--color-on-surface-variant); }
.statistik-card__nama{ font-size:13px; font-weight:600; color: var(--color-on-surface); margin-top:4px; }
.statistik-card__meta{ font-size:11px; color: var(--color-on-surface-variant); }
.statistik-card__tahun,.statistik-card__sumber{ font-size:11px; color: var(--color-on-surface-variant); }
.statistik-card__sumber{ font-style:italic; }
.statistik-page__empty{ font-size:14px; color: var(--color-on-surface-variant); background: var(--color-surface-container-low); border:1px dashed rgba(195,198,209,.4); border-radius: var(--radius-lg); padding:24px; text-align:center; }
.statistik-page__source{ background: var(--color-surface-container-low); border:1px solid rgba(195,198,209,.2); border-radius: var(--radius-lg); padding:16px 20px; }
.statistik-page__source-title{ font-family: var(--font-heading); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--color-primary); margin:0 0 8px; }
.statistik-page__source-text{ font-size:13px; line-height:20px; color: var(--color-on-surface-variant); margin:0; font-style:italic; }

/* ==========================================================================
   Dokumen Publik — Directory (1440px, Wibawa Nusantara)
   navy/white/light blue-gray, gold accent, same header/container/footer
   ========================================================================== */
.dokpub{ background: var(--color-surface); }
.dokpub__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); padding-block: 24px 48px; }
.dokpub__breadcrumb{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--color-on-surface-variant); margin-bottom:16px; }
.dokpub__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.dokpub__breadcrumb a:hover{ color: var(--color-primary); }
.dokpub__breadcrumb .material-symbols-outlined{ font-size:16px; opacity:.55; }
.dokpub__header{ margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--color-outline-variant); }
.dokpub__title{ font-family: var(--font-heading); font-size: 32px; font-weight:700; letter-spacing:-0.02em; color: var(--color-primary); line-height:40px; margin:0 0 8px; }
.dokpub__desc{ font-family: var(--font-body); font-size:16px; line-height:24px; color: var(--color-on-surface-variant); margin:0; max-width: 640px; }

/* Search area — prominent white card */
.dokpub__search{ background: var(--color-surface-container-lowest); border:1px solid var(--color-outline-variant); border-radius: var(--radius-xl); padding:20px; box-shadow: 0 1px 2px rgba(0,30,64,.06); margin-bottom:20px; }
.dokpub__search-form{ display:flex; gap:12px; align-items:stretch; }
.dokpub__search-field{ position:relative; flex:1; display:flex; align-items:center; }
.dokpub__search-icon{ position:absolute; left:14px; font-size:20px; color: var(--color-on-surface-variant); opacity:.7; pointer-events:none; }
.dokpub__search-field input{ width:100%; height:48px; padding:0 16px 0 44px; border:1px solid var(--color-outline-variant); border-radius: var(--radius-lg); background: var(--color-surface); font-family:var(--font-body); font-size:16px; color: var(--color-on-surface); outline:none; transition: border-color .2s, box-shadow .2s; }
.dokpub__search-field input::placeholder{ color: #6b7280; }
.dokpub__search-field input:focus{ border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,30,64,.08); }
.dokpub__search-btn{ height:48px; padding:0 24px; border:none; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer; white-space:nowrap; transition: background .2s, transform .15s; }
.dokpub__search-btn:hover{ background: var(--color-primary-container); transform: translateY(-1px); }

/* Filters */
.dokpub__filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:16px; padding-top:16px; border-top:1px solid var(--color-surface-container); }
.dokpub__filter{ display:flex; flex-direction:column; gap:6px; min-width: 180px; flex:1 1 180px; }
.dokpub__filter-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-on-surface-variant); }
.dokpub__filter select{ height:40px; padding:0 12px; border:1px solid var(--color-outline-variant); border-radius: var(--radius); background: var(--color-surface); font-size:14px; color: var(--color-on-surface); }
.dokpub__reset{ height:40px; padding:0 16px; border:1px solid var(--color-outline-variant); border-radius: var(--radius); background: var(--color-surface); font-size:13px; font-weight:600; color: var(--color-primary); cursor:pointer; align-self:flex-end; }
.dokpub__reset:hover{ background: var(--color-surface-container-low); }

/* Shortcuts — secondary lightweight */
.dokpub__shortcuts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-size:13px; }
.dokpub__shortcuts-label{ font-size:12px; font-weight:600; color: var(--color-on-surface-variant); margin-right:4px; }
.dokpub__shortcuts a{ padding:6px 12px; border-radius: var(--radius-full); background: var(--color-surface-container-low); border:1px solid var(--color-surface-container); color: var(--color-primary); font-size:12px; font-weight:600; text-decoration:none; }
.dokpub__shortcuts a:hover{ background: var(--color-surface-container); }

/* Results */
.dokpub__count{ font-size:13px; color: var(--color-on-surface-variant); margin: 8px 0 12px; }
.dokpub__count strong{ color: var(--color-on-surface); font-weight:700; }
.dokpub__list{ display:flex; flex-direction:column; gap:12px; }
.dokpub__item{ display:flex; gap:16px; align-items:flex-start; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:18px 20px; transition: border-color .2s, box-shadow .2s; }
.dokpub__item:hover{ border-color: var(--color-surface-dim); box-shadow: 0 4px 16px rgba(0,30,64,.06); }
.dokpub__icon{ width:44px; height:44px; border-radius: var(--radius-lg); background: var(--color-surface-container-low); border:1px solid var(--color-surface-container); display:inline-flex; align-items:center; justify-content:center; color: var(--color-error); flex-shrink:0; }
.dokpub__icon .material-symbols-outlined{ font-size:22px; }
.dokpub__body{ flex:1; min-width:0; }
.dokpub__item-title{ font-family: var(--font-heading); font-size:16px; font-weight:700; line-height:22px; margin:0 0 6px; }
.dokpub__item-title a{ color: var(--color-primary); text-decoration:none; }
.dokpub__item-title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.dokpub__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color: var(--color-on-surface-variant); margin-bottom:6px; }
.dokpub__badge{ padding:2px 8px; border-radius: var(--radius-full); background: #fff7e6; border:1px solid var(--color-secondary-fixed); color: var(--color-secondary); font-size:11px; font-weight:700; letter-spacing:.02em; }
.dokpub__dot{ opacity:.35; }
.dokpub__item-desc{ font-size:13px; line-height:20px; color: var(--color-on-surface-variant); margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dokpub__submeta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color: var(--color-on-surface-variant); }
.dokpub__number{ font-weight:600; color: var(--color-on-surface); }
.dokpub__actions{ display:flex; gap:8px; align-items:center; flex-shrink:0; margin-left:8px; }
.dokpub__btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius: var(--radius-full); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; transition: background .2s, color .2s, border-color .2s; }
.dokpub__btn--ghost{ background: var(--color-surface); border:1px solid var(--color-outline-variant); color: var(--color-primary); }
.dokpub__btn--ghost:hover{ background: var(--color-surface-container-low); }
.dokpub__btn--primary{ background: var(--color-primary); color: var(--color-on-primary); border:1px solid var(--color-primary); }
.dokpub__btn--primary:hover{ background: var(--color-primary-container); }
.dokpub__btn .material-symbols-outlined{ font-size:16px; }

/* Pagination */
.dokpub__pagination{ display:flex; align-items:center; gap:6px; justify-content:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--color-surface-container); flex-wrap:wrap; }
.dokpub__pagination a, .dokpub__pagination span{ min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border-radius: var(--radius); border:1px solid var(--color-outline-variant); background: var(--color-surface-container-lowest); font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; }
.dokpub__pagination a.is-active, .dokpub__pagination a[aria-current="page"]{ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.dokpub__pagination a.is-disabled{ opacity:.4; pointer-events:none; }

@media (max-width: 1024px){
  .dokpub__search-form{ flex-direction:column; }
  .dokpub__actions{ flex-direction:column; align-items:stretch; }
}
@media (max-width: 768px){
  .dokpub__container{ padding-inline: var(--spacing-margin-mobile); }
  .dokpub__item{ flex-direction:column; }
  .dokpub__actions{ margin-left:0; flex-direction:row; }
}

/* ==========================================================================
   Dokumen Detail — 1440px, Wibawa Nusantara (NOT news article)
   navy/white/light blue-gray, gold accent, 1280 container, same header/footer
   ========================================================================== */
.dokdet{ background: var(--color-surface); }
.dokdet__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); padding-block: 24px 48px; }
.dokdet__breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color: var(--color-on-surface-variant); margin-bottom:14px; }
.dokdet__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.dokdet__breadcrumb a:hover{ color: var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.dokdet__breadcrumb .material-symbols-outlined{ font-size:16px; opacity:.45; }

/* Badge - gold subtle */
.dokdet__badge{ display:inline-flex; padding:4px 10px; border-radius: var(--radius-full); background: #fff7e6; border:1px solid var(--color-secondary-fixed); color: var(--color-secondary); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }

.dokdet__title{ font-family: var(--font-heading); font-size: 32px; font-weight:700; line-height:40px; letter-spacing:-0.02em; color: var(--color-primary); margin:0 0 10px; max-width: 860px; }
.dokdet__lead{ font-size:15px; line-height:24px; color: var(--color-on-surface-variant); margin:0 0 24px; max-width: 720px; }

/* Top: info panel + download */
.dokdet__top{ display:grid; grid-template-columns: 1.35fr .85fr; gap:20px; align-items:start; margin-bottom:28px; }
@media (max-width:1024px){ .dokdet__top{ grid-template-columns:1fr; } }

/* Info panel - clean */
.dokdet__panel{ background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:20px; }
.dokdet__info{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 24px; margin:0; }
@media (max-width:640px){ .dokdet__info{ grid-template-columns:1fr; } }
.dokdet__info-item{ display:flex; flex-direction:column; gap:4px; padding-bottom:12px; border-bottom:1px solid var(--color-surface-container); }
.dokdet__info-item:last-child, .dokdet__info-item:nth-last-child(2):nth-child(odd){ border-bottom:none; padding-bottom:0; }
.dokdet__info-item dt{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-on-surface-variant); margin:0; }
.dokdet__info-item dd{ font-size:14px; font-weight:600; color: var(--color-on-surface); margin:0; }
.dokdet__pill{ display:inline-flex; padding:2px 8px; border-radius: var(--radius-full); background: #fef2f2; border:1px solid #fecaca; color: var(--color-error); font-size:11px; font-weight:700; letter-spacing:.04em; }

/* Download panel - prominent but professional */
.dokdet__download{ background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:20px; position:sticky; top:88px; }
.dokdet__file{ display:flex; gap:14px; align-items:center; padding:14px; background: var(--color-surface-container-low); border:1px solid var(--color-surface-container); border-radius: var(--radius-lg); margin-bottom:14px; }
.dokdet__file-icon{ width:44px; height:44px; border-radius: var(--radius-lg); background: #fff; border:1px solid var(--color-surface-container); display:inline-flex; align-items:center; justify-content:center; color: var(--color-error); flex-shrink:0; }
.dokdet__file-icon .material-symbols-outlined{ font-size:22px; }
.dokdet__file-text{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.dokdet__file-name{ font-size:13px; font-weight:700; color: var(--color-on-surface); line-height:18px; word-break:break-word; }
.dokdet__file-meta{ font-size:12px; color: var(--color-on-surface-variant); }
.dokdet__actions{ display:flex; flex-direction:column; gap:8px; }
.dokdet__btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 18px; border-radius: var(--radius-full); font-size:14px; font-weight:600; text-decoration:none; transition: background .2s, color .2s, border-color .2s; }
.dokdet__btn--primary{ background: var(--color-primary); color: var(--color-on-primary); border:1px solid var(--color-primary); }
.dokdet__btn--primary:hover{ background: var(--color-primary-container); }
.dokdet__btn--ghost{ background: var(--color-surface); border:1px solid var(--color-outline-variant); color: var(--color-primary); }
.dokdet__btn--ghost:hover{ background: var(--color-surface-container-low); }
.dokdet__hint{ font-size:11px; color: var(--color-on-surface-variant); margin:10px 0 0; text-align:center; }

/* Content */
.dokdet__content{ max-width: 860px; margin-bottom:28px; }
.dokdet__h2{ font-family: var(--font-heading); font-size:20px; font-weight:700; color: var(--color-primary); margin:0 0 12px; padding-left:12px; border-left:4px solid var(--color-secondary); }
.dokdet__prose{ font-size:15px; line-height:26px; color: var(--color-on-surface-variant); }
.dokdet__prose p{ margin:0 0 14px; }
.dokdet__prose ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }

/* Related - compact rows, NOT cards */
.dokdet__related{ max-width: 860px; margin-bottom:20px; }
.dokdet__related-list{ display:flex; flex-direction:column; gap:8px; }
.dokdet__rel{ display:flex; align-items:center; gap:12px; padding:12px 14px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-lg); text-decoration:none; transition: border-color .2s, box-shadow .2s; }
.dokdet__rel:hover{ border-color: var(--color-surface-dim); box-shadow: 0 2px 8px rgba(0,30,64,.06); }
.dokdet__rel-icon{ width:36px; height:36px; border-radius: var(--radius); background: var(--color-surface-container-low); border:1px solid var(--color-surface-container); display:inline-flex; align-items:center; justify-content:center; color: var(--color-primary); flex-shrink:0; }
.dokdet__rel-icon .material-symbols-outlined{ font-size:18px; }
.dokdet__rel-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dokdet__rel-title{ font-size:13px; font-weight:700; color: var(--color-primary); line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dokdet__rel-meta{ font-size:11px; color: var(--color-on-surface-variant); }
.dokdet__rel-action{ font-size:12px; font-weight:600; color: var(--color-primary); border:1px solid var(--color-outline-variant); padding:6px 12px; border-radius: var(--radius-full); white-space:nowrap; }

/* Back */
.dokdet__back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; margin-top:8px; }
.dokdet__back:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:768px){
  .dokdet__container{ padding-inline: var(--spacing-margin-mobile); }
  .dokdet__title{ font-size:26px; line-height:32px; }
  .dokdet__download{ position:static; }
}

/* ==========================================================================
   Phase I — Direktori Perangkat Daerah (OPD)
   ========================================================================== */
.opd-archive{ width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.opd-archive__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap: var(--spacing-stack-lg); }
@media (max-width:768px){ .opd-archive__container{ padding-inline: var(--spacing-margin-mobile); } }
.opd-archive__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--color-on-surface-variant); }
.opd-archive__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.opd-archive__breadcrumb .material-symbols-outlined{ font-size:14px; opacity:.6; }
.opd-archive__header{ border-bottom:1px solid rgba(195,198,209,.3); padding-bottom:16px; }
.opd-archive__title{ font-family: var(--font-heading); font-size: var(--text-headline-lg-size); font-weight:700; color: var(--color-primary); margin:0 0 8px; }
.opd-archive__desc{ font-size:14px; color: var(--color-on-surface-variant); margin:0; }
.opd-archive__search{ background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:16px; display:flex; flex-direction:column; gap:12px; }
.opd-archive__search-form{ display:flex; gap:12px; }
.opd-archive__search-field{ position:relative; flex:1; display:flex; align-items:center; }
.opd-archive__search-field .material-symbols-outlined{ position:absolute; left:12px; font-size:18px; color: var(--color-on-surface-variant); opacity:.6; }
.opd-archive__search-field input{ width:100%; height:44px; padding:0 14px 0 38px; border:1px solid var(--color-outline-variant); border-radius: var(--radius-lg); font-size:14px; }
.opd-archive__search-btn{ height:44px; padding:0 20px; border:none; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); font-weight:600; cursor:pointer; }
.opd-archive__filters{ display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.opd-archive__filter{ display:flex; flex-direction:column; gap:6px; }
.opd-archive__filter-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-on-surface-variant); }
.opd-archive__filter select{ height:40px; padding:0 12px; border:1px solid var(--color-outline-variant); border-radius: var(--radius); min-width:180px; }
.opd-archive__reset{ height:40px; padding:0 16px; border:1px solid var(--color-outline-variant); border-radius: var(--radius); background: var(--color-surface); font-size:13px; font-weight:600; color: var(--color-primary); display:inline-flex; align-items:center; text-decoration:none; align-self:flex-end; }
.opd-group__title{ font-family: var(--font-heading); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-primary); margin:0 0 12px; padding-left:10px; border-left:4px solid var(--color-secondary); }
.opd-archive__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:1024px){ .opd-archive__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .opd-archive__grid{ grid-template-columns:1fr; } .opd-archive__search-form{ flex-direction:column; } }
.opd-card{ background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:16px; display:flex; flex-direction:column; gap:8px; }
.opd-card__logo{ width:48px; height:48px; border-radius: var(--radius); background: var(--color-surface-container-low); border:1px solid var(--color-surface-container); display:flex; align-items:center; justify-content:center; color: var(--color-primary); overflow:hidden; }
.opd-card__logo img{ width:100%; height:100%; object-fit:contain; padding:4px; background:#fff; }
.opd-card__logo .material-symbols-outlined{ font-size:24px; }
.opd-card__title{ font-family: var(--font-heading); font-size:15px; font-weight:700; color: var(--color-primary); margin:0; line-height:20px; }
.opd-card__title a{ color:inherit; text-decoration:none; }
.opd-card__singkat{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-secondary); }
.opd-card__jenis{ font-size:11px; color: var(--color-on-surface-variant); }
.opd-card__alamat,.opd-card__website{ font-size:12px; color: var(--color-on-surface-variant); }
.opd-card__website{ color: var(--color-primary); text-decoration:underline; }
.opd-card__link{ margin-top:auto; display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; border:1px solid var(--color-outline-variant); padding:6px 12px; border-radius: var(--radius-full); width:fit-content; }
.opd-card__link:hover{ background: var(--color-primary); color: var(--color-on-primary); }
.opd-archive__pagination{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* Single OPD */
.opd-single{ width:100%; background: var(--color-surface); padding: var(--spacing-stack-md) 0 var(--spacing-stack-lg); }
.opd-single__container{ max-width:860px; margin-inline:auto; padding-inline: var(--spacing-margin-desktop); display:flex; flex-direction:column; gap:24px; }
@media (max-width:768px){ .opd-single__container{ padding-inline: var(--spacing-margin-mobile); } }
.opd-single__breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--color-on-surface-variant); }
.opd-single__breadcrumb a{ color: var(--color-on-surface-variant); text-decoration:none; }
.opd-single__badge{ display:inline-flex; padding:4px 10px; border-radius: var(--radius-full); background:#fff7e6; border:1px solid var(--color-secondary-fixed); color: var(--color-secondary); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; width:fit-content; }
.opd-single__title{ font-family: var(--font-heading); font-size:28px; font-weight:700; color: var(--color-primary); margin:0; }
.opd-single__singkat{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-secondary); margin:0; }
.opd-single__top{ display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:start; }
@media (max-width:768px){ .opd-single__top{ grid-template-columns:1fr; } }
.opd-single__contact{ background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:16px; }
.opd-single__h2{ font-family: var(--font-heading); font-size:16px; font-weight:700; color: var(--color-primary); margin:0 0 12px; padding-left:10px; border-left:4px solid var(--color-secondary); }
.opd-single__contact-list{ display:flex; flex-direction:column; gap:10px; margin:0; }
.opd-single__contact-item{ display:flex; flex-direction:column; gap:2px; }
.opd-single__contact-item dt{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-on-surface-variant); }
.opd-single__contact-item dd{ font-size:13px; color: var(--color-on-surface); margin:0; word-break:break-word; }
.opd-single__contact-item a{ color: var(--color-primary); }
.opd-single__logo{ width:100%; height:180px; background: var(--color-surface-container-low); border:1px solid #e6e8ef; border-radius: var(--radius-xl); display:flex; align-items:center; justify-content:center; padding:16px; }
.opd-single__logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.opd-single__pimpinan-card{ display:flex; gap:14px; align-items:center; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); padding:14px; }
.opd-single__pimpinan-card img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.opd-single__pimpinan-placeholder{ width:64px; height:64px; border-radius:50%; background: var(--color-surface-container); display:flex; align-items:center; justify-content:center; color: var(--color-outline); }
.opd-single__pimpinan-nama{ display:block; font-size:15px; font-weight:700; color: var(--color-primary); }
.opd-single__pimpinan-jabatan{ display:block; font-size:12px; color: var(--color-on-surface-variant); }
.opd-single__profil{ max-width:860px; margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
@media (max-width:768px){ .opd-single__profil{ padding-inline: var(--spacing-margin-mobile); } }
.opd-single__prose{ font-size:14px; line-height:24px; color: var(--color-on-surface-variant); }
.opd-single__prose h3{ font-family: var(--font-heading); font-size:16px; font-weight:700; color: var(--color-primary); margin:16px 0 8px; }
.opd-single__dokumen{ max-width:860px; margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
.opd-single__dokumen-list{ display:flex; flex-direction:column; gap:8px; }
.opd-single__dokumen-item{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-lg); text-decoration:none; }
.opd-single__dokumen-title{ font-size:13px; font-weight:600; color: var(--color-primary); }
.opd-single__dokumen-meta{ font-size:11px; color: var(--color-on-surface-variant); }
.opd-single__dokumen-more{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--color-primary); text-decoration:none; margin-top:8px; }

/* Phase J — OPD relations (Layanan/Agenda) + Single Layanan OPD */
.single-layanan__opd{ font-size:13px; color: var(--color-on-surface-variant); margin-top:6px; }
.single-layanan__opd a{ color: var(--color-primary); text-decoration:underline; }
.opd-single__layanan-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width:1024px){ .opd-single__layanan-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .opd-single__layanan-grid{ grid-template-columns:1fr; } }
.opd-single__layanan-card{ display:flex; flex-direction:column; gap:6px; padding:14px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-lg); text-decoration:none; }
.opd-single__layanan-icon{ width:40px; height:40px; border-radius: var(--radius); background: var(--color-surface-container); display:flex; align-items:center; justify-content:center; color: var(--color-primary); overflow:hidden; }
.opd-single__layanan-icon img{ width:100%; height:100%; object-fit:contain; }
.opd-single__layanan-title{ font-size:13px; font-weight:700; color: var(--color-primary); line-height:18px; }
.opd-single__layanan-desc{ font-size:12px; line-height:18px; color: var(--color-on-surface-variant); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.opd-single__layanan-link{ font-size:12px; font-weight:600; color: var(--color-primary); }
.opd-single__agenda-list{ display:flex; flex-direction:column; gap:8px; }
.opd-single__agenda-item{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-lg); text-decoration:none; }
.opd-single__agenda-date{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--color-secondary); }
.opd-single__agenda-title{ font-size:13px; font-weight:600; color: var(--color-primary); }
.opd-single__agenda-meta{ font-size:12px; color: var(--color-on-surface-variant); }

/* ==========================================================================
   Phase K — Foto & Video Post (native Post format)
   ========================================================================== */

/* --- Format badge on cards --- */
.card-format-badge{
  position:absolute; bottom:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius: var(--radius-full);
  background: rgba(0,30,64,.82); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
  backdrop-filter: blur(4px);
}
.card-format-badge .material-symbols-outlined{ font-size:14px; line-height:1; }
.card-format-badge--video{ background: rgba(186,26,26,.9); }
.card-berita__image-wrapper{ position:relative; }
.card-video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,30,64,.22); pointer-events:none;
}
.card-video-play .material-symbols-outlined{ font-size:48px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.card-video-play--sm .material-symbols-outlined{ font-size:32px; }
.featured-bento .card-format-badge{ position:static; margin-left:8px; backdrop-filter:none; background: rgba(0,0,0,.35); }

/* --- Featured photo-grid 1+2 --- */
.card-berita__photo-grid{
  display:grid; grid-template-columns: 1.6fr .9fr; gap:6px;
  position:relative; width:100%; height:16rem; background: var(--color-surface-container);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow:hidden;
}
.card-berita__photo-grid-main{ position:relative; overflow:hidden; }
.card-berita__photo-grid-img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-berita__photo-grid-side{ display:grid; grid-template-rows:1fr 1fr; gap:6px; }
.card-berita__photo-grid-cell{ position:relative; overflow:hidden; background: var(--color-surface-container); }
.card-berita__photo-grid-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-berita__photo-grid-more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,30,64,.72); color:#fff; font-family:var(--font-heading); font-size:20px; font-weight:700;
}
.card-berita__photo-grid .card-berita__badge,
.card-berita__photo-grid .card-format-badge{ position:absolute; }

/* --- Single gallery grid --- */
.single-gallery{ margin-top:24px; padding:20px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); }
.single-gallery__title{ display:flex; align-items:center; gap:8px; font-family:var(--font-heading); font-size:18px; font-weight:700; color:var(--color-primary); margin:0 0 14px; }
.single-gallery__title .material-symbols-outlined{ font-size:20px; }
.single-gallery__count{ font-size:12px; font-weight:600; color:var(--color-on-surface-variant); background: var(--color-surface-container); padding:2px 8px; border-radius: var(--radius-full); }
.single-gallery__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
@media (max-width:1024px){ .single-gallery__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .single-gallery__grid{ grid-template-columns: repeat(2,1fr); gap:8px; } }
.single-gallery__item{
  position:relative; border:0; padding:0; background: var(--color-surface-container); border-radius: var(--radius-lg); overflow:hidden;
  cursor:pointer; text-align:left;
}
.single-gallery__item:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.single-gallery__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.single-gallery__caption{ display:block; padding:6px 8px; font-size:11px; line-height:14px; color:var(--color-on-surface-variant); background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- Lightbox --- */
.alfatwa-lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.alfatwa-lightbox[hidden]{ display:none !important; }
.alfatwa-lightbox__backdrop{ position:absolute; inset:0; background: rgba(13,28,47,.88); backdrop-filter: blur(4px); }
.alfatwa-lightbox__inner{ position:relative; width:min(96vw,1200px); max-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; z-index:1; }
.alfatwa-lightbox__figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; }
.alfatwa-lightbox__img{ max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain; border-radius: var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,.5); background:#000; }
.alfatwa-lightbox__caption{ color:#fff; font-size:13px; text-align:center; max-width:720px; opacity:.9; }
.alfatwa-lightbox__counter{ color: rgba(255,255,255,.7); font-size:12px; }
.alfatwa-lightbox__close,
.alfatwa-lightbox__prev,
.alfatwa-lightbox__next{
  position:absolute; width:44px; height:44px; border:0; border-radius: var(--radius-full);
  background: rgba(255,255,255,.12); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter: blur(4px); transition: background .15s;
}
.alfatwa-lightbox__close{ top:8px; right:8px; }
.alfatwa-lightbox__prev{ left:8px; top:50%; transform:translateY(-50%); }
.alfatwa-lightbox__next{ right:8px; top:50%; transform:translateY(-50%); }
.alfatwa-lightbox__close:hover,
.alfatwa-lightbox__prev:hover,
.alfatwa-lightbox__next:hover{ background: rgba(255,255,255,.2); }
.alfatwa-lightbox__close:focus-visible,
.alfatwa-lightbox__prev:focus-visible,
.alfatwa-lightbox__next:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* --- Single video facade --- */
.single-video{ margin:16px 0; border-radius: var(--radius-xl); overflow:hidden; background:#000; aspect-ratio:16/9; position:relative; }
.single-video__facade{ position:relative; width:100%; height:100%; border:0; padding:0; cursor:pointer; background:#000; display:flex; align-items:center; justify-content:center; }
.single-video__thumb{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }
.single-video__play{ position:absolute; display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius: var(--radius-full); background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.single-video__play .material-symbols-outlined{ font-size:40px; color:#fff; }
.single-video__facade:hover .single-video__play{ background: rgba(186,26,26,.9); }
.single-video__label{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background: rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius: var(--radius-full); }
.single-video__facade:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.single-video__player{ width:100%; aspect-ratio:16/9; background:#000; }
.single-video__player iframe{ width:100%; height:100%; display:block; }
.single-video__placeholder{ width:100%; }
.single-video.is-sticky{
  position:fixed; right:24px; bottom:24px; width:360px; aspect-ratio:16/9; z-index: 90;
  border-radius: var(--radius-lg); overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.35); background:#000;
}
.single-video__close{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border:0; border-radius: var(--radius-full);
  background: rgba(0,0,0,.6); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:2;
}
.single-video.is-sticky .single-video__close{ display:inline-flex; }
.single-video__close .material-symbols-outlined{ font-size:20px; }
.single-video__close:hover{ background: rgba(186,26,26,.9); }
.single-video__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:640px){
  .single-video.is-sticky{ right:12px; left:12px; bottom:12px; width:auto; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .single-video.is-sticky{ transition:none; }
}

/* --- Galeri landing --- */
.galeri-page{ max-width: var(--container-max); margin-inline:auto; padding:24px var(--spacing-margin-desktop); }
@media (max-width:768px){ .galeri-page{ padding-inline: var(--spacing-margin-mobile); } }
.galeri-page__header{ margin-bottom:20px; }
.galeri-page__title{ font-family:var(--font-heading); font-size:32px; font-weight:700; color:var(--color-primary); margin:0; }
.galeri-page__desc{ color:var(--color-on-surface-variant); font-size:14px; margin-top:4px; }
.galeri-page__tabs{ display:inline-flex; gap:6px; padding:4px; background: var(--color-surface-container); border-radius: var(--radius-full); margin:16px 0 20px; }
.galeri-page__tab{ padding:8px 18px; border-radius: var(--radius-full); font-size:13px; font-weight:600; text-decoration:none; color:var(--color-on-surface-variant); }
.galeri-page__tab.is-active{ background: var(--color-primary); color:#fff; }
.galeri-page__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:1024px){ .galeri-page__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .galeri-page__grid{ grid-template-columns:1fr; } }
.galeri-page__empty{ text-align:center; padding:32px; background: var(--color-surface-container-lowest); border:1px solid #e6e8ef; border-radius: var(--radius-xl); color:var(--color-on-surface-variant); font-size:14px; }

@media (prefers-reduced-motion: reduce){
  .alfatwa-lightbox__inner, .single-gallery__item, .card-berita__photo-grid-img{ transition:none !important; }
}

/* ==========================================================================
   Phase L — Potensi Daerah
   ========================================================================== */
.potensi-hero{ position:relative; width:100%; min-height:420px; display:flex; align-items:center; justify-content:center; background: var(--color-primary); overflow:hidden; }
.potensi-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.potensi-hero__bg--fallback{ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-surface-tint) 100%); }
.potensi-hero__overlay{ position:absolute; inset:0; background: linear-gradient(to right, rgba(0,30,64,.85) 0%, rgba(0,30,64,.5) 60%, transparent 100%); pointer-events:none; }
.potensi-hero__inner{ position:relative; z-index:10; width:100%; max-width: var(--container-max); margin-inline:auto; padding:64px var(--spacing-margin-desktop); display:flex; flex-direction:column; gap:12px; }
@media (max-width:768px){ .potensi-hero__inner{ padding:48px var(--spacing-margin-mobile); } .potensi-hero{ min-height:360px; } }
.potensi-hero__eyebrow{ display:inline-block; padding:4px 12px; background: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius: var(--radius); width:fit-content; }
.potensi-hero__title{ font-family:var(--font-heading); font-size:40px; font-weight:700; line-height:44px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.3); margin:0; }
@media (max-width:768px){ .potensi-hero__title{ font-size:28px; line-height:34px; } }
.potensi-hero__desc{ max-width:640px; color: var(--color-surface-container-highest); font-size:16px; line-height:24px; opacity:.92; }
.potensi-hero__desc p{ margin:0 0 8px; }
.potensi-hero__desc p:last-child{ margin:0; }

.potensi-sectors{ padding:40px 0; background: var(--color-surface-container-lowest); }
.potensi-sectors__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
@media (max-width:768px){ .potensi-sectors__container{ padding-inline: var(--spacing-margin-mobile); } }
.potensi-sectors__header{ text-align:center; margin-bottom:24px; }
.potensi-sectors__title{ font-family:var(--font-heading); font-size:28px; font-weight:700; color:var(--color-primary); margin:0 0 6px; }
.potensi-sectors__subtitle{ color:var(--color-on-surface-variant); font-size:14px; margin:0; }
.potensi-sectors__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:1024px){ .potensi-sectors__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .potensi-sectors__grid{ grid-template-columns:1fr; } }
.potensi-card{ display:flex; flex-direction:column; background: var(--color-surface); border:1px solid rgba(195,198,209,.3); border-radius: var(--radius-xl); overflow:hidden; text-decoration:none; transition: border-color .2s, box-shadow .2s; }
.potensi-card:hover{ border-color: rgba(0,30,64,.5); box-shadow:0 4px 16px rgba(0,30,64,.08); }
.potensi-card__media{ position:relative; height:180px; background: var(--color-surface-container); overflow:hidden; }
.potensi-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s; }
.potensi-card:hover .potensi-card__img{ transform:scale(1.04); }
.potensi-card__icon{ position:absolute; top:12px; left:12px; width:36px; height:36px; border-radius: var(--radius-full); background: var(--color-surface-container-lowest); color:var(--color-primary); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.potensi-card__icon .material-symbols-outlined{ font-size:20px; }
.potensi-card__body{ display:flex; flex-direction:column; gap:8px; padding:16px; flex:1; }
.potensi-card__title{ font-family:var(--font-heading); font-size:18px; font-weight:700; color:var(--color-primary); line-height:22px; }
.potensi-card__desc{ font-size:13px; line-height:18px; color:var(--color-on-surface-variant); flex:1; }
.potensi-card__cta{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-secondary); }

.potensi-angka{ padding:32px 0; background: var(--color-primary); color: var(--color-on-primary); }
.potensi-angka__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
@media (max-width:768px){ .potensi-angka__container{ padding-inline: var(--spacing-margin-mobile); } }
.potensi-angka__title{ font-family:var(--font-heading); font-size:22px; font-weight:700; color:#fff; margin:0 0 20px; text-align:center; }
.potensi-angka__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .potensi-angka__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .potensi-angka__grid{ grid-template-columns:1fr; } }
.potensi-angka__card{ background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding:16px; display:flex; flex-direction:column; gap:6px; text-align:center; }
.potensi-angka__icon{ font-size:24px; color: var(--color-secondary-fixed); }
.potensi-angka__label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--color-surface-container-highest); opacity:.85; }
.potensi-angka__value{ font-family:var(--font-heading); font-size:28px; font-weight:700; color: var(--color-secondary-fixed); line-height:1; }
.potensi-angka__unit{ font-size:14px; font-weight:600; margin-left:4px; }
.potensi-angka__meta{ font-size:11px; color: var(--color-surface-dim); }

.potensi-news{ padding:32px 0; background: var(--color-surface); }
.potensi-news__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
@media (max-width:768px){ .potensi-news__container{ padding-inline: var(--spacing-margin-mobile); } }
.potensi-news__title{ font-family:var(--font-heading); font-size:22px; font-weight:700; color:var(--color-primary); margin:0 0 16px; }
.potensi-news__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:1024px){ .potensi-news__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .potensi-news__grid{ grid-template-columns:1fr; } }

.potensi-galeri{ padding:32px 0; background: var(--color-surface-container-low); }
.potensi-galeri__container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--spacing-margin-desktop); }
@media (max-width:768px){ .potensi-galeri__container{ padding-inline: var(--spacing-margin-mobile); } }
.potensi-galeri__title{ font-family:var(--font-heading); font-size:22px; font-weight:700; color:var(--color-primary); margin:0 0 16px; }
.potensi-galeri__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:1024px){ .potensi-galeri__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .potensi-galeri__grid{ grid-template-columns:1fr; } }
.potensi-galeri__cta{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; padding:10px 18px; background: var(--color-primary); color:#fff; border-radius: var(--radius); font-size:13px; font-weight:600; text-decoration:none; }
.potensi-galeri__cta:hover{ background: var(--color-primary-container); }