/* unified overlap utility so cards consistently overlap the color banner */
.overlap-wrap {
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .overlap-wrap {
    margin-top: -2.5rem;
  }
}

@media (min-width: 1024px) {
  .overlap-wrap {
    margin-top: -3rem;
  }
}

/* === Color definitions === */
:root {
  --brand-blue: #4d91c6;
  --brand-blue-dark: #3d749e;
  --brand-green: #6fbf73;
  --brand-green-dark: #58985c;
  --brand-sand: #d8ae73;
  --brand-sand-dark: #b79361;
  --brand-orange: #e87d50;
  --brand-orange-dark: #c56a44;
  --brand-yellow: #edb332;
  --brand-yellow-dark: #c9982a;
  --brand-off: #f5f0e6;
  --brand-ink: #0f0f0f;
}

/* === KV color banner styles (match examples you shared) === */
.kv-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
  z-index: 0;
}

.kv-banner * {
  color: inherit;
}

/* Avoid double smoothing and reduce repaint work */
html { scroll-behavior: auto; }
.sticky-header { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }

.invert-logo {
  filter: brightness(0) invert(1);
}

/* Brand color KV banners with SVG pattern overlays */
.kv-blue {
  background-color: var(--brand-blue);
  background-image: linear-gradient(rgba(155, 193, 223, .12), rgba(155, 193, 223, .12)), url('/assets/HID-GRAPHIC 02-LANGUAGE.svg'), url('/assets/HID-GRAPHIC 02-LANGUAGE.svg');
  background-repeat: no-repeat;
  background-size: auto, 220px, 70px;
  background-position: 0 0, 88% 25%, 65% 85%;
}

.kv-orange {
  background-color: var(--brand-orange);
  background-image: linear-gradient(rgba(233, 182, 157, .12), rgba(233, 182, 157, .12)), url('/assets/HID-GRAPHIC 01-ETHNICITY.svg'), url('/assets/HID-GRAPHIC 01-ETHNICITY.svg');
  background-repeat: no-repeat;
  background-size: auto, 215px, 68px;
  background-position: 0 0, 85% 20%, 62% 82%;
}

.kv-yellow {
  background-color: var(--brand-yellow);
  background-image: linear-gradient(rgba(237, 178, 46, .12), rgba(237, 178, 46, .12)), url('/assets/HID-GRAPHIC 03-SOCIAL FABRIC.svg'), url('/assets/HID-GRAPHIC 03-SOCIAL FABRIC.svg');
  background-repeat: no-repeat;
  background-size: auto, 225px, 72px;
  background-position: 0 0, 90% 28%, 68% 88%;
}

.kv-green {
  background-color: var(--brand-green);
  background-image: linear-gradient(rgba(169, 216, 171, .12), rgba(169, 216, 171, .12)), url('/assets/HID-GRAPHIC 04-RELIGION.svg'), url('/assets/HID-GRAPHIC 04-RELIGION.svg');
  background-repeat: no-repeat;
  background-size: auto, 218px, 69px;
  background-position: 0 0, 87% 22%, 64% 84%;
}

.kv-sand {
  background-color: var(--brand-sand);
  background-image: linear-gradient(rgba(232, 208, 174, .12), rgba(232, 208, 174, .12)), url('/assets/HID-GRAPHIC 05-CULTURE.svg'), url('/assets/HID-GRAPHIC 05-CULTURE.svg');
  background-repeat: no-repeat;
  background-size: auto, 222px, 71px;
  background-position: 0 0, 89% 26%, 66% 86%;
}

.pattern-bg {
  background-image: url('/assets/pattern.svg');
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center -280px; /* geser 40px ke atas */
}


/* Brand icon styles */
.brand-icon {
  height: 44px;
  width: auto;
  opacity: .9;
}

/* Accordion styles */
.accordion-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Subtle motif background inspired by brand KV */
.motif-bg {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0 8%, transparent 9%),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.28) 0 8%, transparent 9%),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.22) 0 7%, transparent 8%);
  background-size: 240px 240px, 260px 260px, 220px 220px;
}

/* Reveal baseline: only hide when JS is active to avoid no-JS blank content */
html.js-anim .reveal { opacity: 0; transform: translateY(6px); }

/* Helper: white button -> brand blue on hover */
.hover-brand-blue:hover {
  background-color: #4d91c6;
  color: #ffffff;
}

/* Card styles with radius and shadow */
.colorful-card {
  border-radius: 1.25rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  background-color: white;
  border: 1px solid var(--brand-off);
}

/* Shimmer overlay helper (base safety) */
.shimmer { display: block; border-radius: inherit; }


[data-shimmer] {
  position: relative;
  overflow: clip;
  contain: layout paint;
  max-width: 100%;
}
/* fallback untuk browser yang belum support overflow: clip */
@supports not (overflow: clip) {
  [data-shimmer] { overflow: hidden; }
}

.shimmer {
  inset: 0;                 /* dari sebelumnya -10% */
  transform: translate(0);  /* hindari translate X yang bikin melebar */
}