/* ============================================================
   Pamflet Generasi — design tokens (from Figma: Pamflet Website)
   ============================================================ */
:root {
  --color-orange: #f15b26;
  --color-dark: #00245b; /* navy replaces black everywhere */
  --color-navy: #00245b;
  --color-teal: #6fc8c0;
  --color-blue-link: #0953a7;
  --color-blue-pale: #edf6fd;
  --color-pink-tag: #f9e2ef;
  --color-yellow-tag: #e7dd77;
  --color-cyan-tag: #d3f8ff;
  --color-offwhite: #fbfbfb;
  --color-white: #ffffff;
  --color-gray-700: #4a4e51;
  --color-gray-500: #707579;
  --color-gray-400: #a0a5a9;

  --color-footer-bg: var(--color-dark);
  --color-footer-input-bg: #0b3573;
  --color-footer-border: #3d5f96;

  /* League Gothic (Google Fonts, OFL, single 400 weight) is used for h1/h2
     display headings; DM Sans is used for everything else. */
  --font-display: "League Gothic", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Libre Baskerville is reserved for the knowledge-article page only. */
  --font-article: "Libre Baskerville", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1760px;
  --gutter: clamp(1.25rem, 4vw, 5rem);

  /* Single unified size for all DM Sans body/description/article-style
     paragraph text, regardless of which section it sits in. */
  --text-body: 1.3rem;

  --border-w: 3px;
  --shadow-hard: 8px 8px 0px var(--color-dark);
  --shadow-hard-sm: 4px 4px 0px var(--color-dark);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Set by an inline script in <head> until the fonts are ready (see fonts.css). */
.fonts-loading body { opacity: 0; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, dl, dd { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-orange);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Buttons & tags
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 1vw, 1.375rem);
  line-height: 1;
  white-space: nowrap;
  padding: 1rem 2rem;
  border-radius: 15px;
  border: var(--border-w) solid var(--color-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
  box-shadow: var(--shadow-hard);
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0px var(--color-dark);
}
.btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--color-dark);
}
.btn--secondary {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-hard);
}
.btn--secondary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0px var(--color-dark);
}
.btn--secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--color-dark);
}
.btn--small {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  color: var(--color-dark);
  white-space: nowrap;
}
.tag--pink { background: var(--color-pink-tag); }
.tag--yellow { background: var(--color-yellow-tag); }
.tag--cyan { background: var(--color-cyan-tag); }
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.4rem 1.1rem;
  border-radius: 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-white);
}
.badge--orange { background: var(--color-orange); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--offwhite { background: var(--color-offwhite); }
.section--pale { background: var(--color-blue-pale); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--color-orange);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.eyebrow--light { color: var(--color-orange); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dark);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0.5px;
}
.section-title--light { color: var(--color-white); }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 3.5rem);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-dark);
  /* Fixed height (logo 4rem + padding + 2px border) so the bar is exactly the
     same on every page whichever link is selected; own layer keeps it from
     repainting mid-scroll over the hero. */
  height: 5.225rem;
  transform: translate3d(0, 0, 0);
  transition: transform 0.28s ease;
}
/* Sub-section anchor targets (Tentang Kami / Program submenus): land below
   the sticky navbar instead of right under it. */
#apa-itu-pamflet, #cara-kerja, #isu-pamflet, #perjalanan, #divisi, #mitra, #karir,
#suka-ria-remaja, #simpul, #urban-futures, #awarenest-cop, #program-selesai {
  scroll-margin-top: 6.5rem;
}
/* Slides out of view while the page scrolls down; comes back when scrolling
   up, at the very top, or when the menu / a nav link has focus (js/main.js). */
.navbar.is-hidden { transform: translate3d(0, -100%, 0); }
@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none; }
}
.navbar__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-brand img { height: 4rem; width: auto; }
.nav-brand__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-dark);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.5vw, 0.5rem);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
}
.nav-links a { white-space: nowrap; }
.nav-links a:not(.btn) {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible,
.nav-links a:not(.btn)[aria-current="page"] {
  background: var(--color-orange);
  color: var(--color-white);
}
.nav-contact { margin-left: 0.5rem; font-size: 1em; }

/* "Tentang Kami" / "Program" submenus: the sub-sections of that page, shown
   as a dropdown on hover/focus (desktop) or expanded inline (mobile menu). */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item > a:not(.btn)::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  vertical-align: middle;
  opacity: 0.7;
}
.nav-item__toggle { display: none; }
.nav-subnav {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 15rem;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 12px;
  box-shadow: var(--shadow-hard-sm);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Invisible bridge over the gap between the link and the panel, so moving
   the mouse diagonally from one to the other never drops out of :hover. */
.nav-subnav::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}
.nav-item:hover .nav-subnav,
.nav-item:focus-within .nav-subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav-subnav a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: normal;
  color: var(--color-dark);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-subnav a:hover,
.nav-subnav a:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

/* Search in the top nav: icon button; the field drops down beneath it as a
   popover (no layout shift), and is always inline inside the mobile menu */
