:root {
  --color-primary: #2325b3;
  --color-bg-light: #ebeefe;
  --color-text-100: #333333;
  --color-text-300: #676767;
  --color-neutral-500: #e0e0e0;
  --color-neutral-700: #bdbdbd;
  --color-neutral-800: #828282;
  --color-orange: #ec9808;
  --color-gold: #f9ce68;
  --color-dot-inactive: #c0c0c0;
  --color-amber-fill: #fef3cc;
  --color-amber-text: #a96004;
  --color-error: #e02d3c;
  --color-success: #1f9d8e;
  --radius: 8px;
  --container-width: 1920px;
  --container-padding: 160px;
  --font-scale: clamp(0.8, calc(1 - (100vw - 1920px) / 3200px), 1);
  font-size: 16px;
}

* { box-sizing: border-box; }

/* overflow-x:hidden on body alone doesn't suppress root-level horizontal
   scroll in every browser - the viewport's own scrolling context is
   governed by the root (html) element, so it needs the rule too. See
   body's own overflow-x comment below for what this is actually for. */
/* `clip` (not `hidden`) suppresses horizontal overflow WITHOUT establishing a
   scroll container — `overflow-x: hidden` here computes overflow-y to auto and
   broke the sticky navbar on every page. clip keeps the same edge-clipping but
   leaves position:sticky working. */
html { overflow-x: clip; }

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--color-text-100);
  line-height: 1.5;
  /* Several sections' decorative corner-bleed patterns (.banner__pattern,
     .feature__pattern, etc.) are deliberately sized larger than their own
     section on purpose - that's the intended "bleed off the edge" look.
     At small-desktop widths (~1280px and below) the percentage math on a
     couple of them was escaping their section's own overflow:hidden and
     leaking into real, scrollable horizontal overflow at the page level -
     confirmed by an actual scrollX test, not just a visual guess - which
     exposed blank space and clipped the navbar. This is the safety net:
     harmless at any width where nothing actually overflows, and doesn't
     touch sizing/position of any single component individually. Uses `clip`
     (not `hidden`) so it doesn't become a scroll container and break the
     sticky navbar — same edge-clipping, sticky preserved. */
  overflow-x: clip;
}

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

/* Small desktop (≤1280px, e.g. 1280x720 laptops) — was 64px, then 88px;
   nudged up once more for more breathing room against the edges, while
   staying well below this site's much more generous 1281-1920px margin
   (160px, the actual Figma canvas width/margin — left untouched by this
   pass, same as every prior margin pass). Mobile/tablet (≤768px, below) is
   a separate, deliberately tighter tier and out of scope for a "desktop
   margins" pass. */
@media (max-width: 1280px) {
  :root { --container-padding: 96px; }
}

@media (max-width: 768px) {
  :root { --container-padding: 24px; }
}

/* Large desktop (1921px+). Previously --container-padding had no override
   here, so it stayed at the 1281-1920px tier's 160px even as the viewport
   grew well past the 1920px design canvas (and, since --container-width's
   2200px cap is wider than any viewport from 1921-2200px, there was no
   auto-centering margin to compensate either) — content visibly flattened
   out wider with no corresponding margin growth right past 1920px. This
   margin bump closes that gap; the 2200px content cap (and the two
   component-specific max-widths below) are unchanged. */
@media (min-width: 1921px) {
  :root { --container-width: 2200px; --container-padding: 200px; }
  .banner__inner { max-width: 2090px; }
  .carousel__slide { max-width: 1833px; }
}

/* Very large desktop (2560x1440 and up) — margin keeps increasing past the
   1921px tier so content never reads as over-stretched on large monitors;
   --container-width's 2200px content cap still applies, so beyond 2200px
   of viewport the auto-centering margin keeps growing on top of this too. */
