/* ==========================================================================
   CAC INDONESIA / KAKI — Stylesheet prototipe
   --------------------------------------------------------------------------
   Struktur DOM & nama class SENGAJA dipertahankan sama dengan blade Laravel
   (main-header, main-menu, main-slider, news-one, supported, tracking,
   services-one, section-title, site-footer, .row/.col-*) supaya penerapan ke
   aplikasi Laravel yang sudah ada cukup dengan mengganti stylesheet.

   ARAH DESAIN — editorial/institusional, mengikuti karakter
   collective-action.com namun lebih bersih:
     · heading serif, badan teks sans
     · radius kecil (4px), bukan kartu membulat
     · nyaris tanpa box-shadow — batas tipis sebagai gantinya
     · warna dipakai irit: merah hanya untuk aksi, tautan, dan aksen kecil
     · ruang putih longgar, tipografi besar

   Palet tetap dari logo KAKI:
     #000000 hitam · #AE1F24 merah · #B3892D emas · #58585A abu

   Catatan aksesibilitas (feedback CIPE): abu logo #58585A dan turunannya
   terlalu terang untuk teks panjang — #85827C hanya 3,83:1, di bawah ambang
   WCAG AA. Teks tubuh dan teks muted karena itu digelapkan ke #3A3A37 dan
   #6B6862; abu logo tetap dipakai untuk garis, ikon, dan elemen non-teks.

   Urutan: 1 Token · 2 Reset · 3 Grid · 4 Utilitas · 5 Komponen ·
           6 Section · 7 Responsive · 8 A11y & motion
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Warna utama — diturunkan dari logo */
  --c-red:        #AE1F24;
  --c-red-600:    #94191E;
  --c-red-700:    #7A1418;
  --c-red-soft:   #FAF0F0;

  --c-gold:       #B3892D;
  --c-gold-600:   #97721F;
  --c-gold-soft:  #FBF5E8;

  --c-ink:        #14140F;
  --c-heading:    #14140F;
  --c-text:       #3A3A37;   /* digelapkan dari #58585A — 11,41:1 */
  --c-muted:      #6B6862;   /* digelapkan dari #85827C — 5,55:1, lolos AA */

  --c-white:      #FFFFFF;
  --c-bg:         #FFFFFF;
  --c-bg-alt:     #F6F5F2;   /* off-white hangat, bukan abu dingin */
  --c-bg-dark:    #14140F;
  --c-border:     #E4E1DA;
  --c-border-str: #CBC6BC;

  --c-on-dark:      #FFFFFF;
  --c-on-dark-soft: #BFBBB2;

  /* Tipografi — serif editorial + sans modern buatan Indonesia */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.05rem, 1.35rem + 2.6vw, 3.05rem);
  --fs-h2:      clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
  --fs-h3:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;   /* eyebrow / kategori */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.75;

  /* Radius kecil — ciri utama gaya editorial */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-full: 999px;

  /* Bayangan dipakai seminimal mungkin */
  --sh-sm: 0 1px 2px rgba(20, 20, 15, .05);
  --sh-md: 0 6px 24px rgba(20, 20, 15, .07);

  /* Spacing & layout */
  --space-section: 64px;
  --gutter:        20px;
  --container-max: 1180px;
  --header-h:      76px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast:   .16s ease;
  --t-base:   .26s var(--ease-out);
  --t-slow:   .6s var(--ease-out);

  --z-header:  100;
  --z-overlay: 110;
  --z-drawer:  120;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--c-heading);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -.005em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--c-red); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-red-600); }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ==========================================================================
   3. GRID RINGAN — meniru kelas Bootstrap yang dipakai blade Laravel
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter) / -2);
}
.row > [class*="col-"] {
  width: 100%;
  padding-inline: calc(var(--gutter) / 2);
  margin-bottom: var(--gutter);
}
.row.no-gutters { margin-inline: 0; }
.row.no-gutters > [class*="col-"] { padding-inline: 0; margin-bottom: 0; }

/* ==========================================================================
   4. UTILITAS
   ========================================================================== */
.section--alt { background-color: var(--c-bg-alt); }

.mb-3 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-white { color: var(--c-white); }
.list-unstyled { list-style: none; padding: 0; margin: 0; }
.clearfix::after { content: ""; display: table; clear: both; }

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-base);
}
.skip-link:focus { top: 16px; color: var(--c-on-dark); }

section[id], div[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Bahasa: blok <div lang="id"> / <div lang="en"> berdampingan --------- */
html[data-lang="id"] [lang="en"],
html[data-lang="en"] [lang="id"] { display: none !important; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* Tombol berisi bendera (revisi klien 1). Penanda aktif bukan latar merah:
   bendera Indonesia hilang di atasnya. Aktif = bendera penuh berbingkai,
   tidak aktif = diredupkan. */
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 7px 9px;
  transition: background-color var(--t-fast);
}
.lang-switch__btn + .lang-switch__btn { border-left: 1px solid rgba(255, 255, 255, .18); }
.lang-flag { display: block; width: 24px; height: 16px; border-radius: 2px; opacity: .55; transition: opacity var(--t-fast); }
.lang-switch__btn:hover .lang-flag, .lang-switch__btn:focus-visible .lang-flag { opacity: .9; }
.lang-switch__btn.is-active { background-color: rgba(255, 255, 255, .14); }
.lang-switch__btn.is-active .lang-flag { opacity: 1; box-shadow: 0 0 0 2px var(--c-white); }

/* Varian terang (dipakai di drawer mobile) */
.mobile-nav__lang .lang-switch { border-color: var(--c-border); }
.mobile-nav__lang .lang-switch__btn + .lang-switch__btn { border-left-color: var(--c-border); }
.mobile-nav__lang .lang-flag { box-shadow: 0 0 0 1px var(--c-border); }
.mobile-nav__lang .lang-switch__btn.is-active { background-color: var(--c-bg-alt); }
.mobile-nav__lang .lang-switch__btn.is-active .lang-flag { box-shadow: 0 0 0 2px var(--c-heading); }

/* ---- Reveal on scroll — halus, tanpa "melompat" ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--t-slow) var(--delay, 0ms),
    transform var(--t-slow) var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   5. KOMPONEN
   ========================================================================== */

/* ---- 5.1 Tombol — persegi lembut, tanpa efek melayang ------------------- */
.thm-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid var(--c-red);
  border-radius: var(--r-sm);
  background-color: var(--c-red);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.thm-btn:hover,
.btn:hover {
  background-color: var(--c-red-600);
  border-color: var(--c-red-600);
  color: var(--c-white);
}
.thm-btn svg, .btn svg { width: 16px; height: 16px; flex: none; }

.btn--outline {
  background-color: transparent;
  border-color: var(--c-border-str);
  color: var(--c-heading);
}
.btn--outline:hover {
  background-color: transparent;
  border-color: var(--c-red);
  color: var(--c-red);
}

/* ---- 5.2 Badge --------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.6;
}
.badge--red  { color: var(--c-red); }
.badge--gold { color: var(--c-gold-600); }

/* ---- 5.3 Section title — eyebrow tenang + judul serif besar ------------- */
.section-title { margin-bottom: 44px; }
.section-title.text-center .section-sub-title-box { justify-content: center; }

.section-sub-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-sub-title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
/* Garis merah pendek sebagai satu-satunya aksen; ornamen kedua tidak dipakai */
.section-title-shape-1 {
  width: 26px;
  height: 1px;
  background-color: var(--c-red);
  flex: none;
}
.section-title-shape-2 { display: none; }

.section-title__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-heading);
  max-width: 22ch;
}
.section-title.text-center .section-title__title { max-width: 24ch; margin-inline: auto; }

