/*--------------------------------------------------------------
# Portal Data SIJKT — refinement layer (public pages)
# Loaded after style.css. Type roles + motion system.
# Keeps the FlexStart identity (Nunito / Open Sans, #4154f1, #012970).
--------------------------------------------------------------*/
:root {
  --brand: #4154f1;
  --ink-heading: #012970;
  --ink: #444444;
  --ink-muted: #5a6270;

  --font-heading: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type roles */
  --t-section: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --t-kpi: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --t-kpi-sm: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --t-kpi-label: 1.125rem;
  --t-lead: 1.0625rem;
  --t-table: 0.9375rem;
  --t-meta: 0.8125rem;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-ui: 200ms;
  --dur-exit: 140ms;

  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

/*--------------------------------------------------------------
# Browser surfaces
--------------------------------------------------------------*/
::selection {
  background: rgba(65, 84, 241, 0.18);
  color: var(--ink-heading);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

h1, h2, h3, .t-section, .t-kpi-label {
  text-wrap: balance;
}

/*--------------------------------------------------------------
# Type roles
--------------------------------------------------------------*/
/* Page title (hero) */
.hero h1, .hero-mid h1, .hero-long h1, .hero-tall h1 {
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Hero scope sentence under the title */
.hero-mid h1 + p, .hero-long h1 + p, .hero-tall h1 + p, .hero h1 + p {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}

/* "Tanggal data" control label = metadata role */
body:not([data-page="landing"]) .hero label:not(.input-group-text),
.hero-mid label:not(.input-group-text),
.hero-long label:not(.input-group-text),
.hero-tall label:not(.input-group-text) {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.375rem;
}

/* Section title (was <h1>, now <h2>) */
.t-section {
  font-family: var(--font-heading);
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* KPI value */
.t-kpi {
  font-family: var(--font-heading);
  font-size: var(--t-kpi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0.25rem 0;
}
.t-kpi.t-kpi--sm,
.t-kpi--sm {
  font-family: var(--font-heading);
  font-size: var(--t-kpi-sm);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
}

/* KPI label */
.t-kpi-label {
  font-family: var(--font-heading);
  font-size: var(--t-kpi-label);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-heading);
  max-width: 24ch;
  margin: 0 auto 0.25rem;
  padding: 0 0.5rem;
}

/* Landing section header: the <h2> is the title, the <p> is its lead.
   (Template inverted this: 13px uppercase heading over a 38px paragraph.) */
.section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-heading);
}
.section-header p {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-muted);
  max-width: 60ch;
  margin: 0.75rem auto 0;
}

/* Data tables: compact, aligned numerals */
table.table,
table.dataTable {
  font-size: var(--t-table);
  font-variant-numeric: tabular-nums lining-nums;
}
table.table thead th,
table.dataTable thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink-heading);
  line-height: 1.3;
}

/* Footer newsletter heading (was <h4> after an <h2>) */
.footer .footer-newsletter h3 {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink-heading);
}

/*--------------------------------------------------------------
# Motion — feedback and continuity only
--------------------------------------------------------------*/
/* Data pages are Read/Operate surfaces: content is visible on arrival.
   AOS entrance choreography only runs inside the landing hero. */
body:not([data-page="landing"]) [data-aos],
body[data-page="landing"] section:not(#hero) [data-aos] {
  transform: none !important;
  transition: none !important;
}
/* Reveal AOS-hidden elements, but keep authored inline opacity
   (watermark illustrations at 0.4, invisible KPI spacers at 0). */
body:not([data-page="landing"]) [data-aos]:not([style*="opacity"]),
body[data-page="landing"] section:not(#hero) [data-aos]:not([style*="opacity"]) {
  opacity: 1 !important;
}

/* Landing hero: one focal entrance, fast and decelerating */
body[data-page="landing"] #hero [data-aos] {
  transition-timing-function: var(--ease-out) !important;
}

/* Header: explicit properties, no `all` */
.header {
  transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}

/* Pressables: tactile feedback */
.btn,
.btn-get-started,
.btn-get-started-outline,
.btn-main,
.back-to-top,
.floating-disclaimer,
.footer .footer-newsletter form [type=submit] {
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-ui) ease,
    color var(--dur-fast) ease,
    opacity var(--dur-ui) ease,
    visibility 0s linear;
}
.btn:active,
.btn-get-started:active,
.btn-get-started-outline:active,
.btn-main:active,
.back-to-top:active,
.floating-disclaimer:active,
.footer .footer-newsletter form [type=submit]:active {
  transform: scale(0.97);
}

/* Hero button arrow: hover only where hover exists */
:is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started i,
:is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started-outline i {
  transition: transform var(--dur-fast) var(--ease-out);
}
:is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started:hover i,
:is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started-outline:hover i {
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started:hover i,
  :is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started-outline:hover i {
    transform: translateX(4px);
  }
}

/* Floating breadcrumb */
.floating-breadcrumb {
  transition: opacity var(--dur-ui) ease, visibility 0s linear var(--dur-ui), background-color var(--dur-fast) ease;
}
.floating-breadcrumb.active {
  transition: opacity var(--dur-ui) ease, visibility 0s linear 0s, background-color var(--dur-fast) ease;
}
.floating-breadcrumb p {
  transition: color var(--dur-fast) ease;
}

/* Definition / data-notes panel: enter 200ms, exit 140ms, anchored to its trigger */
.fd-content {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  cursor: auto;
  max-width: calc(100vw - 30px);
  transition:
    opacity var(--dur-exit) ease-out,
    transform var(--dur-exit) ease-out,
    visibility 0s linear var(--dur-exit);
}
.fd-content.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    visibility 0s linear 0s;
}
.mascot {
  transition: bottom var(--dur-ui) var(--ease-out);
}

/* Charts and maps keep their container height steady while content swaps */
.chart-container canvas {
  transition: opacity var(--dur-fast) ease;
}

/*--------------------------------------------------------------
# Reduced motion: keep state changes legible, remove travel
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transform: none !important;
    transition: none !important;
  }
  [data-aos]:not([style*="opacity"]) {
    opacity: 1 !important;
  }
  .btn:active,
  .btn-get-started:active,
  .btn-get-started-outline:active,
  .btn-main:active,
  .back-to-top:active,
  .floating-disclaimer:active,
  .footer .footer-newsletter form [type=submit]:active {
    transform: none;
  }
  :is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started:hover i,
  :is(.hero, .hero-mid, .hero-long, .hero-tall) .btn-get-started-outline:hover i {
    transform: none;
  }
  .fd-content,
  .fd-content.is-open {
    transform: none;
  }
  .mascot {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Distill — data first, illustrations kept but subordinate
--------------------------------------------------------------*/
/* Data pages: hero sizes to its content instead of 130–190vh */
body:not([data-page="landing"]) :is(.hero, .hero-mid, .hero-long, .hero-tall) {
  height: auto;
  min-height: 0;
  /* !important: some views inline `section { padding: 0 !important }` */
  padding: 112px 0 40px !important;
}
body:not([data-page="landing"]) :is(.hero, .hero-mid, .hero-long, .hero-tall) .hero-img img {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* KPI over an invisible 320px spacer: drop the spacer, let the figure flow */
#hero .position-relative > img[style="opacity: 0"] {
  display: none;
}
#hero .position-relative > img[style="opacity: 0"] + .position-absolute {
  position: static !important;
  top: auto !important;
  padding: 1.5rem 0 0.5rem;
}

/* KPI over a watermark illustration: keep the art, shrink the footprint */
.position-relative > img.img-fluid[style*="opacity: 0.4"] {
  max-width: 280px;
  height: auto;
}

@media (max-width: 991px) {
  body:not([data-page="landing"]) :is(.hero, .hero-mid, .hero-long, .hero-tall) {
    padding: 96px 0 32px !important;
  }
  body:not([data-page="landing"]) :is(.hero, .hero-mid, .hero-long, .hero-tall) .hero-img {
    margin-top: 0;
  }
  body:not([data-page="landing"]) :is(.hero, .hero-mid, .hero-long, .hero-tall) .hero-img img {
    max-width: 240px;
  }
  .position-relative > img.img-fluid[style*="opacity: 0.4"] {
    max-width: 220px;
  }
}

/* Landing: index of available datasets */
.data-index {
  padding: 72px 0 40px;
}
.data-index .data-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 3rem;
  margin-top: 2.5rem;
}
.data-index .data-group h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-heading);
  margin: 0 0 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #e1ecff;
}
.data-index .data-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}
.data-index .data-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color var(--dur-fast) ease;
}
.data-index .data-group a i {
  color: var(--brand);
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .data-index .data-group a:hover { color: var(--brand); }
  .data-index .data-group a:hover i { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .data-index .data-group a:hover i { transform: none; }
}

/*--------------------------------------------------------------
# Layout — stop masking overflow on data pages; tighten heading rhythm
--------------------------------------------------------------*/
/* Template clips every section (overflow:hidden), which hid fixed-width
   charts on phones. Data pages no longer animate sideways, so let real
   overflow surface (wide tables keep their own scroll containers). */
body:not([data-page="landing"]) section {
  overflow: visible;
}

/* Empty spacer rows under section titles (collapsed by main.js) */
.is-empty-spacer {
  display: none !important;
}

/* Rows placed directly in <main> (no .container) overflow by the gutter */
body:not([data-page="landing"]) #main > .row {
  margin-inline: 0;
}

/* Card grids (asosiasi, LSBU, LSP): keep gutters inside the section */
[id$="-card-section"].row {
  margin-inline: 0;
}

