/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Gold accent family — #f0b100 is the vivid gold used on dark surfaces
     (badges, active states, the nav underline indicator); #d6a329 is the same
     hue shifted darker for legible text/accents on light surfaces (already
     used this way by the "Tentang" dropdown before these tokens existed). */
  --color-gold-accent: #f0b100;
  --color-gold-accent-ink: #d6a329;
  --color-gold-tint: rgba(214, 163, 41, 0.08);
  --color-text-muted: #667085;
  --radius-dropdown: 10px;
  /* Theme for the date-field calendar popup (css/date-field.css); it renders on
     <body>, so the tokens have to live on :root. */
  --df-accent: #075985;
  --df-accent-ink: #d08700;
}

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

html {
  scroll-behavior: smooth;
}

/* Nav links jump to these homepage sections (#siapa-kami etc.) — offset the
   scroll target so the fixed navbar doesn't cover the section heading. */
#siapa-kami,
#kapabilitas,
#model-operasi-kami,
#solusi,
#mulai-percakapan {
  scroll-margin-top: 96px;
}

body {
  font-family: 'Inter', sans-serif;
  color: #101828;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

.landing-page {
  width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 9999px;
  font: 600 14px/150% 'Inter', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn--primary {
  background: #f0b100;
  color: #000000;
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn__icon {
  width: 14px;
  height: 14px;
}

/* Homepage hero's main CTA: the arrow nudges right on hover. */
.hero__cta-main .btn__icon {
  transition: transform 0.2s ease;
}

.hero__cta-main:hover .btn__icon,
.hero__cta-main:focus-visible .btn__icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta-main .btn__icon {
    transition: none;
  }
}

.btn--outline {
  border-color: #e5e5e5;
  color: #ffffff;
  background: transparent;
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn--outline-light.btn--sm {
  border: 1px solid #e5e5e5;
  color: #ffffff;
  min-height: 40px;
  padding: 6px 16px;
}

.btn--outline-light.btn--sm:hover {
  background: rgba(255, 255, 255, 0.1);
}

.navbar.is-scrolled .btn--outline-light.btn--sm {
  border-color: #262626;
  color: #262626;
}

.navbar.is-scrolled .btn--outline-light.btn--sm:hover {
  background: rgba(38, 38, 38, 0.06);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.navbar.is-scrolled {
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Pages with no hero photo behind the navbar (e.g. the article detail page)
   render body.navbar-dark so the navbar keeps its normal white-text styling
   but on a navy background instead of transparent — otherwise that white
   text is invisible against the page's white background until scrolled. */
body.navbar-dark .navbar:not(.is-scrolled) {
  background: #162456;
}

body.nav-open {
  overflow: hidden;
}

.navbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(20px, 6vw, 100px);
  flex-wrap: wrap;
}

.navbar__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}

.navbar__logo {
  height: 30px;
  width: auto;
}

.navbar__logo--color {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.navbar__logo--white {
  transition: opacity 0.25s ease;
}

.navbar.is-scrolled .navbar__logo--white {
  opacity: 0;
}

.navbar.is-scrolled .navbar__logo--color {
  opacity: 1;
}

.navbar__divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
  flex: none;
}

.navbar__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 24px;
}

.navbar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  background: transparent;
  color: #ffffff;
}

.navbar__burger-icon--close {
  display: none;
}

body.nav-open .navbar__burger-icon--open {
  display: none;
}

body.nav-open .navbar__burger-icon--close {
  display: block;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.navbar__link {
  position: relative;
  font: 600 14px/20px 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 9999px;
  background: var(--color-gold-accent);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar__link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Open dropdown already gets the gold text color as its "active" cue, so
   the underline is redundant — suppress it here (after the :hover rule
   above, same specificity, so this wins even while the trigger is hovered). */
.nav-dropdown__trigger[aria-expanded='true']::after {
  opacity: 0;
  transform: scaleX(0.6);
}

.navbar.is-scrolled .navbar__link,
.navbar.is-scrolled .navbar__burger {
  color: #262626;
}

.navbar.is-scrolled .navbar__burger {
  border-color: rgba(38, 38, 38, 0.35);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

/* Extra specificity (.navbar__link + .nav-dropdown__trigger) so this beats
   .navbar.is-scrolled .navbar__link regardless of scroll state or source order. */
.navbar__link.nav-dropdown__trigger[aria-expanded='true'] {
  color: var(--color-gold-accent-ink);
}

.nav-dropdown__chevron {
  transition: transform 0.15s ease;
}

.nav-dropdown__trigger[aria-expanded='true'] .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  display: none;
  flex-direction: column;
}

/* Trigger and panel are siblings inside .nav-dropdown, so aria-expanded on the
   trigger — the single source of truth for open/closed — can drive the panel's
   visibility directly via the general sibling combinator, no JS-toggled class needed. */
.nav-dropdown__trigger[aria-expanded='true'] ~ .nav-dropdown__panel {
  display: flex;
}

.nav-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 500 14px/150% 'Inter', sans-serif;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-dropdown__item-desc {
  font-size: 11px;
  line-height: 140%;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.nav-dropdown__item:hover {
  opacity: 0.8;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  padding: 2px;
}

.lang-toggle__option {
  border: 0;
  background: transparent;
  width: 33px;
  height: 33px;
  border-radius: 9999px;
  font: 600 12px/150% 'Inter', sans-serif;
  color: #303030;
}

.lang-toggle__option.is-active {
  background: #f0b100;
  color: #000000;
}

.navbar.is-scrolled .lang-toggle {
  background: #162456;
  border-color: #162456;
}

.navbar.is-scrolled .lang-toggle__option:not(.is-active) {
  color: #ffffff;
}

/* ==========================================================================
   Hero group (nav + full-bleed hero slider)
   ========================================================================== */

.hero-group {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-carousel {
  position: relative;
  outline: none;
}

.hero-carousel:focus-visible {
  outline: 2px solid #f0b100;
  outline-offset: -2px;
}

/* The viewport that clips the sliding track — height comes entirely from
   .hero-slides__track's flex children below, so it's always exactly as
   tall as the tallest of the 3 slides, no jump when switching. */
.hero-slides {
  position: relative;
  overflow: hidden;
}

/* JS sets --hero-active-index (0/1/2) on this element and the transform
   does the sliding. align-items defaults to stretch, which is what keeps
   every slide the same height as the tallest sibling automatically —
   no manual per-slide height tuning needed. */
.hero-slides__track {
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--hero-active-index, 0) * -100%));
  transition: transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides__track {
    transition: none;
  }
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  /* Full initial viewport, not a fixed px floor — a fixed number either
     leaves a sliver of the next section visible on tall screens (shorter
     than the viewport) or pushes the dots below the fold on short ones
     (taller than the viewport). 100vh first as a fallback for browsers
     without svh support; 100svh (excludes a collapsible mobile browser
     bar) wins where supported. See the @media (max-height: 760px) block
     below for how short viewports keep content from exceeding this. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* 84px clears the fixed navbar, 44px is this slide's own top padding;
     104px at the bottom leaves room for .hero-carousel__dots. */
  padding: 128px clamp(20px, 6vw, 80px) 104px;
  text-align: center;
}

@media (max-height: 760px) {
  .hero-slide {
    gap: 16px;
    padding: 100px clamp(20px, 6vw, 80px) 84px;
  }

  .hero-slide__body {
    gap: 16px;
  }

  .hero__heading {
    /* Still clearly the largest element on the slide (badge is 18px,
       subtext is 18px, stats values are 20px) — just no longer fighting a
       short viewport for space. */
    font-size: clamp(28px, 4vw, 48px);
  }

  .hero-slide__stats {
    padding: 16px 20px;
    gap: 14px 24px;
  }
}

.hero-slide__bg {
  /* Ignores .hero-slide's own padding by design — an absolutely positioned
     box is offset from its containing block's padding edge, so inset:0 here
     fills the slide corner-to-corner, extending behind the fixed navbar
     exactly like the old .hero-group__bg did. */
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0f172a;
  overflow: hidden; /* clips the CMS zoom (scaled ::before) to this slide */
}

/* Photo and dark scrim as separate layers so the CMS "opacity banner"
   setting fades only the photo (into the navy base above), never the scrim
   that keeps the text readable. Both custom properties are set inline per
   .hero-slide in home.ejs from CMS › Hero Beranda. */
.hero-slide__bg::before,
.hero-slide__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hero-slide__bg::before {
  background-image: var(--hero-slide-bg);
  background-size: cover;
  /* Framing from CMS › Hero Beranda: on landscape screens the position the
     editor dragged the preview to (--…-pan), on portrait screens the
     focal-point grid (--…-position, media query below). Zoom is centred on
     whichever applies. */
  background-position: var(--hero-slide-bg-pan, center);
  opacity: var(--hero-slide-bg-opacity, 1);
  transform: scale(var(--hero-slide-bg-zoom, 1));
  transform-origin: var(--hero-slide-bg-pan, center);
}

@media (max-aspect-ratio: 1/1) {
  .hero-slide__bg::before {
    background-position: var(--hero-slide-bg-position, center);
    transform-origin: var(--hero-slide-bg-position, center);
  }
}

/* Lighter toward the bottom so the banner's detail (charts, devices) reads
   through; the top stays close to the old flat 0.43 for the navbar and
   headline. */
.hero-slide__bg::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.29) 100%);
}

.hero-slide__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 820px;
}

.hero__badge {
  font: 600 18px/120% 'Inter', sans-serif;
  color: #f0b100;
}

.hero__heading {
  font: 700 clamp(32px, 5vw, 60px) / 120% 'Inter', sans-serif;
  color: #ffffff;
}

.hero__heading-dot {
  color: #f0b100;
}

