/* ==========================================================================
   Alfamedia — components.css
   Komponen yang dapat dipakai ulang (prefiks c-*, state is-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.c-skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background-color: var(--color-navy-950);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  transition: transform var(--duration-fast) var(--ease-out);
}

.c-skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Header & navigasi
   -------------------------------------------------------------------------- */
/* Di puncak halaman header dibiarkan transparan supaya latar hero menembus
   sampai ke belakangnya — tidak ada garis sambung di bawah header. */
.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.c-header.is-scrolled {
  background-color: color-mix(in srgb, var(--surface-page) 94%, transparent);
  border-bottom-color: var(--line-hairline);
  box-shadow: var(--shadow-hairline);
}

@supports (backdrop-filter: blur(8px)) {
  .c-header.is-scrolled {
    backdrop-filter: saturate(1.4) blur(10px);
  }
}

.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}

/* Indikator progres baca. Lebarnya digerakkan lewat --scroll-progress yang
   diperbarui app.js, sehingga hanya transform yang berubah tiap frame. */
/* Ditempatkan di tepi ATAS layar, bukan di bawah header, dan memakai warna
   biru — supaya jelas berbeda dari garis EMAS penanda tab aktif yang berada
   tepat di bawah tautan navigasi. */
.c-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  pointer-events: none;
  overflow: hidden;
}

.c-header__progress span {
  display: block;
  height: 100%;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background-color: var(--progress-color);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

/* Plakat netral supaya logo navy tetap terbaca di atas bidang gelap.
   Logo tidak diubah warnanya — hanya diberi alas. */
.u-brand-plaque {
  width: fit-content;
  border-radius: var(--radius-sm);
  background-color: var(--brand-plaque, transparent);
  padding: var(--brand-plaque-pad, 0);
  transition: background-color var(--duration-normal) var(--ease-out);
}

.c-header__back {
  min-height: 40px;
  padding-inline: var(--space-5);
  font-size: var(--fs-caption);
}

/* --------------------------------------------------------------------------
   Tombol utilitas header: ganti tema dan ganti bahasa
   -------------------------------------------------------------------------- */
.c-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.c-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-tool:hover {
  color: var(--text-strong);
  border-color: var(--button-ghost-fg);
}

.c-tool svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
}

/* Ikon matahari/bulan bergantian mengikuti tema aktif. */
.c-tool__icon--moon { display: none; }
:root[data-theme="dark"] .c-tool__icon--sun { display: none; }
:root[data-theme="dark"] .c-tool__icon--moon { display: block; }

.c-tool__label {
  line-height: 1;
}

.c-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
}

.c-header__brand img {
  width: 152px;
  height: auto;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.c-header__brand:hover img {
  opacity: 0.82;
}

.c-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 1.4vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--accent);
  border-radius: var(--radius-xs);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-nav__link:hover {
  color: var(--text-strong);
}

.c-nav__link:hover::after {
  transform: scaleX(1);
}

.c-nav__link.is-active {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

.c-nav__link.is-active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Tombol menu mobile
   -------------------------------------------------------------------------- */
.c-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-strong);
}

.c-menu-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}

.c-menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-xs);
  transition: transform var(--duration-normal) var(--ease-emphasis),
    opacity var(--duration-fast) var(--ease-out);
}

.c-menu-toggle__bars span:nth-child(1) { top: 0; }
.c-menu-toggle__bars span:nth-child(2) { top: 6px; }
.c-menu-toggle__bars span:nth-child(3) { top: 12px; }

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bars span:nth-child(1),
.c-menu-toggle.is-close .c-menu-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bars span:nth-child(2),
.c-menu-toggle.is-close .c-menu-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bars span:nth-child(3),
.c-menu-toggle.is-close .c-menu-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Drawer navigasi mobile
   -------------------------------------------------------------------------- */
.c-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
}

.c-drawer.is-open {
  visibility: visible;
}

.c-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--backdrop);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.c-drawer.is-open .c-drawer__backdrop {
  opacity: 1;
}

.c-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(21rem, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-7);
  background-color: var(--surface-page);
  border-left: 1px solid var(--line-hairline);
  transform: translateX(101%);
  transition: transform var(--duration-slow) var(--ease-emphasis);
  overflow-y: auto;
}