.nav-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
}
.nav-search__input {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  width: 19rem;
  max-width: calc(100vw - 2rem);
  padding: 0.8rem 1.1rem;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 999px;
  outline: none;
  background: var(--color-white);
  box-shadow: var(--shadow-hard-sm);
  font-size: 0.95rem;
  color: var(--color-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-search__input::placeholder { color: var(--color-gray-500); }
.nav-search.is-open .nav-search__input { opacity: 1; visibility: visible; transform: none; }
.nav-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.nav-search__btn:hover,
.nav-search__btn:focus-visible,
.nav-search.is-open .nav-search__btn { background: var(--color-yellow-tag); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.4rem;
  padding: 3px;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-white);
  flex-shrink: 0;
}
.lang-switch__btn {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  color: var(--color-dark);
  opacity: 0.5;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.lang-switch__btn:hover,
.lang-switch__btn:focus-visible { opacity: 0.85; }
.lang-switch__btn.is-active {
  background: var(--color-dark);
  color: var(--color-white);
  opacity: 1;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================================================
   Hero
   ============================================================ */
/* Hero + rolling-text strip together fill the first screen: --navbar-h and
   --strip-h are measured by js/main.js (fallbacks below are close guesses),
   so the strip lands at the bottom edge of the window on first load. */
.hero {
  --hero-pad: clamp(1rem, 3vh, 4rem);
  --hero-h: calc(100vh - var(--navbar-h, 6.25rem) - var(--strip-h, 3.75rem));
  padding-block: var(--hero-pad);
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .hero { --hero-h: calc(100dvh - var(--navbar-h, 6.25rem) - var(--strip-h, 3.75rem)); }
}
.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
/* Text sits above the decorative yellow squiggle (which hangs out of the media column). */
.hero__text { position: relative; z-index: 2; }
.hero__text .eyebrow {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 3vh, 3rem);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, min(7vw, 8.2vh), 7.5rem);
  line-height: 1.2em;
  margin-block: 0 clamp(0.75rem, 2.5vh, 1.5rem);
  letter-spacing: 0em;
}
.text-cycle {
  display: inline-block;
  animation: text-color-cycle 6s ease-in-out infinite;
}
@keyframes text-color-cycle {
  0%, 100% { color: var(--color-orange); }
  25% { color: var(--color-blue-link); }
  50% { color: var(--color-teal); }
  75% { color: var(--color-navy); }
}
.dance-word {
  display: inline-block;
  animation: dance-word 5s ease-in-out infinite;
  animation-delay: calc(var(--dance-i, 0) * 0.25s);
}
@keyframes dance-word {
  /* Bounces briefly, then holds still for the rest of the 5s cycle */
  0%, 84%, 100% { transform: translateY(0) rotate(0deg); }
  4% { transform: translateY(-0.16em) rotate(-4deg); }
  9% { transform: translateY(0.07em) rotate(2deg); }
  14% { transform: translateY(-0.1em) rotate(-2deg); }
  19% { transform: translateY(0) rotate(0deg); }
}
.hero__desc {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: clamp(1rem, 3.5vh, 2rem);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero__media {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__squiggle {
  /* Sized and positioned to match Figma's proportions relative to the
     hero photo: left/top/width are % of hero__media (≈ the photo's own
     box); aspect-ratio (from the source SVG, 1345.965×777) keeps the
     curve from stretching now that height is no longer forced by inset. */
  position: absolute;
  left: -62%;
  top: 35%;
  width: 188%;
  height: auto;
  aspect-ratio: 1345.965 / 777;
  max-width: none;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
/* Hero illustration: still image + a transparent video that plays over just
   the hovered room / the door (js/main.js builds the clip masks from the
   polygons in the zones <svg>). */
.hero-house {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  min-width: 0;
  line-height: 0;
  transform: rotate(2deg);
}
.hero__photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--hero-h) - 2 * var(--hero-pad) - 1.5rem);
  object-fit: contain;
}
.hero-house__canvas,
.hero-house__zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-house__canvas {
  opacity: 0;
  pointer-events: none;
}
/* the video itself is never shown; its frames are drawn into the canvas */
.hero-house__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}
.hero-house.is-playing .hero-house__canvas { opacity: 1; }
.hero-house.is-playing .hero-house__still { visibility: hidden; }
.hero-house__zones polygon {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

/* ============================================================
   Logo strip
   ============================================================ */
.logo-strip {
  border-top: 2px solid var(--color-dark);
  border-bottom: 2px solid var(--color-dark);
  overflow: hidden;
  padding-block: 1.25rem;
}
.logo-strip__track {
  display: flex;
  width: max-content;
  animation: logo-marquee 28s linear infinite;
}
.logo-strip:hover .logo-strip__track {
  animation-play-state: paused;
}
.logo-strip__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline-end: clamp(1.5rem, 3vw, 3rem);
}
.logo-strip__group p {
  margin: 0;
  color: var(--color-dark);
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  white-space: nowrap;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Work cards ("Yang kami kerjakan")
   ============================================================ */
.work-section .container {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.work-card {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 20rem;
}
/* Homepage cards have no tag row now, so they size to their text. */
.work-section .work-card { min-height: 0; }
/* Illustration banner at the top of a work card (bleeds to the card edge) */
.work-card__art {
  margin: -2.5rem -2.5rem 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.work-card__art svg { display: block; width: 100%; height: auto; }
.work-card--blue { box-shadow: 5px 5px 0px var(--color-blue-link); }
.work-card--orange { box-shadow: 5px 5px 0px var(--color-orange); }
.work-card--teal { box-shadow: 5px 5px 0px var(--color-teal); }
.work-card__body h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 1.7rem);
  margin-bottom: 1rem;
}
.work-card__body p {
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ============================================================
   Pillars ("Tiga pilar Pamflet", Tentang Kami): one shared
   illustration in the middle, a labelled box for each pillar
   arranged around the part of the illustration it names.
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr) minmax(0, 0.85fr);
  grid-template-areas:
    "activism art studies"
    "activism art movement";
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pillars__art { grid-area: art; }
.pillars__art img { display: block; width: 100%; height: auto; }
.pillar-box {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.25rem, 2vw, 2rem);
  box-shadow: 6px 6px 0 var(--pillar-accent, var(--color-dark));
}
.pillar-box h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  margin-bottom: 0.75rem;
  /* Dark, not the accent colour: teal/yellow read poorly as text on white. */
  color: var(--color-dark);
}
.pillar-box p {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-dark);
}
.pillar-box--activism { grid-area: activism; --pillar-accent: var(--color-blue-link); }
.pillar-box--studies { grid-area: studies; --pillar-accent: var(--color-teal); }
.pillar-box--movement { grid-area: movement; --pillar-accent: var(--color-yellow-tag); }

/* ============================================================
   Why section ("Kenapa Pamflet?") — pale blue + texture overlay
   ============================================================ */
.why-section {
  position: relative;
  background: var(--color-blue-pale);
  overflow: hidden;
}
.why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/texture-why-pamflet.jpg");
  /* Same grain size in every section: `cover` scaled the texture to each
     section's own height, so a tall section next to a short one (e.g. the page
     header above "Apa itu Pamflet") showed a much coarser pattern. */
  background-size: max(100%, 1800px) auto;
  background-repeat: repeat-y;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.78;
  pointer-events: none;
}
.why-section > .container { position: relative; z-index: 1; }
.why-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Large screens: a taller section and more breathing room between the
   illustration and the text column, without touching the art's own size. */
@media (min-width: 1200px) {
  #kenapa-pamflet { padding-block: clamp(6rem, 10vw, 11rem); }
  #kenapa-pamflet .why-split { column-gap: clamp(5rem, 8vw, 9rem); }
}
/* Same "photo card" treatment used for illustrations/photos elsewhere on the
   site (see .page-hero__photo): a rotated colour blob behind a bordered,
   hard-shadowed card, kept here as its own rule so .why-split__art can stay
   sticky (position: relative on .page-hero__photo would fight that). */
.why-split__art {
  position: sticky;
  top: 7rem;
  padding: 1rem;
}
.why-split__art::before {
  content: "";
  position: absolute;
  inset: 0 -2% -4% 4%;
  background: var(--color-yellow-tag);
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  transform: rotate(-6deg);
  z-index: 0;
}
.why-split__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1583 / 1130;
  object-fit: cover;
  margin-inline: auto;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 8px 8px 0 var(--color-teal);
  transform: rotate(1.5deg);
}
/* Floating stickers around the photo card, echoing the chat-bubble / dot /
   sparkle accents from the illustration this replaced, so the corner
   doesn't read as empty next to a single framed image. */
.why-split__art-sticker {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 var(--color-dark));
}
.why-split__art-sticker--bubble { width: 6.5rem; top: 0.5rem; left: -1.75rem; transform: rotate(-8deg); }
.why-split__art-sticker--dots { width: 5rem; top: -0.75rem; right: -1.5rem; }
.why-split__art-sticker--note { width: 8.5rem; bottom: 1.5rem; right: -2.5rem; transform: rotate(5deg); }
.why-split__art-sticker--sparkle-lg { width: 1.75rem; top: 42%; left: -1.5rem; }
.why-split__art-sticker--sparkle-sm { width: 1.25rem; bottom: 12%; left: 8%; }
.why-split__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.why-split__lead {
  font-size: var(--text-body);
  line-height: 1.6;
}
.why-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.why-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.why-point__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 3px 3px 0 var(--color-dark);
}
.why-point__num--teal { background: var(--color-teal); }
.why-point__num--orange { background: var(--color-orange); color: var(--color-white); }
.why-point__num--yellow { background: var(--color-yellow-tag); }
.why-point h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.why-point p {
  font-size: var(--text-body);
  line-height: 1.55;
}

/* ============================================================
   Filter strip (search + selects)
   ============================================================ */
.filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* "See all" button under the Blog / Produk lists on the home page */
.list-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Home page Blog / Produk lists show only the "see all" link: no search box or dropdowns */
.filter-strip .search-row { display: none; }
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
}
.search-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  flex: 0 1 24rem;
}
.search-pill__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.search-pill input[type="search"] {
  border: none;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  color: var(--color-gray-700);
  background: transparent;
}
.filter-pill {
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-white);
  padding: 0.75rem 2rem 0.75rem 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300245b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.see-all {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--color-blue-link);
  white-space: nowrap;
}
.see-all:hover { text-decoration: underline; }

/* ============================================================
   Product / Blog cards
   ============================================================ */
.product-grid, .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.product-card, .blog-card {
  display: block;
}
.product-card__media, .blog-card__media {
  position: relative;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  aspect-ratio: 659 / 563;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card__media { aspect-ratio: 659 / 288; }
.product-card__media img, .blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Same "lift + grow hard-shadow" interaction as .btn--primary:hover,
   scaled down to the thumbnail's smaller base shadow. Applied to just
   the media box (not the whole card) for both card types, so blog and
   product thumbnails behave identically on hover. */
.product-card:hover .product-card__media,
.blog-card:hover .blog-card__media {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px var(--color-dark);
}
.product-card__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.3;
  margin-top: 1.5rem;
  transition: color 0.2s ease;
}
.product-card:hover .product-card__title {
  color: var(--color-blue-link);
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.blog-card__body h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.3;
  transition: color 0.2s ease;
}
.blog-card:hover .blog-card__body h3 {
  color: var(--color-blue-link);
}
.blog-card__meta {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-dark);
}

/* Partner logo wall (Tentang Kami) */
.partner-grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* From here on, fill the full container width: as many ~9rem tiles as fit,
   stretched evenly, instead of capping out and leaving space on wide screens. */