.hero__subtext {
  font: 400 18px/150% 'Inter', sans-serif;
  color: #ffffff;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Slide 3 is just a headline + one CTA — narrower than the other slides'
   820px so the short copy doesn't stretch edge to edge. */
.hero-slide__body--cta {
  max-width: 560px;
}

/* ==========================================================================
   Hero slide 1 — founder stats (glass panel on the photo, replaces the old
   white card below the hero)
   ========================================================================== */

/* max-width is wider than .hero-slide__body's 820px on purpose — this panel
   is now a sibling of .hero-slide__body (not nested inside it, see
   home.ejs), specifically so it isn't capped by the text column's width and
   can fit all 4 stats on one row on desktop instead of wrapping 3+1. */
.hero-slide__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 32px;
  padding: 18px 28px;
  width: 100%;
  max-width: 960px;
  /* Dark glass rather than 8% white: stays legible over a brighter banner
     (lighter scrim, CMS opacity/zoom) without hiding it. */
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.hero-slide__stat {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.hero-slide__stat-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-slide__stat-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #f0b100;
}

.hero-slide__stat-value {
  font: 700 20px/120% 'Inter', sans-serif;
  color: #ffffff;
}

.hero-slide__stat-desc {
  font: 400 13px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

/* Strip mode "Market Update" (partials/hero-strip.ejs): slide 2's tiles in
   the same glass panel, the whole panel linking to /data. */
.hero-slide__stats--market {
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.hero-slide__stats--market:hover,
.hero-slide__stats--market:focus-visible {
  border-color: rgba(240, 177, 0, 0.6);
}

.hero-slide__stats-eyebrow {
  flex: 0 0 auto;
  font: 600 11px/120% 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-accent);
}

/* ==========================================================================
   Hero slide 1 — strip mode "Artikel pilihan" (partials/hero-strip.ejs,
   public/js/hero-strip.js). Same dark-glass card as the stats on the photo.
   --photo: article photo on the left (slow Ken Burns zoom under a thin navy
   wash), copy on the right. --plain (no photo): the same dark glass with a
   slowly drifting grid + gold accent; the title is the focal point. Every
   card has the gold "Wajib Baca" folder tab on its top-left corner.

   Motion (transform/opacity only; public/js/hero-strip.js drives the
   classes, nothing moves without it or under prefers-reduced-motion):
     .is-armed     JS is in charge: reveal items start hidden, the looping
                   animations are set up but paused;
     .is-revealed  added once, the first time the card is on screen: the
                   badge, category, title, description and CTA fade + rise
                   12px one after another (80ms apart);
     .is-inview    toggled while the card is on screen: the loops — Ken
                   Burns on the photo (25% over 20s, back and forth), the badge
                   shimmer (every 3s), the grid drift (30s) — only run then.
   ========================================================================== */

/* No overflow:hidden on the card itself — the badge tab sticks out above
   it; the photo and the grid clip to the rounded corners on their own. */
.hero-feature {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 960px;
  min-height: 168px;
  margin-top: 26px; /* room for the badge tab */
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* The hover shadow is a layer faded in with opacity (cheaper than
   transitioning box-shadow). z-index -1 keeps it behind the card's content
   (the card's backdrop-filter makes it its own stacking context). */
.hero-feature::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Hover: lifts 4px, deeper shadow, brighter gold border. */
.hero-feature:hover,
.hero-feature:focus-visible {
  border-color: rgba(240, 177, 0, 0.95);
  transform: translateY(-4px);
}

.hero-feature:hover::after,
.hero-feature:focus-visible::after {
  opacity: 1;
}

.hero-feature:focus-visible {
  outline: 2px solid var(--color-gold-accent);
  outline-offset: 3px;
}

/* "Wajib Baca" / "Must Read": a gold folder tab attached to the card's top
   edge at the left, rounded on top only — a different shape and colour from
   the category label below it. */
.hero-feature__badge {
  position: absolute;
  z-index: 2;
  /* Sits on the card's top edge via `bottom`, not a transform, so the
     reveal's translateY is free to animate it. */
  bottom: calc(100% - 1px);
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden; /* clips the shimmer */
  padding: 6px 14px 5px 12px;
  background: var(--color-gold-accent-ink);
  border-radius: 9px 9px 0 0;
  box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.45);
  font: 800 11px/120% 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #162456;
}

.hero-feature__badge-icon {
  flex: none;
}

/* Shimmer: a bright diagonal line sweeps across the badge, then rests —
   one ~1s sweep every 3s while the card is on screen. */
.hero-feature__badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}

.hero-feature.is-armed .hero-feature__badge::after {
  animation: hero-feature-shimmer 3s ease-in-out 1s infinite;
  animation-play-state: paused;
}

@keyframes hero-feature-shimmer {
  0% { transform: translateX(-130%); }
  35%, 100% { transform: translateX(130%); }
}

.hero-feature__media {
  position: relative;
  flex: 0 0 36%;
  overflow: hidden;
  border-radius: 19px 0 0 19px;
}

.hero-feature__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform-origin: 60% 40%;
}

/* Thin navy wash, a touch deeper towards the copy so the seam reads. */
.hero-feature__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 36, 86, 0.18), rgba(22, 36, 86, 0.5));
}

/* Ken Burns: a slow zoom, 1 → 1.25 over 20s and back, on repeat; starts 0.5s
   after the card is first on screen (the page load, as it sits in the hero),
   midway through the reveal. */
.hero-feature.is-armed .hero-feature__photo {
  animation: hero-feature-ken-burns 20s ease-in-out 0.5s infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

@keyframes hero-feature-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.25); }
}

/* No photo: the same dark glass as the stats strip (the base .hero-feature
   background), so the hero photo still shows through faintly — a solid navy
   block read as a separate panel laid over the hero. The gold glow sits on
   the pattern box; the grid is its own layer, one cell (28px) larger on
   every side, so it can drift by translating a cell per 30s and loop
   seamlessly (transform only, no background-position animation). */
.hero-feature__pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 19px;
  background: radial-gradient(circle at 88% 18%, rgba(240, 177, 0, 0.18), transparent 42%);
}

.hero-feature__grid {
  position: absolute;
  inset: -28px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero-feature.is-armed .hero-feature__grid {
  animation: hero-feature-grid 30s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

/* The loops only run while the card is on screen (hero-strip.js). */
.hero-feature.is-armed.is-inview .hero-feature__photo,
.hero-feature.is-armed.is-inview .hero-feature__grid,
.hero-feature.is-armed.is-inview .hero-feature__badge::after {
  animation-play-state: running;
}

/* Gold accent bar down the left edge of the plain card. */
.hero-feature--plain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-gold-accent);
}

@keyframes hero-feature-grid {
  from { transform: translate(0, 0); }
  to { transform: translate(28px, 28px); }
}

.hero-feature__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 18px 28px;
}

.hero-feature--plain .hero-feature__body {
  padding: 22px 32px;
}

/* Category ("Outlook Ekonomi", "Pemikiran SUR+"): a small outline label,
   kept visually apart from the badge. */
.hero-feature__category {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font: 600 10.5px/150% 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* The title leads the card — but not oversized, so the description (up to
   3 lines) fits. */
.hero-feature__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 clamp(18px, 1.8vw, 20px)/130% 'Inter', sans-serif;
  color: #ffffff;
}

.hero-feature--plain .hero-feature__title {
  font-size: clamp(19px, 2vw, 22px);
}

/* Up to 2 lines on desktop, 4 on phones (≤ 640px, below): the editor's own
   description, or the first two paragraphs cut at a sentence end
   (utils/heroStrip.js autoExcerpt). */
.hero-feature__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font: 400 13.5px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

.hero-feature__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 4px;
}

.hero-feature__time {
  font: 400 12px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.7);
}

/* Secondary button look, in line with the hero buttons (pill, like .btn)
   but gold outline; fills faintly when the card is hovered. */
.hero-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--color-gold-accent);
  border-radius: 9999px;
  font: 600 13px/150% 'Inter', sans-serif;
  color: var(--color-gold-accent);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-feature:hover .hero-feature__cta,
.hero-feature:focus-visible .hero-feature__cta {
  background: rgba(240, 177, 0, 0.14);
  color: #ffd45c;
}

.hero-feature__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero-feature:hover .hero-feature__arrow,
.hero-feature:focus-visible .hero-feature__arrow {
  transform: translateX(3px);
}

/* Staggered reveal, once: badge → category → title → description → CTA
   (--reveal-i set per element in the partial), 80ms apart. */