.section-title__text {
  margin-top: 16px;
  font-size: 1.0625rem;
  color: var(--c-text);
  max-width: 58ch;
}
.section-title.text-center .section-title__text { margin-inline: auto; }

.section-cta { margin-top: 40px; text-align: center; }

/* ---- 5.4 Meta kartu: kategori merah + tanggal, dipisah garis tipis ------ */
.news-one__tag,
.card-meta-row .news-one__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-red);
}
.news-one__tag svg { display: none; }   /* gaya editorial: teks saja */

.news-one__date,
.card-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.news-one__date svg,
.card-meta svg { display: none; }

/* ==========================================================================
   6. SECTION
   ========================================================================== */

/* ---- 6.0 PRELOADER ------------------------------------------------------
   Nama class sama dengan markup yang sudah ada (masih di-comment) pada
   layouts/public.blade.php:  .preloader > .preloader__image
   ------------------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  background-color: var(--c-white);
  transition: opacity .42s var(--ease-out), visibility .42s var(--ease-out);
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__image {
  width: min(200px, 54vw);
  aspect-ratio: 572 / 172;
  background: url("../assets/img/logo-kaki.png") center / contain no-repeat;
  animation: preloaderIn .55s var(--ease-out) both;
}

/* Shimmer kontinu merah→emas; gradien bergerak supaya tidak pernah kosong */
.preloader__bar {
  width: min(160px, 44vw);
  height: 2px;
  background-image: linear-gradient(
    90deg,
    var(--c-border) 0%,  var(--c-border) 18%,
    var(--c-red)    38%, var(--c-gold)   58%,
    var(--c-border) 78%, var(--c-border) 100%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: preloaderSweep 1.25s linear infinite;
}

@keyframes preloaderIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes preloaderSweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* ---- 6.1 HEADER --------------------------------------------------------- */
.main-header { position: relative; z-index: var(--z-header); }

/* Bar atas: tipis, tenang */
.main-header__top {
  background-color: var(--c-ink);
  color: var(--c-on-dark-soft);
  font-size: var(--fs-xs);
}
.main-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding-block: 7px;
}
.main-header__top-address-list { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.main-header__top-address-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.55;
}
.main-header__top-address-list .icon { display: inline-flex; color: var(--c-gold); margin-top: 3px; }
.main-header__top-address-list .icon svg { width: 13px; height: 13px; }
.main-header__top-address-list a { color: var(--c-on-dark-soft); }
.main-header__top-address-list a:hover { color: var(--c-white); }

.main-header__top-right { display: flex; align-items: center; gap: 18px; }
.main-header__top-menu { display: flex; gap: 18px; }
.main-header__top-menu a { color: var(--c-on-dark-soft); font-weight: 500; }
.main-header__top-menu a:hover { color: var(--c-gold); }

/* Menu utama */
.main-menu {
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}
.main-menu__wrapper-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}
.main-menu__logo { flex: none; display: flex; align-items: center; }
.main-menu__logo img { width: 138px; height: auto; }
.main-menu__logo a { display: block; }

.main-menu__left { display: flex; align-items: center; }
.main-menu__list { display: flex; align-items: center; gap: 0; }
.main-menu__list > li { position: relative; }

/* Tautan menu: garis bawah merah yang tumbuh, bukan pil berlatar */
.main-menu__list > li > a,
.main-menu__list > li > .menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 26px 11px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--c-heading);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.main-menu__list > li > a::after,
.main-menu__list > li > .menu-toggle::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px;
  bottom: 18px;
  height: 2px;
  background-color: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.main-menu__list > li > a:hover,
.main-menu__list > li > .menu-toggle:hover,
.main-menu__list > li.is-active > a,
.main-menu__list > li.is-active > .menu-toggle { color: var(--c-red); }
.main-menu__list > li > a:hover::after,
.main-menu__list > li > .menu-toggle:hover::after,
.main-menu__list > li.is-active > a::after,
.main-menu__list > li.is-active > .menu-toggle::after { transform: scaleX(1); }

.menu-chevron { width: 15px; height: 15px; transition: transform var(--t-base); }
.main-menu__list > li.is-open .menu-chevron { transform: rotate(180deg); }

/* Submenu */
.main-menu__list ul {
  position: absolute;
  top: 100%;
  left: 6px;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.main-menu__list > li.dropdown:hover > ul,
.main-menu__list > li.dropdown:focus-within > ul,
.main-menu__list > li.dropdown.is-open > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.main-menu__list ul a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text);
}
.main-menu__list ul a:hover,
.main-menu__list ul a.is-active { background-color: var(--c-bg-alt); color: var(--c-red); }

/* Sticky */
.main-menu.is-sticky {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  box-shadow: var(--sh-md);
  animation: slideDown .3s var(--ease-out);
}
.main-menu.is-sticky .main-menu__list > li > a,
.main-menu.is-sticky .main-menu__list > li > .menu-toggle { padding-block: 22px; }
.main-menu.is-sticky .main-menu__list > li > a::after,
.main-menu.is-sticky .main-menu__list > li > .menu-toggle::after { bottom: 14px; }
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Toggler mobile */
.mobile-nav__toggler {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-heading);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mobile-nav__toggler svg { width: 21px; height: 21px; }
.mobile-nav__toggler:hover { border-color: var(--c-red); color: var(--c-red); }