/* Long URLs and e-mail addresses in institution cards wrap instead of overflowing */
.card-parent p.d-flex > span,
.card-parent a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Chart flanked by prev/next buttons: let the chart shrink */
.d-flex > .chart-container {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .tab-pane.px-5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/*--------------------------------------------------------------
# Harden — keyboard navigation, data loading and failure states
--------------------------------------------------------------*/
/* Desktop dropdowns open for keyboard focus as well as hover */
@media (min-width: 992px) {
  .navbar:not(.navbar-mobile) .dropdown:focus-within > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
    /* visibility must flip immediately so the next Tab can enter the menu */
    transition: opacity var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out), visibility 0s;
  }
  .navbar:not(.navbar-mobile) .dropdown .dropdown:focus-within > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s;
  }
  .navbar:not(.navbar-mobile) .dropdown.is-dismissed > ul,
  .navbar:not(.navbar-mobile) .dropdown.is-dismissed .dropdown > ul,
  .navbar:not(.navbar-mobile) .dropdown.is-dismissed .dropdown:focus-within > ul {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }
}
@media (min-width: 992px) and (max-width: 1366px) {
  .navbar:not(.navbar-mobile) .dropdown .dropdown:focus-within > ul {
    left: -100%;
  }
}
.navbar a:focus-visible,
.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Loading: charts show a quiet shimmer until the data request settles */
@keyframes portal-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.is-loading-data .skeleton-div {
  background: linear-gradient(90deg, #f1f4fd 25%, #e6ebfb 37%, #f1f4fd 63%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: portal-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-loading-data .skeleton-div {
    animation: none;
    background: #eef2fc;
  }
}

/* Failure: one recoverable message at the top of the content */
.data-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid #f3d38c;
  border-radius: 6px;
  background: #fff8e6;
  color: #5c4300;
  font-size: 0.9375rem;
}
.data-alert-retry {
  background: var(--brand);
  color: #fff;
  border: 0;
  min-height: 36px;
  padding: 0.375rem 1rem;
}
.data-alert-retry:hover { background: #3346e0; color: #fff; }

/*--------------------------------------------------------------
# Adapt — touch targets on touch screens (desktop unchanged)
--------------------------------------------------------------*/
@media (pointer: coarse) {
  /* Form controls: 44px tall, 16px text so iOS does not zoom on focus */
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  .dataTables_wrapper input,
  .dataTables_wrapper select,
  table.dataTable thead input {
    min-height: 44px;
    font-size: 1rem;
  }

  /* DataTables pagination */
  .dataTables_wrapper .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Small buttons (chart prev/next, retry) */
  .btn-sm,
  .data-alert-retry {
    min-width: 44px;
    min-height: 44px;
  }

  /* Footer link lists and social icons */
  .footer .footer-links ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .footer .social-links a {
    width: 44px;
    height: 44px;
  }

  /* Mobile menu toggle and floating controls */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .back-to-top,
  .floating-disclaimer {
    min-width: 44px;
    height: 44px;
  }

  /* Newsletter field and button */
  .footer .footer-newsletter form input[type=email],
  .footer .footer-newsletter form [type=submit] {
    min-height: 44px;
  }
}

/*--------------------------------------------------------------
# Colorize — one blue: Bootstrap primary follows the brand
--------------------------------------------------------------*/
:root {
  --bs-primary: #4154f1;
  --bs-primary-rgb: 65, 84, 241;
  --bs-link-color: #4154f1;
  --bs-link-hover-color: #3346e0;
}
.btn-primary {
  --bs-btn-bg: #4154f1;
  --bs-btn-border-color: #4154f1;
  --bs-btn-hover-bg: #3346e0;
  --bs-btn-hover-border-color: #3346e0;
  --bs-btn-active-bg: #2c3dc9;
  --bs-btn-active-border-color: #2c3dc9;
  --bs-btn-disabled-bg: #4154f1;
  --bs-btn-disabled-border-color: #4154f1;
  --bs-btn-focus-shadow-rgb: 65, 84, 241;
}
.btn-outline-primary {
  --bs-btn-color: #4154f1;
  --bs-btn-border-color: #4154f1;
  --bs-btn-hover-bg: #4154f1;
  --bs-btn-hover-border-color: #4154f1;
  --bs-btn-active-bg: #3346e0;
  --bs-btn-active-border-color: #3346e0;
  --bs-btn-disabled-color: #4154f1;
  --bs-btn-disabled-border-color: #4154f1;
  --bs-btn-focus-shadow-rgb: 65, 84, 241;
}
.nav {
  --bs-nav-link-color: #4154f1;
  --bs-nav-link-hover-color: #3346e0;
}
.nav-pills {
  --bs-nav-pills-link-active-bg: #4154f1;
}
.pagination {
  --bs-pagination-color: #4154f1;
  --bs-pagination-hover-color: #3346e0;
  --bs-pagination-focus-color: #3346e0;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(65, 84, 241, 0.25);
  --bs-pagination-active-bg: #4154f1;
  --bs-pagination-active-border-color: #4154f1;
}
.form-control:focus,
.form-select:focus {
  border-color: #a0aaf8;
  box-shadow: 0 0 0 0.25rem rgba(65, 84, 241, 0.2);
}
.form-check-input:checked {
  background-color: #4154f1;
  border-color: #4154f1;
}
.form-check-input:focus {
  border-color: #a0aaf8;
  box-shadow: 0 0 0 0.25rem rgba(65, 84, 241, 0.2);
}

/*--------------------------------------------------------------
# Polish — focus rings the template removed
--------------------------------------------------------------*/
.faq .accordion-button:focus-visible,
.contact .php-email-form input:focus-visible,
.contact .php-email-form textarea:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(65, 84, 241, 0.25);
  border-color: #a0aaf8;
}
.faq .accordion-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# Summary figures — one unit everywhere: label → number → change
# (main.js tags .kpi-stat / .kpi-cell / .kpi-panel)
--------------------------------------------------------------*/
:root {
  --line-soft: #e6eaf5;
  --tint-brand: #eef1fd;
  --shadow-card: 0 1px 2px rgba(1, 41, 112, 0.05), 0 4px 12px -6px rgba(1, 41, 112, 0.12);
}

.kpi-stat > .t-kpi-label { margin-bottom: 2px; }
.kpi-stat > .t-kpi { margin-bottom: 0; }

.kpi-asof {
  margin: 0 auto 12px;
  text-align: center;
  font-size: var(--t-meta);
  color: var(--ink-muted);
}
.kpi-asof strong { color: var(--ink-heading); font-weight: 600; }

.kpi-panel {
  display: grid;
  grid-template-columns: repeat(var(--kpi-n, 2), minmax(0, 1fr));
  gap: 1px;
  max-width: 1040px;
  margin: 0 auto !important;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kpi-panel > .kpi-cell {
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 24px 28px;
  background: #fff;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start;
}
.kpi-panel .kpi-cell .rounded-pill,
.row:not(.kpi-panel) > .kpi-cell .rounded-pill {
  position: static !important;
  width: 100%;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  justify-content: flex-start !important;
}
.kpi-cell .kpi-stat { position: relative; z-index: 1; width: 100%; align-items: flex-start !important; }
.kpi-cell .t-kpi-label {
  max-width: none;
  margin: 0 0 4px;
  padding: 0;
  text-align: left !important;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.kpi-cell .t-kpi {
  text-align: left !important;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Summary cells hold figures only: no illustration behind or beside the data */
.kpi-cell > img { display: none !important; }
.kpi-cell > img + .position-absolute { position: static !important; }

/* A figure that stands alone (beside notes or a chart) becomes the same unit as a single card */
.row:not(.kpi-panel) > .kpi-cell { justify-content: center; }
.row:not(.kpi-panel) > .kpi-cell > .rounded-pill {
  min-height: 132px;
  padding: 24px 28px !important;
  background: #fff !important;
  border: 1px solid var(--line-soft);
  border-radius: 16px !important;
  box-shadow: var(--shadow-card);
}
.row:not(.kpi-panel) > .kpi-cell { overflow: visible; }
.row:not(.kpi-panel) > .kpi-cell > .rounded-pill { position: relative !important; }

@media (max-width: 575.98px) {
  .kpi-panel { grid-template-columns: 1fr 1fr; border-radius: 12px; }
  .kpi-panel > .kpi-cell { padding: 16px; }
  .kpi-panel > .kpi-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-panel .t-kpi-label { font-size: 0.8125rem; }
  .kpi-panel .t-kpi { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* Change since the date this visitor looked at before (neutral: the portal reports, the reader interprets) */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--ink-heading);
  background: var(--tint-brand);
  font-variant-numeric: tabular-nums;
  animation: kpi-delta-in var(--dur-ui) var(--ease-out) both;
}
.kpi-delta.is-flat { color: var(--ink-muted); background: #f1f3f7; }
.kpi-delta span[aria-hidden] { font-size: 0.625rem; }
.kpi-stat:not(.kpi-panel *) > .kpi-delta { align-self: center; }
@keyframes kpi-delta-in { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 575.98px) {
  .kpi-delta { border-radius: 8px; font-size: 0.75rem; }
}

/* While the request is open the figure is a placeholder, not a fake "0" */
.is-loading-data .kpi-stat > .t-kpi {
  color: transparent !important;
  min-width: 4ch;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f4fd 25%, #e6ebfb 37%, #f1f4fd 63%);
  background-size: 200% 100%;
  animation: portal-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-loading-data .kpi-stat > .t-kpi { animation: none; background: #eef2fc; }
}

/* The figure lands with a brief settle the moment its data arrives */
.kpi-stat > .t-kpi.is-landed { animation: kpi-land 420ms var(--ease-out) both; }
@keyframes kpi-land { from { opacity: 0.35; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .kpi-delta, .kpi-stat > .t-kpi.is-landed { animation: none; }
}

/*--------------------------------------------------------------
# Directory cards (LSP, LSBU)
--------------------------------------------------------------*/
.org-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.org-card-head { display: flex; flex-direction: column; gap: 2px; }
.org-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.org-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand);
  background: var(--tint-brand);
  white-space: nowrap;
}
.org-card-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-heading);
  text-wrap: balance;
}
.org-card-id {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.org-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.org-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-heading);
  background: var(--tint-brand);
}
.org-tag-k { font-weight: 400; color: var(--ink-muted); }
.org-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.org-stats:has(> .org-stat:only-child) { align-self: flex-start; min-width: 168px; }
.org-stat { padding: 10px 14px; background: #f8f9fe; }
.org-none { margin: 0; font-size: 0.9375rem; color: var(--ink-muted); }
.org-stat dt { font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted); }
.org-stat dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.org-contacts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: #3c4250;
}
.org-contacts li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.org-contacts i { color: #8a93a6; line-height: 1.5; }
.org-contacts span { overflow-wrap: anywhere; }
.org-contacts a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(65, 84, 241, 0.35);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .org-contacts a:hover { color: var(--brand); text-decoration-color: currentColor; }
}
@media (pointer: coarse) {
  .org-contacts { gap: 0; }
  .org-contacts li { min-height: 44px; align-items: center; }
  .org-contacts a { display: inline-flex; align-items: center; min-height: 44px; }
}
.org-empty { margin: 0; padding: 32px 0; text-align: center; color: var(--ink-muted); }