.hero-feature.is-armed [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.hero-feature.is-armed.is-revealed [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

@media (max-width: 640px) {
  .hero-feature {
    flex-direction: column;
    min-height: 0;
  }

  .hero-feature__media {
    flex: 0 0 120px;
    border-radius: 19px 19px 0 0;
  }

  .hero-feature__badge {
    left: 16px;
  }

  .hero-feature__body,
  .hero-feature--plain .hero-feature__body {
    padding: 16px 18px 18px;
  }

  .hero-feature__title,
  .hero-feature--plain .hero-feature__title {
    font-size: 18px;
  }

  /* The card stacks and grows with its content (min-height: 0 above), so
     the description gets 4 lines here. */
  .hero-feature__excerpt {
    -webkit-line-clamp: 4;
  }
}

/* Short viewports: slide 1 must still fit — keep the card compact. (The
   description is already 2 lines on desktop; phones keep their 4.) */
@media (max-height: 760px) {
  .hero-feature {
    min-height: 0;
  }

  .hero-feature__title,
  .hero-feature--plain .hero-feature__title {
    font-size: 18px;
  }
}

/* Reduced motion: no reveal, loops or hover lift at all (hero-strip.js also
   never arms the card; this covers the setting being switched on later). */
@media (prefers-reduced-motion: reduce) {
  .hero-feature,
  .hero-feature::after,
  .hero-feature__arrow,
  .hero-feature__cta,
  .hero-feature.is-armed.is-revealed [data-reveal] {
    transition: none;
  }

  .hero-feature:hover,
  .hero-feature:focus-visible,
  .hero-feature:hover .hero-feature__arrow,
  .hero-feature:focus-visible .hero-feature__arrow {
    transform: none;
  }

  .hero-feature.is-armed [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-feature.is-armed .hero-feature__photo,
  .hero-feature.is-armed .hero-feature__grid,
  .hero-feature.is-armed .hero-feature__badge::after {
    animation: none;
  }
}

/* ==========================================================================
   Hero slide 2 — Market Update. A compact "Data Terkini" ticker (up to 3
   tiles, each independently gated) above 2 chart cards, each also
   independently gated in pagesController.js. Cards sit side by side above
   620px; below that (this component's own breakpoint, not one of the shared
   tablet/mobile ones) they stack — see the @media block right below.
   ========================================================================== */

.hero-slide__ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  flex-wrap: wrap;
}

.hero-slide__ticker-eyebrow {
  flex: none;
  font: 600 11px/140% 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

.hero-slide__ticker-tiles {
  display: flex;
  flex: 1 1 auto;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.hero-slide__ticker-tile {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}

.hero-slide__ticker-label {
  font: 600 12px/140% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.hero-slide__ticker-value {
  font: 700 15px/120% 'Inter', sans-serif;
  color: #ffffff;
}

.hero-slide__ticker-date {
  font: 400 11px/140% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
  .hero-slide__ticker {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.hero-slide__charts {
  display: flex;
  gap: 24px;
  width: 100%;
}

.hero-slide__chart-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  text-align: left;
}

.hero-slide__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-slide__chart-title {
  font: 700 18px/130% 'Inter', sans-serif;
  color: #ffffff;
}

.hero-slide__chart-source {
  font: 400 12px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.hero-slide__chart-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero-slide__chart-body--full {
  justify-content: stretch;
}

.hero-slide__chart-figures {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The pair + current value, demoted to a small meta line — the card's
   headline (market_chart1_headline) is the prominent text now, see
   .hero-slide__chart-title above. */
.hero-slide__chart-meta {
  font: 600 14px/140% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.9);
}

.hero-slide__chart-date {
  font: 400 13px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.65);
}

.hero-slide__spark {
  flex: 1 1 180px;
  max-width: 230px;
  height: 76px;
}

.hero-slide__spark--full {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  height: 92px;
}

.hero-slide__chart-interp {
  font: 400 14px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.hero-slide__empty {
  font: 400 14px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 620px) {
  .hero-slide__charts {
    flex-direction: column;
  }
}

/* ==========================================================================
   Hero carousel controls — prev/next arrows + dot indicator (replaces the
   old "Tentang SUR+" / "Market Update" tab-pills). Manual only, no
   auto-rotate; see hero-slider.js.
   ========================================================================== */

.hero-carousel__arrow {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease;
}

.hero-carousel__arrow:hover {
  background: rgba(255, 255, 255, 0.22);
}

.hero-carousel__arrow:focus-visible {
  outline: 2px solid #f0b100;
  outline-offset: 2px;
}

.hero-carousel__arrow--prev {
  left: clamp(12px, 3vw, 32px);
}

.hero-carousel__arrow--next {
  right: clamp(12px, 3vw, 32px);
}

.hero-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(6px);
}

.hero-carousel__dot {
  appearance: none;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.15s ease, width 0.15s ease;
}

.hero-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero-carousel__dot.is-active {
  width: 22px;
  background: #f0b100;
}

.hero-carousel__dot:focus-visible {
  outline: 2px solid #f0b100;
  outline-offset: 2px;
}

/* ==========================================================================
   Credibility / Why SUR+ section — headline + intro paragraph, then 4
   compact one-liners (number + short title + 1 sentence). No proof strip
   here by design; that stays on hero slide 1 (.hero-slide__stats), not
   duplicated. Replaces the old "context" section (2x2 long cards).
   ========================================================================== */

.credibility {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: linear-gradient(102.82deg, #f8fafc 14.3%, #f1f5f9 107.68%);
  overflow: hidden;
}

.credibility__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Homepage-only variant: plain white, no dots — this section is directly
   followed by .how-help, which keeps the tinted-gradient-plus-dots look, so
   the two read as distinct instead of blending into one block. The identical
   "Why SUR+" section reused on /tentang/perusahaan (no modifier class there)
   keeps the original tinted/dotted look, where it sits between two white
   sections instead. */
.credibility--plain {
  background: #ffffff;
}

.credibility--plain .credibility__dots {
  display: none;
}

.credibility__intro {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  gap: 12px;
  border: 1px solid #d0d5dd;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 9999px;
  font: 500 14px/150% 'Plus Jakarta Sans', sans-serif;
  color: #344054;
  background: #ffffff;
}

.text-accent {
  color: #f0b100;
}

.credibility__heading {
  font: 700 clamp(28px, 4vw, 50px) / 120% 'Inter', sans-serif;
  color: #162456;
}

.credibility__text {
  max-width: 640px;
  font: 400 16px/150% 'Inter', sans-serif;
  color: #1e1e1e;
}

.credibility__points {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.credibility__point {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e7ebf1;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  text-align: left;
}

.credibility__point-num {
  font: 700 14px/100% 'Inter', sans-serif;
  color: #d08700;
  letter-spacing: 0.04em;
}

.credibility__point-title {
  font: 700 16px/130% 'Inter', sans-serif;
  color: #162456;
}

.credibility__point-desc {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #475467;
}

/* ==========================================================================
   Vision & Mission (/tentang/perusahaan#visi-misi) — one prominent vision
   statement, then the five mission points as numbered cards reusing
   .credibility__point. Plain white: /tentang/perusahaan alternates white and
   tinted sections, and this one sits between "Who We Are" and "Why SUR+",
   both tinted. Copy: src/data/visionMission.js.
   ========================================================================== */

.vision-mission {
  padding: 80px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

.vision-mission__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.vision-mission__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.vision-mission__label {
  font: 600 14px/150% 'Inter', sans-serif;
  color: #d08700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vision-mission__statement {
  max-width: 880px;
  font: 600 clamp(20px, 2.4vw, 28px) / 145% 'Inter', sans-serif;
  color: #162456;
  text-align: center;
}

/* Flex-wrap instead of the 4-column .credibility__points grid: five cards
   go 3 + 2 with the short row centred, rather than leaving one orphan. */
.vision-mission__missions {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.vision-mission__mission {
  flex: 0 1 calc((100% - 48px) / 3);
}

.vision-mission__mission-text {
  color: #344054;
}

/* Homepage-only condensed variant (title, no description) — see
   .credibility--plain above for context on why the homepage's version of
   this section differs from /tentang/perusahaan's. */
/* Folded-down replacement for the old standalone .bridge dual-column
   section — two one-line audience taglines instead of a full 4-question
   list each. */
.credibility__audience {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 28px;
  background: #162456;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 40px -16px rgba(22, 36, 86, 0.45);
}

.credibility__audience-item {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.credibility__audience-label {
  font: 700 13px/150% 'Inter', sans-serif;
  color: #f0b100;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.credibility__audience-text {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #ffffff;
}

.credibility__audience-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.credibility__cta {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Founders section ("Siapa Kami")
   ========================================================================== */

.founders {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: #ffffff;
  overflow: hidden;
}

.founders__intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.founders__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 480px;
  max-width: 636px;
}

.founders__heading {
  font: 700 clamp(32px, 4vw, 55px) / 120% 'Inter', sans-serif;
}

.founders__heading .text-accent,
.founders__heading-navy {
  display: block;
}

.founders__heading-navy {
  color: #162456;
}

.founders__supporting {
  flex: 1 1 380px;
  max-width: 572px;
  font: 400 18px/150% 'Inter', sans-serif;
  color: #667085;
}

.founders__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.founder-card {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.founder-card__photo {
  width: 100%;
  aspect-ratio: 228.8 / 240.59;
  background: #e2e8f0;
  border-radius: 12px;
  object-fit: cover;
}

.founder-card__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.founder-card__name {
  font: 700 16px/150% 'Inter', sans-serif;
  color: #101828;
  /* Reserve 2 lines (48px) so the role line starts level on every card. */
  min-height: 48px;
}

.founder-card__role {
  font: 500 14px/150% 'Inter', sans-serif;
  color: #101828;
  /* Roles wrap to 1–2 lines depending on the founder — keep the box at 2
     lines (42px) but top-align the text, so the FIRST line of every role
     sits level with the others (a 1-line title lines up with line 1 of a
     wrapped one, not centered in the box). */
  min-height: 42px;
  text-align: center;
}

.founder-card__bio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font: 400 12px/150% 'Inter', sans-serif;
  color: #101828;
}

/* Pushes the CTA to the card's bottom edge — with equal-height cards in each
   flex row (photo/name/role differ but the row stretches), every founder's
   "View Full Bio" line lands at the same height regardless of how much the
   sample sentence above wraps. */
.founder-card__expertise {
  margin-bottom: auto;
}

.founder-card__more {
  color: #1c398e;
  text-decoration: underline;
}

.founder-card__divider {
  height: 1px;
  width: 100%;
  background: #f1f5f9;
  border: none;
}

/* Hidden on phones only (see the ≤480px breakpoint) — the tag list gets
   cramped in a 3-column mobile grid; the one-line expertise in
   .founder-card__bio above already covers the top tag there. Still shown at
   tablet width and up. */
.founder-card__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 12px;
  text-align: center;
  background: #eff6ff;
  border-radius: 8px;
  font: 500 12px/150% 'Inter', sans-serif;
  color: #1c398e;
}

/* ==========================================================================
   How We Help — 3 broad service groupings (a higher-level counterpart to
   the more granular 8-item .capabilities grid further down the page)
   ========================================================================== */

.how-help {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: linear-gradient(102.82deg, #f8fafc 14.3%, #f1f5f9 107.68%);
  overflow: hidden;
}

/* Same dotted-grid decoration as .credibility__dots — shared here because
   this section uses the identical background gradient. */
.how-help__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 10px 10px;
}

.how-help__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  text-align: center;
}

.how-help__heading {
  font: 700 clamp(28px, 4vw, 44px) / 120% 'Inter', sans-serif;
  color: #162456;
}

.how-help__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Sits directly on the section (not inside .how-help__grid), so it needs its
   own stacking context to paint above .how-help__dots — a plain non-positioned
   sibling of a position:absolute layer paints BELOW it regardless of DOM
   order, which is why the button was appearing behind (and unclickable under)
   the dots before this. */
.how-help__cta {
  position: relative;
  z-index: 1;
}

.how-help-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-align: left;
}

.how-help-card__icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fefce8;
  color: #d08700;
}

.how-help-card__title {
  font: 700 20px/130% 'Inter', sans-serif;
  color: #162456;
}

.how-help-card__desc {
  font: 400 15px/22px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

/* ==========================================================================
   Capabilities section ("Apa Yang Kami Bantu Selesaikan Untuk Klien")
   ========================================================================== */

.capabilities {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

.capabilities__intro {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.capabilities__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 480px;
  max-width: 636px;
}

.capabilities__heading {
  font: 700 clamp(28px, 4vw, 55px) / 120% 'Inter', sans-serif;
}

.capabilities__heading-navy,
.capabilities__heading .text-accent {
  display: block;
}

.capabilities__heading-navy {
  color: #162456;
}

.capabilities__supporting {
  flex: 1 1 380px;
  max-width: 572px;
  font: 400 18px/150% 'Inter', sans-serif;
  color: #667085;
}

.capabilities__grid {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.capability-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fefce8;
  color: #d08700;
}

.capability-card__title {
  font: 700 18px/120% 'Inter', sans-serif;
  color: #162456;
}

.capability-card__desc {
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

/* ==========================================================================
   Pillars section ("Lima Pilar. Satu Tujuan.")
   ========================================================================== */

.pillars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

.pillars__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  text-align: center;
}

.pillars__heading {
  font: 700 clamp(28px, 4vw, 54px) / 120% 'Inter', sans-serif;
  color: #162456;
}

.pillars__supporting {
  max-width: 736px;
  font: 400 18px/150% 'Inter', sans-serif;
  color: #000000;
}

.pillars__grid {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
}

.pillar-card {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
}

.pillar-card--blue {
  background: #f0f9ff;
}

.pillar-card--yellow {
  background: #fefce8;
}

.pillar-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #f0b100;
  font: 600 14px/150% 'Inter', sans-serif;
  color: #000000;
}

.pillar-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-card__code {
  font: 700 18px/120% 'Inter', sans-serif;
  color: #162456;
}

.pillar-card__title {
  font: 600 14px/150% 'Inter', sans-serif;
  color: #0a0a0a;
}

.pillar-card__rule {
  display: block;
  width: 65px;
  height: 0;
  border-top: 1px solid #f0b100;
}

.pillar-card__desc {
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

/* ==========================================================================
   Solutions section ("Produk Yang Mudah Dikenali Dan Dibeli Klien")
   ========================================================================== */

.solutions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px clamp(20px, 6vw, 100px);
  background: #f8fafc;
  overflow: hidden;
}

/* Same dotted-grid decoration as .credibility__dots / .how-help__dots. */
.solutions__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 10px 10px;
}

.solutions__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 760px;
  text-align: center;
}

.solutions__heading {
  font: 700 clamp(28px, 4vw, 44px) / 120% 'Inter', sans-serif;
  color: #162456;
}

.solutions__heading-line {
  display: block;
}

.solutions__supporting {
  max-width: 736px;
  margin-top: 16px;
  font: 400 18px/150% 'Inter', sans-serif;
  color: #000000;
}

.solutions__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.solution-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

.solution-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #0f2a4a;
  background-size: cover;
  background-position: center;
}

.solution-card__tag {
  align-self: flex-start;
  padding: 4px 12px;
  background: #fefce8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 9999px;
  font: 500 14px/150% 'Plus Jakarta Sans', sans-serif;
}

.solution-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solution-card__title {
  font: 700 24px/120% 'Inter', sans-serif;
  color: #ffffff;
}

.solution-card__rule {
  display: block;
  width: 65px;
  height: 0;
  border-top: 2px solid #f0b100;
}

.solution-card__desc {
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #ffffff;
}

.solution-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/150% 'Inter', sans-serif;
  color: #f0b100;
  text-decoration: none;
}

.solution-card__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Insight section ("Berpikir Secara Terbuka")
   ========================================================================== */

.insight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 64px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

.insight__intro {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.insight__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 400px;
  max-width: 636px;
}

.insight__heading {
  font: 700 clamp(28px, 4vw, 44px) / 120% 'Inter', sans-serif;
  color: #000000;
}

.insight__heading-blue {
  display: block;
  color: #155dfc;
}

.insight__supporting {
  flex: 1 1 380px;
  max-width: 572px;
  font: 400 18px/150% 'Inter', sans-serif;
  color: #667085;
}

.insight__grid {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.article-card {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 51px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.14);
}

.article-card:hover .article-card__title {
  color: #075985;
}

.article-card__photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  background-color: #e2e8f0;
}

/* No cover uploaded → SUR+ logo on white (pagesController.articlePhoto),
   shown whole instead of cropped. Same modifier on the teaser and cover. */
.article-card__photo--default,
.article-teaser__photo--default,
.article-detail__cover--default {
  object-fit: contain;
  background-color: #ffffff;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-card__category {
  font: 500 12px/150% 'Inter', sans-serif;
  color: #d08700;
}

.article-card__date-sep {
  font: 400 12px/150% 'Inter', sans-serif;
  color: #d4d4d4;
}

.article-card__date {
  font: 400 12px/150% 'Inter', sans-serif;
  color: #757575;
}

.article-card__title {
  font: 700 14px/150% 'Inter', sans-serif;
  color: #0a0a0a;
}

.article-card__desc {
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

/* ==========================================================================
   Page hero (shorter, left-aligned hero used by /insight and other list pages)
   ========================================================================== */

.page-hero {
  position: relative;
  width: 100%;
  min-height: 375px;
  padding-top: 84px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0f172a;
  overflow: hidden;
}

/* Same layering as .hero-slide__bg: the photo fades by the CMS opacity
   (homepage hero Slide 1, set inline by partials/page-hero-bg.ejs), the
   scrim keeping the heading readable doesn't. */
.page-hero__bg::before,
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.page-hero__bg::before {
  background-image: var(--page-hero-bg, url('/images/homepage/banner-home-default.webp'));
  background-size: cover;
  background-position: var(--page-hero-bg-pan, center);
  opacity: var(--page-hero-bg-opacity, 1);
  transform: scale(var(--page-hero-bg-zoom, 1));
  transform-origin: var(--page-hero-bg-pan, center);
}

@media (max-aspect-ratio: 1/1) {
  .page-hero__bg::before {
    background-position: var(--page-hero-bg-position, center);
    transform-origin: var(--page-hero-bg-position, center);
  }
}

.page-hero__bg::after {
  background: rgba(0, 0, 0, 0.55);
}

.page-hero__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 40px clamp(20px, 6vw, 100px) 48px;
  max-width: 900px;
}

/* Pages whose first card pulls up over the hero (.insight-filters,
   .data-page__container: margin-top -45px) — keep the usual breathing room
   *above* that overlap, otherwise the card sits on the hero text. Two
   classes, so it also beats the mobile .page-hero__body padding below. */
.page-hero--overlap .page-hero__body {
  padding-bottom: calc(48px + 45px);
}

.page-hero__badge {
  font: 600 18px/120% 'Inter', sans-serif;
  color: #f0b100;
}

.page-hero__heading {
  font: 700 clamp(28px, 4vw, 44px) / 120% 'Inter', sans-serif;
  color: #ffffff;
}

.page-hero__text {
  max-width: 640px;
  font: 400 16px/150% 'Inter', sans-serif;
  color: #ffffff;
}

/* "← Kembali ke ..." link — sits above the breadcrumb on pages one level
   deeper than usual (e.g. /solusi/:slug), where a single explicit way back
   to the parent listing is worth calling out beyond the breadcrumb trail. */
.page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.page-hero__back:hover {
  color: #f0b100;
}

/* Subtle dot texture over the photo background — same dotted-grid language
   as .credibility__dots etc., in white since it sits on a dark hero photo. */
.page-hero__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}


/* ==========================================================================
   Breadcrumb — every public page except home. Default styling is for a dark
   photo background (inside .page-hero__body); .breadcrumb--dark is for a
   plain white page background (article.ejs, which has no .page-hero).
   ========================================================================== */

.breadcrumb {
  width: 100%;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb__link {
  font: 500 13px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb__link:hover {
  color: #f0b100;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid #f0b100;
  outline-offset: 2px;
}

.breadcrumb__sep {
  font: 400 13px/150% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb__current {
  font: 500 13px/150% 'Inter', sans-serif;
  color: #ffffff;
}

.breadcrumb--dark .breadcrumb__link {
  color: var(--color-text-muted);
}

.breadcrumb--dark .breadcrumb__link:hover {
  color: #d08700;
}

.breadcrumb--dark .breadcrumb__sep {
  color: #d0d5dd;
}

.breadcrumb--dark .breadcrumb__current {
  color: #162456;
}

/* ==========================================================================
   Insight listing (/insight)
   ========================================================================== */

.insight-listing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(20px, 6vw, 100px) 80px;
  background: #f8fafc;
}

/* ==========================================================================
   Data page (/data) — hosts the React data-dashboard widgets
   ========================================================================== */

.data-page {
  display: flex;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 100px) 80px;
  background: #f8fafc;
}

.data-page__container {
  width: 100%;
  max-width: 1240px;
  margin-top: -45px; /* overlaps the hero bottom, same trick as .insight-filters */
  position: relative;
  z-index: 2;
}

.insight-filters {
  width: 100%;
  max-width: 1240px;
  margin-top: -45px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07);
  flex-wrap: wrap;
}

.insight-filters__field {
  flex: 2 1 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 16px;
  border: 1px solid #f5f5f5;
  border-radius: 12px;
}

.insight-filters__field--category {
  flex: 1 1 220px;
}

.insight-filters__field--date {
  flex: 1 1 260px;
}

.insight-filters__date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-filters__date-input {
  border: none;
  outline: none;
  padding: 0;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #171717;
  background: transparent;
  min-width: 0;
  flex: 1;
}

.insight-filters__date-range .datepick {
  flex: 1;
  min-width: 0;
}

.insight-filters__date-sep {
  color: #a3a3a3;
  flex: none;
}

.insight-filters__field-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.insight-filters__label {
  font: 700 12px/150% 'Inter', sans-serif;
  color: #262626;
}

.insight-filters__input,
.insight-filters__select {
  border: none;
  outline: none;
  padding: 0;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #171717;
  background: transparent;
  width: 100%;
}

.insight-filters__input::placeholder {
  color: #737373;
}

.insight-filters__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.insight-filters__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #075985;
}

.insight-filters__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  background: #075985;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font: 600 14px/150% 'Inter', sans-serif;
}