/* Drawer mobile */
.mobile-nav__wrapper {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(360px, 86vw);
  height: 100dvh;
  padding: 18px 24px 32px;
  background-color: var(--c-white);
  border-left: 1px solid var(--c-border);
  transform: translateX(100%);
  transition: transform var(--t-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav__wrapper.is-open { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.mobile-nav__head img { width: 116px; }
.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  color: var(--c-heading);
}
.mobile-nav__close svg { width: 21px; height: 21px; }
.mobile-nav__close:hover { color: var(--c-red); }

.mobile-nav__lang { margin: 18px 0 6px; }

.mobile-nav__list > li > a,
.mobile-nav__list > li > .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-heading);
  text-align: left;
}
.mobile-nav__list > li > a:hover,
.mobile-nav__list > li > .menu-toggle:hover,
.mobile-nav__list > li.is-active > a { color: var(--c-red); }
.mobile-nav__list ul { display: none; padding: 4px 0 12px 14px; }
.mobile-nav__list > li.is-open > ul { display: block; }
.mobile-nav__list ul a {
  display: block;
  padding: 9px 0;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.mobile-nav__list ul a:hover, .mobile-nav__list ul a.is-active { color: var(--c-red); }

.mobile-nav__contact {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
  display: grid;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.65;
}
.mobile-nav__contact li { display: flex; gap: 9px; }
.mobile-nav__contact svg { width: 14px; height: 14px; color: var(--c-gold); flex: none; margin-top: 3px; }
.mobile-nav__contact a { color: var(--c-muted); }
.mobile-nav__contact a:hover { color: var(--c-red); }

.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(20, 20, 15, .45);
  opacity: 0;
  transition: opacity var(--t-base);
}
.mobile-nav__overlay.is-visible { opacity: 1; }

/* ---- 6.2 MAIN SLIDER ---------------------------------------------------- */
.main-slider { position: relative; background-color: var(--c-bg-alt); }

.main-slider__viewport { position: relative; overflow: hidden; }
.main-slider__track { display: flex; transition: transform .6s var(--ease-out); }
.main-slider__slide { flex: 0 0 100%; position: relative; }
.main-slider__slide img {
  width: 100%;
  height: clamp(280px, 46vw, 540px);
  object-fit: cover;
}
/* Selubung hanya di tepi bawah, secukupnya agar titik pagination terbaca
   di atas foto terang maupun gelap yang diunggah lewat admin panel. */
.main-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,15,0) 72%, rgba(20,20,15,.30) 100%);
  pointer-events: none;
}

/* Panah dibuat solid putih + ikon gelap supaya terbaca di atas gambar apa pun */
.main-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(20, 20, 15, .10);
  border-radius: var(--r-sm);
  background-color: rgba(255, 255, 255, .94);
  color: var(--c-ink);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.main-slider__nav:hover {
  background-color: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}
.main-slider__nav svg { width: 19px; height: 19px; }
.main-slider__prev { left: 16px; }
.main-slider__next { right: 16px; }

.main-slider__pagination {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.main-slider__dot {
  width: 24px; height: 3px;
  background-color: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(20, 20, 15, .12);
  transition: background-color var(--t-fast);
}
.main-slider__dot.is-active { background-color: var(--c-white); }

/* ---- 6.3 SEMINAR & EVENT ------------------------------------------------ */
.seminar-event { padding-block: var(--space-section); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.card:hover, .card:focus-within { border-color: var(--c-border-str); }
.card .row { flex: 1; align-items: stretch; }
.card__media { overflow: hidden; height: 100%; background-color: var(--c-bg-alt); }
.card-img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.card:hover .card-img { transform: scale(1.03); }

.card-body { display: flex; flex-direction: column; height: 100%; padding: 26px 28px; }
.card-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-title {
  font-size: 1.1875rem;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a { color: var(--c-heading); }
.card-title a:hover { color: var(--c-red); }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-text {
  font-size: var(--fs-small);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-red);
}
.card__more svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.card:hover .card__more svg { transform: translateX(4px); }

.video-embed {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background-color: var(--c-bg-alt);
}
.video-embed iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 700px;
  border: 0;
}
.video-embed__caption {
  padding: 14px 18px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---- 6.4 NEWS ONE — kartu datar bergaris ------------------------------- */
.news-one { padding-block: var(--space-section); }

.news-one__single {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.news-one__single:hover,
.news-one__single:focus-within { border-color: var(--c-border-str); }

.news-one__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}
.news-one__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.news-one__single:hover .news-one__img img { transform: scale(1.03); }

.news-one__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}
.news-one__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }

.news-one__title {
  font-size: 1.1875rem;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-one__title a { color: var(--c-heading); }
.news-one__title a:hover { color: var(--c-red); }
.news-one__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.news-one__text {
  font-size: var(--fs-small);
  color: var(--c-text);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-one__read-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-red);
}
.news-one__read-more svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.news-one__single:hover .news-one__read-more svg { transform: translateX(4px); }
.news-one__read-more--muted { color: var(--c-muted); font-weight: 500; }

.empty-state {
  padding: 64px 24px;
  border: 1px dashed var(--c-border-str);
  border-radius: var(--r-sm);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
.empty-state svg { width: 34px; height: 34px; margin: 0 auto 16px; color: var(--c-border-str); }

/* ---- 6.5 SUPPORTED BY --------------------------------------------------- */
.supported { padding-block: var(--space-section); background-color: var(--c-bg-alt); }

.supported__viewport { overflow: hidden; }
.supported__track { display: flex; align-items: center; gap: 14px; transition: transform .6s var(--ease-out); }
.supported__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 180px;
  height: 96px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  transition: border-color var(--t-base);
}
.supported__item img { max-height: 60px; width: auto; object-fit: contain; }

/* Tautan mitra bersifat opsional — di Laravel nanti berasal dari kolom
   website_url yang boleh kosong. Hanya kotak yang benar-benar punya tautan
   yang diberi umpan balik hover, supaya kotak tanpa tautan tidak terlihat
   bisa diklik padahal bukan (feedback CIPE poin 5). */
a.supported__item { text-decoration: none; }
a.supported__item:hover,
a.supported__item:focus-visible { border-color: var(--c-gold); }

/* Panah navigasi marquee (feedback CIPE poin 5) */
.supported__controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.supported__arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--c-border-str);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base);
}
.supported__arrow:hover { border-color: var(--c-ink); }
.supported__arrow svg { width: 16px; height: 16px; display: block; }
.supported__item span {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-heading);
  text-align: center;
  line-height: 1.35;
}