/* Progress toward a reference: a quiet meter under the percentage */
.kpi-meter {
  width: 100%;
  max-width: 240px;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.kpi-meter > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .kpi-meter > span { transition: none; } }

/* The sentence that restates the panel: body text, figures emphasised by weight only */
.kpi-note {
  max-width: 72ch;
  margin: 20px auto 0;
  text-align: center;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink);
}
.kpi-note strong { color: var(--ink-heading); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chart period stepping: small round controls instead of full-height bars */
.d-flex:has(> .chart-container) { align-items: center; gap: 8px; }
.d-flex:has(> .chart-container) > .btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border-color: var(--line-soft);
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(1, 41, 112, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  .d-flex:has(> .chart-container) > .btn:hover { border-color: var(--brand); background: var(--tint-brand); color: var(--brand); }
}
@media (pointer: coarse) {
  .d-flex:has(> .chart-container) > .btn { width: 44px; height: 44px; }
}

/* Three or more figures share the row: numbers step down a size */
.kpi-panel:not([data-kpi-n="2"]) .t-kpi { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

/* Panels that follow one another keep a gap */
#rekapitulasi-section ~ .row.kpi-panel,
.kpi-panel + .kpi-panel { margin-top: 16px !important; }

/* Empty chart state */
.chart-container.is-empty-chart { min-height: 160px; height: auto !important; }
.chart-container.is-empty-chart canvas { display: none !important; }
.chart-empty {
  margin: 0;
  padding: 56px 16px;
  text-align: center;
  color: var(--ink-muted);
  border: 1px dashed var(--line-soft);
  border-radius: 12px;
}
.d-flex:has(> .is-empty-chart) > .btn { display: none; }

/*--------------------------------------------------------------
# Tables — brand-tinted structure (colour carries structure, not decoration)
--------------------------------------------------------------*/
:root {
  --table-line: #e3e8f5;
  --table-head: #eef1fd;
  --table-head-line: #d3daf6;
  --table-zebra: #f8f9fe;
  --table-hover: #f1f4fe;
}
.table {
  --bs-table-border-color: var(--table-line);
  --bs-table-hover-bg: var(--table-hover);
  border-color: var(--table-line);
  color: var(--ink);
}
.table-bordered > :not(caption) > * > * { border-color: var(--table-line); }

table.table thead th,
table.dataTable thead th,
.dataTables_scrollHead table thead th {
  background-color: var(--table-head) !important;
  border-bottom: 1px solid var(--table-head-line) !important;
  vertical-align: middle;
}
table.table thead th .form-control { background-color: #fff; border-color: var(--table-head-line); font-weight: 400; }

table.dataTable tbody tr:nth-of-type(even) > *,
table.table:not(.dataTable) tbody tr:nth-of-type(even) > * { background-color: var(--table-zebra); }
@media (hover: hover) and (pointer: fine) {
  table.dataTable tbody tr:hover > *,
  table.table:not(.dataTable) tbody tr:hover > * { background-color: var(--table-hover); }
}

/* Summary row (tagged by main.js where the first filled cell reads "Total") */
table tr.is-total > * {
  background-color: var(--table-head) !important;
  border-top: 2px solid var(--table-head-line) !important;
  font-weight: 700;
  color: var(--ink-heading);
}

/* Sort indicators: the active direction speaks in brand blue */
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::after {
  color: var(--brand);
  opacity: 1;
}

/* Table controls and status line */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--table-line);
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_empty { padding: 32px 16px; color: var(--ink-muted); background: #fff !important; }
.dataTables_wrapper .pagination .page-link { border-color: var(--table-line); }

.org-count { margin: 0 0 4px; padding: 0 12px; font-size: 0.875rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* A percentage above 100% is shown as reported, not silently capped */
.kpi-meter.is-over { display: none; }
.kpi-over-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-muted); }

/* Floating helpers step back while a dialog is open */
body.modal-open :is(.mascot, .back-to-top, .floating-breadcrumb, .floating-disclaimer, .fd-content) {
  visibility: hidden;
}

/* Tab pills read centred at every width */
.nav-pills .nav-link { text-align: center; }

/* Pagination never pushes the page wider than the viewport */
.dataTables_wrapper .pagination { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; margin-top: 8px; }
  .dataTables_wrapper .pagination .page-link { padding-inline: 0.6rem; }
}

/*--------------------------------------------------------------
# Navigation: skip link, current page, quieter dropdown elevation
--------------------------------------------------------------*/
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink-heading);
  color: #fff;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
[tabindex="-1"]:focus { outline: none; }

.navbar a[aria-current="page"] { color: var(--brand) !important; font-weight: 700; }
@media (min-width: 992px) {
  .navbar:not(.navbar-mobile) > ul > li.is-current > a { color: var(--brand); position: relative; }
  /* Garis aktif dimulai setelah padding-left 30px agar sejajar dengan teks menu */
  .navbar:not(.navbar-mobile) > ul > li.is-current > a::after {
    content: "";
    position: absolute;
    left: 30px;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--brand);
  }
}
.navbar .dropdown ul {
  box-shadow: 0 1px 2px rgba(1, 41, 112, 0.06), 0 12px 28px -12px rgba(1, 41, 112, 0.22) !important;
  border: 1px solid var(--line-soft);
}
.navbar .dropdown li.is-current > a { color: var(--brand); font-weight: 700; }

/*--------------------------------------------------------------
# Charts & tables, distilled
--------------------------------------------------------------*/
.map-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 8px auto 0;
  font-size: var(--t-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.map-legend-ramp { width: min(240px, 50vw); height: 8px; border-radius: 999px; }
.map-legend-v { color: var(--ink-heading); font-weight: 600; }
.map-legend-k { flex-basis: 100%; text-align: center; }

.dataTables_wrapper .is-unneeded { display: none !important; }
table.dataTable td.is-num,
table.dataTable th.is-num { text-align: right !important; }
table.dataTable thead th.is-num { padding-right: 28px; }

.kpi-stat.is-zero > .t-kpi { color: var(--ink-muted) !important; }

/*--------------------------------------------------------------
# Harden: semantics without visual change, map list, empty offers
--------------------------------------------------------------*/
.tab-label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.hero-definition { font-size: var(--t-lead); line-height: 1.6; color: var(--ink); }

.map-list { max-width: 640px; margin: 12px auto 0; font-size: 0.9375rem; }
.map-list > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}
.map-list > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.map-list table { margin-top: 8px; }
.map-list td.is-num, .map-list th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.map-legend { position: relative; }

.empty-offer { margin-left: 4px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) {
  .empty-offer { display: inline-flex; align-items: center; min-height: 44px; }
}