.insight-filters__submit:hover {
  opacity: 0.92;
}

/* Custom category dropdown — replaces the native <select> popup, which
   can't be restyled to match the rest of the site. The <select> stays in
   the DOM (still what actually submits with the form) and only hides once
   insight-filters.js confirms the custom UI is wired up, so the filter
   still works with JS disabled. */

.category-select {
  position: relative;
}

.category-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.category-select__value {
  display: block;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #171717;
}

.category-select__chevron {
  flex: none;
  transition: transform 0.15s ease;
}

.category-select__trigger[aria-expanded='true'] .category-select__chevron {
  transform: rotate(180deg);
}

.category-select--enhanced .category-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.category-select__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
}

.category-select__option {
  padding: 10px 12px;
  border-radius: 8px;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #262626;
  cursor: pointer;
}

.category-select__option:hover,
.category-select__option:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.category-select__option[aria-selected='true'] {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}

.insight-listing__meta {
  width: 100%;
  max-width: 1240px;
  font: 700 16px/131% 'Inter', sans-serif;
  color: #1e1e1e;
  scroll-margin-top: 104px; /* clears the fixed navbar when #hasil is jumped to (pagination) */
}

.insight-listing__grid {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.insight-empty {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 96px 0;
  text-align: center;
}

.insight-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 232px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.06);
}

.insight-empty__icon-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 182px;
  height: 182px;
  border-radius: 9999px;
  background: #f8fafc;
}

.insight-empty__icon-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 126px;
  border-radius: 9999px;
  background: #dbeafe;
}

.insight-empty__illustration {
  display: block;
  width: 44px;
  height: 44px;
}

.insight-empty__title {
  font: 700 24px/120% 'Inter', sans-serif;
  color: #1e1e1e;
}

.insight-empty__text {
  max-width: 390px;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #1e1e1e;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

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

.pagination__link,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 8px 12px;
  border-radius: 8px;
  font: 400 16px/100% 'Inter', sans-serif;
  color: #1e1e1e;
  text-decoration: none;
}

.pagination__link:hover {
  background: rgba(240, 177, 0, 0.12);
}

.pagination__link--active {
  background: #f0b100;
  color: #000000;
  font-weight: 600;
}

.pagination__ellipsis {
  color: #000000;
  font-weight: 700;
  cursor: default;
}

.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 12px;
  border-radius: 8px;
  font: 400 16px/100% 'Inter', sans-serif;
  color: #1e1e1e;
  text-decoration: none;
}