/* ---- 6.6 PITA GELAP (tracking & cta-one) — datar, tanpa gradasi -------- */
.tracking { padding-bottom: var(--space-section); }
/* Pita CTA diberi jarak bawah supaya tidak menempel ke footer yang sama-sama
   gelap — tanpa ini keduanya terbaca sebagai satu blok (CIPE poin 11). */
.cta-one { padding-block: 0 var(--space-section); }

.tracking__inner,
.cta-one__inner {
  position: relative;
  display: grid;
  gap: 24px;
  padding: 40px 30px;
  border-radius: var(--r-sm);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
  overflow: hidden;
}
/* satu garis emas tipis di tepi atas sebagai aksen */
.tracking__inner::before,
.cta-one__inner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-gold));
}

.tracking__left { display: flex; align-items: center; gap: 20px; }
.tracking__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  color: var(--c-gold);
  flex: none;
}
.tracking__icon svg { width: 25px; height: 25px; }
.tracking__sub-title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 8px;
}
.tracking__title,
.cta-one__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  color: var(--c-on-dark);
}
.tracking__btn-box { position: relative; }
.tracking__btn:hover,
.cta-one__btn:hover {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}

.cta-one__left, .cta-one__right { position: relative; }
.cta-one__right { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

/* Ajakan bergabung dipusatkan dan diperbesar (CIPE poin 10). Strukturnya
   tidak berubah — tetap cta-one__inner > cta-one__left + cta-one__right —
   yang diubah hanya tata letaknya, supaya tetap cocok dengan blade Laravel. */
.cta-one__inner { justify-items: center; text-align: center; gap: 30px; }
.cta-one__title {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem);
  max-width: 26ch;
  margin-inline: auto;
}
.cta-one__right { justify-content: center; }
.cta-one__btn { font-size: 1.0625rem; padding: 15px 34px; }
.cta-one__call { display: flex; align-items: center; gap: 16px; }
.cta-one__call-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  color: var(--c-gold);
  flex: none;
}
.cta-one__call-icon svg { width: 22px; height: 22px; }
.cta-one__call-number a {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-on-dark);
}
.cta-one__call-number a:hover { color: var(--c-gold); }
.cta-one__call-number p { font-size: var(--fs-xs); color: var(--c-on-dark-soft); }

/* ---- 6.7 MEDIA HUB ------------------------------------------------------ */
.services-one { padding-block: var(--space-section); }
.services-one__top { margin-bottom: 4px; }

/* Grid katalog: garis pemisah digambar oleh tiap kartu (box-shadow 1px),
   supaya sel yang kosong tidak meninggalkan blok abu. */
.media-grid { display: grid; gap: 1px; grid-template-columns: 1fr; }

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 30px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 1px var(--c-border);
  transition: background-color var(--t-base);
}
.media-card:hover, .media-card:focus-visible { background-color: var(--c-bg-alt); }

.media-card__icon {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: 22px;
  color: var(--c-red);
}
.media-card--gold .media-card__icon { color: var(--c-gold-600); }
.media-card__icon svg { width: 100%; height: 100%; }

.media-card__title {
  font-size: 1.1875rem;
  margin-bottom: 8px;
  color: var(--c-heading);
  transition: color var(--t-fast);
}
.media-card:hover .media-card__title { color: var(--c-red); }
.media-card__desc { font-size: var(--fs-small); color: var(--c-text); flex: 1; }
.media-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-red);
}
.media-card--gold .media-card__go { color: var(--c-gold-600); }
.media-card__go svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.media-card:hover .media-card__go svg { transform: translateX(4px); }

/* ---- 6.8 KONTEN HALAMAN (WYSIWYG dari admin panel) ---------------------- */
.page-content {
  padding-block: var(--space-section);
  max-width: 74ch;
  font-size: 1.0625rem;
  /* Teks panjang memakai hitam pekat yang sama dengan paragraf pembuka;
     pembedanya ukuran, bukan warna (feedback CIPE poin 6 — abu lebih sulit
     dibaca untuk isi sepanjang ini). */
  color: var(--c-heading);
}
.page-content h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin-bottom: 28px;
}
.page-content h2 { font-size: var(--fs-h2); margin: 44px 0 16px; }
.page-content h3 { font-size: 1.25rem; margin: 34px 0 12px; }
.page-content h4, .page-content h5 { font-size: 1.0625rem; margin: 26px 0 10px; }
.page-content > *:first-child { margin-top: 0; }
.page-content p { margin-bottom: 20px; }
.page-content ul, .page-content ol { margin: 0 0 22px; padding-left: 24px; display: grid; gap: 11px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { font-size: 1rem; }
.page-content li::marker { color: var(--c-red); }
.page-content img { border-radius: var(--r-sm); margin-block: 24px; }
.page-content a { text-decoration: underline; text-underline-offset: 3px; }
.page-content blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--c-gold);
  color: var(--c-heading);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.6;
}
.page-content hr { margin: 40px 0; border: 0; border-top: 1px solid var(--c-border); }
/* Persamaan yang ditonjolkan di naskah, misalnya Klitgaard di Anti-Corruption 101. */
.page-content .formula {
  margin: 28px 0;
  padding: 22px 24px;
  background-color: var(--c-gold-soft);
  border-left: 4px solid var(--c-gold);
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-heading);
  text-align: center;
}

/* Tabel */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.page-content table, .data-table { min-width: 460px; font-size: var(--fs-small); }
.page-content th, .page-content td,
.data-table th, .data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.page-content thead th, .data-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  background-color: var(--c-bg-alt);
  white-space: nowrap;
}
.page-content tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background-color: var(--c-bg-alt); }
.data-table td:first-child { color: var(--c-muted); font-variant-numeric: tabular-nums; width: 56px; }

.table-note { margin-top: 20px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7; }
.table-note strong { color: var(--c-heading); }

/* Keterangan status ditulis sebagai dua kalimat terpisah di baris berbeda,
   masing-masing dengan lencana yang dipakai di tabel (CIPE poin 13).
   Lencana teks diganti logo situs lama (revisi klien 1). */
.status-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.status-legend .status-mark { flex: none; }

.status-mark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.page-content .status-mark__logo { width: 56px; height: 56px; margin: 0; border-radius: 50%; }
.data-table .status-mark__logo { width: 44px; height: 44px; }
.data-table td { vertical-align: middle; }
.status-mark__text {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-mark__text--red  { color: var(--c-red); }
.status-mark__text--gold { color: var(--c-gold-600); }

/* Nama perusahaan boleh ditautkan, boleh tidak — di Laravel dari kolom
   website_url yang nullable (CIPE poin 15). Garis bawah tipis menandai mana
   yang benar-benar bisa diklik, supaya tidak tertukar dengan yang polos. */
.data-table__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-border-str);
  text-underline-offset: 3px;
}
.data-table__link:hover,
.data-table__link:focus-visible {
  color: var(--c-red);
  text-decoration-color: currentColor;
}