.c-drawer.is-open .c-drawer__panel {
  transform: translateX(0);
}

.c-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  margin-top: calc(var(--space-5) * -1);
}

.c-drawer__head img {
  width: 128px;
  height: auto;
}

.c-drawer__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-hairline);
}

.c-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line-hairline);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-heading);
}

.c-drawer__list a::after {
  content: "";
  width: 1.25rem;
  height: 2px;
  background-color: var(--line-hairline);
  transition: width var(--duration-normal) var(--ease-emphasis),
    background-color var(--duration-normal) var(--ease-out);
}

.c-drawer__list a:hover::after,
.c-drawer__list a.is-active::after {
  width: 2.25rem;
  background-color: var(--accent);
}

.c-drawer__foot {
  margin-top: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Tombol & tautan
   -------------------------------------------------------------------------- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.c-button__arrow {
  display: block;
  width: 1.125rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-button:hover .c-button__arrow {
  transform: translateX(3px);
}

.c-button--primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border: 1px solid var(--button-primary-bg);
}

.c-button--primary:hover {
  background-color: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
}

.c-button--primary:active {
  transform: translateY(1px);
}

.c-button--ghost {
  background-color: transparent;
  color: var(--button-ghost-fg);
  border: 1px solid var(--line-hairline);
}

.c-button--ghost:hover {
  border-color: var(--button-ghost-fg);
}

.c-button[aria-disabled="true"] {
  pointer-events: none;
  background-color: transparent;
  color: var(--text-muted);
  border-color: var(--line-hairline);
}

.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  padding-block: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--link-fg);
}

.c-textlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0.55;
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-emphasis),
    background-color var(--duration-normal) var(--ease-out);
}

.c-textlink:hover::after {
  background-color: var(--accent-strong);
  transform: scaleX(1.06);
}

.u-on-deep .c-textlink {
  color: var(--color-white);
}

.u-on-deep .c-textlink::after {
  background-color: rgba(255, 255, 255, 0.4);
}

.u-on-deep .c-textlink:hover::after {
  background-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Kepala section
   -------------------------------------------------------------------------- */
.c-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-section-heading__rule {
  width: 2.5rem;
  height: 2px;
  background-color: var(--accent);
  border-radius: var(--radius-xs);
}

.c-section-heading__title {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Latar dinamis per section: low-poly geometris + jaringan partikel

   Lapisan ini dibuat oleh js/backdrop.js dan selalu berada di belakang teks.
   Warnanya diambil dari token pada section itu sendiri, jadi otomatis benar
   di bidang terang maupun navy, pada tema terang maupun gelap.
   -------------------------------------------------------------------------- */
/* Section TIDAK diberi overflow: hidden — itu akan mematikan position: sticky
   pada panel di dalamnya. Pemotongan cukup dilakukan oleh lapisan latarnya. */
.has-backdrop {
  position: relative;
  isolation: isolate;
}

.c-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.c-backdrop__poly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Tanpa will-change: 30-an poligon yang dipromosikan ke layer sendiri justru
   memberatkan compositor di ponsel. Biarkan peramban yang memutuskan. */
.c-backdrop__poly polygon {
  transform-box: fill-box;
  transform-origin: center;
}

.c-backdrop__poly polygon.is-filled {
  fill: var(--poly-fill);
  stroke: none;
}

.c-backdrop__poly polygon.is-outlined {
  fill: none;
  stroke: var(--poly-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.c-backdrop__plexus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Latar hero berlapis: gradasi navy sangat halus + kisi presisi + anyaman
   diagonal + jaringan simpul. Semua murni CSS/SVG, hanya satu keluarga warna,
   dan seluruhnya di belakang teks sehingga kontras bacaan tidak berkurang. */
.c-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Naik ke belakang header sticky, lalu padding-nya dikembalikan
     supaya posisi isi tetap sama. */
  margin-top: calc((var(--header-height) + 1px) * -1);
  padding-block: calc(var(--header-height) + clamp(3rem, 1.4rem + 5.4vw, 5.75rem))
    clamp(3.5rem, 2rem + 5vw, 6rem);
  background-image:
    radial-gradient(
      118% 88% at 84% -14%,
      var(--hero-glow) 0%,
      rgba(40, 85, 149, 0) 60%
    ),
    linear-gradient(
      180deg,
      var(--hero-top) 0%,
      var(--hero-bottom) 62%
    );
}

/* Kisi presisi — bahasa visual blueprint dan design system web. */
.c-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(
    115% 105% at 76% 4%,
    #000 0%,
    rgba(0, 0, 0, 0.4) 46%,
    transparent 80%
  );
  mask-image: radial-gradient(
    115% 105% at 76% 4%,
    #000 0%,
    rgba(0, 0, 0, 0.4) 46%,
    transparent 80%
  );
}

/* Garis horizon tipis di kaki hero. */
.c-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: -1;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--horizon-line) 22%,
    rgba(215, 168, 36, 0.5) 50%,
    var(--horizon-line) 78%,
    transparent 100%
  );
}