.pagination__nav[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.pagination__nav-icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   CTA section ("Keputusan Apa Yang Sedang Anda Pertimbangkan?")
   ========================================================================== */

.cta {
  display: flex;
  justify-content: center;
  padding: 100px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

.cta__card {
  position: relative;
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 60px clamp(24px, 4vw, 60px);
  background: linear-gradient(113.63deg, #1c398e -11%, #162456 50.7%);
  border-radius: 32px;
  overflow: hidden;
  flex-wrap: wrap;
}

.cta__intro {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cta__heading {
  font: 700 clamp(28px, 4vw, 40px) / 120% 'Inter', sans-serif;
  color: #ffffff;
}

.cta__text {
  max-width: 520px;
  font: 400 16px/160% 'Inter', sans-serif;
  color: #cbd5e1;
}

.cta__form {
  flex: 1 1 380px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border-radius: 20px;
}

.cta__form-title {
  font: 700 18px/130% 'Inter', sans-serif;
  color: #162456;
}

.cta__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cta__field label {
  font: 600 13px/150% 'Inter', sans-serif;
  color: #101828;
}

.cta__field input,
.cta__field textarea {
  font: 400 14px/150% 'Inter', sans-serif;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #101828;
  background: #ffffff;
  resize: vertical;
}

.cta__field input::placeholder,
.cta__field textarea::placeholder {
  color: #94a3b8;
}

.cta__field input:focus,
.cta__field textarea:focus {
  outline: 2px solid #f0b100;
  outline-offset: 1px;
  border-color: #f0b100;
}

.cta__submit {
  align-self: flex-start;
  border: none;
}

.cta__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Consent line above the contact and comment form submit buttons. */
.form-consent {
  margin: 0;
  font: 400 12px/150% 'Inter', sans-serif;
  color: var(--color-text-muted);
}

.form-consent a {
  color: inherit;
  text-decoration: underline;
}

/* Bot trap (public/js/contact-form.js) — same technique as the comment form. */
.cta__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cta__status {
  font: 500 13px/150% 'Inter', sans-serif;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
}

.cta__status--pending {
  color: var(--color-text-muted);
  background: #f8fafc;
}

.cta__status--success {
  color: #166534;
  background: #f0fdf4;
}

.cta__status--error {
  color: #b91c1c;
  background: #fef2f2;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px clamp(20px, 6vw, 100px);
  background: #162456;
  overflow: hidden;
}

.site-footer__main {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__brand {
  flex: 1 1 320px;
  max-width: 432px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.site-footer__logo {
  /* surplus-logo-white-gold.svg is taller/squarer than the old "-only-"
     wordmark (viewBox 1530x784 vs 1416x432) — pin width instead of height so
     the logo keeps the same horizontal footprint as before. */
  width: 170px;
  height: auto;
  margin-bottom: 8px;
}

.site-footer__tagline {
  font: 600 16px/150% 'Inter', sans-serif;
  color: #f0b100;
}

.site-footer__desc {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #ffffff;
}

.site-footer__col {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__col-title {
  font: 700 16px/135% 'Inter', sans-serif;
  color: #f0b100;
}

.site-footer__link {
  display: block;
  font: 400 14px/140% 'Inter', sans-serif;
  color: #ffffff;
  text-decoration: none;
}

.site-footer__link:hover {
  opacity: 0.8;
}

.site-footer__contact {
  flex: 0 1 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.site-footer__contact .site-footer__link {
  color: #ffffff;
  opacity: 0.9;
}

.site-footer__link--icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__divider {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  height: 0;
  border-top: 1px solid rgba(241, 245, 249, 0.29);
}

.site-footer__bottom {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font: 400 14px/150% 'Inter', sans-serif;
  color: #ffffff;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__legal a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Article detail (/insight/:slug)
   ========================================================================== */

.article-detail {
  display: flex;
  justify-content: center;
  background: #ffffff;
}

.article-detail__container {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 84px clears the fixed navbar (see .navbar-force-solid) + the usual 40px breathing room. */
  padding: 124px clamp(20px, 6vw, 100px) 80px;
}

/* CMS editor preview renders this page with no navbar at all (see
   article.ejs's `preview` flag) — the 84px reserved to clear the fixed
   navbar would otherwise just be dead space at the top. */
.article-detail__container--no-navbar {
  padding-top: 40px;
}

/* Sticks just under the fixed navbar while the article scrolls (its
   containing block is the whole article column, so it stays put down to the
   comments), as a pill so it reads over body text and images. */
.article-detail__back {
  position: sticky;
  top: 100px;
  z-index: 10;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px 8px 12px;
  font: 600 14px/150% 'Inter', sans-serif;
  color: #262626;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.article-detail__back:hover {
  color: #0a0a0a;
  border-color: #162456;
}

@media (max-width: 640px) {
  .article-detail__back {
    top: 76px;
  }
}

.article-detail__back-icon {
  width: 16px;
  height: 16px;
}

.article-detail__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-detail__category {
  font: 700 16px/130% 'Inter', sans-serif;
  color: #d08700;
}

.article-detail__title {
  font: 700 32px/120% 'Inter', sans-serif;
  color: #0a0a0a;
}

.article-detail__meta {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #757575;
}

.article-detail__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: center;
  background-color: #e2e8f0;
  border-radius: 16px;
}

.article-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 24px;
  align-items: start;
}

.article-detail__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.article-detail__sidebar {
  position: sticky;
  top: 104px;
}

.article-detail__divider {
  width: 100%;
  height: 0;
  border-top: 1px solid #cad5e2;
}

/* Article body — rendered from CMS-authored HTML (h2/p/ul/blockquote), so
   these are element selectors rather than BEM classes. */

.article-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-body > p {
  font: 400 16px/160% 'Inter', sans-serif;
  color: #262626;
  text-align: justify;
}

.article-body > h2 {
  font: 700 24px/130% 'Inter', sans-serif;
  color: #0a0a0a;
}

.article-body > h3 {
  font: 700 19px/130% 'Inter', sans-serif;
  color: #0a0a0a;
}

/* Anchor targets for the Daftar Isi (TOC) links below — offset clear of the
   fixed navbar, matching .article-detail__sidebar's own 104px offset. */
.article-body > h2[id],
.article-body > h3[id] {
  scroll-margin-top: 104px;
}

.article-body > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-body > ul > li {
  position: relative;
  padding-left: 18px;
  font: 400 16px/160% 'Inter', sans-serif;
  color: #262626;
  text-align: justify;
}

.article-body > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0b100;
}

.article-body > blockquote {
  margin: 0;
  padding: 16px;
  background: #f1f5f9;
  border-left: 4px solid #f0b100;
  border-radius: 8px;
  font: 400 16px/160% 'Inter', sans-serif;
  color: #262626;
}

.article-body > blockquote strong {
  color: #0a0a0a;
}

/* Comment form */

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border: 2px solid #f1f5f9;
  border-radius: 16px;
}

.comment-form__title {
  font: 700 20px/130% 'Inter', sans-serif;
  color: #162456;
}

.comment-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-form__label {
  font: 600 13px/150% 'Inter', sans-serif;
  color: #101828;
}

.comment-form__input,
.comment-form__textarea {
  font: 400 14px/150% 'Inter', sans-serif;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #101828;
  background: #ffffff;
  resize: vertical;
}

.comment-form__textarea {
  min-height: 120px;
}

.comment-form__input::placeholder,
.comment-form__textarea::placeholder {
  color: #94a3b8;
}

.comment-form__input:focus,
.comment-form__textarea:focus {
  outline: 2px solid #f0b100;
  outline-offset: 1px;
  border-color: #f0b100;
}

.comment-form__submit {
  align-self: flex-start;
  border: none;
}

/* Comment list */

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 104px; /* clears the fixed navbar when #komentar is jumped to (pagination) */
}

.comment-list__heading {
  font: 700 20px/130% 'Inter', sans-serif;
  color: #162456;
}

.comment-list__empty {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #757575;
}

.comment-list__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f1f5f9;
  border-radius: 16px;
}

.comment-card__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #cbd5e1;
  font: 600 14px/1 'Inter', sans-serif;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.comment-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.comment-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.comment-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment-card__name {
  font: 600 16px/130% 'Inter', sans-serif;
  color: #0a0a0a;
}

.comment-card__date {
  font: 400 12px/150% 'Inter', sans-serif;
  color: #757575;
}

.comment-card__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #757575;
}

.comment-card__more:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #262626;
}

.comment-card__text {
  font: 400 13px/160% 'Inter', sans-serif;
  color: #262626;
}

.comment-form__error {
  font: 500 13px/150% 'Inter', sans-serif;
  color: #b91c1c;
  margin: 0;
}

/* "Awaiting moderation" note shown in place after a comment is sent. */
.comment-form__success {
  font: 500 13px/150% 'Inter', sans-serif;
  color: #162456;
  background: var(--color-gold-tint);
  border-left: 3px solid var(--color-gold-accent-ink);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0;
}

/* Reply UI: a "Balas" toggle per top-level comment, an inline form, and the
   resulting thread — indented to read as nested under its parent. */

.comment-card__actions {
  display: flex;
  gap: 12px;
}

.comment-card__reply-btn {
  font: 600 12.5px/150% 'Inter', sans-serif;
  color: #075985;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.comment-card__reply-btn:hover {
  text-decoration: underline;
}

.comment-card__delete-btn {
  font: 600 12.5px/150% 'Inter', sans-serif;
  color: #b91c1c;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.comment-card__delete-btn:hover {
  text-decoration: underline;
}

.reply-form {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.reply-form.is-open {
  display: flex;
}

.reply-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reply-form__label {
  font: 600 12px/150% 'Inter', sans-serif;
  color: #101828;
}

.reply-form__input,
.reply-form__textarea {
  font: 400 13px/150% 'Inter', sans-serif;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #101828;
  background: #ffffff;
  resize: vertical;
}

.reply-form__textarea {
  min-height: 70px;
}

.reply-form__input:focus,
.reply-form__textarea:focus {
  outline: 2px solid #f0b100;
  outline-offset: 1px;
  border-color: #f0b100;
}

.reply-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reply-form__submit {
  min-height: 38px;
  padding: 6px 16px;
  font-size: 13px;
  border: none;
}

.reply-form__cancel {
  font: 600 13px/150% 'Inter', sans-serif;
  color: #757575;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.reply-form__cancel:hover {
  color: #262626;
}

.comment-replies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-left: 20px;
  border-left: 2px solid #e2e8f0;
}

.comment-card--reply {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 12px;
}

/* Sidebar — related articles */

.article-toc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  background: #f1f5f9;
  border-left: 4px solid #f0b100;
  border-radius: 8px;
}

.article-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.article-toc__heading {
  font: 700 13px/130% 'Inter', sans-serif;
  color: #162456;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-toc__chevron {
  flex: none;
  color: #162456;
  transition: transform 0.2s ease;
}

.article-toc.is-collapsed .article-toc__chevron {
  transform: rotate(-90deg);
}

.article-toc.is-collapsed .article-toc__list {
  display: none;
}

.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-toc__item {
  position: relative;
  padding-left: 16px;
}

.article-toc__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0b100;
}

.article-toc__item--level3 {
  padding-left: 32px;
}

.article-toc__item--level3::before {
  left: 16px;
  width: 5px;
  height: 5px;
  background: #94a3b8;
}

.article-toc__item a {
  display: block;
  font: 500 15px/150% 'Inter', sans-serif;
  color: #262626;
  text-decoration: none;
}

.article-toc__item a:hover {
  color: #075985;
}

.related-articles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.related-articles__heading {
  font: 700 20px/130% 'Inter', sans-serif;
  color: #162456;
}

.related-articles__empty {
  font: 400 14px/150% 'Inter', sans-serif;
  color: #757575;
}