/*--------------------------------------------------------------
# Landing: Ringkasan Data (panel)
--------------------------------------------------------------*/
.ringkasan { padding: 56px 0 8px; }
.ringkasan .section-header p { font-size: var(--t-meta); }
.ringkasan-v {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.ringkasan-k { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.ringkasan-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); font-weight: 600; color: var(--brand); }
.ringkasan.is-loading .ringkasan-v {
  color: transparent;
  width: 6ch;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f4fd 25%, #e6ebfb 37%, #f1f4fd 63%);
  background-size: 200% 100%;
  animation: portal-shimmer 1.4s linear infinite;
}
.ringkasan a { color: inherit; text-decoration: none; }
.ringkasan a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Shared press/hover behaviour (Emil: specific properties, ease-out, hover only with a fine pointer) */
.ringkasan-cell {
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.ringkasan-cell:active { transform: scale(0.98); }
.ringkasan-more i { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ringkasan-cell:hover { background-color: var(--tint-brand); }
  .ringkasan-cell:hover .ringkasan-more i { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ringkasan-cell, .ringkasan-more i { transition: none; }
  .ringkasan-cell:active { transform: none; }
  .ringkasan.is-loading .ringkasan-v { animation: none; background: #eef2fc; }
}

/* One panel, four cells: the same unit as the data-page KPI panels */
.ringkasan-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ringkasan-cell { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 20px; background: #fff; }
#ringkasan .ringkasan-v { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem); margin-bottom: 4px; }
@media (max-width: 991.98px) { .ringkasan-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ringkasan-cell { padding: 16px; } #ringkasan .ringkasan-v { font-size: clamp(1.5rem, 7vw, 2rem); } }

.ringkasan-date { font-size: 0.75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Polish: repeated directory cards sit flat on their hairline; the hero subtitle breathes */
.org-card { box-shadow: none; }
body[data-page="landing"] #hero h2 { line-height: 1.45; }

/* Pie & doughnut boxes: compact beside their table */
.chart-container.is-pie-box { max-width: 320px !important; height: 340px !important; }
@media (max-width: 575.98px) { .chart-container.is-pie-box { max-width: 280px !important; height: 320px !important; } }

/* Harden (round 2): definitions panel empty state, touch-height sortable headers, date field focus */
.fd-empty { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 415px; min-height: 200px; padding: 16px; text-align: center; color: var(--ink-muted); }
@media (pointer: coarse) {
  table.dataTable thead th.sorting,
  table.dataTable thead th.sorting_asc,
  table.dataTable thead th.sorting_desc { height: 44px; }
}
#date-filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#deskripsiTabContent:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* About this data: one quiet line under the lead */
.data-about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: var(--t-meta);
  color: var(--ink-muted);
}
.data-about-k { font-weight: 700; color: var(--ink-heading); }
.data-about a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (pointer: coarse) { .data-about a { min-height: 44px; } }
@media (max-width: 991.98px) { .data-about { justify-content: center; text-align: center; } }
#ringkasan .section-header { padding-bottom: 0; }
#ringkasan .ringkasan-panel { margin-top: 24px; }

/*--------------------------------------------------------------
# Directory (LSP, LSBU): sticky tools, share of total, reorder motion
--------------------------------------------------------------*/
.dir-toolbar-wrap {
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 5;
  background: #fff;
  transition: box-shadow var(--dur-fast) ease;
}
.dir-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0 8px;
}
.dir-sort { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.dir-sort .form-select { min-height: 48px; border-color: var(--line-soft); border-radius: 8px; font-weight: 600; color: var(--ink-heading); }
.dir-toolbar .org-count { grid-column: 1 / -1; margin: 0; padding: 0; }
@media (max-width: 575.98px) {
  .dir-toolbar { grid-template-columns: 1fr; }
  .dir-sort { justify-content: space-between; }
  .dir-sort .form-select { flex: 1; }
}

/* The leading figure of each card carries the ranking; its bar shows the real share of the total */
[data-dir-metric] .org-stat:first-child dd { font-size: 1.75rem; }
.org-share { display: grid; gap: 6px; margin-top: -4px; }
.org-share-track { display: block; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.org-share-bar {
  display: block;
  height: 100%;
  width: calc(var(--share, 0) * 100%);
  min-width: 2px;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease-out);
}
.org-share-bar.is-filled { transform: scaleX(1); }
.org-share-text { font-size: var(--t-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .org-share-bar { transform: none; transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.dir-toolbar-wrap { box-shadow: 0 1px 0 var(--line-soft), 0 10px 14px -14px rgba(1, 41, 112, 0.35); }

/*--------------------------------------------------------------
# Landing: Ringkasan Data — open row (A1) with icon accents (from D3)
--------------------------------------------------------------*/
#ringkasan .ringkasan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
#ringkasan .ringkasan-head h2 { margin: 0; font-family: var(--font-heading); font-size: var(--t-section); font-weight: 700; color: var(--ink-heading); }
#ringkasan .ringkasan-head p { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); }
#ringkasan .ringkasan-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#ringkasan .ringkasan-fig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-content: start;
  padding: 28px 24px 8px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out);
}
#ringkasan .ringkasan-fig:first-child { padding-left: 0; }
#ringkasan .ringkasan-fig + .ringkasan-fig { border-left: 1px solid var(--line-soft); }
#ringkasan .ringkasan-fig > :not(.ringkasan-ico) { grid-column: 2; }
#ringkasan .ringkasan-ico {
  grid-row: 1 / span 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tint-brand);
  color: var(--brand);
  font-size: 1.25rem;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--ease-out);
}
#ringkasan .ringkasan-fig .ringkasan-v { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); color: var(--brand); }
#ringkasan .ringkasan-fig .ringkasan-date { font-size: 0.75rem; color: var(--ink-muted); }
#ringkasan .ringkasan-more { margin-top: 4px; }
#ringkasan .ringkasan-fig:active { transform: scale(0.98); }
#ringkasan .ringkasan-fig:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
#ringkasan .ringkasan-fig:focus-visible .ringkasan-ico { background: var(--brand); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  #ringkasan .ringkasan-fig:hover .ringkasan-ico { background: var(--brand); color: #fff; transform: rotate(-6deg); }
  #ringkasan .ringkasan-fig:hover .ringkasan-more i { transform: translateX(3px); }
}
@media (max-width: 991.98px) {
  #ringkasan .ringkasan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ringkasan .ringkasan-fig { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 12px; }
  #ringkasan .ringkasan-fig > :not(.ringkasan-ico) { grid-column: 1; }
  #ringkasan .ringkasan-ico { grid-row: auto; margin-bottom: 4px; }
  #ringkasan .ringkasan-fig:nth-child(3) { padding-left: 0; border-left: 0; }
  #ringkasan .ringkasan-fig:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 575.98px) {
  #ringkasan .ringkasan-fig .ringkasan-v { font-size: clamp(1.5rem, 7vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  #ringkasan .ringkasan-fig, #ringkasan .ringkasan-ico { transition: none; }
  #ringkasan .ringkasan-fig:active, #ringkasan .ringkasan-fig:hover .ringkasan-ico { transform: none; }
}

/*--------------------------------------------------------------
# Hero actions: date field and download sit on one baseline; button shadow stays tight
--------------------------------------------------------------*/
.row:has(> [class*="col-"] #date-filter) { align-items: flex-end; }
.row:has(> [class*="col-"] #date-filter) > [class*="col-"] { margin-bottom: 1rem !important; }
.row:has(> [class*="col-"] #date-filter) .btn-get-started {
  height: 48px;
  margin-top: 0;
  padding-block: 0;
}
.hero .btn-get-started, .hero-mid .btn-get-started, .hero-long .btn-get-started, .hero-tall .btn-get-started {
  box-shadow: 0 1px 2px rgba(1, 41, 112, 0.12), 0 4px 10px -4px rgba(65, 84, 241, 0.45);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero .btn-get-started:hover, .hero-mid .btn-get-started:hover, .hero-long .btn-get-started:hover, .hero-tall .btn-get-started:hover {
    background: var(--bs-btn-hover-bg, #3346e0);
    box-shadow: 0 1px 2px rgba(1, 41, 112, 0.14), 0 6px 12px -4px rgba(65, 84, 241, 0.5);
  }
}

/*--------------------------------------------------------------
# Landing: three opening panels (Beranda → Ringkasan Data → Data yang Tersedia)
# Each is one viewport tall on large screens; main.js moves one panel per scroll gesture,
# and everything after the panels scrolls natively.
--------------------------------------------------------------*/
@media (min-width: 992px) and (min-height: 640px) {
  body[data-page="landing"] .landing-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--header-h, 90px) + 12px) 0 40px;
  }
  body[data-page="landing"] .landing-panel { padding-bottom: 24px; }
  body[data-page="landing"] #data .data-index-grid { margin-top: 24px; gap: 1.5rem 3rem; }
}
/* Sibling panels share one header voice: left-aligned title on a hairline */
body[data-page="landing"] #data .section-header {
  padding-bottom: 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
body[data-page="landing"] #data .section-header h2 { margin: 0; font-size: var(--t-section); }

/*--------------------------------------------------------------
# Ringkasan Data: dates live with each figure, shown on hover/focus (always shown on touch)
--------------------------------------------------------------*/
#ringkasan .ringkasan-hint { margin: 0; font-size: var(--t-meta); color: var(--ink-muted); }
#ringkasan .ringkasan-date { display: block; min-height: 1.35em; font-size: 0.75rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  #ringkasan .ringkasan-date {
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--dur-fast) ease, transform var(--dur-ui) var(--ease-out);
  }
  #ringkasan a:hover .ringkasan-date,
  #ringkasan a:focus-visible .ringkasan-date { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) {
  #ringkasan .ringkasan-hint { display: none; }
}
#ringkasan .eko-foot span { white-space: nowrap; }
#ringkasan .ringkasan-fig { padding-bottom: 4px; }
#ringkasan .ringkasan-more { margin-top: 0; }

/* Waiting: truthful shimmer per figure, never a fake 0 */
#ringkasan .is-pending {
  color: transparent !important;
  width: 5ch;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f4fd 25%, #e6ebfb 37%, #f1f4fd 63%);
  background-size: 200% 100%;
  animation: portal-shimmer 1.4s linear infinite;
}
#ringkasan .eko .is-pending { background: linear-gradient(90deg, #0d3480 25%, #1a4194 37%, #0d3480 63%); background-size: 200% 100%; }