/* Dua bidang cahaya navy yang bergerak sangat lambat. Satu keluarga warna,
   tanpa glow berwarna — hanya memberi kesan latar yang "hidup". */
.c-hero__aurora {
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.c-hero__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}

.c-hero__orb--a {
  top: 2%;
  right: 6%;
  width: 42vw;
  max-width: 34rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--orb-a) 0%, transparent 68%);
}

.c-hero__orb--b {
  bottom: 0%;
  left: 12%;
  width: 34vw;
  max-width: 28rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--orb-b) 0%, transparent 70%);
}

.c-hero__weave {
  position: absolute;
  top: -20%;
  right: -12%;
  width: 62%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    58deg,
    transparent 0 46px,
    var(--weave-line) 46px 47px
  );
  -webkit-mask-image: linear-gradient(215deg, #000 8%, transparent 68%);
  mask-image: linear-gradient(215deg, #000 8%, transparent 68%);
}

.c-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
  grid-template-rows: auto auto;
  gap: clamp(2rem, 1.2rem + 2.4vw, 3.25rem) clamp(2.5rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.c-hero__intro {
  grid-column: 1;
  grid-row: 1;
}

.c-hero__grid > .c-hero__portraits {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.c-hero__grid > .c-hero__meta {
  grid-column: 1;
  grid-row: 2;
}

.c-hero__mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Logo tidak diulang di sini — identitas sudah dibawa header.
   Penanda cukup berupa garis emas pendek. */
.c-hero__mark-rule {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2px;
  background-color: var(--accent);
  border-radius: var(--radius-xs);
}

.c-hero__title {
  margin-bottom: var(--space-5);
  max-width: 15ch;
}

.c-hero__lead {
  margin-bottom: var(--space-7);
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
}

.c-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-hairline);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
}

.c-hero__portraits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);
  align-items: start;
}

.c-hero__portraits > .c-portrait {
  position: relative;
  z-index: 1;
}

/* Potret kedua sedikit turun supaya komposisinya tidak simetris kaku. */
.c-hero__portraits .c-portrait + .c-portrait {
  margin-top: clamp(1.5rem, 0.6rem + 2.8vw, 3rem);
}

/* --------------------------------------------------------------------------
   Potret
   -------------------------------------------------------------------------- */
.c-portrait {
  position: relative;
  margin: 0;
}

/* Bidang navy yang mengintip di belakang potret, mengarah ke kolom teks. */
.c-portrait__plane {
  position: absolute;
  z-index: 0;
  top: -0.875rem;
  left: -0.875rem;
  width: 72%;
  height: 44%;
  background-color: var(--plane-bg);
  border-radius: var(--radius-sm);
}

.c-portrait__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--surface-cool);
  aspect-ratio: var(--ratio-portrait);
}

.c-portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--frame-edge);
  border-radius: inherit;
  pointer-events: none;
}

.c-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, 50% 22%);
  transition: transform var(--duration-slow) var(--ease-emphasis);
}

/* Potret hero sekaligus tautan ke bagian profil. Overlay muncul saat hover
   maupun saat menerima fokus keyboard, jadi tidak bergantung pada mouse. */
.c-portrait__frame--link {
  display: block;
  cursor: pointer;
}