.related-articles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-teaser {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.article-teaser:hover .article-teaser__title {
  color: #075985;
}

.article-teaser__photo {
  display: block;
  flex: none;
  width: 135px;
  height: 89px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background-color: #e2e8f0;
}

.article-teaser__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.article-teaser__category {
  font: 500 12px/150% 'Inter', sans-serif;
  color: #d08700;
}

.article-teaser__title {
  font: 700 14px/130% 'Inter', sans-serif;
  color: #0a0a0a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-teaser__desc {
  font: 400 12px/150% 'Inter', sans-serif;
  color: #757575;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Static content pages (/tentang/perusahaan)
   ========================================================================== */

.simple-page__section {
  padding: 80px clamp(20px, 6vw, 100px);
  background: #ffffff;
}

/* /leadership#<slug> (homepage cards, article bylines): the section's own
   top padding is about the fixed navbar's height, so add a little more to
   keep the photo and name clear of it. */
.simple-page__section[id],
.leadership-anchor {
  scroll-margin-top: 32px;
}

.simple-page__section--alt {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}

/* Same dotted-grid decoration as .credibility__dots / .how-help__dots /
   .bridge__dots (homepage) — no fade mask, so the pattern covers the whole
   section evenly. */
.simple-page__section-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 16px 16px;
}

/* First content section right below .page-hero — the hero already carries
   its own visual weight (banner image + heading), so this section needs less
   top space than the standard 80px rhythm used between the other sections. */
.simple-page__section--tight-top {
  padding-top: 64px;
}

/* Marks a clear break from the section above without introducing another
   background stripe (keeps the alt/white zebra pattern intact elsewhere). */
.simple-page__section--divider {
  border-top: 1px solid #e7ebf1;
}

.simple-page__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.simple-page__container--wide {
  max-width: 1080px;
  gap: 32px;
}

.simple-page__intro {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.simple-page__eyebrow {
  font: 600 14px/150% 'Inter', sans-serif;
  color: #d08700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.simple-page__heading {
  font: 700 clamp(26px, 3vw, 36px) / 120% 'Inter', sans-serif;
  color: #162456;
}

.simple-page__lead {
  font: 400 16px/160% 'Inter', sans-serif;
  color: #475467;
}

/* /leadership's role + expertise lines — use the project's existing muted-
   text token (same one nav-dropdown__item-desc uses) instead of
   .simple-page__lead's bluish gray, so they read as neutral secondary text
   consistent with the rest of the site rather than looking like a link.
   Color is locked (do not change) — only size/weight are tuned here for
   hierarchy: role reads a step more prominent than the denser tag line. */
.leadership-role {
  font: 500 16px/150% 'Inter', sans-serif;
  color: var(--color-text-muted);
}

.leadership-expertise {
  font: 400 15px/160% 'Inter', sans-serif;
  color: var(--color-text-muted);
}

.leadership-expertise__label {
  color: #162456;
}

/* Gold accent bar, same treatment as .simple-page__quote's left border
   below — scoped to leadership.ejs only (not .simple-page__logo-copy
   itself, which tentang-perusahaan.ejs also uses for its unrelated
   name/logo block). Border height is automatic (a border always spans its
   own box's full height), so it already tracks each founder's content
   length with no extra rule needed. gap is bumped from the shared 16px for
   more breathing room between name/role/tags/bio. */
.leadership-founder-copy {
  border-left: 3px solid var(--color-gold-accent);
  padding-left: 20px;
  gap: 22px;
}

/* A little more presence than the shared .simple-page__heading default
   (used as-is on tentang-perusahaan.ejs) — this is the page's real subject
   per section, so it earns the extra size. */
.leadership-founder-copy .simple-page__heading {
  font-size: clamp(28px, 3.6vw, 40px);
}

/* Slightly airier than the shared .article-body > p default — comfortable
   for the longer, denser bio paragraphs this page has relative to
   tentang-perusahaan.ejs's shorter blocks. */
.leadership-founder-copy .article-body > p {
  line-height: 175%;
}

/* Photo gets the same soft shadow already used on .simple-page__logo-frame
   (the logo treatment on tentang-perusahaan.ejs) for visual consistency —
   scoped via .simple-page__logo-row so it only touches this page's photo,
   not .founder-card__photo's other use on the homepage grid. */
.simple-page__logo-row .founder-card__photo {
  box-shadow: 0 16px 32px -20px rgba(6, 37, 74, 0.35);
}

.leadership-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* f.linkedinUrl is null for every founder right now, so this always opens
   LinkedIn's own homepage (see leadership.ejs) rather than a per-person
   profile — starts working automatically once real URLs are added. */
.leadership-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #162456;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.leadership-linkedin:hover {
  background: var(--color-gold-tint);
  color: var(--color-gold-accent-ink);
}

.leadership-linkedin:focus-visible {
  outline: 2px solid var(--color-gold-accent);
  outline-offset: 2px;
}

/* Credentials list — kept outside .article-body on purpose so it gets its
   own label + icon treatment instead of inheriting the plain-dot
   .article-body > ul styling. The top border is the same subtle divider
   color as .simple-page__section--divider, reused here as a hairline
   between the bio and this list instead of just whitespace alone. */
.leadership-credentials {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e7ebf1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 650px;
}

.leadership-credentials__label {
  font: 700 13px/150% 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #162456;
}

.leadership-credentials__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leadership-credentials__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/160% 'Inter', sans-serif;
  color: #262626;
}

.leadership-credentials__icon {
  flex: none;
  margin-top: 3px;
  color: var(--color-gold-accent-ink);
}

.simple-page__quote {
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid #f0b100;
  font: 600 italic clamp(20px, 2.4vw, 26px) / 150% 'Inter', sans-serif;
  color: #162456;
}

.simple-page__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.simple-page__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid #e7ebf1;
  border-radius: 16px;
}

.simple-page__card-index {
  font: 700 14px/100% 'Inter', sans-serif;
  color: #d6a329;
  letter-spacing: 0.04em;
}

.simple-page__card-title {
  font: 700 18px/130% 'Inter', sans-serif;
  color: #162456;
}

.simple-page__card-text {
  font: 400 14px/160% 'Inter', sans-serif;
  color: #667085;
}

.simple-page__logo-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px 48px;
  align-items: center;
}

/* /leadership's founder photo is this section's real content, not a small
   logo like tentang-perusahaan.ejs's use of the same row layout — give it a
   noticeably wider column here specifically (see leadership.ejs). */
.leadership-photo-row {
  grid-template-columns: 280px 1fr;
}

.simple-page__logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #d6a329;
  border-radius: 16px;
  box-shadow: 0 16px 32px -20px rgba(6, 37, 74, 0.35);
}

.simple-page__logo-img {
  width: 100%;
  height: auto;
  display: block;
}

.simple-page__logo-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   Solution detail cards (/solusi) — one card per sub-section (Masalah Klien,
   Apa yang Dilakukan SUR+, Contoh Deliverables, Model Engagement, Untuk
   Siapa) instead of a sequential article layout. Icon treatment matches
   .capability-card__icon (/kapabilitas): gold outline in a pale circle.
   ========================================================================== */

.solution-detail__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.solution-detail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.solution-detail-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fefce8;
  color: #d08700;
}

.solution-detail-card__title {
  font: 700 18px/120% 'Inter', sans-serif;
  color: #162456;
}

.solution-detail-card__text {
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

.solution-detail-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.solution-detail-card__list li {
  position: relative;
  padding-left: 16px;
  font: 400 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.005em;
  color: #262626;
}

.solution-detail-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0b100;
}

/* End-of-page CTA on each /solusi/:slug detail page — links out to the
   homepage's #mulai-percakapan form, same as the navbar's "Contact Us" and
   the homepage hero's own CTA button. */
.solution-cta {
  padding: 56px clamp(20px, 6vw, 100px);
  background: #162456;
}

.solution-cta__card {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.solution-cta__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.solution-cta__eyebrow {
  font: 600 13px/150% 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f0b100;
}

.solution-cta__heading {
  font: 700 clamp(22px, 3vw, 28px) / 130% 'Inter', sans-serif;
  color: #ffffff;
  margin: 0;
}

.simple-page__logo-copy .article-body > p {
  text-align: left;
}

/* Keeps body copy readable (~60-75 characters/line) even where the section's
   own container runs wider, e.g. the logo-row text column. */
.simple-page__section .article-body > p {
  max-width: 650px;
}

@media (min-width: 1181px) {
  .navbar__inner {
    position: relative;
  }

  .navbar__menu {
    justify-content: flex-end;
  }

  .navbar__links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .nav-dropdown__panel {
    /* Flush against the trigger (top: 100%, no structural gap, no padding)
       so there's no dead zone for the pointer to fall into on the way down
       and no empty strip above the first item. Always rendered
       (display: flex) at this breakpoint; open/closed is opacity + transform
       below, which is what makes the fade/slide animation possible. */
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 0 var(--radius-dropdown) var(--radius-dropdown) var(--radius-dropdown);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
  }

  .nav-dropdown__trigger[aria-expanded='true'] ~ .nav-dropdown__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0s;
  }

  .nav-dropdown__item {
    color: #06254a;
    padding: 12px 20px 12px 17px;
    border-bottom: 1px solid #eee;
  }

  .nav-dropdown__item-desc {
    color: var(--color-text-muted);
  }

  .nav-dropdown__item:last-child {
    border-bottom: none;
  }

  .nav-dropdown__item:hover {
    background: var(--color-gold-tint);
    border-left-color: var(--color-gold-accent-ink);
    color: var(--color-gold-accent-ink);
    opacity: 1;
  }

  .nav-dropdown__item:hover .nav-dropdown__item-desc {
    color: var(--color-gold-accent-ink);
  }
}

/* ==========================================================================
   404 page
   ========================================================================== */

.error-page {
  background: #ffffff;
  display: flex;
  justify-content: center;
  /* 124px clears the fixed navbar (this page has no hero photo behind it,
     see body.navbar-dark) + generous breathing room above the content. */
  padding: 124px clamp(20px, 6vw, 100px) 100px;
}

.error-page__container {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.error-page__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-gold-tint);
  color: var(--color-gold-accent-ink);
  margin-bottom: 4px;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.btn--navy {
  background: #06254a;
  color: #ffffff;
}

.btn--navy:hover {
  background: #031a35;
}

.btn--outline-navy {
  background: #ffffff;
  color: #06254a;
  border-color: #06254a;
}

.btn--outline-navy:hover {
  background: rgba(6, 37, 74, 0.06);
}

/* ==========================================================================
   Maintenance page (rendered in place of any route while maintenance mode
   is on — see src/middleware/maintenanceMode.js)
   ========================================================================== */

.maintenance-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  background: #0f172a;
}

.maintenance-page__logo {
  height: 64px;
}

.maintenance-page__badge {
  font: 600 14px/120% 'Inter', sans-serif;
  letter-spacing: 0.06em;
  color: var(--color-gold-accent);
}

.maintenance-page__heading {
  font: 700 clamp(28px, 4vw, 40px) / 120% 'Inter', sans-serif;
  color: #ffffff;
}