/* ---- 6.8b DETAIL ARTIKEL (portfolio-details) ---------------------------- */
.portfolio-details { padding-block: var(--space-section); }

.portfolio-details__back { margin-bottom: 28px; }
.portfolio-details__back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
}
.portfolio-details__back svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.portfolio-details__back a:hover { color: var(--c-red); }
.portfolio-details__back a:hover svg { transform: translateX(-4px); }

.portfolio-details__img {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background-color: var(--c-bg-alt);
}
.portfolio-details__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.portfolio-details__title {
  max-width: 800px;
  margin-inline: auto;
  /* sedikit lebih kecil dari judul section: judul artikel sering panjang */
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
}
.mt-4 { margin-top: 32px; }
.pt-3 { padding-top: 8px; }

.portfolio-details__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-border);
}

/* Badan artikel: satu kolom sempit agar nyaman dibaca */
.portfolio-details__content {
  max-width: 68ch;
  margin-inline: auto;
  padding-top: 40px;
  font-size: 1.0625rem;
}
.portfolio-details__content p { margin-bottom: 22px; }
.portfolio-details__content p:last-child { margin-bottom: 0; }
.portfolio-details__content h2 { font-size: var(--fs-h2); margin: 42px 0 16px; }
.portfolio-details__content h3 { font-size: 1.25rem; margin: 34px 0 12px; }
.portfolio-details__content ul,
.portfolio-details__content ol { margin: 0 0 22px; padding-left: 24px; display: grid; gap: 10px; }
.portfolio-details__content ul { list-style: disc; }
.portfolio-details__content ol { list-style: decimal; }
.portfolio-details__content li::marker { color: var(--c-red); }
.portfolio-details__content a { text-decoration: underline; text-underline-offset: 3px; }
/* paragraf pembuka sedikit lebih besar, kebiasaan tata letak terbitan */
.portfolio-details__content > p:first-child { font-size: 1.1875rem; color: var(--c-heading); }

/* ---- 6.8c KOMPONEN HALAMAN STRUKTUR BARU -------------------------------- */

/* Eyebrow & lead di dalam .page-content */
.page-content__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.page-content__lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--c-heading);
  margin-bottom: 26px;
}

/* --- Keluaran CKEditor 5 di dalam .page-content --------------------------
   Isi halaman CMS diketik admin lewat CKEditor, yang punya markup dan kelas
   khasnya sendiri. Tanpa aturan di bawah, gambar berketerangan, tabel, dan
   penyesuaian ukuran teks akan tampil tanpa gaya sama sekali.
   Diverifikasi terpakai di konten yang sudah ada: table, table-responsive,
   text-small, text-tiny, text-center, text-left.
   ---------------------------------------------------------------------- */

/* Gambar berketerangan */
.page-content figure { margin: 30px 0; }
.page-content figure img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.page-content figure figcaption {
  margin-top: 9px;
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.6;
}

/* Perataan gambar dari plugin image-style */
.page-content .image-style-side { float: right; max-width: 48%; margin: 8px 0 18px 26px; }
.page-content .image-style-align-left { float: left; max-width: 48%; margin: 8px 26px 18px 0; }
.page-content .image-style-align-right { float: right; max-width: 48%; margin: 8px 0 18px 26px; }
.page-content .image-style-align-center { margin-inline: auto; }
.page-content .image-inline { display: inline-block; max-width: 100%; margin: 0; }

/* Video sematan */
.page-content figure.media { position: relative; }
.page-content figure.media div[data-oembed-url] { position: relative; padding-bottom: 56.25%; }
.page-content figure.media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--r-sm);
}

/* Tabel. CKEditor membungkus tabel dengan <figure class="table">. */
.page-content figure.table { margin: 30px 0; overflow-x: auto; }
.page-content .table-responsive { overflow-x: auto; }

/* Ukuran teks dari plugin font-size. Dipakai relatif terhadap teks isi,
   bukan nilai piksel tetap, supaya jenjangnya tetap utuh di layar kecil. */
.page-content .text-tiny  { font-size: .75em; }
.page-content .text-small { font-size: .875em; }
.page-content .text-big   { font-size: 1.2em; }
.page-content .text-huge  { font-size: 1.4em; }

/* CKEditor menyimpan perataan sebagai kelas maupun style inline. */
.page-content .text-center { text-align: center; }
.page-content .text-left   { text-align: left; }
.page-content .text-right  { text-align: right; }
.page-content .text-justify { text-align: justify; }

/* Isi lama menyimpan dokumen HTML utuh di dalam kolom, sehingga <html> dan
   <body> ikut tersarang. Browser membuangnya diam-diam, tetapi kalau sampai
   terbentuk kotak, keduanya dinetralkan di sini. */
.page-content html,
.page-content body { display: contents; }

/* --- Tata Kelola: daftar orang ------------------------------------------ */
.people { padding-bottom: var(--space-section); }
.people__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.people__title { font-size: var(--fs-h2); }
.people__count { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }

.people__list { display: grid; }
.people__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-border);
}

/* Slot headshot (CIPE poin 9). Selama foto asli belum ada, siluet netralnya
   digambar lewat CSS supaya markup tetap ringkas dan tidak perlu berkas
   gambar. Menaruh <img> di dalamnya akan menutupi siluet ini sepenuhnya. */
.people__avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background-color: var(--c-bg-alt);
  color: var(--c-border-str);
  overflow: hidden;
}
.people__avatar::before,
.people__avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: currentColor;
}
.people__avatar::before { top: 11px; width: 17px; height: 17px; }
.people__avatar::after  { bottom: -10px; width: 31px; height: 31px; }
.people__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.people__body { min-width: 0; padding-top: 3px; }

/* Slot bio singkat — tampil begitu teksnya diisi, tanpa ubah struktur. */
.people__bio {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--c-text);
  line-height: 1.65;
  max-width: 58ch;
}
.people__item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.people__role {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-red);
}
.people__org { margin-top: 3px; font-size: var(--fs-small); color: var(--c-muted); }
.people__item--lead .people__avatar { border-color: var(--c-red); color: var(--c-red); }

.people__logos { margin-top: 34px; }
.people__logos-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.supporters__track--static {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  transform: none !important;
}
.supporters__track--static .supported__item { width: auto; height: auto; padding: 10px 18px; }