.c-portrait__overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-image: linear-gradient(
    to top,
    rgba(7, 26, 61, 0.92) 0%,
    rgba(7, 26, 61, 0.72) 60%,
    rgba(7, 26, 61, 0) 100%
  );
  color: var(--color-white);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(35%);
  transition: opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-emphasis);
}

.c-portrait__overlay svg {
  width: 1.125rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-portrait__frame--link:hover .c-portrait__overlay,
.c-portrait__frame--link:focus-visible .c-portrait__overlay {
  opacity: 1;
  transform: translateY(0);
}

.c-portrait__frame--link:hover .c-portrait__overlay svg {
  transform: translateX(3px);
}

/* Garis emas tipis ikut muncul di tepi atas bingkai. */
.c-portrait__frame--link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-emphasis);
}

.c-portrait__frame--link:hover::before,
.c-portrait__frame--link:focus-visible::before {
  transform: scaleX(1);
}

.c-portrait__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
}

.c-portrait__name {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-heading);
}

.c-portrait__role {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Fakta ringkas
   -------------------------------------------------------------------------- */
.c-fact__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--accent);
}

.c-fact__value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   Foto suasana kelas
   -------------------------------------------------------------------------- */
.c-classroom {
  margin: clamp(2.5rem, 1.8rem + 2.4vw, 4rem) 0 0;
}

/* Komposisi bersusun yang mengikuti irama kerangka rancangannya: dua bidang
   besar di atas (papan & layar), sederet bidang kecil di bawah (meja).
   Enam kolom membuat pembagian 2/4 dan 2/2/2 jatuh tepat. */
.c-classroom__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1.5fr 1fr;
  gap: clamp(0.5rem, 0.3rem + 0.7vw, 0.875rem);
  aspect-ratio: 2 / 1;
}

.c-classroom__slot {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--surface-cool);
}

.c-classroom__slot:nth-child(1) { grid-column: span 2; }
.c-classroom__slot:nth-child(2) { grid-column: span 4; }
.c-classroom__slot:nth-child(n + 3) { grid-column: span 2; }

/* Kotak yang belum berisi gambar tetap tampil sebagai kerangka rancangan —
   sengaja bergaris putus-putus supaya jelas terbaca sebagai tempat kosong,
   bukan gambar yang gagal dimuat. */
.c-classroom__slot.is-empty {
  background-color: transparent;
  border-style: dashed;
}

.c-classroom__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasis);
}

/* Kotak berisi gambar adalah tombol: dapat diklik dan dijangkau keyboard.
   Dipakai bersama oleh komposisi ruang kelas dan slot katalog. */
.c-zoom {
  cursor: zoom-in;
  transition: transform var(--duration-normal) var(--ease-emphasis),
    border-color var(--duration-normal) var(--ease-out);
}

.c-zoom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-emphasis);
}

.c-zoom__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-image: linear-gradient(
    to top,
    rgba(7, 26, 61, 0.92) 0%,
    rgba(7, 26, 61, 0.7) 62%,
    rgba(7, 26, 61, 0) 100%
  );
  color: var(--color-white);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  text-align: left;
  opacity: 0;
  transform: translateY(45%);
  transition: opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-emphasis);
}

.c-zoom__label svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.c-zoom:hover,
.c-zoom:focus-visible {
  border-color: var(--accent);
}

.c-zoom:hover::before,
.c-zoom:focus-visible::before {
  transform: scaleX(1);
}

.c-zoom:hover .c-zoom__label,
.c-zoom:focus-visible .c-zoom__label {
  opacity: 1;
  transform: translateY(0);
}

.c-zoom:hover img,
.c-zoom:focus-visible img {
  transform: scale(1.05);
}

/* Kotak kecil di baris bawah: labelnya hanya ikon, teksnya akan sesak. */
.c-classroom__slot:nth-child(n + 3) .c-zoom__label span {
  display: none;
}

.c-classroom__slot:nth-child(n + 3) .c-zoom__label {
  justify-content: flex-end;
}

.c-classroom__caption {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Lightbox — tampilan besar satu gambar
   -------------------------------------------------------------------------- */
.c-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  visibility: hidden;
}