@media (min-width: 2560px) {
  :root { --container-padding: 240px; }
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.85; }
.btn--primary { background: var(--color-primary); color: #fff; }

/* Navbar */
/* The navbar is rendered into #navbar-mount, a div that's only as tall as the
   navbar itself — so position:sticky had no scroll range within that parent
   and the bar scrolled away immediately. display:contents removes the mount's
   box so .navbar lays out as a direct child of <body> and sticks across the
   whole page (every page uses this same mount). */
#navbar-mount { display: contents; }
.navbar {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}
.navbar__logo { display: flex; }
.navbar__logo img { display: block; height: calc(60.74px * var(--font-scale)); width: auto; }
.navbar__menu { display: flex; align-items: center; gap: 32px; }
.navbar__menu a {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: calc(24px * var(--font-scale));
  line-height: calc(36px * var(--font-scale));
  letter-spacing: -0.04em;
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: var(--radius);
}
.navbar__menu a:hover { background: var(--color-bg-light); }

/* Banner */
.banner {
  position: relative;
  overflow: hidden;
  /* Bottom padding is intentionally tighter than the top (16px vs 64px) to
     sit close against the slide indicator dots, matching Figma. When the
     indicator isn't rendered (a single banner, the common case — see
     .banner--no-indicator below), the bottom padding is widened to match
     the top so the section reads as evenly/centered without the dots. */
  padding: 64px 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(83, 84, 209, 0) 0%, rgba(25, 27, 153, 0.2) 100%),
    #979fff;
}
.banner__pattern {
  position: absolute;
  top: -14.77%;
  left: -12.46%;
  width: 124%;
  aspect-ratio: 2383.78 / 768.158;
  z-index: 0;
  pointer-events: none;
}
.banner__pattern img { width: 100%; height: 100%; display: block; }
.banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1824px;
}
.carousel { display: flex; align-items: center; gap: 40px; width: 100%; justify-content: center; }
.carousel__slide {
  flex: 1;
  min-width: 0;
  max-width: 1600px;
  height: 437.5px;
  border-radius: var(--radius);
  box-shadow: 4px 8px 12px 0 rgba(35, 37, 179, 0.4);
  overflow: hidden;
}
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__slide { display: none; }
.carousel__slide--active { display: block; }
.carousel__btn {
  background: var(--color-orange);
  border: none;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.carousel-indicator { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 24px; }
.dot { width: 40px; height: 16px; border-radius: 100px; background: var(--color-dot-inactive); }
.dot--active { background: var(--color-gold); width: 64px; }
/* Set on .banner by initCarousel() (script.js) when there's only one
   enabled banner and the indicator dots are hidden — widens the bottom
   padding to match the top so the section stays evenly balanced. */
.banner--no-indicator { padding-bottom: 64px; }

/* Better Future */
.better-future { padding: 120px 0; background: #fff; }
.title-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-bottom: 48px;
}
.title-description h1 {
  font-weight: 700;
  font-size: calc(64px * var(--font-scale));
  line-height: calc(72px * var(--font-scale));
  letter-spacing: -1.92px;
  color: var(--color-primary);
  margin: 0;
}
.title-description p {
  font-weight: 300;
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.56px;
  color: var(--color-text-300);
  margin: 0;
}

.how-detail { display: flex; justify-content: center; }
.how-detail .card { display: flex; gap: 32px; align-items: stretch; }
.feature {
  position: relative;
  overflow: hidden;
  width: 553px;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  background: linear-gradient(77deg, #ebedfe 44.371%, #ffffff 100%);
}
.feature--data { gap: 56px; }
.feature--dashboard { padding: 48px 56px; gap: 20px; }

.feature__pattern {
  position: absolute;
  mix-blend-mode: hard-light;
  pointer-events: none;
  z-index: 0;
}
.feature--fleksibel .feature__pattern { top: -1.12%; left: 35.51%; width: 87.58%; aspect-ratio: 484.29 / 489.908; transform: scaleX(-1); }
.feature--data .feature__pattern { top: -2.02%; left: -16.82%; width: 70.44%; aspect-ratio: 389.536 / 358.092; transform: scaleX(-1); }
.feature--dashboard .feature__pattern { top: 27.3%; left: 54.1%; width: 63.37%; aspect-ratio: 350.423 / 325.142; transform: scaleX(-1); }

.feature__media { position: relative; z-index: 1; flex-shrink: 0; }
.feature__media--fleksibel { width: 457px; height: 329px; }
.feature__media--data { width: 465.9px; height: 343px; }
.feature__media--dashboard { width: 428px; height: 329px; }

.feature__photo { position: absolute; border-radius: 16px; overflow: hidden; }
.feature__photo img { position: absolute; max-width: none; display: block; }
.feature__photo--fleksibel { left: 0; top: 0; width: 457px; height: 329px; }
.feature__photo--fleksibel img { left: -6.13%; top: 0; width: 107.99%; height: 100%; }
.feature__photo--data { left: 32.95px; top: 1px; width: 400px; height: 297px; border-radius: 0; }
.feature__photo--data img { left: -28.01%; top: -21.79%; width: 159.67%; height: 143.4%; }
.feature__photo--dashboard { left: -62px; top: -10px; width: 552px; height: 368px; border-radius: 0; }
.feature__photo--dashboard img { position: static; width: 100%; height: 100%; object-fit: cover; max-width: 100%; }

.feature__media--generic { width: 457px; height: 329px; }
.feature__photo--generic { left: 0; top: 0; width: 457px; height: 329px; }
.feature__photo--generic img { position: static; width: 100%; height: 100%; object-fit: cover; max-width: 100%; }

.feature__accent { position: absolute; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.16); }
.feature__accent img { position: static; width: 100%; height: 100%; object-fit: cover; max-width: 100%; display: block; }
.feature__accent--fleksibel-1 { left: -23.75px; top: 217.33px; width: 213.31px; height: 158px; }
.feature__accent--fleksibel-1 img { position: absolute; max-width: none; left: -22.23%; top: -31.96%; width: 144.31%; height: 136.68%; }

.feature__shadow { position: absolute; left: 42.97px; top: 266px; width: 388px; height: 44px; z-index: 0; }
.feature__shadow img { width: 100%; height: 100%; display: block; }
.feature__accent--data-1 { left: 287.91px; top: 195px; width: 178px; height: 116px; }
.feature__accent--data-1 img { position: absolute; max-width: none; left: 0; top: -11.23%; width: 100%; height: 111.23%; }
.feature__accent--data-2 { left: 21.91px; top: 204.95px; width: 194.93px; height: 138.05px; }
.feature__accent--data-3 { left: 0; top: 0; width: 172.19px; height: 90.9px; }

.feature__accent--dashboard-1 { left: -31px; top: 164px; width: 221px; height: 60px; }
.feature__accent--dashboard-1 img { position: absolute; max-width: none; left: 0; top: -10.8%; width: 100%; height: 118.45%; }
.feature__accent--dashboard-2 { left: 314px; top: 107px; width: 153px; height: 51px; }
.feature__accent--dashboard-2 img { position: absolute; max-width: none; left: 0; top: -56.92%; width: 295.07%; height: 156.92%; }
.feature__accent--dashboard-3 { left: 5px; top: 59px; width: 170px; height: 48px; }
.feature__accent--dashboard-4 { left: 238px; top: -4px; width: 190.14px; height: 62.76px; }
.feature__accent--dashboard-4 img { position: absolute; max-width: none; left: -97.13%; top: -56.92%; width: 293.86%; height: 156.92%; }

.feature__icon { position: absolute; z-index: 2; }
.feature__icon--laptop { left: 336.5px; top: -37px; width: 121px; height: 121px; }
.feature__icon--mobile { left: 424.5px; top: 1px; width: 80px; height: 80px; }

.feature__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.feature__text h3 {
  margin: 0;
  font-weight: 700;
  font-size: calc(32px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.28px;
  color: var(--color-text-100);
}
.feature__text p {
  margin: 0;
  font-weight: 300;
  font-size: calc(24px * var(--font-scale));
  line-height: calc(36px * var(--font-scale));
  letter-spacing: -0.48px;
  color: var(--color-text-300);
}

/* Produk */
.produk {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #2325b3 16.226%, #787ae8 100%);
}
.produk__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; }
.produk__pattern { position: absolute; z-index: 0; pointer-events: none; }
.produk__pattern--1 { width: 41%; right: -9%; top: 59%; aspect-ratio: 787 / 727.636; }
.produk__pattern--2 { width: 33%; left: -5%; top: 63%; aspect-ratio: 638.72 / 590.54; }

.title-subtitle { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.title-subtitle h1,
.title-subtitle h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(60px * var(--font-scale));
  line-height: calc(70px * var(--font-scale));
  letter-spacing: -0.6px;
  color: #fff;
}
.title-subtitle p {
  margin: 0;
  font-weight: 300;
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.56px;
  color: #fff;
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 100px;
}
.package-card {
  display: flex;
  gap: 40px;
  align-items: center;
}
.package-card__badge {
  position: relative;
  flex-shrink: 0;
  width: calc(203px * var(--font-scale));
  height: calc(244px * var(--font-scale));
  border-radius: 24px 24px 64px 24px;
  background: #f3b943;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.package-card__badge img {
  width: calc(203px * var(--font-scale));
  height: calc(203px * var(--font-scale));
  object-fit: contain;
  display: block;
}
.package-card__notch { position: absolute; right: 0; bottom: 0; width: calc(62.48px * var(--font-scale)); height: calc(62.48px * var(--font-scale)); z-index: 1; }
.package-card__notch img { position: static; width: 100%; height: 100%; transform: none; display: block; }
.package-card__text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.package-card__text h3,
.custom-package .package-card__text h3 {
  margin: 0;
  font-weight: 700;
  font-size: calc(32px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.28px;
  color: #fff;
}
.package-card__text p,
.custom-package .package-card__text p {
  margin: 0;
  font-weight: 300;
  font-size: calc(24px * var(--font-scale));
  line-height: calc(36px * var(--font-scale));
  letter-spacing: -0.48px;
  color: #fff;
}

.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.product-cta span:first-child {
  font-weight: 700;
  font-size: calc(24px * var(--font-scale));
  letter-spacing: -0.48px;
  color: #fff;
  padding: 8px 0;
}
.product-cta__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: #fff;
  flex-shrink: 0;
}
.product-cta__arrow img { width: 11px; height: 19px; }

.custom-package {
  display: flex;
  gap: 40px;
  align-items: center;
  max-width: calc((100% - 100px) / 2);
}

/* Layanan */
.layanan {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #111280 54.554%, #ebedfe 97.378%);
}
.layanan__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 88px; }
.layanan__pattern { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: lighten; }
.layanan__pattern--1 { width: 36%; right: -12%; top: 10%; aspect-ratio: 787 / 727.637; }
.layanan__pattern--2 { width: 28%; left: -7%; top: 40%; aspect-ratio: 638.72 / 590.541; }