/* --- Mengapa Bergabung: daftar bernomor ---------------------------------- */
.value-list { display: grid; padding-bottom: var(--space-section); }
.value-list__item {
  display: flex;
  gap: 22px;
  padding: 30px 0;
  border-bottom: 1px solid var(--c-border);
}
.value-list__item:first-child { padding-top: 0; }
.value-list__num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-red);
  line-height: 1.2;
  min-width: 46px;
  flex: none;
}
.value-list__item h2 { font-size: 1.3125rem; margin-bottom: 10px; line-height: 1.35; }
.value-list__item p { font-size: var(--fs-small); color: var(--c-text); }

/* --- Sertifikasi: 14 area ------------------------------------------------ */
.criteria { padding-block: var(--space-section); }
.criteria__grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
}
.criteria__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 1px var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-heading);
  font-weight: 500;
}
.criteria__no {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-red);
  flex: none;
}

/* --- Alur berangka (sertifikasi & perjalanan anggota) -------------------- */
.cert-process { padding-block: var(--space-section); }
.cert-steps { position: relative; display: grid; gap: 0; }
.cert-steps__item {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 0 0 30px;
}
.cert-steps__item:last-child { padding-bottom: 0; }
/* garis penghubung antar langkah */
.cert-steps__item::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -2px;
  width: 1px;
  background-color: var(--c-border);
}
.cert-steps__item:last-child::before { display: none; }

.cert-steps__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 39px; height: 39px;
  border: 1px solid var(--c-border-str);
  border-radius: 50%;
  background-color: var(--c-white);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-heading);
  flex: none;
}
.cert-steps__item--done .cert-steps__no {
  background-color: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}
.cert-steps__body { padding-top: 6px; }
.cert-steps__body h3 { font-size: 1.0625rem; margin-bottom: 6px; line-height: 1.45; }
.cert-steps__body p { font-size: var(--fs-small); color: var(--c-text); }

/* --- Join Us: dua jalur -------------------------------------------------- */
.pathways { display: grid; gap: 20px; padding-bottom: var(--space-section); }
.pathway {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-red);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
}
.pathway--gold { border-top-color: var(--c-gold); }
.pathway__step {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.pathway--gold .pathway__step { color: var(--c-gold-600); }
.pathway__title { font-size: 1.4375rem; margin-bottom: 6px; }
.pathway__tagline {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--c-text);
  margin-bottom: 16px;
}
.pathway__desc { font-size: var(--fs-small); color: var(--c-text); flex: 1; }
.pathway__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.pathway__note, .resource-list__note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-style: italic;
}

/* Tombol unduhan yang berkasnya belum tersedia */
[data-download-pending] {
  opacity: .55;
  pointer-events: none;
  cursor: default;
}

/* --- Halaman "sedang disiapkan" ------------------------------------------ */
.coming-soon {
  margin-top: 8px;
  padding: 36px 32px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-bg-alt);
}
.coming-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--c-gold);
  border-radius: var(--r-full);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold-600);
  background-color: var(--c-white);
}
.coming-soon__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--c-gold);
}
.coming-soon__title { font-size: 1.375rem; margin: 20px 0 10px; }
.coming-soon__lead { font-size: var(--fs-small); color: var(--c-text); }

.coming-soon__outline {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
}
.coming-soon__outline-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.coming-soon__outline ul { display: grid; gap: 10px; }
.coming-soon__outline li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.coming-soon__outline li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 10px; height: 1px;
  background-color: var(--c-red);
}
.coming-soon__contact {
  margin-top: 26px;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.coming-soon__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* --- Daftar sumber daya / unduhan ---------------------------------------- */
.resource-list { display: grid; padding-bottom: 12px; }
.resource-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-border);
}
.resource-list__item:first-child { border-top: 1px solid var(--c-border); }
.resource-list__icon { color: var(--c-red); flex: none; margin-top: 2px; }
.resource-list__icon svg { width: 24px; height: 24px; }
.resource-list__body { flex: 1 1 260px; }
.resource-list__body h2 { font-size: 1.125rem; margin-bottom: 6px; line-height: 1.4; }
.resource-list__body p { font-size: var(--fs-small); color: var(--c-text); }
.resource-list__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: none;
}

/* --- Kartu publikasi bersampul (revisi klien 1) -------------------------- */
/* Mengikuti halaman Learning IICD: 1 kolom di HP, 2 di tablet, 3 di desktop. */
.pub-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 12px; }
@media (min-width: 640px) { .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .pub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pub-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20, 20, 15, .06), 0 10px 28px rgba(20, 20, 15, .09);
}
/* Bingkai 4:3 dengan isi contain: sampul buku tegak maupun gambar mendatar muat utuh. */
.pub-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 20px;
  background-color: var(--c-bg-alt);
}
.pub-card__cover img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.pub-card__cover--placeholder {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 26px 28px;
  background-color: var(--c-gold-soft);
  border-left: 10px solid var(--c-red);
}
.pub-card__cover--placeholder .pub-card__logo { width: 120px; height: auto; }
.pub-card__cover-title {
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-heading);
}
.pub-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.pub-card__title { font-size: 1.125rem; line-height: 1.4; margin-bottom: 8px; }
.pub-card__desc { flex: 1; margin-bottom: 20px; font-size: var(--fs-small); color: var(--c-text); }
.pub-card__action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* --- Self-assessment ----------------------------------------------------- */
/* Ukuran teks di seluruh halaman asesmen dinaikkan satu tingkat dan warna
   abu diganti warna teks biasa (CIPE poin 16 & 17). Jenjang ukurannya sengaja
   dipertahankan: label 12px < meta 15px < isi 16px < opsi 17px < subjudul
   20px < pertanyaan 22–30px < skor 40–52px. */
.quiz { padding-block: var(--space-section); }

.quiz__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding: 22px 0;
  border-block: 1px solid var(--c-border);
  margin-bottom: 24px;
}
.quiz__facts li { display: flex; align-items: baseline; gap: 9px; font-size: 1rem; color: var(--c-text); }
.quiz__facts strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-heading);
}
.quiz__note { font-size: .9375rem; color: var(--c-text); line-height: 1.75; max-width: 62ch; }
.quiz__start { margin-top: 28px; }

/* Progres */
.quiz__progress { margin-bottom: 34px; }
.quiz__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  font-size: .9375rem;
  color: var(--c-text);
}
.quiz__progress-meta b { color: var(--c-heading); font-weight: 700; }
.quiz__progress-pct { font-variant-numeric: tabular-nums; }
.quiz__progress-track { height: 2px; background-color: var(--c-border); }
.quiz__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-red), var(--c-gold));
  transition: width var(--t-base);
}