@media (min-width: 700px) { .partner-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.partner-intro {
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 72ch;
  margin-top: 1.5rem;
}
.partner-grid li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.75rem;
  transition: transform 0.2s ease;
}
.partner-grid li:hover { transform: translateY(-4px); }
.partner-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   Impact stats (dark "Dampak Kami")
   ============================================================ */
.impact-stats--dark {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}
.impact-stats--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/texture-why-pamflet.jpg");
  background-size: cover;
  background-position: center;
  /* Overlay (not multiply) so the light grain actually shows up against navy
     instead of just darkening further. */
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.impact-stats--dark > .container {
  position: relative;
  z-index: 1;
}
.impact-stats__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.impact-stats__intro .eyebrow {
  margin-bottom: 1.25rem;
}
.impact-stats__desc {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-top: 1.5rem;
  max-width: 40ch;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 2.5rem;
}
.stat__top {
  display: flex;
  align-items: center;
}
.stat__icon {
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: clamp(3.5rem, 7vw, 5.5rem);
  flex-shrink: 0;
  object-fit: contain;
  margin-right: -0.75rem;
  position: relative;
  z-index: 0;
}
.stat__number {
  font-family: var(--font-sans);
  color: var(--color-teal);
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
}
.stat__percent {
  font-size: 0.4em;
  margin-left: 0.35rem;
}
.stat__label {
  margin-top: 0.75rem;
  font-size: clamp(1rem, 1.3vw, 1.6875rem);
  line-height: 1.4;
  max-width: 32ch;
}

/* ============================================================
   Impact map ("Sebaran dampak") — placeholder interactive map
   ============================================================ */
.impact-map-section__intro {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.impact-map-section__desc {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-top: 1.25rem;
}
.impact-map-section__note {
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-top: 1.5rem;
}
.impact-map-stage { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.impact-map-chart { width: 100%; height: clamp(17rem, 40vw, 36rem); }
.impact-map-chart[hidden] { display: none; }
/* Touch: a vertical swipe scrolls the page until the map is zoomed in, then
   one finger pans the map (class toggled by js/impact-map.js). */
.impact-map-chart canvas { touch-action: pan-y !important; }
.impact-map-chart.is-zoomed canvas { touch-action: none !important; }
.impact-map-hint { display: none; }
@media (max-width: 760px) {
  /* Taller map area on phones: more room to zoom and tap the pins. */
  .impact-map-chart { height: clamp(21rem, 105vw, 30rem); }
}
@media (hover: none) {
  .impact-map-hint {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-gray-400);
  }
}
.impact-map-legend {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 1rem;
  color: var(--color-white);
}
.impact-map-legend li { display: inline-flex; align-items: center; gap: 0.6rem; }
.impact-map-legend__swatch { width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--color-teal); }
.impact-map-legend__pin {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-orange);
  border: 2px solid var(--color-white);
}
.impact-fallback { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--color-white); line-height: 1.6; }

/* Hover / tap card with the programs and impact of a province */
.impact-tip {
  position: fixed;
  z-index: 300;
  width: min(24rem, calc(100vw - 1rem));
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  padding: 1rem 1.15rem;
  background: var(--color-white);
  color: var(--color-dark);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--color-teal);
  pointer-events: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
.impact-tip[hidden] { display: none; }
.impact-tip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.impact-tip__region { font-size: 1.15rem; }
.impact-tip__count { font-size: 0.85rem; color: var(--color-gray-700); font-weight: 700; }
.impact-tip__prog { padding-top: 0.65rem; margin-top: 0.65rem; border-top: 1px solid rgba(20, 22, 24, 0.15); }
.impact-tip__prog:first-of-type { margin-top: 0; }
.impact-tip__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.impact-tip__pill {
  flex-shrink: 0;
  padding: 0.1rem 0.6rem;
  border-radius: 28px;
  background: var(--color-gray-400);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
}
.impact-tip__pill.is-active { background: var(--color-orange); }
.impact-tip__meta { color: var(--color-dark); font-size: 0.85rem; margin-top: 0.15rem; }
.impact-tip__desc {
  margin-top: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.impact-tip.is-pinned { pointer-events: auto; }
.impact-tip__desc.is-short { -webkit-line-clamp: 2; }
.impact-tip.is-pinned .impact-tip__desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.impact-tip__hint { margin-top: 0.75rem; font-size: 0.8rem; font-style: italic; color: var(--color-dark); }
.impact-tip__impact { margin-top: 0.35rem; font-weight: 700; color: var(--color-blue-link); }
.impact-tip__impact.is-empty { font-weight: 400; font-style: italic; color: var(--color-dark); }
.impact-tip__close {
  float: right;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem -0.4rem 0 0.5rem;
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  background: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
@media (hover: none) {
  .impact-tip {
    left: 0.5rem !important;
    right: 0.5rem;
    top: auto !important;
    bottom: 0.5rem;
    width: auto;
    max-height: 60vh;
    pointer-events: auto;
  }
}

/* Combined "Dampak Kami" section: stats, then the map on the same navy band */
.impact-map-block { margin-top: clamp(3rem, 6vw, 5rem); }
.impact-map-block__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--color-white);
}
.impact-stats--dark .impact-map-section__desc { color: var(--color-white); }
.impact-stats--dark .impact-map-section__note { color: var(--color-gray-400); }

/* ============================================================
   Issue puzzle (Tentang Kami): the issue names as jigsaw pieces
   ============================================================ */
.issue-section { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.issue-frame {
  padding: clamp(1.25rem, 3vw, 2rem);
}
.issue-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem 1.5rem; }
.puzzle-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.puzzle-status {
  padding: 0.35rem 1rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-yellow-tag);
  font-weight: 700;
  font-size: 0.95rem;
}
.puzzle-status.is-solved { background: var(--color-teal); }
.puzzle-board {
  position: relative;
  list-style: none;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  min-height: 16rem;
  overflow: hidden;
  background-image: radial-gradient(rgba(20, 22, 24, 0.14) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  touch-action: pan-y;
}
.puzzle-ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.puzzle-piece {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  pointer-events: none;
}
.puzzle-piece:focus-visible { outline: none; }
.puzzle-piece:focus-visible svg { filter: drop-shadow(3px 3px 0 var(--color-dark)) drop-shadow(0 0 0 var(--color-blue-link)) drop-shadow(0 0 3px var(--color-blue-link)); }
.puzzle-piece.is-settling { transition: transform 0.5s cubic-bezier(0.22, 1.1, 0.36, 1); }
.puzzle-piece.is-dragging { cursor: grabbing; }
.puzzle-piece svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 3px 0 var(--color-dark)); pointer-events: none; }
.puzzle-piece svg path { pointer-events: visiblePainted; }
.puzzle-piece.is-dragging svg { filter: drop-shadow(7px 7px 0 var(--color-dark)); }
.puzzle-piece.is-locked { cursor: default; }
.puzzle-piece.is-locked svg { filter: drop-shadow(1px 1px 0 var(--color-dark)); }
.puzzle-piece svg .puzzle-outline { pointer-events: none; }
.puzzle-board.is-solved .puzzle-piece svg .puzzle-outline { stroke-width: 1.5; }
.puzzle-piece.is-popping { animation: puzzle-pop 0.45s ease; }
.puzzle-piece__label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  pointer-events: none;
}
.puzzle-piece__text {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.22em 0.4em;
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid var(--color-dark);
  border-radius: 0.7em;
}
@keyframes puzzle-pop {
  0% { filter: none; scale: 1; }
  50% { scale: 1.06; }
  100% { scale: 1; }
}
.puzzle-board.is-solved .puzzle-piece { animation: puzzle-pop 0.6s ease; }
.puzzle-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.puzzle-confetti span {
  position: absolute;
  width: 10px;
  height: 14px;
  border: 2px solid var(--color-dark);
  border-radius: 3px;
  animation: puzzle-confetti 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes puzzle-confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
/* Without JavaScript the pieces are just a readable list */
.puzzle-board:not(.is-ready) { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; min-height: 0; }
.puzzle-board:not(.is-ready) .puzzle-piece { position: static; pointer-events: auto; padding: 0.5rem 1rem; border: 2px solid var(--color-dark); border-radius: 999px; background: var(--color-white); }
.puzzle-board:not(.is-ready) .puzzle-piece__label { position: static; }
@media (prefers-reduced-motion: reduce) {
  .puzzle-piece.is-settling { transition: none; }
}

/* ============================================================
   Partners ("Mitra Kerja")
   ============================================================ */
.partners__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.partners__intro p {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-block: 1.25rem 2rem;
  max-width: 42ch;
}
.partners__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.partners__logos img {
  max-height: 128px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

/* ============================================================
   CTA — Dukung Kami
   ============================================================ */
.cta-partners {
  position: relative;
  overflow: hidden;
}
.cta-partners::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/texture-why-pamflet.jpg");
  background-size: max(100%, 1800px) auto;
  background-repeat: repeat-y;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.78;
  pointer-events: none;
}
.cta-partners > .container { position: relative; z-index: 1; }
.cta-partners__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cta-partners__inner p {
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 55ch;
}
.cta-partners__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-white);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) minmax(240px, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand__mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.footer-brand__swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--color-teal);
  border: 2px solid var(--color-white);
  display: inline-block;
}
.footer-brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
.footer-brand p {
  font-family: var(--font-sans);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36ch;
}
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 1.5rem;
}
.footer-col { display: flex; flex-direction: column; gap: 1rem; }
.footer-col__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal);
  margin-bottom: 0.25rem;
}
.footer-col a {
  font-family: var(--font-sans);
  font-size: 1rem;
}
.footer-col a:hover { color: var(--color-teal); }