/*--------------------------------------------------------------
# Ringkasan Data: ecosystem band (Asosiasi, Lembaga Sertifikasi, Material dan Peralatan)
# Navy PU owns one deliberate region; light steps of the brand ramp carry the small visuals.
--------------------------------------------------------------*/
#ringkasan {
  --eko-bg: #012970;
  --eko-line: #1c3f86;
  --eko-ink: #ffffff;
  --eko-muted: #c3cbf2;
  --eko-accent: #9aa5f7;
  --eko-track: #22468f;
  --eko-hover: #06307c;
}
#ringkasan .eko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  padding: 8px;
  background: var(--eko-bg);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(1, 41, 112, 0.05), 0 4px 12px -6px rgba(1, 41, 112, 0.12);
  color: var(--eko-ink);
}
#ringkasan .eko-group { padding: 16px 16px 8px; min-width: 0; }
#ringkasan .eko-group + .eko-group { border-left: 1px solid var(--eko-line); }
#ringkasan .eko-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 8px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--eko-ink);
}
#ringkasan .eko-group h3 i { color: var(--eko-accent); font-size: 1.125rem; }
#ringkasan .eko-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
#ringkasan .eko-fig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 8px 6px;
  border-radius: 10px;
  color: var(--eko-ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
#ringkasan .eko-fig:active { transform: scale(0.98); }
#ringkasan .eko-fig:focus-visible { outline: 2px solid var(--eko-accent); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  #ringkasan .eko-fig:hover { background-color: var(--eko-hover); }
}
#ringkasan .eko-k { font-size: var(--t-meta); font-weight: 600; color: var(--eko-muted); }
#ringkasan .eko-v {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.375rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--eko-ink);
}
#ringkasan .eko-viz { display: block; min-height: 6px; }
#ringkasan .eko-viz:empty { display: none; }
#ringkasan .eko-foot { min-height: 1.4em; font-size: var(--t-meta); line-height: 1.4; color: var(--eko-muted); font-variant-numeric: tabular-nums; }
#ringkasan .eko-foot b { color: var(--eko-ink); font-weight: 700; }
#ringkasan .eko .ringkasan-date { color: var(--eko-muted); }

/* Share meter for accreditation */
#ringkasan .eko-meter { display: block; height: 6px; border-radius: 999px; background: var(--eko-track); overflow: hidden; }
#ringkasan .eko-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--eko-accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  animation: eko-fill 900ms var(--ease-out) 650ms both;
}
@keyframes eko-fill { from { transform: scaleX(0); } }

/* One dot per institution; outlined dots are not active */
#ringkasan .eko-dots { display: flex; flex-wrap: wrap; gap: 3px; max-width: 216px; }
#ringkasan .eko-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eko-accent);
  animation: eko-dot 420ms var(--ease-out) both;
  animation-delay: calc(600ms + min(var(--i) * 7ms, 520ms));
}
#ringkasan .eko-dots i.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--eko-accent); }
@keyframes eko-dot { from { opacity: 0; transform: scale(0.4); } }

/*--------------------------------------------------------------
# Ringkasan Data: the authored arrival (once, when the panel is first seen)
# The heading is unveiled, figures rise in a short stagger, then the navy sheet is laid down left to right.
--------------------------------------------------------------*/
#ringkasan.is-armed .ringkasan-head h2 { clip-path: inset(0 0 100% 0); transform: translateY(8px); }
#ringkasan.is-armed .ringkasan-fig { opacity: 0; transform: translateY(14px); }
#ringkasan.is-armed .eko { clip-path: inset(0 100% 0 0 round 16px); }
#ringkasan.is-armed .eko-group > * { opacity: 0; transform: translateY(10px); filter: blur(4px); }
#ringkasan.is-armed:not(.is-revealed) .eko-meter i,
#ringkasan.is-armed:not(.is-revealed) .eko-dots i { animation-play-state: paused; }

#ringkasan.is-revealed .ringkasan-head h2 {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 600ms var(--ease-out), transform 600ms var(--ease-out);
}
#ringkasan.is-revealed .ringkasan-fig {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}
#ringkasan.is-revealed .ringkasan-fig:nth-child(1) { transition-delay: 80ms; }
#ringkasan.is-revealed .ringkasan-fig:nth-child(2) { transition-delay: 140ms; }
#ringkasan.is-revealed .ringkasan-fig:nth-child(3) { transition-delay: 200ms; }
#ringkasan.is-revealed .ringkasan-fig:nth-child(4) { transition-delay: 260ms; }
#ringkasan.is-revealed .eko {
  clip-path: inset(0 0 0 0 round 16px);
  transition: clip-path 900ms var(--ease-out) 260ms;
}
#ringkasan.is-revealed .eko-group > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), filter 500ms var(--ease-out);
}
#ringkasan.is-revealed .eko-group:nth-child(1) > * { transition-delay: 480ms; }
#ringkasan.is-revealed .eko-group:nth-child(2) > * { transition-delay: 560ms; }
#ringkasan.is-revealed .eko-group:nth-child(3) > * { transition-delay: 640ms; }
/* After the arrival, the press/hover feedback is immediate again */
#ringkasan.is-revealed.is-settled .ringkasan-fig { transition: transform var(--dur-press) var(--ease-out); }
#ringkasan.is-revealed.is-settled .eko-group > * { transition: none; }

@media (max-width: 991.98px) {
  #ringkasan .eko { grid-template-columns: minmax(0, 1fr); padding: 4px 8px; }
  #ringkasan .eko-group + .eko-group { border-left: 0; border-top: 1px solid var(--eko-line); }
  #ringkasan .eko-group { padding: 16px 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #ringkasan .eko-fig { transition: background-color var(--dur-fast) ease; }
  #ringkasan .eko-fig:active { transform: none; }
  #ringkasan .eko-meter i, #ringkasan .eko-dots i { animation: none; }
  #ringkasan .is-pending { animation: none; background: #eef2fc; }
  #ringkasan .eko .is-pending { background: #0d3480; }
}

/*--------------------------------------------------------------
# Panel rail: where you are among the three opening panels (large screens only)
--------------------------------------------------------------*/
.panel-rail { display: none; }
@media (min-width: 992px) and (min-height: 640px) {
  .panel-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    z-index: 990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    transform: translateY(-50%);
    transition: opacity var(--dur-ui) ease, transform 300ms var(--ease-out), visibility 0s linear 0s;
  }
  .panel-rail.is-away { opacity: 0; visibility: hidden; transform: translate(8px, -50%); transition: opacity var(--dur-exit) ease, transform var(--dur-exit) ease, visibility 0s linear var(--dur-exit); }
  .panel-rail a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding-left: 8px;
    text-decoration: none;
  }
  .panel-rail a::after {
    content: "";
    width: 3px;
    height: 28px;
    border-radius: 2px;
    background: #b9c2e6;
    transform: scaleY(0.5);
    transition: transform 300ms var(--ease-out), background-color var(--dur-ui) ease;
  }
  .panel-rail a[aria-current]::after { transform: none; background: var(--brand); }
  .panel-rail span {
    padding: 4px 8px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(1, 41, 112, 0.08), 0 4px 10px -6px rgba(1, 41, 112, 0.25);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-heading);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity var(--dur-fast) ease, transform var(--dur-ui) var(--ease-out);
    pointer-events: none;
  }
  .panel-rail a:hover span, .panel-rail a:focus-visible span { opacity: 1; transform: none; }
  .panel-rail a:focus-visible { outline: none; }
  .panel-rail a:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-rail, .panel-rail a::after, .panel-rail span { transition: none; }
}

/* Ringkasan band: drawn group icon matches the icon font; each figure carries a quiet "go" arrow */
#ringkasan .eko-group h3 .eko-svg { flex: none; width: 1.3rem; height: 1.3rem; stroke-width: 1.25; color: var(--eko-accent); }
#ringkasan .eko-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ringkasan .eko-go {
  flex: none;
  font-size: 0.875rem;
  color: var(--eko-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease;
}
#ringkasan .eko-fig:focus-visible .eko-go { color: var(--eko-ink); transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  #ringkasan .eko-fig:hover .eko-go { color: var(--eko-ink); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  #ringkasan .eko-go { transition: color var(--dur-fast) ease; }
  #ringkasan .eko-fig:hover .eko-go, #ringkasan .eko-fig:focus-visible .eko-go { transform: none; }
}

/*--------------------------------------------------------------
# Public forms (Hubungi Kami, Buletin Data): labels above fields, 16px inputs,
# errors next to the field, one status line under the form
--------------------------------------------------------------*/
:root {
  --field-line: #7c88ab;   /* 3.5:1 on white: the field edge stays visible */
  --error: #b42318;        /* 6.6:1 on white */
  --error-wash: #fdf3f2;
}
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field-error {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.45;
  color: var(--error);
  text-align: left;
}
.field-error::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field-error[hidden] { display: none; }
.field-hint { margin: 6px 0 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-muted); }
.form-note { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-muted); }