.maintenance-page__text {
  max-width: 480px;
  font: 400 16px/150% 'Inter', sans-serif;
  color: #cbd5e1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .navbar__burger {
    display: flex;
  }

  .navbar__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px clamp(20px, 6vw, 100px) 32px;
    background: #06254a;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  body.nav-open .navbar__menu {
    display: flex;
  }

  /* Scrolled navbar switches to a white bar on desktop — carry that same
     treatment into the mobile dropdown panel (background + item colors)
     instead of leaving it navy while .navbar.is-scrolled turns the text
     dark, which was unreadable (dark text on a navy panel). */
  .navbar.is-scrolled .navbar__menu {
    background: #ffffff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  }

  .navbar.is-scrolled .nav-dropdown__item {
    color: #262626;
  }

  .navbar.is-scrolled .nav-dropdown__item-desc {
    color: var(--color-text-muted);
  }

  .navbar.is-scrolled .nav-dropdown__item:hover {
    background: var(--color-gold-tint);
    border-left-color: var(--color-gold-accent-ink);
    color: var(--color-gold-accent-ink);
    opacity: 1;
  }

  .navbar.is-scrolled .nav-dropdown__item:hover .nav-dropdown__item-desc {
    color: var(--color-gold-accent-ink);
  }

  .navbar__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown__panel {
    gap: 14px;
    padding: 16px 0 0 16px;
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .navbar__actions .navbar__divider {
    display: none;
  }

  .navbar__actions .btn {
    width: 100%;
  }

  .lang-toggle {
    align-self: flex-start;
  }

  .hero-slide {
    padding: 112px clamp(20px, 6vw, 80px) 88px;
  }

  .hero-slide__stat {
    flex: 1 1 45%;
  }

  .hero-slide__chart-body {
    justify-content: flex-start;
  }

  .hero-slide__spark {
    flex-basis: 100%;
    max-width: none;
  }

  .hero-carousel__dots {
    bottom: 20px;
  }

  .founder-card {
    flex: 1 1 calc(50% - 12px);
  }

  .how-help__grid {
    grid-template-columns: 1fr;
  }

  .credibility__points {
    grid-template-columns: repeat(2, 1fr);
  }

  .vision-mission__mission {
    flex-basis: calc((100% - 24px) / 2);
  }

  .capabilities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillar-card {
    flex: 1 1 calc(50% - 9px);
  }

  .article-card {
    flex: 1 1 calc(50% - 8px);
  }

  .insight-listing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight-filters__field {
    flex: 1 1 100%;
  }

  .insight-filters__field--category {
    flex: 1 1 100%;
  }

  .insight-filters__submit {
    flex: 1 1 100%;
  }

  .site-footer__main {
    gap: 32px;
  }

  .site-footer__brand {
    flex: 1 1 100%;
    max-width: none;
  }

  .site-footer__col {
    flex: 1 1 calc(50% - 16px);
  }

  .site-footer__contact {
    flex: 1 1 100%;
    max-width: none;
  }

  .article-detail__layout {
    grid-template-columns: 1fr;
  }

  .article-detail__sidebar {
    position: static;
  }

  .related-articles__list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .article-teaser {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 480px) {
  .hero-carousel__arrow {
    width: 36px;
    height: 36px;
  }

  .hero-carousel__arrow--prev {
    left: 8px;
  }

  .hero-carousel__arrow--next {
    right: 8px;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* 3 per row (then 2 on the trailing row) on phones — tighter gap than the
     tablet breakpoint's 2-column layout above so 3 cards stay comfortable. */
  .founders__grid {
    gap: 12px;
  }

  .founder-card {
    flex: 1 1 calc(33.333% - 8px);
  }

  /* Reserve 2 lines for the name (some wrap, some don't) so every role line
     starts at the same height across cards. 48px = 2 × 16px/150% line-height. */
  .founder-card__name {
    min-height: 48px;
  }

  /* Mobile card simplifies to photo → name → role → CTA: drop the expertise
     line entirely and let the CTA sit right under the role. The bio's global
     flex: 1 is what pushed the CTA to the card's bottom edge (the "too far"
     gap) — with the expertise span gone, the id block no longer needs its
     old 136px reserve either, since nothing below has to line up anymore. */
  .founder-card__expertise {
    display: none;
  }

  .founder-card__id {
    min-height: 0;
  }

  /* Roles wrap to different line counts per card (Erwin's title is 2 lines,
     Harry's is 3+) so the CTA below them lands at different heights. Reserve
     a 3-line box (3 × 14px/150% = 63px) and center the text in it — then the
     "Lihat Bio Lengkap" link starts at the same height for every founder. */
  .founder-card__role {
    min-height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .founder-card__bio {
    flex: 0 0 auto;
    text-align: center;
  }

  .capabilities__grid {
    grid-template-columns: 1fr;
  }

  .pillar-card {
    flex: 1 1 100%;
  }

  .solutions__grid {
    grid-template-columns: 1fr;
  }

  .article-card {
    flex: 1 1 100%;
  }

  .insight-listing__grid {
    grid-template-columns: 1fr;
  }

  .page-hero__body {
    padding-bottom: 40px;
  }

  .credibility__points {
    grid-template-columns: 1fr;
  }

  .vision-mission {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .vision-mission__mission {
    flex-basis: 100%;
  }

  .site-footer {
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 24px;
  }

  .site-footer__col {
    flex: 1 1 100%;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .article-detail__title {
    font-size: 26px;
  }

  .article-detail__cover {
    aspect-ratio: 4 / 3;
  }

  .comment-form {
    padding: 20px 16px;
  }

  .comment-card {
    flex-direction: column;
  }

  .comment-card__avatar {
    width: 36px;
    height: 36px;
  }

  .related-articles__list {
    flex-direction: column;
  }

  .article-teaser {
    flex: 1 1 100%;
  }

  .article-teaser__photo {
    width: 96px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .credibility__audience {
    flex-direction: column;
  }

  /* .credibility__audience-item's flex-basis (240px) is a WIDTH on the
     desktop row layout, but flex-direction:column above turns the main axis
     vertical — the same flex-basis then reads as a forced minimum HEIGHT,
     leaving a huge empty gap under each short line of text. */
  .credibility__audience-item {
    flex: none;
  }

  .credibility__audience-divider {
    width: 100%;
    height: 1px;
  }

  .simple-page__logo-row {
    grid-template-columns: 1fr;
  }

  .simple-page__logo-frame {
    max-width: 220px;
    margin: 0 auto;
  }

  /* /leadership reuses .founder-card__photo (a real portrait, not the
     SUR+ logo) directly inside .simple-page__logo-row — same "shrink and
     center" treatment as .simple-page__logo-frame above at this width,
     just a bit larger since this photo is the section's real content. */
  .simple-page__logo-row .founder-card__photo {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Editorial blocks — what [PULL QUOTE] / [CALLOUT ANGKA] / [PANEL DUA SISI] /
   [DIAGRAM: …] / [KARTU BAGIAN n] markers in an article body turn into
   (src/utils/editorialBlocks.js). Used inside .article-body on article pages
   and on the Pemikiran SUR+ page. Mobile-first; widened at 640px.
   ========================================================================== */

/* Pull quote — large serif italic, gold rule on the left, full text width. */
.ed-pullquote {
  margin: 12px 0;
}

.ed-pullquote__text {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-gold-accent-ink);
}

.ed-pullquote__text p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 140%;
  color: #162456;
}

.ed-pullquote__text p + p {
  margin-top: 10px;
}

/* Inside an already-italic quote, the writer's own emphasis flips upright. */
.ed-pullquote__text em {
  font-style: normal;
}

/* Number callouts — big navy figures, 3 across on desktop, stacked on mobile. */
.ed-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ed-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: #162456;
  color: #ffffff;
}

.ed-stat__num {
  font: 700 28px/115% 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.ed-stat__label {
  font: 500 14px/145% 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.82);
}

/* Two-sided panel — the two sides face each other, the bridge ("Divergensi")
   spans beneath as the connector. Stacked in reading order on mobile. */
.ed-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ed-panel__side,
.ed-panel__bridge {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
}

.ed-panel__side {
  border: 1px solid #e4e7ec;
  background: #ffffff;
}

.ed-panel__side--left {
  border-top: 3px solid #162456;
}

.ed-panel__side--right {
  border-top: 3px solid var(--color-gold-accent-ink);
}

.ed-panel__bridge {
  background: var(--color-gold-tint);
  border: 1px dashed var(--color-gold-accent-ink);
  text-align: center;
}

.ed-panel p {
  font: 400 15px/165% 'Inter', sans-serif;
  color: #262626;
}

.ed-panel__bridge p {
  font-size: 16px;
  color: #162456;
}

.ed-panel strong {
  color: #162456;
}

/* Diagram slot (views/diagrams/<name>.ejs). */
.ed-diagram {
  margin: 8px 0;
}

/* 4-step cycle diagram: SVG ring on wider screens, a vertical list on phones. */
.ed-cycle__svg {
  display: none;
  width: 100%;
  height: auto;
}

.ed-cycle__node rect {
  fill: #ffffff;
  stroke: #162456;
  stroke-width: 1.5;
}

.ed-cycle__node text {
  font: 600 17px 'Inter', sans-serif;
  fill: #162456;
}

.ed-cycle__node--first rect {
  fill: #162456;
}

.ed-cycle__node--first text {
  fill: #ffffff;
}

.ed-cycle__arrow {
  fill: none;
  stroke: #98a2b3;
  stroke-width: 2;
}

.ed-cycle__arrow--loop {
  stroke: #d6a329; /* = --color-gold-accent-ink; SVG presentation attrs can't read custom properties in all engines */
  stroke-dasharray: 6 5;
}

.ed-cycle__head {
  fill: #98a2b3;
}

.ed-cycle__loop {
  font: italic 600 18px 'Source Serif 4', Georgia, serif;
  fill: #d6a329;
}

.ed-cycle__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
  padding: 0;
  margin: 0;
}

.ed-cycle__step {
  position: relative;
  padding: 12px 14px;
  border: 1.5px solid #162456;
  border-radius: 10px;
  font: 600 15px/140% 'Inter', sans-serif;
  color: #162456;
  text-align: center;
}

.ed-cycle__step--first {
  background: #162456;
  color: #ffffff;
}

/* Down-arrow between steps. */
.ed-cycle__step + .ed-cycle__step::before {
  content: '↓';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 16px/1 'Inter', sans-serif;
  color: #98a2b3;
}

.ed-cycle__step--loop {
  border: 1px dashed var(--color-gold-accent-ink);
  background: var(--color-gold-tint);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: var(--color-gold-accent-ink);
}

/* Part opener — big number + rule, then link or "coming soon". */
.ed-partcard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
}

.ed-partcard__num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: #162456;
}

.ed-partcard__rule {
  flex: 1 1 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-accent-ink), rgba(214, 163, 41, 0.15));
}

.ed-partcard__link {
  font: 600 14px/150% 'Inter', sans-serif;
  color: #162456;
  text-decoration: none;
  white-space: nowrap;
}

.ed-partcard__link:hover {
  text-decoration: underline;
}

.ed-partcard__soon {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-gold-tint);
  font: 600 12px/150% 'Inter', sans-serif;
  color: var(--color-gold-accent-ink);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .ed-pullquote__text {
    padding-left: 28px;
  }

  .ed-pullquote__text p {
    font-size: 27px;
  }

  .ed-stats--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ed-stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ed-stat__num {
    font-size: 34px;
  }

  .ed-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .ed-panel__bridge {
    grid-column: 1 / -1;
    padding: 18px 24px;
  }

  .ed-cycle__svg {
    display: block;
  }

  .ed-cycle__list {
    display: none;
  }

  .ed-partcard__num {
    font-size: 56px;
  }
}

/* ==========================================================================
   Pemikiran SUR+ (/tentang/pemikiran-surplus) — one CMS article in full: white page,
   ~700px reading column, ≥18px body on desktop, sticky TOC on wide screens.
   Navy (#162456) is the brand literal (no token).
   ========================================================================== */

.pemikiran {
  display: flex;
  justify-content: center;
  background: #ffffff;
}

.pemikiran__container {
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* Clears the fixed navbar, same idea as .article-detail__container. */
  padding: 116px 16px 72px;
}

.pemikiran__empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pemikiran-read__sep {
  color: #d0d5dd;
}

@media (min-width: 640px) {
  .pemikiran__container {
    padding: 124px clamp(20px, 6vw, 100px) 88px;
    gap: 40px;
  }
}

.pemikiran-read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.pemikiran-read__main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pemikiran-read__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ec;
}

.pemikiran-read__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 115%;
  letter-spacing: -0.01em;
  color: #162456;
}

.pemikiran-read__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font: 500 14px/150% 'Inter', sans-serif;
  color: var(--color-text-muted);
}

/* Byline naming a founder links to their /leadership bio. */
.pemikiran-read__author,
.article-detail__author {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(117, 117, 117, 0.45);
  text-underline-offset: 3px;
}