.footer-newsletter__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-orange);
  margin-bottom: 0.5rem;
}
.footer-newsletter > p {
  font-family: var(--font-sans);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.footer-newsletter__form {
  display: flex;
  gap: 0.5rem;
}
.footer-newsletter__form input {
  flex: 1;
  min-width: 0;
  background: var(--color-footer-input-bg);
  border: 1px solid var(--color-footer-border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.footer-newsletter__form input::placeholder { color: var(--color-gray-400); }
.footer-newsletter__form button {
  background: var(--color-orange);
  border: none;
  border-radius: 4px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.footer-newsletter__form button img { width: 18px; height: 18px; }
.footer-newsletter__note {
  min-height: 1.25em;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-teal);
}

.footer-bottom hr {
  border: none;
  border-top: 1px solid var(--color-footer-border);
  margin: 0 0 1.5rem;
}
.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-gray-500);
}

/* ============================================================
   Entrance animation ("reveal")
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.05s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1.05s cubic-bezier(0.16, 0.84, 0.44, 1);
  /* A built-in pause before anything moves, so items don't snap into motion
     the instant they cross into view — reads more deliberate, more dramatic. */
  transition-delay: var(--reveal-delay, 0.2s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered groups: nth-child delay per item within their grid/row */
.hero__text > .reveal:nth-child(1) { --reveal-delay: 0.15s; }
.hero__text > .reveal:nth-child(2) { --reveal-delay: 0.32s; }
.hero__text > .reveal:nth-child(3) { --reveal-delay: 0.49s; }
.hero__text > .reveal:nth-child(4) { --reveal-delay: 0.66s; }
.hero__media.reveal { --reveal-delay: 0.4s; }

.why-points > .reveal:nth-child(2) { --reveal-delay: 0.2s; }
.why-points > .reveal:nth-child(3) { --reveal-delay: 0.36s; }
.stat-grid > .reveal:nth-child(1) { --reveal-delay: 0.15s; }
.stat-grid > .reveal:nth-child(2) { --reveal-delay: 0.28s; }
.stat-grid > .reveal:nth-child(3) { --reveal-delay: 0.41s; }
.stat-grid > .reveal:nth-child(4) { --reveal-delay: 0.54s; }
.stat-grid > .reveal:nth-child(5) { --reveal-delay: 0.67s; }
.work-grid > .reveal:nth-child(1) { --reveal-delay: 0.15s; }
.work-grid > .reveal:nth-child(2) { --reveal-delay: 0.32s; }
.work-grid > .reveal:nth-child(3) { --reveal-delay: 0.49s; }

.product-grid > .reveal:nth-child(1),
.blog-grid > .reveal:nth-child(1) { --reveal-delay: 0.15s; }
.product-grid > .reveal:nth-child(2),
.blog-grid > .reveal:nth-child(2) { --reveal-delay: 0.32s; }
.product-grid > .reveal:nth-child(3),
.blog-grid > .reveal:nth-child(3) { --reveal-delay: 0.49s; }



.footer-top > .reveal:nth-child(1) { --reveal-delay: 0.15s; }
.footer-top > .reveal:nth-child(2) { --reveal-delay: 0.32s; }
.footer-top > .reveal:nth-child(3) { --reveal-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .logo-strip__track {
    animation: none;
  }
  .logo-strip {
    overflow-x: auto;
  }
  .text-cycle {
    animation: none;
    color: var(--color-orange);
  }
  .dance-word {
    animation: none;
    transform: none;
  }
}

/* ============================================================
   Inner-page hero (breadcrumb + title banner)
   ============================================================ */
.page-hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--color-gray-700); }
.breadcrumb a:hover { color: var(--color-orange); }
.breadcrumb__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-700);
}
.breadcrumb__home svg { display: block; width: 18px; height: 18px; }
.breadcrumb__home:hover { color: var(--color-orange); }
.breadcrumb a:not(.breadcrumb__home) {
  background: rgba(0, 36, 91, 0.06);
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  font-weight: 500;
}
.breadcrumb a:not(.breadcrumb__home):hover {
  background: var(--color-blue-pale);
  color: var(--color-blue-link);
}
.breadcrumb span[aria-current="page"] { color: var(--color-blue-link); font-weight: 600; }
.breadcrumb__home + span[aria-hidden="true"] { font-size: 0; }
.breadcrumb__home + span[aria-hidden="true"]::before { content: "\203A"; font-size: 1rem; color: var(--color-gray-500); }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.2em;
  margin-block: 0.75rem 1.25rem;
  letter-spacing: 0em;
}
.page-hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 56ch;
  color: var(--color-dark);
}

/* ============================================================
   Prose / long-form text blocks
   ============================================================ */
.prose {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 72ch;
  margin-top: 1.5rem;
}
.prose p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-dark);
}

#apa-itu-pamflet { padding-top: clamp(1rem, 2.5vw, 2rem); }
/* Tentang Kami intro: description on the left, illustration on the right */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-intro .prose { margin-top: 0; max-width: none; }
.about-intro .prose p { font-size: var(--text-body); line-height: 1.7; }
.about-intro__art { max-width: 32rem; width: 100%; justify-self: center; }

/* ============================================================
   Value blocks (Visi / Misi / Prinsip)
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.value-block {
  border-top: 4px solid var(--color-dark);
  padding-top: 1.5rem;
}
.value-block__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.9rem;
}
.value-block p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-dark);
}
.value-block--visi { border-color: var(--color-blue-link); }
.value-block--visi .value-block__label { color: var(--color-blue-link); }
.value-block--misi { border-color: var(--color-orange); }
.value-block--misi .value-block__label { color: var(--color-orange); }
.value-block--prinsip { border-color: var(--color-teal); }
.value-block--prinsip .value-block__label { color: var(--color-teal); }

/* ============================================================
   Program detail pages: "Kegiatan Utama" activity list
   ============================================================ */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.activity-item {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 6px 6px 0 var(--program-accent, var(--color-dark));
}
.activity-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--program-accent, var(--color-dark));
  color: var(--color-dark);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.activity-item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.activity-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray-700);
}

/* ============================================================
   Work-card additions: small eyebrow label + icon (reused across pages)
   ============================================================ */
.work-card__eyebrow {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-link);
  margin-bottom: 0.75rem;
}

/* ============================================================
   Timeline ("Perjalanan Pamflet")
   ============================================================ */
.timeline-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 1rem;
}
.timeline-hint { font-weight: 700; font-size: 0.95rem; color: var(--color-dark); }
.timeline-buttons { display: flex; gap: 0.75rem; }
.timeline-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--color-dark);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.timeline-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-dark); }
.timeline-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-dark); }
.timeline-btn:disabled { opacity: 0.35; cursor: default; }