/* Pertanyaan */
.quiz__q[hidden] { display: none; }
.quiz__area {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.quiz__text {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.35;
  margin-bottom: 28px;
  max-width: 32ch;
}

.quiz__options { display: grid; gap: 10px; }
.quiz__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.quiz__option:hover { border-color: var(--c-border-str); }
.quiz__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz__option-mark {
  position: relative;
  width: 19px; height: 19px;
  border: 1px solid var(--c-border-str);
  border-radius: 50%;
  flex: none;
  transition: border-color var(--t-fast);
}
.quiz__option-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--c-red);
  transform: scale(0);
  transition: transform var(--t-base);
}
.quiz__option-text { font-size: 1.0625rem; font-weight: 500; color: var(--c-heading); }
.quiz__option:has(input:checked) { border-color: var(--c-red); background-color: var(--c-red-soft); }
.quiz__option:has(input:checked) .quiz__option-mark { border-color: var(--c-red); }
.quiz__option:has(input:checked) .quiz__option-mark::after { transform: scale(1); }
.quiz__option:has(input:focus-visible) { outline: 2px solid var(--c-red); outline-offset: 2px; }

.quiz__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
}
.quiz__nav button[disabled] { opacity: .4; pointer-events: none; }

/* Hasil */
/* beri jarak agar judul tidak tertutup menu sticky saat halaman auto-scroll */
.quiz__runner, .quiz__result { scroll-margin-top: calc(var(--header-h) + 24px); }
.quiz__result:focus { outline: none; }
.quiz__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 30px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-sm);
  background-color: var(--c-bg-alt);
  margin-bottom: 34px;
}
.quiz__score-figure { flex: none; text-align: center; }
.quiz__score-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-red);
  font-variant-numeric: tabular-nums;
}
.quiz__score-label {
  display: block;
  margin-top: 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text);
}
.quiz__score-desc { flex: 1 1 260px; font-size: 1.0625rem; color: var(--c-text); }

.quiz__gaps-title { font-size: 1.25rem; margin-bottom: 14px; }
.quiz__gaps-list { display: grid; gap: 0; }
.quiz__gaps-list li {
  padding: 13px 0 13px 24px;
  border-bottom: 1px solid var(--c-border);
  font-size: 1rem;
  color: var(--c-heading);
  position: relative;
}
.quiz__gaps-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25em;
  width: 12px; height: 1px;
  background-color: var(--c-red);
}
.quiz__gaps-none { color: var(--c-text) !important; }
.quiz__gaps-none::before { background-color: var(--c-gold) !important; }

.quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.quiz__retake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
}
.quiz__retake svg { width: 15px; height: 15px; }
.quiz__retake:hover { color: var(--c-red); }

/* Self-assessment KAKI 75: soal dari bank soal, langkah data perusahaan, dan
   skor per tingkat di halaman hasil. Tanpa JS semua soal tampil berurutan. */
.quiz__questions { display: grid; gap: 56px; }
/* .quiz__nav dan .thm-btn memasang display sendiri, yang mengalahkan atribut
   hidden: tanpa ini navigasi runner tampil tanpa JS. */
.quiz__nav[hidden], .quiz__nav [hidden] { display: none; }
.quiz__num { margin-right: .2em; font-variant-numeric: tabular-nums; }
.quiz__area .badge { margin-left: 8px; vertical-align: 1px; letter-spacing: .06em; }
.quiz__guide { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.quiz__guide summary { cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--c-heading); }
.quiz__guide summary:hover { color: var(--c-red); }
.quiz__guide-text {
  max-height: 22rem;
  margin-top: 12px;
  overflow: auto;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--c-text);
}
.quiz__errors {
  margin-bottom: 28px;
  padding: 18px 22px;
  border: 1px solid var(--c-red);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background-color: var(--c-red-soft);
}
.quiz__errors:focus { outline: none; }
.quiz__errors-title { font-size: 1.0625rem; margin-bottom: 8px; }
.quiz__errors li { margin-left: 1.2em; list-style: disc; font-size: .9375rem; color: var(--c-heading); }
.quiz__fields { display: grid; gap: 16px; margin-top: 24px; }
.quiz__field label { display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 600; color: var(--c-heading); }
.quiz__field input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--c-border-str);
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  font-size: 1rem;
}
.quiz__field input:focus-visible { border-color: var(--c-red); outline: 2px solid var(--c-red); outline-offset: 1px; }
.quiz__field input[aria-invalid="true"] { border-color: var(--c-red); }
.quiz__field-error { margin-top: 6px; font-size: .875rem; color: var(--c-red); }
.quiz__consent { margin-top: 22px; }
.quiz__check { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; line-height: 1.7; color: var(--c-text); cursor: pointer; }
.quiz__check input { flex: none; width: 18px; height: 18px; margin-top: .3em; accent-color: var(--c-red); }
.quiz__submit { margin-top: 28px; }
.quiz__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quiz__levels { margin-bottom: 34px; }
.quiz__levels-list { display: grid; gap: 14px; }
.quiz__levels-list li {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  color: var(--c-heading);
}
.quiz__levels-list .quiz__progress-track { height: 6px; border-radius: 3px; overflow: hidden; }
.quiz__levels-list .quiz__progress-bar { display: block; }
.quiz__levels-pct, .quiz__gaps-pct { font-variant-numeric: tabular-nums; }
.quiz__gaps-pct { float: right; padding-left: 16px; color: var(--c-text); }
@media (min-width: 768px) {
  .quiz__fields { grid-template-columns: 1fr 1fr; }
}

/* Lead di dalam pita CTA gelap */
.cta-one__lead {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--c-on-dark-soft);
  max-width: 62ch;
  margin-inline: auto;
}

/* ---- 6.9 HALAMAN KONTAK ------------------------------------------------- */
.contact-page { padding-block: var(--space-section); }
.contact-page__left { text-align: center; }

.contact-page__call-email {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}
.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-heading);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.contact-mail svg { width: 16px; height: 16px; color: var(--c-red); }
.contact-mail:hover { border-color: var(--c-red); color: var(--c-red); }

.contact-address {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 600px;
  margin-inline: auto;
  padding: 22px 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-bg-alt);
  text-align: left;
}
.contact-address__icon { color: var(--c-red); flex: none; margin-top: 2px; }
.contact-address__icon svg { width: 19px; height: 19px; }
.contact-address p { font-size: var(--fs-small); line-height: 1.75; color: var(--c-text); }
.contact-address strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-heading);
  margin-bottom: 4px;
}

.contact-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.contact-hours svg { width: 14px; height: 14px; color: var(--c-gold); }