.c-lightbox.is-open {
  visibility: visible;
}

.c-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(2, 7, 16, 0.94);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.c-lightbox.is-open .c-lightbox__backdrop {
  opacity: 1;
}

.c-lightbox__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: clamp(0.75rem, 0.4rem + 1.4vw, 1.75rem);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-slow) var(--ease-emphasis);
}

.c-lightbox.is-open .c-lightbox__panel {
  opacity: 1;
  transform: none;
}

.c-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
}

.c-lightbox__figure {
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

/* display: contents membuat <img> menjadi anak langsung grid figure. Tanpa
   ini, kotak acuannya adalah <picture> yang tingginya otomatis. */
.c-lightbox__figure picture {
  display: contents;
}

/* Kotak gambar MENGISI area grid, lalu object-fit: contain yang menjaga
   proporsinya. Cara ini tidak bergantung pada persentase max-height, yang
   ikut gagal begitu salah satu induknya tidak bertinggi pasti — dan itulah
   yang membuat gambar besar sempat menabrak keterangan di bawahnya. */
.c-lightbox__figure img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* Tombol arah di kiri, keterangan mengisi sisanya — bukan berdempet di
   tengah, yang membuat keduanya terbaca sebagai satu blok. */
.c-lightbox__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  min-height: 44px;
}

.c-lightbox__foot .c-lightbox__caption {
  flex: 1 1 12rem;
  text-align: left;
}

.c-lightbox__caption {
  max-width: 60ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
}

.c-lightbox__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-lightbox__button:hover {
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.08);
}

.c-lightbox__button svg {
  width: 1.125rem;
  height: 1.125rem;
}

.c-lightbox__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.c-lightbox__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Profil editorial
   -------------------------------------------------------------------------- */
.c-profile + .c-profile {
  margin-top: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  padding-top: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  border-top: 1px solid var(--line-hairline);
}

.c-profile__index {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  /* Emas tidak dipakai untuk teks kecil di atas bidang terang (kontras). */
  color: var(--text-number);
}

.c-profile__name {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.c-profile__role {
  margin-bottom: var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--text-role);
  font-weight: var(--weight-medium);
}

.c-profile__bio {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.c-profile__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  max-width: 34rem;
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-hairline);
}

.c-profile__meta dt {
  margin-bottom: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-profile__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Fokus pengembangan
   -------------------------------------------------------------------------- */
.c-focus-group + .c-focus-group {
  margin-top: var(--space-8);
}

.c-focus-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-focus-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--line-hairline);
}

.c-focus-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-focus-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line-hairline);
}

.c-focus-item__num {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--text-number);
  padding-top: 0.35rem;
}

.c-focus-item__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.c-focus-item__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Media pembelajaran
   -------------------------------------------------------------------------- */
.c-filter:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.c-filter__button {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-filter__button:hover {
  color: var(--text-strong);
  border-color: var(--button-ghost-fg);
}

.c-filter__button[aria-pressed="true"] {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

.c-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0 var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-hairline);
}

/* :not([hidden]) wajib — tanpa itu, "display: flex" mengalahkan aturan bawaan
   peramban [hidden] { display: none } sehingga penyaring kategori tidak
   menyembunyikan kartu apa pun. */
.c-media-item:not([hidden]) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line-hairline);
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-media-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width var(--duration-slow) var(--ease-emphasis);
}

.c-media-item:hover {
  transform: translateY(-3px);
}

.c-media-item:hover::before,
.c-media-item:focus-within::before {
  width: 3.5rem;
}

.c-media-item__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background-color: var(--surface-cool);
}

.c-media-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-media-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.c-media-item__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}

.c-media-item__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--line-hairline);
}

.c-media-item__status.is-live::before {
  background-color: var(--color-blue-600);
}

.c-media-item__status.is-soon::before {
  background-color: var(--accent);
}

.c-media-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.c-media-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-media-item__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 46ch;
}

.c-media-item__action {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Kotak katalog memanjang selebar container; daftar kategori yang sedang
   disiapkan berada DI DALAMNYA sebagai kotak-kotak kecil. */
.c-media-empty {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
}

.c-media-empty__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3) var(--space-5);
}