/* Horizontal, draggable timeline (js/main.js adds the mouse-drag) */
.timeline {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.5rem var(--gutter) 2.25rem;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--color-dark) transparent;
}
.timeline.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.timeline:focus-visible { outline: 3px solid var(--color-blue-link); outline-offset: -3px; }
.timeline__item {
  --timeline-accent: var(--color-blue-link);
  position: relative;
  flex: 0 0 clamp(16rem, 28vw, 26rem);
  scroll-snap-align: start;
  padding-top: 3.5rem;
}
.timeline__item:nth-child(2) { --timeline-accent: var(--color-orange); }
.timeline__item:nth-child(3) { --timeline-accent: var(--color-teal); }
.timeline__item:nth-child(4) { --timeline-accent: var(--color-yellow-tag); }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0;
  right: -2rem;
  height: 3px;
  background: var(--color-dark);
}
.timeline__item:last-child::before { right: 0; }
.timeline__year {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0.3rem 1rem;
  background: var(--timeline-accent);
  color: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 28px;
  font-weight: 700;
  font-size: 1rem;
}
.timeline__item:nth-child(3) .timeline__year,
.timeline__item:nth-child(4) .timeline__year { color: var(--color-dark); }
.timeline__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--timeline-accent);
}
.timeline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
.timeline__content { margin-top: 1.5rem; }
.timeline__content h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.timeline__content p {
  color: var(--color-dark);
  line-height: 1.6;
  font-size: var(--text-body);
}

/* ============================================================
   Team grid ("Tim & Divisi")
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.team-card__photo {
  aspect-ratio: 1;
  border: 2px dashed var(--color-gray-400);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.9rem;
  background: var(--color-offwhite);
  margin-bottom: 1rem;
}
.team-card h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
.team-card p {
  color: var(--color-dark);
  font-size: 0.95rem;
}

/* ============================================================
   Placeholder / empty-state boxes (mitra logos, karir)
   ============================================================ */
.placeholder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.placeholder-box {
  width: 160px;
  height: 80px;
  border: 2px dashed var(--color-gray-400);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  background: var(--color-white);
}
.empty-state {
  border: 2px dashed var(--color-gray-400);
  border-radius: 15px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-gray-700);
  font-size: var(--text-body);
  line-height: 1.65;
  max-width: 60ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.value-block--blue { border-color: var(--color-blue-link); }
.value-block--blue .value-block__label { color: var(--color-blue-link); }
.value-block--teal-alt { border-color: var(--color-teal); }
.value-block--teal-alt .value-block__label { color: var(--color-teal); }
.value-stack {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: clamp(2rem, 4vw, 2.5rem);
  max-width: 72ch;
}
.tag--blue-pale { background: var(--color-blue-pale); color: var(--color-blue-link); }

/* ============================================================
   Simple divided list (e.g. "Proyek" archive)
   ============================================================ */
.simple-list {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  max-width: 72ch;
}
.simple-list li {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(20, 22, 24, 0.12);
}
.simple-list li:last-child { border-bottom: 1px solid rgba(20, 22, 24, 0.12); }
.simple-list h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}
.simple-list span {
  color: var(--color-gray-500);
  font-size: 0.95rem;
}

/* ============================================================
   Document cards (Perpustakaan Digital)
   ============================================================ */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.doc-card {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
.doc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: var(--border-w) solid var(--color-dark);
  transition: background 0.3s ease;
}
.doc-card:hover .doc-card__media {
  background: var(--color-blue-pale);
}
.doc-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 28px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.doc-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.doc-card__meta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-blue-link);
}
.doc-card__body h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.doc-card:hover .doc-card__body h3 {
  color: var(--color-blue-link);
}
.doc-card__downloads {
  font-size: 0.85rem;
  color: var(--color-gray-500);
}
.library-count {
  color: var(--color-gray-500);
  font-size: var(--text-body);
  margin-top: 1rem;
  max-width: 72ch;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pagination button, .pagination span {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 2px solid var(--color-dark);
  background: var(--color-white);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pagination button[aria-current="page"] {
  background: var(--color-dark);
  color: var(--color-white);
}
.pagination span { border-color: transparent; cursor: default; color: var(--color-gray-500); }

/* ============================================================
   Stat banner (Alumni)
   ============================================================ */
.stat-banner {
  background: var(--color-blue-link);
  color: var(--color-white);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 48rem;
}
.stat-banner__number {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  margin-bottom: 1rem;
}
.stat-banner p {
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 40ch;
}
.cta-card {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--shadow-hard-sm);
}
.cta-card h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}
.cta-card p { color: var(--color-dark); font-size: var(--text-body); }

/* ============================================================
   "Program lainnya": 3 quick links to other programs, styled like
   the site's other hard-shadow bordered components (buttons, cards)
   ============================================================ */
.program-related { text-align: center; }
.program-related__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.program-related__item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.75rem 0.6rem 0.6rem;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--program-accent, var(--color-dark));
  color: var(--color-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.program-related__item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-dark));
}
.program-related__item:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--program-accent, var(--color-dark));
}
.program-related__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
  flex-shrink: 0;
  color: var(--color-dark);
}
.program-related__icon svg { width: 22px; height: 22px; }
.program-related__icon--orange { background: color-mix(in srgb, var(--color-orange) 25%, white); }
.program-related__icon--blue { background: color-mix(in srgb, var(--color-blue-link) 20%, white); }
.program-related__icon--teal { background: color-mix(in srgb, var(--color-teal) 28%, white); }
.program-related__icon--yellow { background: color-mix(in srgb, var(--color-yellow-tag) 55%, white); }
.program-related__icon--dark { background: color-mix(in srgb, var(--color-dark) 10%, white); }
.program-related__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
}
@media (max-width: 640px) {
  /* Equal-width pills on phones instead of ragged, content-sized ones. */
  .program-related__item { width: 100%; max-width: 19rem; }
}

/* ============================================================
   Programs: listing boxes + single-program pages
   ============================================================ */
.program-facts--blue { --program-accent: var(--color-blue-link); }
.program-facts--orange { --program-accent: var(--color-orange); }
.program-facts--teal { --program-accent: var(--color-teal); }
.program-facts--yellow { --program-accent: var(--color-yellow-tag); }
.accent-blue { --program-accent: var(--color-blue-link); }
.accent-orange { --program-accent: var(--color-orange); }
.accent-teal { --program-accent: var(--color-teal); }
.accent-yellow { --program-accent: var(--color-yellow-tag); }

/* Split hero: copy on the left, tilted photo (placeholder) on the right */
.page-hero--split {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-blue-pale) 0%, #ffffff 100%);
}
.page-hero--split::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/texture-why-pamflet.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}
.page-hero--split .page-hero__split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Illustration variant of the hero visual (listing page) */
.page-hero__art {
  position: relative;
  padding: 1rem;
  text-align: center;
}
.page-hero__art svg,
.page-hero__art img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin-inline: auto;
}
/* Nudges the hero title down a touch so it doesn't hang in empty space
   above the (taller) bag illustration beside it. */
.page-hero__title--lowered { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Program-page hero illustration: a transparent tote bag (Bag.png) layered
   over the program stickers (programs.png) so they read as "inside" it,
   each gently animated for a lively, hand-drawn feel. Hovering speeds the
   animation up and nudges the whole bag, for a playful tactile response. */
.program-bag {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.program-bag:hover,
.program-bag:focus-visible { transform: scale(1.035) rotate(-0.5deg); }
.page-hero__art .program-bag .badge {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  margin: 0;
  width: max-content;
  white-space: nowrap;
  border: 2px solid var(--color-dark);
  font-weight: 700;
}
.page-hero__art .program-bag__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  transform-origin: 50% 0%;
  animation: program-bag-sway 4.5s ease-in-out infinite;
}
.page-hero__art .program-bag__contents {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 6%;
  width: 88%;
  max-width: none;
  margin-inline: 0;
  opacity: 0.92;
  filter: saturate(0.9) brightness(1.02);
  animation: program-bag-bob 3.2s ease-in-out infinite;
}
/* A faint pale-blue veil over the contents only, like they're seen through
   the bag's plastic rather than pasted flat on top of it. */
.page-hero__art .program-bag::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 6%;
  width: 88%;
  height: 52%;
  background: var(--color-blue-pale);
  mix-blend-mode: multiply;
  opacity: 0.15;
  pointer-events: none;
}
.program-bag:hover .program-bag__shell,
.program-bag:focus-visible .program-bag__shell { animation-duration: 1.1s; }
.program-bag:hover .program-bag__contents,
.program-bag:focus-visible .program-bag__contents { animation-duration: 0.9s; }
@keyframes program-bag-sway {
  0%, 100% { transform: rotate(-1.25deg); }
  50% { transform: rotate(1.25deg); }
}
@keyframes program-bag-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3%); }
}
@media (prefers-reduced-motion: reduce) {
  .program-bag__shell, .program-bag__contents { animation: none; }
  .program-bag:hover, .program-bag:focus-visible { transform: none; }
}
.page-hero__photo {
  position: relative;
  padding: 1rem;
}
.page-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0 -2% -4% 4%;
  background: var(--color-yellow-tag);
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  transform: rotate(-6deg);
}
.page-hero__photo img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-orange));
  transform: rotate(1.5deg);
}
.page-hero__photo .badge { top: 0; right: 0; transform: rotate(4deg); border: 2px solid var(--color-dark); font-weight: 700; }