.form-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.form-status[hidden] { display: none; }
.form-status i { flex: none; font-size: 1.125rem; line-height: 1.35; }
.form-status.is-ok, .form-status.is-limited { background: var(--tint-brand); border-color: #d3daf6; color: var(--ink-heading); }
.form-status.is-ok i, .form-status.is-limited i { color: var(--brand); }
.form-status.is-failed { background: var(--error-wash); border-color: #f3c9c4; color: var(--error); }
@media (prefers-reduced-motion: no-preference) {
  .form-status:not([hidden]) { animation: form-status-in 240ms var(--ease-out); }
}
@keyframes form-status-in { from { opacity: 0; transform: translateY(-4px); } }

/* Hubungi Kami */
.contact .contact-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.contact .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact .field { min-width: 0; }
.contact .field-wide { grid-column: 1 / -1; }
.contact .field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.contact .field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-heading);
}
.contact .field input,
.contact .field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.contact .field textarea { min-height: 9.5rem; line-height: 1.6; resize: vertical; }
.contact .field input::placeholder, .contact .field textarea::placeholder { color: #6b7385; }
.contact .field input:focus-visible,
.contact .field textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(65, 84, 241, 0.22);
}
.contact .field.is-invalid input,
.contact .field.is-invalid textarea { border-color: var(--error); }
.contact .field.is-invalid input:focus-visible,
.contact .field.is-invalid textarea:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18); }
.contact .field-count { font-size: var(--t-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.contact .field-count.is-near { color: var(--ink-heading); font-weight: 700; }
.contact .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.contact .contact-actions .btn-main,
.footer .footer-newsletter .newsletter-form [type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: 4px;
  background: var(--brand);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(1, 41, 112, 0.12), 0 4px 10px -4px rgba(65, 84, 241, 0.45);
}
.contact .contact-actions .btn-main[aria-disabled="true"],
.footer .footer-newsletter .newsletter-form [type=submit][aria-disabled="true"] { opacity: 0.85; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .contact .contact-actions .btn-main:not([aria-disabled="true"]):hover,
  .footer .footer-newsletter .newsletter-form [type=submit]:not([aria-disabled="true"]):hover { background: #3346e0; }
}
.contact .contact-actions .form-note { flex: 1 1 260px; }
@media (max-width: 767.98px) {
  .contact .contact-form { padding: 20px 16px; }
  .contact .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact .contact-actions .btn-main { width: 100%; }
}

/* Buletin Data: field and button share one bordered row; messages sit under it */
.footer .footer-newsletter .newsletter-form {
  position: static;
  margin-top: 20px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
}
.footer .footer-newsletter .newsletter-row {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.footer .footer-newsletter .newsletter-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(65, 84, 241, 0.22); }
.footer .footer-newsletter .newsletter-row.is-invalid { border-color: var(--error); }
.footer .footer-newsletter .newsletter-form input[type=email] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
}
.footer .footer-newsletter .newsletter-form input[type=email]:focus { outline: none; }
.footer .footer-newsletter .newsletter-form input[type=email]::placeholder { color: #6b7385; }
.footer .footer-newsletter .newsletter-form [type=submit] {
  position: static;
  margin: 0;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  box-shadow: none;
}
.footer .footer-newsletter .newsletter-form .form-note { margin-top: 8px; }
.footer .footer-newsletter .newsletter-form .form-status { margin-top: 12px; }
@media (max-width: 380px) {
  .footer .footer-newsletter .newsletter-row { flex-direction: column; }
  .footer .footer-newsletter .newsletter-form [type=submit] { width: 100%; }
}

/* Forms, after review: DESIGN focus ring (survives forced colours), narrower measure, visible newsletter label,
   outcome box can take focus, floating widgets step aside while a form is in use */
.contact .contact-form { max-width: 680px; }
.contact .field input:focus-visible,
.contact .field textarea:focus-visible,
.footer .footer-newsletter .newsletter-row:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}
.contact .field.is-invalid input:focus-visible,
.contact .field.is-invalid textarea:focus-visible { outline-color: var(--error); box-shadow: none; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.footer .footer-newsletter h3 { margin-bottom: 6px; }
.footer .footer-newsletter .newsletter-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-heading);
}
.footer .footer-newsletter .newsletter-form { margin-top: 0; }
body:has(form[data-portal-form]:focus-within) .back-to-top,
body:has(form[data-portal-form]:focus-within) #modalButton { visibility: hidden; opacity: 0; }
@media (max-width: 767.98px) {
  .contact { padding-bottom: 120px; }
  .footer .footer-newsletter { padding-bottom: 120px; }
}
.form-status { scroll-margin-block: 16px; }
.footer .footer-newsletter .newsletter-row.is-invalid:focus-within { outline-color: var(--error); }
@media (max-width: 767.98px) {
  body.form-in-view .back-to-top,
  body.form-in-view #modalButton { visibility: hidden; opacity: 0; }
}
@media (min-width: 992px) {
  /* Heading lines up with the field label, not the bottom edge */
  .footer .footer-newsletter .col-lg-5 { padding-top: 4px; }
}
body.form-in-view #modalButton { visibility: hidden; opacity: 0; }

/*--------------------------------------------------------------
# Data page layout (prototype: SBU Masa Reguler, <main class="data-layout">)
# Reading order: local nav → trend with its three facts → compositions side by side →
# long table behind a share filter, bounded in its own scroll box.
--------------------------------------------------------------*/
.data-layout { --nav-h: 52px; padding-bottom: 96px; }
.data-layout .data-block { padding-top: 64px; scroll-margin-top: calc(var(--header-h, 80px) + var(--nav-h)); }
.data-layout .data-card { scroll-margin-top: calc(var(--header-h, 80px) + var(--nav-h) + 16px); }
body:has(.data-layout .page-nav) .floating-breadcrumb { display: none !important; }

/* Local nav */
.data-layout .page-nav {
  position: sticky;
  top: var(--header-h, 80px);
  z-index: 990;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-soft);
}
.data-layout .page-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.data-layout .page-nav ul::-webkit-scrollbar { display: none; }
.data-layout .page-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.data-layout .page-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform var(--dur-ui) var(--ease-out);
}
.data-layout .page-nav a[aria-current] { color: var(--ink-heading); }
.data-layout .page-nav a[aria-current]::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .data-layout .page-nav a:hover { color: var(--brand); } }

/* Section head: title left with a one-line purpose; tools right */
.data-layout .data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.data-layout .data-head h2 { margin: 0; text-align: left; font-family: var(--font-heading); font-weight: 700; color: var(--ink-heading); }
.data-layout .data-sub { margin: 6px 0 0; max-width: 65ch; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); }
.data-layout .data-tools { display: flex; align-items: center; gap: 12px; }

/* Segmented control */
.data-layout .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.data-layout .seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.data-layout .seg button[aria-checked="true"] { background: var(--tint-brand); color: var(--ink-heading); }
.data-layout .seg button:active { transform: scale(0.97); }
@media (pointer: coarse) { .data-layout .seg button { height: 44px; } }

/* Trend: three facts, then the chart */
.data-layout .trend-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 20px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.data-layout .trend-stats > div { padding: 14px 20px; }
.data-layout .trend-stats > div:first-child { padding-left: 0; }
.data-layout .trend-stats > div + div { border-left: 1px solid var(--line-soft); }
.data-layout .trend-stats dt { font-size: var(--t-meta); font-weight: 600; color: var(--ink-muted); }
.data-layout .trend-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; }
.data-layout .trend-v { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.data-layout .trend-meta { font-size: var(--t-meta); color: var(--ink-muted); }
.data-layout .trend-chart { position: relative; height: 360px; width: 100%; }

/* Compositions: two equal cards */
.data-layout .data-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.data-layout .data-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; }
.data-layout .data-card .data-head { margin-bottom: 8px; }
.data-layout .data-card .data-head h2 { font-size: 1.25rem; }
.data-layout .data-card-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.data-layout .data-card .chart-container,
.data-layout .data-card .chart-container.is-pie-box { position: relative; width: 100%; max-width: 260px !important; height: 230px !important; margin: 0 auto; }
.data-layout .data-card .dataTables_wrapper { margin-top: auto; }