.pemikiran-read__author:hover,
.article-detail__author:hover {
  color: #162456;
  text-decoration-color: currentColor;
}

/* Cover image from CMS › Pemikiran SUR+, between the meta line and the
   summary — same treatment as an article's cover (.article-detail__cover). */
.pemikiran-read__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  object-fit: cover;
  object-position: center;
  background-color: #e2e8f0;
  border-radius: 16px;
}

@media (max-width: 640px) {
  .pemikiran-read__cover {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }
}

.pemikiran-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 20px 24px;
  border-left: 3px solid var(--color-gold-accent-ink);
  border-radius: 0 8px 8px 0;
  background: var(--color-gold-tint);
}

.pemikiran-summary__label {
  font: 600 12px/150% 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-accent-ink);
}

.pemikiran-summary__text {
  margin: 0;
  font: 400 17px/165% 'Inter', sans-serif;
  color: #162456;
}

.pemikiran-read__body {
  gap: 22px;
}

.pemikiran-read__body > p,
.pemikiran-read__body > ul > li {
  font-size: 17px;
  line-height: 175%;
  text-align: left;
}

.pemikiran-read__body > h2 {
  margin-top: 18px;
  font-size: 26px;
  color: #162456;
}

.pemikiran-read__body > ul > li::before {
  top: 13px;
}

.pemikiran-toc {
  display: none;
}

@media (min-width: 640px) {
  .pemikiran-read__body > p,
  .pemikiran-read__body > ul > li {
    font-size: 18px;
  }
}

@media (min-width: 1100px) {
  .pemikiran-read--has-toc {
    grid-template-columns: 220px minmax(0, 700px);
    justify-content: center;
    gap: 56px;
    align-items: start;
  }

  .pemikiran-read--has-toc .pemikiran-read__main {
    margin: 0;
  }

  .pemikiran-toc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }

  .pemikiran-toc__heading {
    font: 600 12px/150% 'Inter', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-accent-ink);
  }

  .pemikiran-toc__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #e4e7ec;
  }

  .pemikiran-toc__link {
    display: block;
    margin-left: -2px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    font: 500 13.5px/140% 'Inter', sans-serif;
    color: var(--color-text-muted);
    text-decoration: none;
  }

  a.pemikiran-toc__link:hover {
    border-left-color: var(--color-gold-accent-ink);
    color: #162456;
  }

  .pemikiran-toc__link--soon {
    color: #98a2b3;
  }

  .pemikiran-toc__soon {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-style: italic;
  }

  .pemikiran-toc__part {
    display: block;
    margin-bottom: 2px;
    font: 600 11px/150% 'Inter', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold-accent-ink);
  }
}


/* --- Part cards: consecutive [KARTU BAGIAN n] markers become a row of
   short, equal-height cards (number, the part's opening sentences, status).
   Each card is a button that opens the part's full text in a dialog
   (.ed-partdialog); the parts are listed again after the body
   (.ed-partlist). Scroll-snap works without JS; ed-carousel.js adds the
   arrow buttons, the edge fade (.is-enhanced/.is-start/.is-end) and the
   dialog. --- */

.ed-parts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0;
}

.ed-parts__track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-padding: 0 4px;
  padding: 6px 4px 14px;
  margin: -6px -4px 0;
  scrollbar-width: none;
}

.ed-parts__track::-webkit-scrollbar {
  display: none;
}

.ed-parts__track:focus-visible {
  outline: 2px solid var(--color-gold-accent-ink);
  outline-offset: 2px;
  border-radius: 16px;
}

/* Fade the trailing edge while there's more to swipe to. */
.ed-parts.is-enhanced:not(.is-end) .ed-parts__track {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}

.ed-partslide {
  position: relative;
  flex: 0 0 84%;
  scroll-snap-align: start;
  display: flex;
  min-height: 300px;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Accent bar along the top edge. */
.ed-partslide::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #162456;
  pointer-events: none;
}

.ed-partslide.is-live::before {
  background: linear-gradient(90deg, #162456, var(--color-gold-accent-ink));
}

.ed-partslide:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 36, 86, 0.35);
  box-shadow: 0 18px 36px -24px rgba(22, 36, 86, 0.55);
}

/* The whole card is one button (opens the dialog). */
.ed-partslide__open {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 24px 22px 20px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ed-partslide__open:focus-visible {
  outline: 2px solid var(--color-gold-accent-ink);
  outline-offset: -4px;
  border-radius: 14px;
}

.ed-partslide__num {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  color: #162456;
}

.ed-partslide__num::after {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--color-gold-accent-ink);
}

.ed-partslide__teaser {
  display: block;
  font: 400 15px/165% 'Inter', sans-serif;
  color: #344054;
}

.ed-partslide__teaser strong {
  color: #162456;
}

.ed-partslide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e4e7ec;
}

.ed-partslide__status {
  font: 600 13px/150% 'Inter', sans-serif;
  color: #162456;
}

.ed-partslide__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(22, 36, 86, 0.3);
  border-radius: 50%;
  font: 500 18px/1 'Inter', sans-serif;
  color: #162456;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ed-partslide:hover .ed-partslide__plus {
  background: #162456;
  border-color: #162456;
  color: #ffffff;
}

.ed-partslide__soon {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-gold-tint);
  font: 600 12px/150% 'Inter', sans-serif;
  letter-spacing: 0.02em;
  color: var(--color-gold-accent-ink);
  white-space: nowrap;
}

.ed-parts__controls {
  display: none;
  justify-content: flex-end;
  gap: 10px;
}

.ed-parts.is-enhanced .ed-parts__controls {
  display: flex;
}

.ed-parts__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(22, 36, 86, 0.25);
  border-radius: 50%;
  background: #ffffff;
  font: 600 16px/1 'Inter', sans-serif;
  color: #162456;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ed-parts__btn:hover:not(:disabled) {
  background: #162456;
  border-color: #162456;
  color: #ffffff;
}

.ed-parts__btn:focus-visible {
  outline: 2px solid var(--color-gold-accent-ink);
  outline-offset: 2px;
}

.ed-parts__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- Full-text dialog (native <dialog>, opened by ed-carousel.js) --- */

html.ed-dialog-open {
  overflow: hidden;
}

.ed-partdialog {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #262626;
  box-shadow: 0 30px 80px -30px rgba(10, 18, 40, 0.6);
}

.ed-partdialog::backdrop {
  background: rgba(10, 18, 40, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ed-partdialog__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ed-partdialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ec;
  background: #ffffff;
}

.ed-partdialog__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ed-partdialog__tabs::-webkit-scrollbar {
  display: none;
}

.ed-partdialog__tab {
  flex: none;
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #ffffff;
  font: italic 600 15px/1 'Source Serif 4', Georgia, serif;
  color: #475467;
  cursor: pointer;
}

.ed-partdialog__tab:hover {
  border-color: #162456;
  color: #162456;
}

.ed-partdialog__tab.is-active {
  border-color: #162456;
  background: #162456;
  color: #ffffff;
}

.ed-partdialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  background: #ffffff;
  font: 400 24px/1 'Inter', sans-serif;
  color: #162456;
  cursor: pointer;
}

.ed-partdialog__close:hover {
  background: #162456;
  border-color: #162456;
  color: #ffffff;
}

.ed-partdialog__tab:focus-visible,
.ed-partdialog__close:focus-visible,
.ed-partdialog__step:focus-visible,
.ed-partdialog__read:focus-visible {
  outline: 2px solid var(--color-gold-accent-ink);
  outline-offset: 2px;
}

.ed-partdialog__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ed-partdialog__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 18px 28px;
}

/* Only the part that was opened (or switched to) is shown — the display:flex
   above would otherwise override the [hidden] attribute ed-carousel.js sets
   on the other panels. */
.ed-partdialog__panel[hidden] {
  display: none;
}

.ed-partdialog__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ec;
}

.ed-partdialog__num {
  font: italic 600 44px/1 'Source Serif 4', Georgia, serif;
  color: #162456;
}

.ed-partdialog__kind {
  flex: 1;
  font: 600 12px/150% 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-accent-ink);
}

.ed-partdialog__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #162456;
  font: 600 13px/1.2 'Inter', sans-serif;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.ed-partdialog__read:hover {
  background: #0f1a40;
}

.ed-partdialog__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The part's text isn't a direct child of .article-body, so it needs its
   own type (same rhythm as the reading column). */
.ed-partdialog__body > p {
  font: 400 16px/175% 'Inter', sans-serif;
  color: #262626;
}

.ed-partdialog__body > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-partdialog__body > ul > li {
  position: relative;
  padding-left: 18px;
  font: 400 16px/170% 'Inter', sans-serif;
  color: #262626;
}

.ed-partdialog__body > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0b100;
}

.ed-partdialog__end {
  display: flex;
  justify-content: flex-start;
  padding-top: 18px;
  border-top: 1px solid #e4e7ec;
}

.ed-partdialog__nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #e4e7ec;
  background: #f8f9fc;
}

.ed-partdialog__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid rgba(22, 36, 86, 0.25);
  border-radius: 999px;
  background: #ffffff;
  font: 600 13px/1.2 'Inter', sans-serif;
  color: #162456;
  cursor: pointer;
}

.ed-partdialog__step:hover:not(:disabled) {
  border-color: #162456;
}

.ed-partdialog__step:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- Parts listed again after the body — links to the real articles --- */

.ed-partlist {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 2px solid #162456;
}

.ed-partlist__list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ed-partlist__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
  color: inherit;
  text-decoration: none;
}

.ed-partlist__item.is-live {
  background: #ffffff;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ed-partlist__item.is-live:hover {
  border-color: #162456;
  transform: translateX(3px);
}

.ed-partlist__num {
  flex: none;
  min-width: 2ch;
  font: italic 600 26px/1 'Source Serif 4', Georgia, serif;
  color: #162456;
}

.ed-partlist__item:not(.is-live) .ed-partlist__num {
  color: #98a2b3;
}

.ed-partlist__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ed-partlist__kind {
  font: 600 11px/150% 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-accent-ink);
}

.ed-partlist__item:not(.is-live) .ed-partlist__kind {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #475467;
}

.ed-partlist__title {
  font: 600 15px/140% 'Inter', sans-serif;
  color: #162456;
  overflow-wrap: anywhere;
}

.ed-partlist__arrow {
  flex: none;
  font: 600 16px/1 'Inter', sans-serif;
  color: #162456;
}

@media (min-width: 640px) {
  .ed-partslide {
    flex-basis: 300px;
    min-height: 320px;
  }

  .ed-partdialog {
    width: min(760px, calc(100% - 48px));
    height: auto;
    max-height: min(88vh, 920px);
    margin: auto;
    border-radius: 18px;
  }

  .ed-partdialog__inner {
    height: auto;
    max-height: min(88vh, 920px);
  }

  .ed-partdialog__bar,
  .ed-partdialog__nav {
    padding: 14px 24px;
  }

  .ed-partdialog__panel {
    padding: 28px 32px 32px;
  }

  .ed-partdialog__body > p,
  .ed-partdialog__body > ul > li {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-partslide,
  .ed-partlist__item.is-live {
    transition: none;
  }

  .ed-partslide:hover,
  .ed-partlist__item.is-live:hover {
    transform: none;
  }
}