/* Centered program hero: title + subtitle centered, playful overlapping
   photo strip below instead of a single side photo */
.page-hero--program { text-align: center; }
.page-hero--program .breadcrumb { justify-content: center; }
.page-hero--program .page-hero__title,
.page-hero--program .page-hero__subtitle { margin-inline: auto; }
.program-photo-strip {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.program-photo-strip__item {
  position: relative;
  margin: 0;
  width: clamp(10rem, 19vw, 14rem);
  aspect-ratio: 3 / 4;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-orange));
  background: var(--color-white);
}
.program-photo-strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.program-photo-strip__item--a { transform: rotate(-8deg); }
.program-photo-strip__item--d { transform: rotate(5deg); }
.program-photo-strip__item--b {
  width: clamp(12rem, 24vw, 18rem);
  transform: rotate(-2deg) translateY(-1rem);
  z-index: 1;
}
.program-photo-strip__item--e { transform: rotate(4deg); }
.program-photo-strip__item--c { transform: rotate(-5deg); }
.program-photo-strip__item .badge { top: -0.75rem; right: -0.75rem; transform: rotate(6deg); border: 2px solid var(--color-dark); font-weight: 700; }
.program-photo-strip__star {
  position: absolute;
  top: -0.75rem;
  right: clamp(0.5rem, 8vw, 5rem);
  color: var(--program-accent, var(--color-orange));
}
@media (max-width: 900px) {
  .program-photo-strip__item--d, .program-photo-strip__item--e { display: none; }
}
@media (max-width: 640px) {
  /* Keep the playful fan on phones: three small overlapping photos in one row
     instead of a tall stack of full-size ones. */
  .program-photo-strip { flex-wrap: nowrap; gap: 0; padding-inline: 0.5rem; }
  .program-photo-strip__item {
    width: 29vw;
    margin-inline: -0.35rem;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--program-accent, var(--color-orange));
  }
  .program-photo-strip__item--b { width: 36vw; }
  .program-photo-strip__item .badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; top: -0.6rem; right: -0.4rem; }
  .program-photo-strip__star { display: none; }
}

/* Program rows: photo + text, alternating sides */
.program-rows { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.program-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.program-row--flip .program-row__photo { order: 2; }
.program-row__photo {
  position: relative;
  display: block;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 10px 10px 0 var(--program-accent);
  transform: rotate(-1.5deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.program-row--flip .program-row__photo { transform: rotate(1.5deg); }
.program-row__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.program-row:hover .program-row__photo {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 14px 14px 0 var(--program-accent);
}
.program-row__since {
  position: absolute;
  top: -1rem;
  left: -0.75rem;
  padding: 0.4rem 1.1rem;
  background: var(--color-orange);
  color: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 28px;
  font-weight: 700;
  font-size: 0.95rem;
  transform: rotate(-4deg);
}
.program-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.program-row__body p { font-size: var(--text-body); line-height: 1.55; max-width: 46ch; }
.program-row__body .tag { white-space: normal; }
.program-row__body .btn { white-space: normal; max-width: 100%; }

/* Two programs sharing one row: each card stacks photo-over-body instead of
   the alternating side-by-side layout the full-width rows use. */
.program-row-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}
.program-row--compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.program-row--compact .program-row__photo { transform: rotate(-1deg); }
.program-row--compact .program-row__body { gap: 1rem; }
.program-row--compact .program-row__body p { max-width: none; }
.program-row--compact .program-row__body .section-title { margin-top: 0.75rem; }
@media (max-width: 760px) {
  .program-row-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Archive of finished programs (no links) */
.archive-grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}
.archive-grid li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 12px;
}
.archive-grid h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.35; }
.archive-grid span {
  flex-shrink: 0;
  padding: 0.2rem 0.75rem;
  background: var(--color-cyan-tag);
  border-radius: 28px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Closing call-to-action banner */
.program-cta { background: var(--color-navy); color: var(--color-white); }
.program-cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 52rem; }
.program-cta__inner p { font-size: var(--text-body); line-height: 1.55; }
.program-cta__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.5rem; }
.program-cta .btn { box-shadow: 8px 8px 0 var(--color-teal); }
.program-cta .btn:hover { box-shadow: 10px 10px 0 var(--color-teal); }
.btn--light { background: var(--color-white); color: var(--color-dark); }
.btn--light:hover { transform: translate(-2px, -2px); }
.btn--light:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--color-teal); }

.program-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.program-detail__text { max-width: 68ch; }
.program-detail__text p {
  font-size: var(--text-body);
  line-height: 1.7;
  margin-top: 1.25rem;
}
.program-detail__text .section-title { margin-bottom: 0.5rem; }
.program-facts {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 6px 6px 0 var(--program-accent);
}
.program-facts dl { margin: 0; display: grid; gap: 1.25rem; }
.program-facts dt {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-700);
}
.program-facts dd {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.program-quote {
  position: relative;
  max-width: 60rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: var(--shadow-hard);
}
.program-quote__mark {
  display: block;
  width: 48px;
  height: 36px;
  margin-bottom: 1rem;
  color: var(--program-accent, var(--color-orange));
}
.program-quote p {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.6;
}
.program-quote footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.program-quote cite { font-style: normal; font-weight: 700; font-size: 1.35rem; }
.program-quote footer span { color: var(--color-gray-700); font-size: 1rem; }

/* ============================================================
   Testimonial carousel: two quote cards side by side on program
   detail pages, paged with prev/next arrows (auto-advances too)
   ============================================================ */
.testimonial-carousel { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.testimonial-carousel__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.testimonial-carousel__slide { display: none; margin: 0; max-width: none; height: 100%; }
.testimonial-carousel__slide.is-active {
  display: flex;
  flex-direction: column;
  animation: testimonial-fade 0.5s ease;
}
@keyframes testimonial-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .testimonial-carousel__track { grid-template-columns: minmax(0, 1fr); }
}
.testimonial-carousel__nav-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.testimonial-carousel__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: var(--border-w) solid var(--color-dark);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.testimonial-carousel__nav:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--color-dark); }
.testimonial-carousel__nav:active { transform: translate(1px, 1px); box-shadow: none; }
.testimonial-carousel__nav svg { width: 20px; height: 20px; }

/* ============================================================
   Contact cards + form (Kontak)
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.contact-card {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-card__label {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.contact-card h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.35;
}
.contact-card a {
  color: var(--color-blue-link);
  font-weight: 600;
}
.contact-card a:hover { text-decoration: underline; }

.contact-form {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label { font-weight: 700; font-size: 0.95rem; }
.form-field input,
.form-field textarea {
  border: 2px solid var(--color-dark);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font: inherit;
  background: var(--color-offwhite);
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-blue-link);
  outline-offset: 1px;
}
.form-note {
  font-size: 0.85rem;
  color: var(--color-dark);
  margin-top: -0.5rem;
}
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}
.social-row a {
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
}
.social-row a:hover { background: var(--color-dark); color: var(--color-white); }

/* ============================================================
   Article page (single post template)
   — Title and section headings use League Gothic (like all h1/h2); the running text (paragraphs
   and pull-quotes) uses Libre Baskerville for comfortable long-form
   reading. This is the only place the serif is used; everything else on
   the site is DM Sans. Body copy uses the site-wide --text-body size.
   ============================================================ */