.c-media-empty__head picture {
  grid-row: 1 / span 2;
  justify-self: start;
  width: fit-content;
  margin-top: 2px;
}

.c-media-empty img {
  width: 44px;
  height: auto;
}

.c-media-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.c-media-empty__text {
  max-width: 52ch;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Angka ringkas katalog — seluruhnya dihitung dari data, bukan ditulis manual
   -------------------------------------------------------------------------- */
.c-stat-row:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0;
  margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--line-hairline);
}

.c-stat {
  padding: var(--space-5) var(--space-5) 0 0;
  border-right: 1px solid var(--line-hairline);
}

.c-stat:last-child {
  border-right: 0;
}

.c-stat + .c-stat {
  padding-left: var(--space-5);
}

.c-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

.c-stat__label {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Kategori yang sedang disiapkan
   -------------------------------------------------------------------------- */
.c-roadmap {
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-top: 1px solid var(--line-hairline);
}

/* Bila katalog sudah terisi, blok ini pindah ke luar kotak dan berdiri sendiri. */
.c-roadmap--standalone {
  margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  padding-top: 0;
  border-top: 0;
}

.c-roadmap__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Kotak-kotak di dalam kotak: satu slot per kategori, label di bawahnya. */
.c-roadmap__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-roadmap__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-roadmap__slot {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--surface-page);
}

/* Slot yang sudah berisi gambar sungguhan. Kerangka dipakai selama belum ada. */
.c-roadmap__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasis);
}

.c-roadmap__slot.is-empty {
  border-style: dashed;
}

/* Nomor diberi alas kecil supaya tidak bertabrakan dengan garis wireframe.
   Ditempatkan di KANAN atas: sudut kiri atas sudah dipakai titik-titik bingkai
   jendela pada ketiga kerangka, dan keduanya akan saling menimpa. */
.c-roadmap__num {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--surface-raised);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--text-number);
}

/* --------------------------------------------------------------------------
   Pratinjau wireframe

   Digambar bergaya kerangka rancangan supaya jelas terbaca sebagai skema,
   bukan tangkapan layar produk yang sudah ada.
   -------------------------------------------------------------------------- */
.c-wire {
  display: block;
  width: 100%;
  height: 100%;
}

.c-wire .w-frame {
  fill: none;
  stroke: var(--wire-line);
  stroke-width: 1.5;
}

.c-wire .w-line {
  fill: none;
  stroke: var(--wire-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-wire .w-dot {
  fill: var(--wire-line);
}

.c-wire .w-fill {
  fill: var(--wire-fill);
}

.c-wire .w-tile {
  fill: var(--wire-fill);
  stroke: var(--wire-line);
  stroke-width: 1;
}

.c-wire .w-tile.is-on {
  fill: var(--wire-accent-fill);
  stroke: var(--accent);
}

.c-wire .w-accent {
  fill: var(--accent);
}

.c-wire .w-accent-soft {
  fill: var(--wire-accent-fill);
}

.c-wire .w-accent-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-roadmap__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.c-roadmap__note {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 44ch;
}

/* Penanda status cukup sekali di judul daftar, tidak diulang tiap baris. */
.c-roadmap__title::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Halaman rincian media
   -------------------------------------------------------------------------- */
.c-breadcrumb {
  margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.c-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-3);
  color: var(--line-hairline);
}

.c-breadcrumb a:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-detail__head {
  max-width: 46rem;
}

.c-detail__title {
  margin-block: var(--space-4) var(--space-5);
}

.c-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-6);
}

.c-detail__figure {
  margin: clamp(2.5rem, 1.8rem + 2.4vw, 4rem) 0 0;
}

.c-detail__frame {
  overflow: hidden;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background-color: var(--surface-cool);
  aspect-ratio: 16 / 10;
}

.c-detail__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-detail__figure figcaption {
  margin-top: var(--space-3);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-regular);
}

.c-detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-5) var(--space-6);
  margin: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-hairline);
}