.layanan__row { display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; }
.layanan__media {
  position: relative;
  width: 849px;
  height: 688px;
  flex-shrink: 0;
  max-width: 100%;
}
.layanan__photo {
  position: absolute;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
}
.layanan__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layanan__photo--1 { left: 0; top: 0; width: 522.52px; height: 640px; }
.layanan__photo--2 { left: 360.13px; top: 424px; width: 394.52px; height: 264px; }
.layanan__photo--2 img { object-position: bottom; }
.layanan__photo--3 { left: 573.21px; top: 76.89px; width: 275.79px; height: 307.1px; }

.audience-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
  min-width: 280px;
}
.audience-card {
  padding-bottom: 40px;
  border-bottom: 1px solid #fff;
}
.audience-card--last { border-bottom: none; padding-bottom: 0; }
.audience-card span {
  color: #fff;
  font-weight: 700;
  font-size: calc(32px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.28px;
}

@media (max-width: 900px) {
  .layanan__media { height: auto; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 460px; }
  .layanan__photo { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: 280px !important; }
}

/* Telah Dipercaya */
.telah-dipercaya { position: relative; overflow: hidden; padding: 120px 0; background: #ebedfe; text-align: center; }
.trusted__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.trusted__pattern { position: absolute; z-index: 0; pointer-events: none; }
.trusted__pattern--1 { width: 18%; left: -8%; top: 40%; aspect-ratio: 638.72 / 590.539; }
.trusted__pattern--2 { width: 17%; right: -8%; top: -4%; aspect-ratio: 638.73 / 590.551; }
.telah-dipercaya h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(64px * var(--font-scale));
  line-height: calc(88px * var(--font-scale));
  letter-spacing: -2.56px;
  color: #3a3a3a;
}
.trusted-banner { width: 100%; max-width: 1294.77px; }
.trusted-banner img { width: 100%; display: block; }
.trusted-banner__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.trusted-banner__logo { display: flex; align-items: center; justify-content: center; }
.trusted-banner__logo img { width: auto; height: 64px; max-width: 100%; object-fit: contain; display: block; }
.trusted-banner__logo:only-child { width: 100%; }
.trusted-banner__logo:only-child img { width: 100%; height: auto; }
.trusted__cta { width: 580px; max-width: 100%; text-align: center; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.48px; padding: 12px 24px; }

@media (max-width: 640px) {
  .telah-dipercaya h2 { font-size: 2.4rem; line-height: 1.2; }
}

/* Form */
.form { position: relative; overflow: hidden; padding: 120px 0; background: linear-gradient(180deg, #2325b3 0%, #060755 100%); color: #fff; }
.form__pattern { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
.form__pattern--1 { width: 21%; right: -10%; top: 51%; aspect-ratio: 787 / 727.637; }
.form__pattern--2 { width: 23%; left: -5%; top: 4%; aspect-ratio: 638.72 / 590.541; }
.form__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.form__intro { width: 100%; }
.form__intro p {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: calc(64px * var(--font-scale));
  line-height: calc(72px * var(--font-scale));
  letter-spacing: -2.56px;
  max-width: 1433px;
  margin: 0 auto;
}
.form__card { width: 100%; background: #fff; color: var(--color-text-100); border-radius: 24px; padding: 48px 40px; }
.form__card h3 {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: calc(40px * var(--font-scale));
  letter-spacing: -1.6px;
  color: var(--color-text-100);
}
.contact-form { display: flex; gap: 56px; align-items: flex-start; }
.contact-form__col { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.contact-form__col:last-child { align-items: flex-end; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-size: calc(20px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.4px;
  font-weight: 400;
  color: var(--color-neutral-800);
}
.contact-form input,
.contact-form select {
  width: 100%;
  height: 64px;
  border: 2px solid var(--color-neutral-500);
  border-radius: var(--radius);
  padding: 16px;
  font-family: inherit;
  font-size: calc(20px * var(--font-scale));
  letter-spacing: -0.4px;
  color: var(--color-text-100);
  background: #fff;
}
.contact-form input::placeholder { color: var(--color-neutral-700); }
.contact-form select {
  appearance: none;
  color: var(--color-neutral-700);
  background-image: url("assets/icon-chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 8px;
}
.form__submit {
  margin-top: 32px;
  width: 240px;
  /* Match the input/select height (64px) so the submit button lines up with
     the form fields rather than sitting shorter; flex centers the label since
     a fixed height removes the padding-based vertical centering. Shared by
     every form (homepage + event detail) via .form__submit. */
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24px * var(--font-scale));
  letter-spacing: -0.48px;
}
.contact-form__message { margin-top: 16px; font-size: 16px; color: var(--color-primary); }
.contact-form__message--error { color: #c0392b; }

/* Focus state for inputs/selects — visible keyboard affordance, primary ring
   to match the form's accent (Figma filled/active state). */
.contact-form input:focus,
.contact-form select:focus { outline: none; border-color: var(--color-primary); }

/* Filled state (Figma): a chosen select option switches from placeholder-grey
   to the normal dark text. Text/email/tel inputs already render typed text in
   --color-text-100, so only selects need this. */
.contact-form__field--filled select { color: var(--color-text-100); }

/* Empty-field error state (Figma empty state): the field label turns red, the
   control border turns red, and the pre-rendered message below the field is
   revealed. The error border wins even while the field is focused. */
.contact-form__error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--color-error);
}
.contact-form__error-icon {
  width: calc(15px * var(--font-scale));
  height: calc(15px * var(--font-scale));
  margin-top: 1px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("assets/icon-info-circle.svg") center / contain no-repeat;
  mask: url("assets/icon-info-circle.svg") center / contain no-repeat;
}
.contact-form__field--error { color: var(--color-error); }
.contact-form__field--error .contact-form__error { display: inline-flex; }
.contact-form__field--error input,
.contact-form__field--error select,
.contact-form__field--error input:focus,
.contact-form__field--error select:focus { border-color: var(--color-error); }

/* Button consistency: every primary button across the site matches the form
   submit button — same height + vertical centering as .form__submit (which
   already sets these). Font/weight/color/radius/padding were already shared. */
.btn:focus-visible {
  outline: 3px solid rgba(35, 37, 179, 0.45);
  outline-offset: 2px;
}
.product-hero__cta,
.trusted__cta,
.form-modal__close {
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Submission confirmation pop-up (Figma submission state). Centered card over
   a dimmed backdrop; dismissible via the Tutup button, the backdrop, or Esc.
   Responsive: caps at 440px and reflows to full-width on small screens. */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.form-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 40, 0.55);
  animation: form-modal-fade 0.18s ease;
}
.form-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 24px 64px rgba(6, 7, 40, 0.28);
  animation: form-modal-pop 0.2s ease;
}
.form-modal__icon { width: 88px; height: 88px; margin-bottom: 24px; }
.form-modal__icon svg { width: 100%; height: 100%; display: block; }
.form-modal__title {
  margin: 0 0 12px;
  font-size: calc(28px * var(--font-scale));
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-100);
}
.form-modal__text {
  margin: 0;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
  color: var(--color-text-300);
  max-width: 320px;
}
.form-modal__divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-neutral-500);
  margin: 28px 0 20px;
}
.form-modal__close {
  align-self: flex-end;
  width: auto;
  min-width: 132px;
  font-size: calc(18px * var(--font-scale));
  letter-spacing: -0.36px;
}
@keyframes form-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes form-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .form-modal__backdrop, .form-modal__card { animation: none; }
}
@media (max-width: 600px) {
  .form-modal__card { padding: 32px 24px; border-radius: 20px; }
  .form-modal__close { align-self: stretch; width: 100%; }
}