.article-hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
}
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  color: var(--color-gray-500);
  font-size: 0.9rem;
}
.article-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.2em;
  letter-spacing: 0em;
  margin-block: 1rem 0;
  max-width: 100%;
  color: var(--color-dark);
}
.article-featured {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  aspect-ratio: 16 / 9;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.article-featured img { width: 100%; height: 100%; object-fit: cover; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.article-body { max-width: 68ch; }
@media (min-width: 1024px) {
  .article-body { max-width: 82ch; }
}
.article-body p {
  font-family: var(--font-article);
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
}
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--color-dark);
  margin: 2.5rem 0 1rem;
}
.article-body blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--color-orange);
  font-family: var(--font-article);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-dark);
}
.article-tags { margin-top: 2.5rem; }

.pdf-viewer {
  margin: 2rem 0;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
}
.pdf-viewer iframe {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: none;
  background: var(--color-offwhite);
}
.pdf-viewer__fallback {
  padding: 0.85rem 1.25rem;
  border-top: var(--border-w) solid var(--color-dark);
  background: var(--color-offwhite);
  font-size: 0.9rem;
}
.pdf-viewer__fallback p { margin: 0; }
.pdf-viewer__fallback a { color: var(--color-blue-link); font-weight: 600; }

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 6rem;
}
.article-sidebar__box {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 1.5rem;
}
.article-sidebar__box h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue-link);
  margin-bottom: 1rem;
}
.article-sidebar__box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.article-sidebar__box a { font-size: 0.95rem; }
.article-sidebar__box a:hover { color: var(--color-orange); }

.download-card__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-yellow-tag);
  border-radius: 15px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.download-card__count {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-dark);
  line-height: 1.1;
}
.download-card__label {
  display: block;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-top: 0.15rem;
}
.download-card__icon { color: var(--color-dark); flex-shrink: 0; }
.download-card__btn {
  display: flex;
  width: 100%;
  background: var(--color-blue-link);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.download-card__facts { margin: 0; }
.download-card__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0, 36, 91, 0.12);
}
.download-card__fact:first-child { padding-top: 0; }
.download-card__fact:last-of-type { border-bottom: none; padding-bottom: 0; }
.download-card__fact dt {
  font-size: 0.95rem;
  color: var(--color-gray-700);
  font-weight: 400;
}
.download-card__fact dd { margin: 0; font-weight: 700; color: var(--color-dark); text-align: right; }
.download-card__fact dd a { color: var(--color-blue-link); font-weight: 700; }
.download-card__note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-gray-500);
}

/* ============================================================
   Filter sidebar layout (Produk Pengetahuan / Blog listing pages)
   — pattern referenced from puskapa.org/publikasi/: search box,
   grouped checkbox filters with counts, result grid, pagination.
   ============================================================ */
.filter-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.filter-sidebar {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.filter-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
}
.filter-search img { width: 18px; height: 18px; flex-shrink: 0; }
.filter-search input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-gray-700);
}
.filter-group {
  border-top: 1px solid rgba(20, 22, 24, 0.12);
  padding-top: 1.5rem;
}
.filter-group:first-of-type {
  border-top: none;
  padding-top: 0;
}
.filter-group h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue-link);
  margin-bottom: 1rem;
}
.filter-toggle { display: none; }
.filter-panel { display: flex; flex-direction: column; gap: 1.75rem; }
/* Groups now sit inside .filter-panel, so the first one is first-of-type;
   keep the divider under the search box that it always had on desktop. */