/* Compact tables: no vertical rules, names left, numbers right */
.data-layout .data-table-compact { margin: 0 !important; border-collapse: collapse; font-size: var(--t-table); }
.data-layout .data-table-compact th,
.data-layout .data-table-compact td { padding: 10px 8px; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; text-align: left; vertical-align: middle; background: #fff; }
.data-layout .data-table-compact thead th { font-size: var(--t-meta); font-weight: 700; color: var(--ink-heading); background: var(--tint-brand) !important; border-bottom-color: var(--line-table-head, #d3daf6) !important; }
.data-layout .data-table-compact .is-total td { background: var(--tint-brand) !important; border-bottom: 0 !important; color: var(--ink-heading); }
.data-layout table .num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-layout .data-table-compact .key { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; vertical-align: -1px; }

/* Long table: share filter, one search box, bounded scroll */
.data-layout .data-search { position: relative; }
.data-layout .data-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.data-layout .data-search input {
  width: min(340px, 100%);
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--field-line, #7c88ab);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
}
.data-layout .data-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.data-layout .share-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.data-layout .share-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-content: start;
  min-height: 44px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.data-layout .share-item:active { transform: scale(0.98); }
.data-layout .share-item[aria-pressed="true"] { border-color: var(--brand); background: var(--tint-brand); }
@media (hover: hover) and (pointer: fine) { .data-layout .share-item:hover { border-color: #b9c2e6; } }
.data-layout .share-name { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.data-layout .share-val { order: 2; font-size: var(--t-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-layout .share-bar { order: 3; display: block; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.data-layout .share-bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; }
.data-layout .data-count { margin: 0 0 10px; font-size: var(--t-meta); color: var(--ink-muted); }
.data-layout .data-table-frame { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.data-layout .data-table-frame table { margin: 0 !important; }
.data-layout .data-table-frame thead th { text-align: left; }

@media (max-width: 991.98px) {
  .data-layout .data-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .data-layout { --nav-h: 48px; }
  .data-layout .data-block { padding-top: 48px; }
  .data-layout .trend-stats { grid-template-columns: minmax(0, 1fr); }
  .data-layout .trend-stats > div { padding: 12px 0; }
  .data-layout .trend-stats > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .data-layout .trend-chart { height: 280px; }
  .data-layout .data-card { padding: 16px; }
  .data-layout .data-tools, .data-layout .data-search, .data-layout .data-search input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .data-layout .page-nav a::after, .data-layout .seg button, .data-layout .share-item { transition: none; }
}
@media (max-width: 767.98px) {
  .data-layout .share-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .data-layout .share-item { padding: 8px 10px 10px; gap: 4px; }
  .data-layout .share-name { font-size: 0.875rem; }
}

/*--------------------------------------------------------------
# Data page layout — typeset (roles) and motion (prototype: SBU Masa Reguler)
--------------------------------------------------------------*/
/* Roles: Title 30/1.2 navy · Card title 20 · Lead 15 muted (pretty wrap) · Label 13/600 sentence case ·
   Figure: KPI > stat > table, never inverted · Table head 13/700 navy · codes tabular, muted */
body:has(main.data-layout) #hero label:not(.input-group-text) {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-muted);
}
.data-layout .data-head h2 { line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.data-layout .data-sub, .data-layout .data-count, .data-layout .trend-meta { text-wrap: pretty; }
.data-layout .data-table-compact thead th,
.data-layout .data-table-frame thead th {
  font-family: var(--font-heading);
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink-heading);
  vertical-align: bottom;
}
.data-layout table td { line-height: 1.45; }
.data-layout table .code { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-muted); }
.data-layout #sub-klasifikasi-sertifikat td:nth-child(3) .code { color: var(--ink-heading); }
.data-layout .data-table-compact .is-total td { font-weight: 700; }
.data-layout .share-val b { margin-right: 4px; font-weight: 700; color: var(--ink-heading); }
.data-layout .trend-v { letter-spacing: -0.01em; }
@media (max-width: 767.98px) {
  /* The page's headline figures stay the largest numbers on the page */
  body:has(main.data-layout) #rekapitulasi-section .t-kpi { font-size: clamp(2rem, 8vw, 2.5rem) !important; }
  .data-layout .trend-v { font-size: 1.5rem; }
  .data-layout .data-head h2 { font-size: 1.5rem; }
  .data-layout .data-card .data-head h2 { font-size: 1.125rem; }
}

/* Motion: nav indicator slides; segmented thumb slides; share bars fill once; rows settle after a filter */
.data-layout .page-nav ul { position: relative; }
.data-layout .page-nav a::after { content: none; }
.data-layout .page-nav-ind {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 2px;
  background: var(--brand);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms var(--ease-out), opacity var(--dur-ui) ease;
}
.data-layout .seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; }
.data-layout .seg button { position: relative; z-index: 1; justify-content: center; }
.data-layout .seg button[aria-checked="true"] { background: none; }
.data-layout .seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 7px;
  background: var(--tint-brand);
  transition: transform 240ms var(--ease-out);
}
.data-layout .chart-container canvas { transition: opacity 200ms ease, filter 200ms ease; }
.data-layout .chart-container.is-swapping canvas { opacity: 0.25; filter: blur(2px); transition: none; }

/* The one authored moment: the trend is unveiled along the time axis */
.data-layout .trend-chart.is-armed { clip-path: inset(0 100% 0 0); }
.data-layout .trend-chart.is-armed.is-drawn { clip-path: inset(0 0 0 0); transition: clip-path 850ms cubic-bezier(0.65, 0, 0.35, 1); }

.data-layout .share-bar i { transform: scaleX(0); }
.data-layout .share-filter.is-shown .share-bar i { transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease-out); }
.data-layout .share-filter.is-shown .share-item:nth-child(2) .share-bar i { transition-delay: 40ms; }
.data-layout .share-filter.is-shown .share-item:nth-child(3) .share-bar i { transition-delay: 80ms; }
.data-layout .share-filter.is-shown .share-item:nth-child(4) .share-bar i { transition-delay: 120ms; }
.data-layout .share-filter.is-shown .share-item:nth-child(n+5) .share-bar i { transition-delay: 160ms; }

.data-layout tbody.is-updating tr { animation: rows-settle 220ms var(--ease-out); }
@keyframes rows-settle { from { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .data-layout .page-nav-ind, .data-layout .seg-thumb, .data-layout .chart-container canvas { transition: none; }
  .data-layout .trend-chart.is-armed { clip-path: none; }
  .data-layout .share-bar i { transform: scaleX(var(--p, 0)); transition: none !important; }
  .data-layout tbody.is-updating tr { animation: none; }
}

/*--------------------------------------------------------------
# Data page layout — map with ranking, three composition cards (prototype: BUJK Masa Reguler)
--------------------------------------------------------------*/
.data-layout .map-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.data-layout .map-pane { min-width: 0; }
.data-layout .map-list { display: none; } /* the ranking beside the map replaces the collapsed list */
.data-layout .rank-pane { min-width: 0; }
.data-layout .rank-title { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ink-heading); }
.data-layout .rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.data-layout .rank-list.is-open { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.data-layout .rank-list li { counter-increment: rank; }
.data-layout .rank-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas: "no name val" ". bar bar";
  align-items: baseline;
  gap: 2px 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 8px 10px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.data-layout .rank-item::before { content: counter(rank); grid-area: no; font-size: var(--t-meta); font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; }
.data-layout .rank-item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .data-layout .rank-item:hover { background: var(--tint-brand); } }
.data-layout .rank-name { grid-area: name; font-size: 0.9375rem; font-weight: 600; color: var(--ink-heading); overflow-wrap: anywhere; }
.data-layout .rank-val { grid-area: val; font-size: var(--t-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-layout .rank-val b { margin-right: 4px; color: var(--ink-heading); }
.data-layout .rank-item .share-bar { grid-area: bar; }
.data-layout .rank-more {
  min-height: 44px;
  margin-top: 6px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
}
.data-layout .rank-more:focus-visible, .data-layout .rank-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.data-layout .rank-note { margin: 10px 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }

/* Rank bars fill once, top first (same Share Meter as the classification filter) */
.data-layout .rank-list .share-bar i { transform: scaleX(0); }
.data-layout .rank-list.is-shown .share-bar i { transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease-out); }
.data-layout .rank-list.is-shown li:nth-child(2) .share-bar i { transition-delay: 40ms; }
.data-layout .rank-list.is-shown li:nth-child(3) .share-bar i { transition-delay: 80ms; }
.data-layout .rank-list.is-shown li:nth-child(4) .share-bar i { transition-delay: 120ms; }
.data-layout .rank-list.is-shown li:nth-child(5) .share-bar i { transition-delay: 160ms; }
.data-layout .rank-list.is-shown li:nth-child(n+6) .share-bar i { transition-delay: 200ms; }

/* Three cards in a row on wide screens */
@media (min-width: 1200px) { .data-layout .data-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .data-layout .data-trio > :last-child { grid-column: 1 / -1; } }
.data-layout .data-card .chart-container:not(.is-pie-box) { position: relative; width: 100%; height: 230px; }

/* Province detail modal */
.modal .modal-sub { margin: 0 0 12px; font-size: 0.9375rem; color: var(--ink-muted); }
.modal .modal-table { width: 100%; font-size: var(--t-table); }
.modal .modal-table th, .modal .modal-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.modal .modal-table thead th { font-family: var(--font-heading); font-size: var(--t-meta); font-weight: 700; color: var(--ink-heading); background: var(--tint-brand); }
.modal .modal-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.modal .modal-table .is-total td { background: var(--tint-brand); color: var(--ink-heading); }

@media (max-width: 991.98px) {
  .data-layout .map-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .data-layout .rank-list .share-bar i { transform: scaleX(var(--p, 0)); transition: none !important; }
  .data-layout .rank-item { transition: none; }
}
.data-layout .data-note { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
/* Sorting is off on these tables: drop the space DataTables keeps for sort icons so headers line up with their numbers */
.data-layout table.dataTable thead > tr > th.sorting_disabled { padding-right: 8px !important; }
.data-layout table.dataTable thead > tr > th.sorting_disabled::before,
.data-layout table.dataTable thead > tr > th.sorting_disabled::after { display: none; }
@media (max-width: 767.98px) {
  /* Indonesia is wide: on a phone the map needs far less height */
  .data-layout .map-pane > [id] { height: 260px !important; }
}
/* A single composition: chart beside its table */
@media (min-width: 992px) {
  .data-layout .data-card.is-wide .data-card-body { flex-direction: row; align-items: center; gap: 40px; }
  .data-layout .data-card.is-wide .chart-container { flex: none; width: 300px; max-width: 300px !important; margin: 0; }
  .data-layout .data-card.is-wide .data-card-body > :not(.chart-container) { flex: 1; min-width: 0; }
  .data-layout .data-card.is-wide .dataTables_wrapper { margin-top: 0; }
}
.data-layout .data-pair.is-single { grid-template-columns: minmax(0, 1fr); }
.data-layout .data-card .dataTables_wrapper { overflow-x: auto; }
@media (max-width: 575.98px) {
  .data-layout .data-table-compact th, .data-layout .data-table-compact td { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 992px) {
  /* Wide card: chart on the left spanning the table and its note */
  .data-layout .data-card.is-wide .data-card-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; row-gap: 12px; align-items: center; }
  .data-layout .data-card.is-wide .data-card-body > .chart-container { grid-row: 1 / span 2; }
  .data-layout .data-card.is-wide .data-card-body > .data-note { grid-column: 2; align-self: start; }
}
/* Top-N chart beside a long, paged table */
@media (min-width: 992px) {
  .data-layout .data-card.is-split .data-card-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
}
.data-layout .data-card.is-split .chart-container:not(.is-pie-box) { height: 460px !important; max-width: none !important; }
.data-layout .data-card .dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
.data-layout .data-card .dataTables_wrapper .dataTables_filter input { min-height: 40px; border-radius: 8px; }
/* Data notes: short caveats per group, flat on hairlines */
.data-layout .notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.data-layout .notes-grid > li { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; }
.data-layout .notes-grid h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ink-heading); }
.data-layout .notes-grid ul { margin: 0; padding-left: 1.1em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink); }
.data-layout .notes-grid li li + li { margin-top: 4px; }

/* Sections that keep their SKA/SKT tabs: tabs read as a segmented switch, titles sit left */
.data-layout .data-tabs > .container > .row > [class*="col-"] { padding: 0 !important; }
.data-layout .data-tabs .nav-pills {
  display: inline-flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
}
.data-layout .data-tabs .nav-pills .nav-link {
  flex: none !important;
  margin: 0 !important;
  padding: 8px 16px;
  border: 0 !important;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.data-layout .data-tabs .nav-pills .nav-link.active { background: var(--tint-brand); color: var(--ink-heading); }
.data-layout .data-tabs .tab-pane { padding: 0 !important; }
.data-layout .data-tabs .tab-pane > .container { padding: 0; max-width: none; }
.data-layout .data-tabs h2.t-section { text-align: left !important; margin: 20px 0 16px !important; }
.data-layout .data-tabs .row > .offset-md-2:empty { display: none; }
.data-layout select.form-select-sm[id^="select-chart-type"] { width: auto !important; min-width: 160px; margin: 0 0 12px !important; }
.data-layout .data-tabs > .container > .row,
.data-layout .data-tabs .tab-pane > .container > .row { margin-left: 0; margin-right: 0; }
@media (max-width: 575.98px) {
  .data-layout .data-tabs .nav-pills { display: flex; width: 100%; flex-wrap: nowrap; }
  .data-layout .data-tabs .nav-pills .nav-link { flex: 1 1 0 !important; min-width: 0; white-space: normal; text-align: center; padding: 8px 10px; }
}
.data-layout .data-tabs .nav-pills .nav-link .tab-label { font-size: inherit; font-weight: inherit; }
.data-layout select.form-select-sm[id^="select-chart-type"] { align-self: flex-start; }

/* In-place sections on data-layout pages: same head voice and rhythm without rebuilding their insides */
.data-layout .data-block h2.t-section.text-center { text-align: left !important; margin: 0 0 16px !important; }
.data-layout .data-block p.text-center.text-muted { text-align: left !important; }
.data-layout .data-block .offset-md-2:empty,
.data-layout .data-block .row > .offset-md-2:not(:has(*:not(br))) { display: none; }
.data-layout .data-block .row > [class*="col-"].offset-md-2 { margin-left: 0; width: 100%; padding-top: 0 !important; }
/* KPI panels inside a section line up with the section head */
.data-layout .data-block .kpi-panel { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.data-layout .data-block .kpi-note { text-align: left !important; margin-left: 0 !important; max-width: 75ch; }
.data-layout .data-block .chart-empty, .data-layout .data-block .chart-container.is-empty-chart { margin-left: 0; margin-right: 0; }
.data-layout .data-block .kpi-note { margin-bottom: 24px; }

/* "Top 15" cards: fixed 40px rows (bars line up with them), one-line names, compact paging */
.data-layout .data-card.is-split .data-head { align-items: flex-end; }
.data-layout .data-card.is-split table.dataTable { table-layout: fixed; width: 100% !important; }
.data-layout .data-card.is-split tbody td {
  height: 40px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-layout .data-card.is-split thead th { height: 44px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-layout .data-card.is-split thead th.num { width: 132px; }
.data-layout .data-card.is-split thead th.num:last-child { width: 76px; }
.data-layout .data-card.is-split thead th:nth-child(2):not(.num) { width: 64px; }
.data-layout .data-card.is-split .chart-container:not(.is-pie-box) { height: auto; }
.data-layout .data-card.is-split .dataTables_info { padding-top: 12px !important; font-size: var(--t-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.data-layout .data-card.is-split .dataTables_paginate { padding-top: 6px !important; }
.data-layout .data-card.is-split .dataTables_paginate .paginate_button { min-height: 40px; }
.data-layout .data-card.is-split .data-search input { width: min(280px, 100%); }
@media (min-width: 992px) {
  /* Table first (names, numbers), bars beside it as the same rows drawn */
  .data-layout .data-card.is-split .data-card-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
  .data-layout .data-card.is-split .data-card-body > .chart-container { order: 2; }
}
.data-layout .data-card.is-split thead th:nth-child(2):not(.num) { width: 104px; }
.data-layout .data-card.is-split thead th.num { width: 120px; }
@media (min-width: 992px) {
  .data-layout .data-card.is-split .data-card-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.data-layout .data-card.is-split thead th:nth-child(2):not(.num) { width: 96px; }
.data-layout .data-card.is-split thead th.num { width: 112px; }
.data-layout .data-card.is-split thead th.num:last-child { width: 72px; }
/* Column titles may wrap rather than lose words; the bars read the head height, so rows stay aligned */
.data-layout .data-card.is-split thead th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; height: auto; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 991.98px) {
  /* Phones: the table stands on its own, so names wrap instead of being cut */
  .data-layout .data-card.is-split table.dataTable { table-layout: auto; }
  .data-layout .data-card.is-split tbody td { height: auto; padding-top: 10px !important; padding-bottom: 10px !important; white-space: normal; overflow: visible; }
  .data-layout .data-card.is-split thead th.num, .data-layout .data-card.is-split thead th.num:last-child,
  .data-layout .data-card.is-split thead th:nth-child(2):not(.num) { width: auto; }
}


/*--------------------------------------------------------------
# Profil LSP: schemes vs SKK per LSP (scatter)
--------------------------------------------------------------*/
.lsp-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--t-meta); color: var(--ink-muted); }
.lsp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.lsp-legend span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.lsp-scatter { position: relative; height: 460px; }
.lsp-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-muted); }
@media (max-width: 767.98px) { .lsp-scatter { height: 340px; } }

/*--------------------------------------------------------------
# Directory pages (Asosiasi BU/Profesi, LSBU, LSP): one toolbar, compact cards, 3 columns
--------------------------------------------------------------*/
/* Toolbar: search | status (asosiasi) | sort, count below */
.dir-toolbar.dir-toolbar-3 { grid-template-columns: minmax(0, 1fr) auto auto; }
.data-layout .seg.dir-status { display: inline-flex; grid-template-columns: none; }
.data-layout .seg.dir-status button { height: 40px; padding: 0 14px; }
.data-layout .seg.dir-status .seg-thumb { width: auto; transition: transform 240ms var(--ease-out); }
@media (max-width: 991.98px) {
  .dir-toolbar.dir-toolbar-3 { grid-template-columns: minmax(0, 1fr) auto; }
  .dir-toolbar.dir-toolbar-3 .dir-status { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 575.98px) {
  .dir-toolbar.dir-toolbar-3 { grid-template-columns: minmax(0, 1fr); }
  .data-layout .seg.dir-status { width: 100%; }
  .data-layout .seg.dir-status button { flex: 1; }
}

/* Cards: same order of reading, less height */
.org-grid { --bs-gutter-y: 1rem; }
.org-grid .org-card { gap: 12px; padding: 18px 20px; border-radius: 14px; }
.org-grid .org-card-name { font-size: 1.0625rem; line-height: 1.35; text-wrap: balance; }
.org-grid .org-card-id { font-size: var(--t-meta); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.org-grid .org-tags { gap: 4px; }
.org-grid .org-tag { font-size: 0.75rem; padding: 2px 8px; }
.org-grid .org-stats { border-radius: 10px; }
.org-grid .org-stat { padding: 8px 12px; }
.org-grid .org-stat dd { font-size: 1.375rem; line-height: 1.15; }
.org-grid .org-share { margin-top: -2px; gap: 4px; }
.org-grid .org-share-text { font-size: 0.75rem; }

/* Contacts flow as one block; the address is the only long line, kept to two lines */
.org-grid .org-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}
.org-grid .org-contacts li { display: inline-flex; grid-template-columns: none; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.org-grid .org-contacts li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-grid .org-contacts li.is-address { flex-basis: 100%; }
.org-grid .org-contacts li.is-address > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: var(--ink-muted); }
.org-grid .org-contacts i { font-size: 0.8125rem; }
.org-grid .org-none { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--t-meta); }

/* Motion: the list arrives once in a short cascade; after a filter the remaining cards settle in */
.org-grid.is-armed:not(.is-arrived) .card-parent { opacity: 0; transform: translateY(8px); }
.org-grid.is-armed.is-arrived .card-parent { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out) var(--d, 0ms), transform 520ms var(--ease-out) var(--d, 0ms); }
.org-grid.is-updating .card-parent:not([hidden]) { animation: org-settle 260ms var(--ease-out); }
@keyframes org-settle { from { opacity: 0.3; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .org-grid.is-armed .card-parent { opacity: 1 !important; transform: none !important; transition: none !important; }
  .org-grid.is-updating .card-parent { animation: none; }
}
.org-grid .org-contacts { align-content: flex-start; }
@media (pointer: coarse) {
  /* Links keep their 44px touch height; plain-text rows match it so the rhythm stays even */
  .org-grid .org-contacts { row-gap: 0; }
  .org-grid .org-contacts li { min-height: 44px; align-items: center; }
  .org-grid .org-contacts li.is-address { min-height: 0; padding-top: 6px; align-items: flex-start; }
}