@media (max-width: 900px) {
  .contact-form { flex-direction: column; gap: 16px; }
  .contact-form__col:last-child { align-items: stretch; }
  .form__submit { width: 100%; }
  .form__intro p { font-size: 2rem; line-height: 1.3; }
}

/* Footer */
.footer {
  background-image: linear-gradient(115deg, #5354d1 0%, #060755 97.11%);
  color: #fff;
  padding: 120px 0;
}
.footer__inner { display: flex; flex-direction: column; gap: 64px; }
.footer__group { display: flex; flex-direction: column; gap: 48px; }

.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__logo img { display: block; height: calc(88.22px * var(--font-scale)); width: auto; }
.footer__headings { display: flex; gap: 88px; width: 976px; max-width: 100%; }
.footer__headings h4:first-child { width: 444px; flex-shrink: 0; }
.footer__headings h4 {
  margin: 0;
  font-weight: 700;
  font-size: calc(32px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.28px;
}

.footer__columns-row { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__contact { display: flex; flex-direction: column; gap: 24px; }
.footer__contact p {
  margin: 0;
  font-size: calc(28px * var(--font-scale));
  letter-spacing: -1.12px;
}
/* The icon+text live inside a single <a> (for the tel:/mailto: link), so
   the flex row + gap apply to the anchor itself, not the <p> wrapper —
   otherwise there's nothing for "gap" to separate and the icon sits flush
   against the text. */
.footer__contact p a { display: flex; align-items: center; gap: 16px; color: inherit; }
.footer__icon { width: calc(40px * var(--font-scale)); height: calc(40px * var(--font-scale)); object-fit: contain; flex-shrink: 0; }
.footer__lists { display: flex; gap: 88px; width: 976px; max-width: 100%; }
.footer__list { display: flex; flex-direction: column; gap: 24px; }
.footer__list:first-child { width: 444px; flex-shrink: 0; }
.footer__list li { font-size: calc(28px * var(--font-scale)); letter-spacing: -1.12px; }

.footer__middle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer__download,
.footer__social { display: flex; align-items: center; gap: 24px; }
.footer__download span,
.footer__social span { font-size: calc(28px * var(--font-scale)); letter-spacing: -1.12px; }
.footer__download img { height: 65.7px; width: auto; aspect-ratio: 220 / 65.7261; display: block; }
.social-icons { display: flex; gap: 16px; align-items: center; }
.social-icons img { width: 40px; height: 40px; display: block; }

.footer__divider { border: none; border-top: 1px solid #fff; margin: 0; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__legal-block p { margin: 0 0 16px; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.96px; }
.footer__legal { display: flex; gap: 16px; align-items: center; }
.footer__legal a { font-size: calc(24px * var(--font-scale)); letter-spacing: -0.96px; color: #fff; }
.footer__legal-divider { width: 1px; height: 24px; background: #fff; }
.footer__iso {
  flex-shrink: 0;
  width: calc(112px * var(--font-scale));
  height: calc(112px * var(--font-scale));
  border-radius: 16px;
  background: #fff;
  padding: calc(16px * var(--font-scale));
  display: flex;
}
.footer__iso img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   SMALL-DESKTOP / LAPTOP PASS — Homepage only (1280x720-class).
   Scoped to 901-1280px so it sits ABOVE the existing tablet/mobile
   tiers (<=900/768/640/560, which keep their own layout) and never
   touches 1281px+ (the 1920px Figma canvas range) or 2560px+.
   The whole site is sized for a 1920px canvas via --font-scale, which
   clamps to 1.0 at <=1920 — so at 1280 nothing shrank and components
   overflowed/cropped. Lowering --font-scale here cascades to every
   calc(* var(--font-scale)) value (all body text, nav/footer logos,
   ISO badge, package badge, footer icons); the rules below then trim
   the remaining fixed-px structural sizes. All images keep their
   aspect ratio (width/height auto or uniform scale) — no stretching,
   squashing, or cropping. ============================================ */
@media (min-width: 901px) and (max-width: 1280px) {
  /* Wider page margins than the base 96px tier for more white space at this
     size (content area = 1280 - 2*128 = 1024px at a 1280px viewport). */
  :root { --font-scale: 0.72; --container-padding: 128px; }

  /* 1. Navbar — logo + menu text already scale via --font-scale; tighten
        the fixed paddings/gaps so the bar reads proportionally smaller. */
  .navbar__inner { padding-top: 20px; padding-bottom: 20px; }
  .navbar__menu { gap: 16px; }
  .navbar__menu a { padding: 6px 12px; }

  /* 2. Banner — ALIGNMENT: the banner is the only full-bleed section, so give
        it the same left/right padding as .container (var(--container-padding))
        and the carousel lines up with every other section's margins; the
        purple background still spans full width behind it.
        SLIDE 2 == SLIDE 1: both slides fill the available width (flex: 1) and
        take their height from one shared aspect-ratio (Slide 1 / Figma
        1280:350 = 3.657), so the two banner cards are identical in width,
        height and aspect. object-fit: cover fills each card with no distortion
        — Slide 2's art (3.07:1) is trimmed a hair top/bottom to fit the shared
        box. Each card sits ON the purple section (banner and background remain
        separate elements). */
  .banner { padding: 40px var(--container-padding) 12px; }
  .banner--no-indicator { padding-bottom: 40px; }
  .banner__pattern { width: 100%; left: 0; top: -8%; }
  .carousel { gap: 24px; }
  .carousel__slide {
    flex: 1;
    min-width: 0;
    height: auto;
    aspect-ratio: 1280 / 350;
  }
  .carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
  .carousel__btn { width: 52px; height: 52px; }
  .carousel__btn img { width: 24px; height: 24px; }
  .carousel-indicator { height: 44px; }

  /* 3. Better-Future — all 3 cards in ONE row. Each card is a fixed-px
        composition (image collage + text at 553px wide) that can't be
        rewritten responsively, so zoom uniformly scales the WHOLE card —
        images, text, spacing together — and, unlike transform, also shrinks
        its layout footprint so three fit side by side. 0.57x: 3*553*0.57 +
        2*16 gap = 978px < 1024px content. --font-scale is reset to 1 inside
        the card so text isn't double-reduced (zoom already handles it).
        Uniform scale = proportions preserved, no crop, no distortion. */
  .better-future { padding: 80px 0; }
  .title-description { padding-bottom: 36px; }
  /* width:100% makes the card row fill the container (its parent .how-detail
     otherwise centers it shrink-wrapped, leaving a ~23px inset each side);
     space-between then pins the outer two cards exactly to the left/right page
     margins, with the third centered and the gaps even. */
  .how-detail .card { flex-wrap: nowrap; justify-content: space-between; gap: 16px; width: 100%; }
  .feature { zoom: 0.57; --font-scale: 1; }

  /* 4. Produk — text via --font-scale; trim grid/card gaps and shrink the
        circular CTA arrow button. Yellow badge + icon scale via
        --font-scale already. */
  .produk { padding: 80px 0; }
  .produk__inner { gap: 32px; }
  .title-subtitle { gap: 24px; }
  .package-grid { gap: 32px 64px; }
  /* Same icon->text gap for the regular cards (e.g. Exploration) AND the
     Customize Package card — the latter kept the base 40px, so its icon/text
     (and the CTA button below the text) sat spaced wider than the others. */
  .package-card,
  .custom-package { gap: 24px; }
  .product-cta__arrow { width: 36px; height: 36px; }
  .product-cta__arrow img { width: 9px; height: 16px; }

  /* 5. Layanan — scale the whole fixed-px photo collage down further (0.6;
        transform keeps every photo's position/aspect intact — no
        distortion), reclaiming the freed space with negative margins
        (849*0.4=340, 688*0.4=275). Tighten the audience list: smaller gaps
        between items and less space to each divider line. Text scales via
        --font-scale. */
  .layanan { padding: 80px 0; }
  .layanan__inner { gap: 56px; }
  .layanan__row { gap: 40px; }
  .layanan__media {
    transform: scale(0.6);
    transform-origin: top left;
    margin-right: -340px;
    margin-bottom: -275px;
  }
  .audience-grid { gap: 16px; }
  .audience-card { padding-bottom: 16px; }

  /* 6. Telah Dipercaya — the client logos are one combined image; let it span
        the FULL content width so it aligns to the left/right page margins,
        which also enlarges the logos and their spacing proportionally. Kept at
        width:100% / height:auto, so no stretching or squashing. */
  .telah-dipercaya { padding: 80px 0; }
  .trusted__inner { gap: 36px; }
  .trusted-banner { max-width: 100%; }
  .trusted__cta { width: 440px; }

  /* 7. Form — text via --font-scale; smaller card padding, field height
        and submit button so the overall form is more compact. */
  .form { padding: 80px 0; }
  .form__inner { gap: 36px; }
  .form__card { padding: 32px 28px; }
  .contact-form { gap: 40px; }
  .contact-form input,
  .contact-form select { height: 52px; }
  .form__submit { width: 200px; height: 52px; }

  /* 8. Footer — contact icons scale via --font-scale; shrink the Google Play
        button (aspect ratio preserved), social icons, the "Assessment by
        sekolah.mu" logo and the ISO badge.
        Alignment fix: the menu headings (Produk Kami / Lainnya) and their
        lists carry a fixed 976px / 444px desktop-canvas width that, at this
        size, overflowed and wrapped the headings down onto the left above
        the phone/email. Narrower matched widths (640 block / 220 first
        column) + nowrap keep both headings and lists as one right-aligned
        block, headings sitting directly above their lists. */
  .footer { padding: 80px 0; }
  .footer__inner { gap: 48px; }
  .footer__group { gap: 36px; }
  .footer__top { gap: 36px; flex-wrap: nowrap; }
  .footer__columns-row { flex-wrap: nowrap; }
  .footer__headings,
  .footer__lists { width: 640px; gap: 48px; }
  .footer__headings h4:first-child,
  .footer__list:first-child { width: 220px; }
  .footer__logo img { height: 50px; }
  .footer__iso { width: 68px; height: 68px; padding: 10px; }
  .footer__download img { height: 48px; }
  .social-icons img { width: 30px; height: 30px; }
}

/* ============================================================
   LARGE-DESKTOP ALIGNMENT — Homepage only (2560x1440+).
   Every section except the banner already uses .container (max-width
   var(--container-width)=2200, centered, padding var(--container-padding)
   =240 → content spans the same left/right page margins). Two outliers are
   brought in line here: the full-bleed banner, whose carousel sat wider than
   the container, and the combined client-logos image, which was capped
   narrower. NB: this block is placed AFTER the base component rules on
   purpose — the existing min-width:2560 block near the top of the file can
   only set :root vars; a .banner__inner/.trusted-banner rule up there would
   be overridden by the later base declarations of equal specificity. ====== */
@media (min-width: 2560px) {
  /* Banner carousel → same content box as .container (centered 2200 max-width
     with a 240 inset), so it lines up with every other section. The purple
     background still spans the full viewport width behind it. */
  .banner { padding-left: 0; padding-right: 0; }
  .banner__inner {
    max-width: var(--container-width);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  /* Client logos (one combined image) span the full content width so the row
     reaches the page margins; width:100%/height:auto keeps proportions. */
  .trusted-banner { max-width: 100%; }
  /* Both banner slides take their height from the Slide-1 / Figma aspect
     (1280:350) instead of the base fixed 437.5px height — at this width that
     fixed height made the box narrower-aspect than the 3.657:1 art, so cover
     cropped both slides' left/right edges (visibly clipping Slide 2's white
     card). aspect-ratio = no crop, and both slides stay identical in size. */
  .carousel__slide { height: auto; aspect-ratio: 1280 / 350; }
  /* Produk Kami report collages were too small on this wide layout (760px in a
     1720px content area). Enlarge to ~60% of the content width, matching the
     Figma proportion; transparent PNG + height:auto keeps aspect, no crop. */
  .product-tier__media { width: 1040px; }
}

/* Product Page — Hero */
.product-hero { position: relative; overflow: hidden; padding: 120px 0; background: #979fff; }
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(25, 27, 153, 0.04) 0%, rgba(83, 84, 209, 0) 100%);
  pointer-events: none;
}
.product-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
/* Single collage image (the 6 hero photos pre-composed). Its purple backdrop
   matches the section (#979fff) so it reads as photos floating on the hero;
   shown at natural aspect (height:auto) = no crop/distortion, no card frame. */
.product-hero__media { width: 100%; max-width: 100%; }
.product-hero__media img { width: 100%; height: auto; display: block; }
.product-hero__cta { width: 580px; max-width: 100%; text-align: center; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.48px; padding: 12px 24px; }
/* Decorative corner ornaments (clipped by the section's overflow:hidden). */
.product-hero__pattern { position: absolute; z-index: 0; pointer-events: none; }
.product-hero__pattern img { display: block; width: 100%; height: auto; }
.product-hero__pattern--left { left: 0; bottom: 0; width: 16%; }
.product-hero__pattern--right { right: 0; top: 0; width: 20%; }

/* Product Page — Produk Kami (one continuous indigo field, matching this
   page's original section structure — the heading and every tier band
   share one background, not a separate block per tier). */
/* Indigo->periwinkle gradient + corner-square pattern, matching Figma and the
   homepage "Produk" section (was a flat indigo with no pattern). */
.produk-kami { position: relative; overflow: hidden; padding: 120px 0; background: linear-gradient(180deg, #2325b3 16.226%, #787ae8 100%); color: #fff; }
.produk-kami__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 64px; }
.produk-kami__pattern { position: absolute; z-index: 0; pointer-events: none; }
.produk-kami__pattern--1 { width: 41%; right: -9%; top: 59%; aspect-ratio: 787 / 727.636; }
.produk-kami__pattern--2 { width: 33%; left: -5%; top: 63%; aspect-ratio: 638.72 / 590.54; }
.produk-kami__heading { padding-bottom: 0; }
.product-tier { display: flex; flex-direction: column; gap: 64px; padding-bottom: 72px; border-bottom: 1px solid #fff; }
.product-tier--last { padding-bottom: 0; border-bottom: none; }
.product-tier__row { display: flex; gap: 56px; align-items: center; }
/* Report collage (booklet cover + open spread) — transparent PNG cropped tight
   to its content (the surrounding empty space was removed), so the mockups
   fill the box (larger, matching Figma proportions) and float on the section
   with just their own shadows. Natural aspect = no crop/distortion. */
.product-tier__media {
  flex-shrink: 0;
  width: 960px;
  max-width: 100%;
}
.product-tier__media img { width: 100%; height: auto; display: block; }
.product-tier__text { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.product-tier__text h3 {
  margin: 0;
  font-weight: 700;
  font-size: calc(40px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.6px;
  color: #fff;
}
.product-tier__text p {
  margin: 0;
  font-weight: 300;
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.56px;
  color: #fff;
}
.product-tier__cta { align-self: flex-start; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.48px; padding: 12px 24px; }
.product-tier__components,
.product-customize__components { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.product-tier__components h4,
.product-customize__components h4 {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: calc(32px * var(--font-scale));
  line-height: calc(48px * var(--font-scale));
  letter-spacing: -0.64px;
}
.product-customize__components h4 { color: var(--color-text-100); }

/* Product Page — Customize Package (standalone full-bleed section, gold/
   amber gradient, dark text — NOT the same component as the homepage's
   `.custom-package` card, which lives nested inside `.produk` instead). */
/* WHITE section; the gold gradient is just a content box (inside .container,
   so it sits at the page margins) — not the whole full-bleed section. The
   Figma corner patterns layer behind the content within the box. */
.product-customize {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #fff;
}
.product-customize__inner {
  position: relative;
  overflow: hidden;
  padding: 64px;
  border-radius: 24px;
  background: linear-gradient(to right, var(--color-gold), var(--color-amber-text));
  color: var(--color-text-100);
}
/* Faint white square-clusters as in Figma — left one in the upper area, right
   one mid-height bleeding off the right edge (clipped by the box's
   overflow:hidden). Low opacity so they're a subtle texture behind the content
   rather than solid boxes. */
.product-customize__pattern { position: absolute; z-index: 0; pointer-events: none; opacity: 0.15; }
.product-customize__pattern img { display: block; width: 100%; height: auto; }
.product-customize__pattern--left { left: 0; top: 12%; width: 13%; }
.product-customize__pattern--right { right: 0; top: 36%; width: 15%; }
.product-customize__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
/* Standard section-heading scale (60/70), matching the other section titles
   (.title-subtitle h1/h2) for design-system consistency; description stays on
   the standard body scale (28px). */
.product-customize__inner h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(60px * var(--font-scale));
  line-height: calc(70px * var(--font-scale));
  letter-spacing: -1.92px;
  color: #3a3a3a;
}
.product-customize__inner p {
  margin: 0;
  max-width: 760px;
  font-weight: 300;
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.56px;
  color: #333;
}
.product-customize__media { width: 100%; max-width: 1035px; }
.product-customize__media img { width: 100%; height: auto; object-fit: contain; display: block; }

/* Product Page — assessment-component chip, shared by Produk Kami's
   per-product list and Customize Package's own list. */
.assessment-chip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.assessment-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 2px solid var(--color-orange);
  border-radius: 24px;
  background: var(--color-amber-fill);
  white-space: nowrap;
}
.assessment-chip__name {
  font-weight: 700;
  font-size: calc(24px * var(--font-scale));
  letter-spacing: -0.48px;
  color: var(--color-amber-text);
}
.assessment-chip__divider { align-self: stretch; width: 1px; background: var(--color-orange); }
.assessment-chip__duration {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: calc(24px * var(--font-scale));
  color: var(--color-orange);
}
/* Sized with the duration text (which scales via --font-scale) so the clock
   stays balanced with it at every width — at 40px fixed it grew dispropor-
   tionately large at 2560 (where the text scales down to 0.8). ~32px tracks
   the Figma icon and the text's 32px line-height. */
.assessment-chip__clock { width: calc(32px * var(--font-scale)); height: calc(32px * var(--font-scale)); flex-shrink: 0; }

/* Event Detail Page — Banner */
/* Full-width purple section + decorative pattern (same treatment as the
   homepage .banner), with the webinar image as a SEPARATE card on top — the
   purple background and the image are distinct layers, not one merged asset.
   The image stays inside .container so it lines up with every other section's
   page margins; the purple background bleeds full width behind it. */
.event-banner {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background:
    linear-gradient(180deg, rgba(83, 84, 209, 0) 0%, rgba(25, 27, 153, 0.2) 100%),
    #979fff;
}
.event-banner__pattern {
  position: absolute;
  top: -14.78%;
  left: -12.46%;
  width: 124%;
  aspect-ratio: 2383.78 / 768.158;
  z-index: 0;
  pointer-events: none;
}
.event-banner__pattern img { width: 100%; height: 100%; display: block; }
.event-banner > .container { position: relative; z-index: 1; }
.event-banner__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1280 / 350;
  box-shadow: 4px 8px 12px 0 rgba(35, 37, 179, 0.4);
}
.event-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Event Detail Page — title/description + the cream "Benefit" panel.
   Title/description use margins (not the container's flex gap) so the two
   gaps below — title-to-description and description-to-Benefit-panel — can
   differ; a single flex `gap` here would force them to match. */
/* Symmetric vertical padding — the section's top margin matches its bottom
   (was 24px top / 120px bottom) for consistent spacing above and below. */
.event-content { padding: 120px 0; }
.event-content__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.event-content__inner h1 {
  margin: 0 0 24px;
  max-width: 1588px;
  font-weight: 400;
  font-size: calc(72px * var(--font-scale));
  line-height: calc(80px * var(--font-scale));
  letter-spacing: -0.72px;
  color: var(--color-primary);
}
.event-content__title-lead { font-weight: 700; }
.event-content__description {
  margin: 0;
  max-width: 1360px;
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -0.28px;
}
/* Left-aligned to match Figma: the "Benefit" heading, every icon and every
   label sit flush to the panel's left (the parent .event-content__inner is
   centered, so this overrides both align-items and text-align here). */
.event-benefits {
  margin-top: 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 32px;
  padding: 48px;
  border-radius: 24px;
  background: var(--color-amber-fill);
}
.event-benefits h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(36px * var(--font-scale));
  line-height: 1.2;
  letter-spacing: -1.44px;
}
.event-benefits__list { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; flex-direction: column; gap: 32px; }
.event-benefits__row { display: flex; align-items: center; gap: 16px; }
.event-benefits__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-benefits__icon img { width: 34px; height: 34px; }
.event-benefits__label {
  font-size: calc(28px * var(--font-scale));
  line-height: calc(40px * var(--font-scale));
  letter-spacing: -1.12px;
}

/* Small desktop (901-1280px): the Event Detail fonts already follow the same
   --font-scale (0.72) as the Homepage at this width (set on :root in the
   homepage 901-1280 block), so headings/body/labels are on the same
   typography scale. This block just compacts the event-specific section
   padding to match the Homepage's compacted sections (120px -> 80px, banner
   64 -> 40, benefit panel 48 -> 32) so the spacing is proportional too. */
@media (min-width: 901px) and (max-width: 1280px) {
  .event-banner { padding: 40px 0; }
  .event-content { padding: 80px 0; }
  .event-benefits { padding: 32px; }
  /* Match the Homepage's largest title size (64px base, like .title-description
     /.telah-dipercaya h2) instead of the event page's own 72px, so the title's
     typography scales consistently with the Homepage at this width. --font-scale
     (0.72) still applies on top, and the line-height drops proportionally. */
  .event-content__inner h1 {
    font-size: calc(64px * var(--font-scale));
    line-height: calc(72px * var(--font-scale));
  }
}

/* Small desktop (901-1280px): the report image's base width (960px) left almost
   no room for the text beside it in the ~1024px content area (text crushed to a
   word per line). Shrink the report to ~half the row and tighten the gap so the
   description has a readable column. Page margins stay at the shared
   --container-padding (128px at this width) across all sections. */
@media (min-width: 901px) and (max-width: 1280px) {
  .product-tier__row { gap: 40px; }
  .product-tier__media { width: 520px; }
}

@media (max-width: 900px) {
  .feature { width: 100%; max-width: 553px; }
  .how-detail .card { flex-direction: column; }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form { flex-direction: column; }
  .navbar__menu { gap: 8px; }
  .navbar__menu a { font-size: 18px; padding: 6px 10px; }
  .title-description h1, .form__intro p { font-size: 2.2rem; line-height: 1.3; letter-spacing: normal; }
  .title-subtitle h1, .title-subtitle h2 { font-size: 2.4rem; line-height: 1.3; }
  .footer__columns-row, .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__lists, .footer__headings { gap: 40px; }
  .product-tier__row { flex-direction: column; }
  .product-tier__media { width: 100%; max-width: 460px; }
  .product-tier__text { text-align: center; align-items: center; }
  .product-customize__inner h2 { font-size: 2.4rem; line-height: 1.3; }
  .event-content__inner h1 { font-size: 2.4rem; line-height: 1.3; letter-spacing: normal; }
  .event-content__description { font-size: 1.25rem; line-height: 1.4; letter-spacing: normal; }
  .event-benefits h2 { font-size: 1.8rem; letter-spacing: normal; }
  .event-benefits__icon { width: 56px; height: 56px; }
  .event-benefits__icon img { width: 26px; height: 26px; }
  .event-benefits__label { font-size: 1.25rem; line-height: 1.4; letter-spacing: normal; }
}

@media (max-width: 560px) {
  .package-grid { grid-template-columns: 1fr; }
  .custom-package { flex-direction: column; text-align: center; max-width: none; }
  .package-card { flex-direction: column; text-align: center; }
  .package-card__text { align-items: center; }
  .footer__headings, .footer__lists { flex-direction: column; gap: 24px; }
  .footer__headings h4:first-child, .footer__list:first-child { width: auto; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .assessment-chip { white-space: normal; }
  .event-benefits { padding: 24px; gap: 24px; }
  .event-benefits__row { gap: 12px; }
}

/* Blog List Page — Banner Carousel Blog */
.blog-banner { position: relative; overflow: hidden; padding: 64px 0 80px; background: var(--color-bg-light); }
/* When the slide indicators aren't shown, match the bottom spacing to the top
   (64px) so the section reads as balanced instead of leaving the dots' gap. */
.blog-banner--no-indicator { padding-bottom: 64px; }
.blog-banner__pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.blog-banner__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; }

.blog-carousel { position: relative; display: flex; align-items: center; gap: 24px; width: 100%; justify-content: center; }
/* Dimensions match the homepage banner slide: fills the container up to the
   same 1600px cap, same 437.5px height (was 1410px / 1410:480 aspect). */
.blog-carousel__slides { position: relative; flex: 1; min-width: 0; max-width: 1600px; height: 437.5px; border-radius: 24px; overflow: hidden; box-shadow: 4px 8px 12px 0 rgba(35, 37, 179, 0.4); }
.blog-carousel__slide { position: absolute; inset: 0; display: none; }
.blog-carousel__slide--active { display: block; }
.blog-carousel__slide-link { display: block; width: 100%; height: 100%; }
.blog-carousel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-carousel__overlay { position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(10,10,30,0.92) 0%, rgba(10,10,30,0.5) 50%, rgba(10,10,30,0.1) 100%); }
/* Content bottom-aligned (was space-between); the author row + "Baca Artikel"
   CTA share a bottom footer line. */
.blog-carousel__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 48px; color: #fff; }
.blog-carousel__text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.blog-carousel__title { margin: 0; font-weight: 700; font-size: calc(48px * var(--font-scale)); line-height: 1; letter-spacing: -1.92px; color: #fff; }
.blog-carousel__excerpt { margin: 0; font-weight: 300; font-size: calc(18px * var(--font-scale)); line-height: 1.3; letter-spacing: -0.36px; color: rgba(255, 255, 255, 0.8); }
.blog-carousel__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-carousel__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(18px * var(--font-scale)); color: #fff; flex-shrink: 0; }
.blog-carousel__cta-arrow { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("assets/icon-arrow-right.svg") center / contain no-repeat; mask: url("assets/icon-arrow-right.svg") center / contain no-repeat; }
.blog-carousel__btn { position: relative; z-index: 2; background: var(--color-orange); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.blog-carousel-indicator { display: flex; align-items: center; gap: 8px; }
.blog-dot { width: 40px; height: 10px; border-radius: 100px; background: var(--color-dot-inactive); cursor: pointer; }
.blog-dot--active { background: var(--color-gold); width: 64px; }

/* width:fit-content + align-self:flex-start so the chip hugs its text instead
   of stretching to the banner text column's width (it's a flex item there). */
.blog-category-chip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; border-radius: 16px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: #fff; }

.blog-author-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
/* Circular orange logo mark, centered and clipped to the circle (was a plain
   white circle with an off-circle badge). */
.blog-author-row__avatar { flex-shrink: 0; width: 35px; height: 35px; border-radius: 50%; background: var(--color-orange); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.blog-author-row__avatar img { width: 58%; height: 58%; object-fit: contain; display: block; }
.blog-author-row__name { font-weight: 700; color: var(--color-text-100); }
.blog-author-row__meta-group { display: inline-flex; align-items: center; gap: 8px; }
.blog-author-row__meta { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-300); white-space: nowrap; }
/* Calendar/clock icons as masks so they inherit the meta text color. */
.blog-meta-icon { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.blog-meta-icon--calendar { -webkit-mask-image: url("assets/icon-calendar.svg"); mask-image: url("assets/icon-calendar.svg"); }
.blog-meta-icon--clock { -webkit-mask-image: url("assets/icon-clock-line.svg"); mask-image: url("assets/icon-clock-line.svg"); }
.blog-author-row__divider { width: 1px; height: 13px; flex-shrink: 0; background: var(--color-neutral-500); }
.blog-author-row--light .blog-author-row__name { color: #fff; }
.blog-author-row--light .blog-author-row__meta { color: rgba(255, 255, 255, 0.75); }
.blog-author-row--light .blog-author-row__divider { background: rgba(255, 255, 255, 0.4); }

/* Blog List Page — Artikel Lainnya */
/* Lavender section background (matches Figma) so the white article cards stand
   out against it rather than blending into a white section. */
.artikel-lainnya { padding: 64px 0; background: var(--color-bg-light); }
.artikel-lainnya__inner { display: flex; flex-direction: column; gap: 32px; }
.artikel-lainnya__header { display: flex; align-items: baseline; justify-content: space-between; }
.artikel-lainnya__title { margin: 0; font-weight: 700; font-size: calc(32px * var(--font-scale)); letter-spacing: -1.28px; color: var(--color-text-100); }
.artikel-lainnya__count { font-weight: 300; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.56px; color: var(--color-text-300); }

.artikel-lainnya__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.artikel-lainnya__search { flex: 1; min-width: 220px; max-width: 360px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--color-neutral-500); font-size: 16px; font-family: inherit; }
.artikel-lainnya__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.artikel-lainnya__filter { padding: 8px 16px; border-radius: 100px; border: 1px solid var(--color-neutral-500); background: #fff; color: var(--color-text-100); font-size: 14px; cursor: pointer; }
.artikel-lainnya__filter--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.artikel-lainnya__grid { display: grid; gap: 32px; grid-template-columns: repeat(var(--blog-cols-desktop, 3), 1fr); }
.article-card__inner { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid #eef0f6; background: #fff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); }
/* Fixed-aspect image box. The img is absolutely positioned so it can't stretch
   the box taller when a card is stretched to its grid row's height — every
   card image keeps the same 450:245 height. */
.article-card__media { position: relative; aspect-ratio: 450 / 245; width: 100%; flex-shrink: 0; overflow: hidden; }
.article-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__chip { position: absolute; left: 12px; top: 12px; }
.article-card__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 24px; }
.article-card__title { margin: 0; font-weight: 700; font-size: calc(20px * var(--font-scale)); line-height: 1.4; letter-spacing: -0.48px; color: var(--color-text-100); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Clamp to 3 lines (matching Figma's fixed excerpt block) so every card body —
   and therefore every card — is the same height. */
.article-card__excerpt { margin: 0; font-weight: 300; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__author { margin-top: auto; border-top: 1px solid #f3f4f6; padding-top: 16px; }
/* Card: name on the left, date/duration pushed to the right (as in Figma). */
.article-card__author .blog-author-row__meta-group { margin-left: auto; }
.article-card__link { display: block; height: 100%; }

.artikel-lainnya__empty { text-align: center; color: var(--color-text-300); padding: 32px 0; }
.artikel-lainnya__pagination { display: flex; justify-content: center; gap: 8px; }
.artikel-lainnya__page { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-neutral-500); background: #fff; cursor: pointer; }
.artikel-lainnya__page--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.artikel-lainnya__load-more { display: block; margin: 0 auto; }

@media (max-width: 1280px) {
  .artikel-lainnya__grid { grid-template-columns: repeat(var(--blog-cols-tablet, 2), 1fr); }
}

@media (max-width: 768px) {
  .artikel-lainnya__grid { grid-template-columns: repeat(var(--blog-cols-mobile, 1), 1fr); }
  .blog-carousel__content { padding: 24px; }
  .blog-carousel__title { font-size: 1.8rem; line-height: 1.2; letter-spacing: normal; }
  .blog-carousel__excerpt { font-size: 1rem; }
  .blog-carousel__btn { width: 40px; height: 40px; }
  .artikel-lainnya__header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 560px) {
  .blog-carousel { gap: 12px; }
  .blog-carousel__btn { width: 36px; height: 36px; }
  .artikel-lainnya__toolbar { flex-direction: column; align-items: stretch; }
  .artikel-lainnya__search { max-width: none; }
}

/* Article Detail Page */
.article-detail { padding: 64px 0; }
.article-detail__inner { display: flex; align-items: flex-start; gap: 104px; }
.article-detail__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.article-detail__header { display: flex; flex-direction: column; gap: 24px; }
.article-detail__title { margin: 0; font-weight: 700; font-size: calc(48px * var(--font-scale)); line-height: 1; letter-spacing: -1.92px; color: var(--color-text-100); }
.article-detail__meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.blog-author-row--lg .blog-author-row__avatar { width: 48px; height: 48px; }
.blog-author-row--lg .blog-author-row__badge { width: 18px; height: 18px; }

.article-detail__share { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.article-detail__share-label { font-size: 14px; color: var(--color-text-300); }
.article-detail__share-icons { display: flex; align-items: center; gap: 16px; }
.article-detail__share-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; opacity: 0.85; }
.article-detail__share-btn:hover { opacity: 1; }

.article-detail__cover { margin-top: 32px; width: 100%; aspect-ratio: 1082 / 480; border-radius: 24px; overflow: hidden; }
.article-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-detail__body { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.article-detail__p { margin: 0; font-weight: 300; font-size: calc(24px * var(--font-scale)); line-height: 1.5; letter-spacing: -0.48px; color: var(--color-text-100); }
.article-detail__h2 { margin: 0; font-weight: 700; font-size: calc(32px * var(--font-scale)); letter-spacing: -1px; color: var(--color-text-100); }
.article-detail__h3 { margin: 0; font-weight: 700; font-size: calc(24px * var(--font-scale)); letter-spacing: -0.5px; color: var(--color-text-100); }
.article-detail__list { margin: 0; padding-left: 28px; display: flex; flex-direction: column; gap: 8px; font-weight: 300; font-size: calc(24px * var(--font-scale)); line-height: 1.5; letter-spacing: -0.48px; color: var(--color-text-100); }
.article-detail__quote { margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--color-primary); font-weight: 300; font-style: italic; font-size: calc(24px * var(--font-scale)); line-height: 1.5; color: var(--color-text-100); }
.article-detail__quote p { margin: 0; }
.article-detail__quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--color-text-300); }
.article-detail__figure { margin: 0; }
.article-detail__figure img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; display: block; }
.article-detail__figure figcaption { margin-top: 8px; text-align: center; font-size: 14px; color: var(--color-text-300); }
.article-detail__embed { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.article-detail__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-detail__p a, .article-detail__list a, .article-detail__quote a { color: var(--color-primary); text-decoration: underline; }

.article-detail__sidebar { width: 450px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.article-detail__sidebar-title { margin: 0; font-weight: 700; font-size: calc(32px * var(--font-scale)); letter-spacing: -1.28px; color: var(--color-text-100); }
.article-detail__sidebar-list { display: flex; flex-direction: column; gap: 24px; }

.article-detail__toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px);
  background: var(--color-text-100); color: #fff; padding: 12px 20px; border-radius: var(--radius);
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
.article-detail__toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* Small desktop (1025-1280px): the 450px sidebar + 104px gap left the main
   article column too narrow (~490px). Narrow the sidebar and gap so the
   reading area widens and balances; this also frees room so the author row and
   "Bagikan" share icons sit on one line without crowding. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .article-detail__inner { gap: 48px; }
  .article-detail__sidebar { width: 320px; }
  .article-detail__share { gap: 14px; }
  .article-detail__share-icons { gap: 14px; }
}

@media (max-width: 1024px) {
  .article-detail__inner { flex-direction: column; gap: 0; }
  .article-detail__sidebar { width: 100%; margin-top: 48px; }
}

@media (max-width: 768px) {
  .article-detail__title { font-size: 1.8rem; line-height: 1.2; letter-spacing: normal; }
  .article-detail__p, .article-detail__list, .article-detail__quote { font-size: 1.1rem; letter-spacing: normal; }
  .article-detail__sidebar-title { font-size: 1.5rem; letter-spacing: normal; }
}