.filter-panel > .filter-group:first-child {
  border-top: 1px solid rgba(20, 22, 24, 0.12);
  padding-top: 1.5rem;
}
@media (max-width: 960px) {
  /* Filters collapse behind a button once the sidebar stacks above the
     results, so phones don't scroll through every group to reach a product. */
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    background: var(--color-white);
    border: var(--border-w) solid var(--color-dark);
    border-radius: 15px;
    cursor: pointer;
  }
  .filter-toggle svg { transition: transform 0.2s ease; }
  .filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .filter-panel { display: none; }
  .filter-panel.is-open { display: flex; }
  .filter-panel > .filter-group:first-child { border-top: none; padding-top: 0; }
}
.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.45rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-gray-700);
}
.filter-option__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.filter-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-orange);
  cursor: pointer;
  flex-shrink: 0;
}
.filter-option__count {
  color: var(--color-gray-500);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.filter-results__count {
  color: var(--color-dark);
  font-size: 0.95rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero { --hero-pad: clamp(0.75rem, 2.5vh, 2rem); }
  .hero__inner { gap: clamp(0.75rem, 2vh, 2rem); }
  .hero__media { order: -1; justify-content: flex-start; }
  .hero__photo { max-height: 22vh; max-height: 22dvh; }
  .hero__title { font-size: clamp(2.6rem, 11vw, 4.5rem); }
  .partners__inner,
  .article-layout,
  .filter-layout,
  .impact-stats__inner,
  .why-split,
  .about-intro,
  .program-detail,
  .page-hero--split .page-hero__split,
  .program-row {
    grid-template-columns: 1fr;
  }
  .program-row { grid-template-columns: minmax(0, 1fr); }
  .program-row--flip .program-row__photo { order: 0; }
  /* Extra breathing room between the (often two-line) hero title/subtitle
     and the bag illustration once they stack instead of sitting side by side. */
  .page-hero--split .page-hero__split { row-gap: clamp(2.5rem, 8vw, 4rem); }
  .page-hero__photo, .page-hero__art { max-width: 34rem; }
  .why-split__art { position: static; }
  .why-split__art img { max-width: 26rem; }
  /* Smaller and pulled closer in so the stickers stay inside the gutter
     instead of running off the edge of a narrow screen. */
  .why-split__art-sticker--bubble { width: 4.5rem; top: -0.25rem; left: -0.5rem; }
  .why-split__art-sticker--dots { width: 3.5rem; top: -0.5rem; right: -0.25rem; }
  .why-split__art-sticker--note { width: 6rem; bottom: 0.5rem; right: -0.75rem; }
  .why-split__art-sticker--sparkle-lg { left: -0.25rem; }
  .pillars {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "activism" "studies" "movement";
  }
  .pillars__art { max-width: 26rem; margin-inline: auto; }
  .article-sidebar,
  .filter-sidebar { position: static; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
  .product-grid, .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-grid, .blog-grid, .archive-grid {
    grid-template-columns: 1fr;
  }
  .hero__actions { gap: 0.75rem; }
  .hero__actions .btn { padding: 0.9rem 1.35rem; font-size: 1.05rem; }
  /* League Gothic is condensed, so page titles can stay large on phones. */
  .page-hero__title { font-size: clamp(3rem, 13vw, 4rem); }
  .article-hero__title { font-size: clamp(2.75rem, 11.5vw, 3.5rem); }
}

/* Short phones / small landscape: squeeze the hero further so it still
   fits in one screen together with the rolling-text strip. */
@media (max-width: 960px) and (max-height: 700px) {
  .hero__photo { max-height: 14vh; max-height: 14dvh; }
  .hero__title { font-size: clamp(2.3rem, 10vw, 3.5rem); }
  .hero__text .eyebrow { font-size: 0.9rem; margin-bottom: 0.5rem; }
  /* font-size stays var(--text-body), same as the paragraphs below the hero */
  .hero__desc { margin-bottom: 0.75rem; }
}

/* Phones: bigger hero headline and a bigger house illustration (half the
   width of the column). Placed after the short-height rule above so it wins
   on phones whose browser bars leave under 700px of height. */
@media (max-width: 640px) {
  /* Three lines ("Dipimpin orang muda." / "Risetnya, programnya," / "advokasinya.")
     sized so the longest line (6.9em wide in League Gothic) fills about 90% of the column,
     leaving slack so it never wraps to a 4th line on real phones. */
  .hero__title { font-size: min(5rem, calc((100vw - 2 * var(--gutter)) / 7.6)); line-height: 1; }
  .hero__inner { padding-bottom: 3.5rem; }
  .hero__desc { margin-bottom: 2rem; }
  .hero__text .eyebrow { font-size: 1.2rem; margin-bottom: 0.75rem; }
  /* More air between the border above and each section's heading, and bigger
     section titles. !important because several pages size the h2 inline. */
  /* Post / product card titles in the Blog and Produk Pengetahuan lists: larger on phones */
  .product-card__title, .blog-card__body h3 { font-size: 1.5rem; line-height: 1.25; }
  .filter-strip { margin-bottom: 1.75rem; }
  .list-cta .btn { padding: 0.9rem 1.35rem; font-size: 1.05rem; }
  .section { padding-top: 4.5rem; padding-bottom: 6.5rem; }
  .section-title { font-size: clamp(2.5rem, 11.5vw, 3.2rem) !important; line-height: 1.1; }
  .hero-house { width: 75%; }
  /* no hover/tap video on phones: just the transparent still */
  .hero-house__canvas, .hero-house__zones, .hero-house__video { display: none; }
  .hero__photo { width: 100%; max-height: none; }
}

/* Tablets held vertically (iPad etc.): section headings were still desktop-sized
   (about 28px), smaller than on phones. !important because several pages size
   the h2 inline. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .section-title { font-size: clamp(2.75rem, 6vw, 3.5rem) !important; line-height: 1.1; }
  /* more air above and below each section */
  .section { padding-top: 5.5rem; padding-bottom: 7.5rem; }
}

@media (max-width: 1180px) {
  /* Mobile menu: slim top bar with the logo centred, a floating round button
     bottom-right, and a full-screen navy overlay with big left-aligned links. */
  /* On phones the top bar is just the logo, left-aligned, and scrolls away
     with the page (no sticky white bar). No transform: it would trap the fixed
     button/overlay inside the bar. */
  .navbar {
    position: relative;
    height: 4.5rem;
    transform: none;
    transition: none;
    background: transparent;
    border-bottom: none;
  }
  .navbar.is-hidden { transform: none; top: auto; }
  .navbar__inner { justify-content: flex-start; padding-block: 0.5rem; }
  .nav-brand img { height: 3.25rem; }

  .nav-toggle {
    display: block;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 130;
    width: 3.375rem;
    height: 3.375rem;
    padding: 0;
    border-radius: 50%;
    background: var(--color-dark);
    /* white ring keeps the button visible over the navy footer */
    box-shadow: 0 0 0 2px var(--color-white), 0 5px 16px rgba(0, 36, 91, 0.35);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  }
  .nav-toggle:active { transform: scale(0.94); }
  .nav-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.3125rem;
    height: 2.5px;
    margin: -1.25px 0 0 -0.65625rem;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  }
  .nav-toggle span:nth-child(1) { transform: translateY(-4px); }
  .nav-toggle span:nth-child(2) { display: none; }
  .nav-toggle span:nth-child(3) { transform: translateY(4px); }
  .nav-toggle[aria-expanded="true"] { background: var(--color-white); box-shadow: none; }
  .nav-toggle[aria-expanded="true"] span { background: var(--color-dark); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem var(--gutter) 8rem;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.is-open { display: flex; }
  html.nav-open { overflow: hidden; }
  /* keep the footer's last line clear of the floating menu button */
  .site-footer { padding-bottom: 6.5rem; }

  /* Big links, no boxes */
  .nav-links > a:not(.btn),
  .nav-item > a:not(.btn),
  .nav-links .nav-contact {
    display: block;
    width: auto;
    padding: 0.6rem 0;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 6.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--color-white);
    white-space: normal;
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):focus-visible,
  .nav-links a:not(.btn)[aria-current="page"] {
    background: transparent;
    color: var(--color-teal);
  }
  .nav-item > a:not(.btn)::after { content: none; }

  /* Kontak is a normal big link here, not a button */
  .nav-links .nav-contact,
  .nav-links .nav-contact:hover,
  .nav-links .nav-contact:active {
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    text-align: left;
    justify-content: flex-start;
    min-height: 0;
  }
  .nav-links .nav-contact:hover,
  .nav-links .nav-contact:focus-visible { color: var(--color-teal); }

  /* Search and language sit below the links */
  .nav-search {
    order: 2;
    align-self: stretch;
    margin: 2rem 0 0;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
  }
  .nav-search__input {
    position: static;
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0.75rem 0.25rem 0.75rem 1.25rem;
    border: none;
    box-shadow: none;
    background: transparent;
    color: var(--color-white);
    opacity: 1;
    visibility: visible;
    transform: none;
    font-size: 1.05rem;
  }
  .nav-search__input::placeholder { color: rgba(255, 255, 255, 0.6); }
  .nav-search__btn { color: var(--color-white); width: 3rem; height: 3rem; }
  .nav-search__btn:hover,
  .nav-search__btn:focus-visible,
  .nav-search.is-open .nav-search__btn { background: rgba(255, 255, 255, 0.15); }
  .lang-switch {
    order: 3;
    align-self: flex-start;
    margin: 1.25rem 0 0;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
  }
  .lang-switch__btn { color: var(--color-white); font-size: 0.85rem; padding: 0.5rem 0.8rem; }
  .lang-switch__btn.is-active { background: var(--color-white); color: var(--color-dark); }

  /* Dropdowns collapse behind a chevron button next to the link (the button
     is added by js/main.js) and expand like an accordion. */
  .nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
  }
  .nav-item__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
  }
  .nav-item__toggle svg { width: 24px; height: 24px; transition: transform 0.25s ease; }
  .nav-item.is-open .nav-item__toggle svg { transform: rotate(180deg); }
  .nav-links .nav-item .nav-subnav {
    grid-column: 1 / -1;
    position: static;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    max-height: 0;
    opacity: 1;
    visibility: hidden;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.35s ease, visibility 0s linear 0.35s;
  }
  .nav-links .nav-item.is-open .nav-subnav {
    max-height: 24rem;
    padding: 0.25rem 0 0.75rem;
    visibility: visible;
    transition: max-height 0.35s ease, visibility 0s;
  }
  .nav-subnav::before { content: none; }
  .nav-subnav a {
    padding: 0.45rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    white-space: normal;
  }
  .nav-subnav a:hover,
  .nav-subnav a:focus-visible { background: transparent; color: var(--color-teal); }

  /* Entrance: the navy panel opens as a circle growing out of the button, then
     the rows rise in one after another. */
  .nav-links.is-open { animation: nav-overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .nav-links.is-open > * { animation: nav-row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .nav-links.is-open > :nth-child(1) { animation-delay: 0.12s; }
  .nav-links.is-open > :nth-child(2) { animation-delay: 0.17s; }
  .nav-links.is-open > :nth-child(3) { animation-delay: 0.22s; }
  .nav-links.is-open > :nth-child(4) { animation-delay: 0.27s; }
  .nav-links.is-open > :nth-child(5) { animation-delay: 0.32s; }
  .nav-links.is-open > :nth-child(8) { animation-delay: 0.37s; }
  .nav-links.is-open > :nth-child(6) { animation-delay: 0.42s; }
  .nav-links.is-open > :nth-child(7) { animation-delay: 0.47s; }
}
@keyframes nav-overlay-in {
  from { clip-path: circle(0 at calc(100% - 2.9375rem) calc(100% - 2.9375rem)); }
  to { clip-path: circle(150% at calc(100% - 2.9375rem) calc(100% - 2.9375rem)); }
}
@keyframes nav-row-in {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .nav-links.is-open, .nav-links.is-open > * { animation: none; }
  .nav-links .nav-item .nav-subnav { transition: none; }
  .nav-toggle, .nav-toggle span { transition: none; }
}

@media (max-width: 760px) {
  .stat-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .stat__number { font-size: clamp(3.5rem, 17vw, 5rem); }
  .stat__icon { width: clamp(4.5rem, 20vw, 5.5rem); height: clamp(4.5rem, 20vw, 5.5rem); margin-right: -1rem; }
  .footer-links-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }

}


/* ============================================================
   About photo (Tentang Kami intro): one photo shown at a time,
   cycled with the prev/next arrows layered on top of it
   ============================================================ */
.about-intro__art { position: relative; aspect-ratio: 4 / 3; }
.about-intro__art img {
  position: absolute;
  inset: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.about-intro__art img.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .about-intro__art img { transition: none; }
}
.about-intro__art-controls {
  position: absolute;
  right: 0.5rem;
  bottom: -0.75rem;
  z-index: 2;
  display: flex;
  gap: 0.6rem;
}