.c-detail__facts dt {
  margin-bottom: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-detail__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.c-media-more {
  margin-top: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   Panel catatan (bidang navy kecil)
   -------------------------------------------------------------------------- */
.c-note-panel {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-radius: var(--radius-md);
  background-color: var(--surface-deep-alt);
  color: var(--text-on-deep);
}

.c-note-panel__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
}

.c-note-panel__text {
  color: var(--text-on-deep-muted);
  font-size: var(--fs-small);
}

.c-note-panel__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.c-note-panel__list li {
  padding-block: var(--space-3);
  border-top: 1px solid var(--line-on-deep);
  font-size: var(--fs-small);
  color: var(--text-on-deep-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.c-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface-deep);
  color: var(--text-on-deep);
  padding-block: clamp(3.25rem, 2.2rem + 2.8vw, 4.5rem) var(--space-6);
}

/* Bidang cahaya yang melayang pelan di footer. */
.c-footer__glow {
  position: absolute;
  z-index: -1;
  top: -60%;
  right: -8%;
  width: min(62%, 40rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--deep-glow) 0%, transparent 66%);
  filter: blur(30px);
  pointer-events: none;
  will-change: transform;
}

.c-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(152deg, #000 0%, transparent 46%);
  mask-image: linear-gradient(152deg, #000 0%, transparent 46%);
}

/* Garis tipis emas–navy sebagai batas atas footer. */
.c-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(241, 194, 59, 0.55) 30%,
    rgba(241, 194, 59, 0.2) 60%,
    transparent 100%
  );
}

/* Footer memakai grid 12 kolom yang sama dengan section lain, sehingga tepi
   kolomnya sejajar dengan konten di atasnya — bukan blok mengambang. */
.c-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  padding-bottom: clamp(2.5rem, 1.8rem + 2vw, 3.25rem);
}

/* Garis rambut di selokan grid: tinggi kolom yang berbeda jadi terbaca
   sebagai tiga panel yang disengaja, bukan ruang kosong. */
.c-footer__col {
  position: relative;
}

.c-footer__col::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 0;
  left: calc(var(--grid-gap) / -2);
  width: 1px;
  background-color: var(--line-on-deep);
}

.c-footer__brand {
  grid-column: 1 / span 4;
}

/* Ubin merek dan label kolom lain dibuat setinggi sama (44px) supaya isi
   ketiga kolom mulai pada garis yang persis sejajar. */
.c-footer__brand picture {
  display: flex;
  align-items: flex-end;
  height: 44px;
  margin-bottom: var(--space-4);
}

.c-footer__brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}

.c-footer__desc {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-on-deep-muted);
  max-width: 30ch;
}

/* Kolom navigasi sejajar kolom judul section; kolom tentang sejajar kolom
   teks pendamping (mulai kolom ke-8). */
.c-footer__col--nav {
  grid-column: 5 / span 3;
}

.c-footer__col--about {
  grid-column: 8 / span 5;
}

.c-footer__label {
  display: flex;
  align-items: flex-end;
  height: 44px;
  padding-bottom: 3px;
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}

.c-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer__col a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-on-deep-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-footer__col a:hover {
  color: var(--color-white);
}

.c-footer__col a:hover::after {
  transform: scaleX(1);
}

.c-footer__domain {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--color-white);
}

.c-footer__disclaimer {
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-on-deep-muted);
}

/* Halaman 404 memakai footer ringkas: disclaimer ikut ke baris bawah. */
.c-footer__bottom .c-footer__disclaimer {
  font-size: var(--fs-caption);
  line-height: 1.6;
  max-width: 58ch;
}

.c-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-deep);
  font-size: var(--fs-caption);
  color: var(--text-on-deep-muted);
}

.c-footer__to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--text-on-deep-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-footer__to-top svg {
  width: 0.75rem;
  height: 0.875rem;
  transition: transform var(--duration-normal) var(--ease-emphasis);
}

.c-footer__to-top:hover {
  color: var(--color-white);
}

.c-footer__to-top:hover svg {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Halaman 404
   -------------------------------------------------------------------------- */
.c-notfound {
  display: grid;
  place-items: center;
  min-height: 78vh;
  padding-block: var(--space-10);
  text-align: center;
}

.c-notfound__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 44ch;
  margin-inline: auto;
}

.c-notfound img {
  width: 168px;
  height: auto;
}

.c-notfound__code {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-number);
}