/* Peta */
.google-map-two { padding-block: var(--space-section); }
.google-map-two__card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  line-height: 0;
}
.google-map__two { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(1); transition: filter var(--t-base); }
.google-map-two__card:hover .google-map__two { filter: none; }

/* ---- 6.10 FOOTER -------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--c-ink);
  color: var(--c-on-dark-soft);
}
.site-footer-bg { display: none; }
.site-footer .container { position: relative; }
.site-footer__top { padding-block: 64px 40px; }

.footer-widget__logo { margin-bottom: 22px; }
.footer-widget__logo img { width: 148px; }
.footer-widget h5,
.footer-widget__title,
.footer-widget__open-hour-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 16px;
}
.footer-widget__about-text { font-size: var(--fs-small); color: var(--c-on-dark-soft); max-width: 46ch; }

.footer-widget__contact-list { display: grid; gap: 18px; margin-bottom: 30px; }
.footer-widget__contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.footer-widget__contact-list .icon { color: var(--c-gold); flex: none; margin-top: 3px; }
.footer-widget__contact-list .icon svg { width: 16px; height: 16px; }
.footer-widget__contact-list .text p { font-size: var(--fs-small); line-height: 1.75; }
.footer-widget__contact-list a { color: var(--c-on-dark-soft); }
.footer-widget__contact-list a:hover { color: var(--c-gold); }

.footer-widget__open-hour-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-on-dark-soft);
}

.footer-widget__social { display: flex; gap: 8px; margin-top: 24px; }
.footer-widget__social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  color: var(--c-on-dark-soft);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.footer-widget__social a svg { width: 17px; height: 17px; }
.footer-widget__social a:hover {
  background-color: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 24px;
}
.site-footer__bottom-text { font-size: var(--fs-xs); color: rgba(191, 187, 178, .85); }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__bottom-links a { font-size: var(--fs-xs); color: rgba(191, 187, 178, .85); }
.site-footer__bottom-links a:hover { color: var(--c-gold); }

/* ---- 6.11 TO TOP -------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-sm);
  background-color: var(--c-ink);
  color: var(--c-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base),
              background-color var(--t-fast), color var(--t-fast);
}
.to-top svg { width: 19px; height: 19px; }
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background-color: var(--c-red); border-color: var(--c-red); }

/* ==========================================================================
   7. RESPONSIVE — mobile-first: 576 / 640 / 768 / 992 / 1200
   ========================================================================== */

@media (min-width: 576px) {
  .row > .col-sm-12 { width: 100%; }
  .row > .col-sm-6  { width: 50%; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .criteria__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
  :root { --space-section: 80px; --gutter: 24px; }
}

@media (min-width: 768px) {
  :root { --space-section: 92px; }

  .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-6 { width: 50%; }
  .row > .col-md-8 { width: 66.6667%; }

  .card .row > .col-md-4,
  .card .row > .col-md-8 { margin-bottom: 0; }
  .card-img { min-height: 210px; }

  .tracking__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 46px 44px;
  }
  .cta-one__inner { padding: 58px 44px; }

  .main-slider__prev { left: 24px; }
  .main-slider__next { right: 24px; }
  .main-slider__pagination { bottom: 24px; }

  .google-map__two { height: 420px; }

  .pathways { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .quiz__options { gap: 12px; }
  .coming-soon { padding: 44px 42px; }
}

@media (min-width: 992px) {
  :root { --space-section: 108px; }

  .row > .col-lg-4  { width: 33.3333%; }
  .row > .col-lg-6  { width: 50%; }
  .row > .col-lg-8  { width: 66.6667%; }
  .row > .col-lg-12 { width: 100%; }

  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .criteria__grid { grid-template-columns: repeat(3, 1fr); }
  .people__list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}

@media (min-width: 1200px) {
  :root { --space-section: 124px; --gutter: 32px; }

  .row > .col-xl-4  { width: 33.3333%; }
  .row > .col-xl-6  { width: 50%; }
  .row > .col-xl-8  { width: 66.6667%; }
  .row > .col-xl-12 { width: 100%; }
}

/* ---- Di bawah 1200px: menu utama jadi drawer --------------------------
   Struktur menu baru memuat 7 item dengan label panjang; pada 992–1199px
   barisnya tidak muat, jadi ambang drawer dinaikkan. */
@media (max-width: 1199.98px) {
  .main-menu__left .main-menu__list { display: none; }
  .mobile-nav__toggler { display: inline-flex; }
  /* ::after dari .clearfix ikut jadi item flex ketiga, sehingga
     space-between menaruh tombol menu di tengah, bukan di pojok kanan. */
  .main-menu__wrapper-inner::after { display: none; }
  .main-header__top-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .main-header__top-right { width: 100%; justify-content: space-between; }
}

/* ---- Di bawah 768px ---------------------------------------------------- */
@media (max-width: 767.98px) {
  .main-menu__logo img { width: 116px; }
  .main-header__top-address-list { flex-direction: column; gap: 4px; }
  .tracking__left { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tracking__btn-box .thm-btn { width: 100%; }
  .card-img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .card-body, .news-one__content { padding: 22px 20px 24px; }
  .supported__item { width: 148px; height: 88px; }
  .supported__item img { max-height: 50px; }
  .video-embed iframe { aspect-ratio: 16 / 9; }
  .section-title__title, .section-title.text-center .section-title__title { max-width: none; }

  .value-list__item { gap: 14px; }
  .value-list__num { font-size: 1.25rem; min-width: 34px; }
  .pathway { padding: 26px 22px; }
  .coming-soon { padding: 28px 22px; }
  .quiz__score { padding: 24px 22px; gap: 20px; }
  .quiz__nav { flex-direction: column-reverse; }
  .quiz__nav .thm-btn { width: 100%; }
  .resource-list__action { width: 100%; }
}

/* ==========================================================================
   8. AKSESIBILITAS & MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .preloader__image { animation: none !important; opacity: 1; }
  .preloader__bar {
    background-image: linear-gradient(90deg, var(--c-red) 0%, var(--c-gold) 45%, var(--c-border) 45%);
    background-size: 100% 100%;
    background-position: 0 0;
    animation: none !important;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .thm-btn, .btn, .news-one__single, .media-card, .card { border: 1px solid; }
}

@media print {
  .preloader, .main-header, .to-top, .mobile-nav__wrapper, .mobile-nav__overlay,
  .main-slider, .tracking, .cta-one, .google-map-two { display: none !important; }
  body { color: #000; }
  .news-one, .services-one, .page-content, .seminar-event { padding-block: 20px; }
}