/* ==========================================================================
   PT. SOLUSI INTEK INDONESIA — Corporate Website
   Stylesheet utama (dipakai semua halaman)
   ==========================================================================
   Struktur file:
   01. Design tokens (warna, tipografi, spacing)
   02. Reset & dasar
   03. Layout & utilitas
   04. Komponen: tombol, eyebrow, section head, card
   05. Header & navigasi
   06. Hero
   07. Blok section (pillars, lifecycle, industries, dll)
   08. Halaman: About, Solutions detail, Approach, Industries,
       Partners, Careers, Contact
   09. Footer
   10. Animasi reveal
   11. Responsive
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     PALET WARNA — DARK LUXURY RED (Opsi D)
     ------------------------------------------------------------------
     Tema dark-dominant: 70% hitam/gelap, 20% abu/putih, 10% merah.
     Diputuskan lewat preview-palette.html (Opsi D), lalu dikoreksi
     kontrasnya sebelum diterapkan di sini. Semua nilai di bawah sudah
     dicek lolos WCAG AA (4.5:1 untuk teks) — lihat catatan per token.

     ATURAN PENTING SAAT MENAMBAH KOMPONEN BARU:
     - Merah untuk FILL tombol/badge  -> --brand-500 (#E50914), teks putih
     - Merah untuk TEKS langsung di atas background gelap -> --brand-400
       (#FF4750). JANGAN pakai --brand-500 sebagai warna teks — di atas
       #080808 rasionya hanya 4.18:1, gagal AA (lihat komentar di bawah)
     - Hover tombol TIDAK mengganti fill ke warna lain. Efeknya glow
       (box-shadow merah transparan), lihat .btn--primary:hover
     - Merah tetap aksen, bukan warna dominan. Jangan pakai --brand-500/400
       sebagai background section atau card.
     ------------------------------------------------------------------ */

  /* --- Gelap: pengganti brand-950/900/800 lama, sekarang jadi tulang
         punggung SELURUH halaman, bukan cuma hero/footer --- */
  --brand-950: #080808;   /* bg utama — dulu cuma hero, sekarang <body> juga */
  --brand-900: #121212;   /* card / surface — dulu abu-terang, sekarang gelap */
  --brand-800: #1e1e1e;   /* surface kedua — hover state, section berselang */
  --brand-700: #292929;   /* border dekoratif (non-interaktif)              */

  /* --- Merah: satu keluarga dengan brand lama (#C0303C), digeser ke
         arah lebih jenuh & lebih gelap sesuai brief --- */
  --brand-600: #c40812;   /* merah teks di atas PUTIH (dipakai minim, lihat bawah) */
  --brand-500: #e50914;   /* AKSEN UTAMA — fill tombol/CTA, teks putih di atasnya */
  --brand-500-hover: #f4101c; /* fill tombol saat hover — sedikit lebih terang, BUKAN #FF2B35 */
  --brand-400: #ff4750;   /* merah untuk TEKS di atas gelap (5.98:1 di bg-base) */
  --brand-300: #ff7178;   /* merah lembut — teks kecil sekunder di area gelap */
  --brand-glow: 255, 43, 53;  /* rgb utk glow/shadow hover, TIDAK dipakai sbg fill+teks */

  /* Versi RGB dari aksen utama, untuk rgba() dengan alpha */
  --brand-500-rgb: 229, 9, 20;

  /* Permukaan lembut — di tema gelap, peran "background lembut merah"
     digantikan surface abu gelap, bukan merah muda seperti tema lama */
  --brand-100: #2e1a1c;   /* tint merah gelap — border kartu tersorot, sedikit lebih
                              terang dari surface (#121212) supaya tetap kelihatan */
  --brand-50:  #1a1213;   /* tint merah nyaris hitam — bg panel bertema merah */

  /* Angka besar dekoratif (card__num). Ini elemen visual, bukan teks
     informasi, jadi tidak dikejar rasio AA — tapi tetap harus terlihat
     sebagai watermark yang disengaja, bukan hilang total di atas card
     gelap. Nilainya sengaja redup, jadi nyala saat hover (lihat
     .card--hover:hover .card__num yang beralih ke --brand-400). */
  --brand-num: #3a2226;

  /* --- Netral: dibalik total dari tema lama (dulu teks gelap di atas
         putih, sekarang teks terang di atas gelap) --- */
  --ink-900: #f5f5f5;     /* judul — 18.37:1 di atas bg-base            */
  --ink-700: #c7c7cc;     /* teks isi — 11.89:1                          */
  --ink-500: #a3a3a3;     /* teks sekunder — 7.94:1                      */
  --ink-400: #8c8c8c;     /* teks redup — 5.96:1, masih lolos AA         */
  --line:    #292929;     /* garis dekoratif (non-interaktif)            */
  --line-soft: #1e1e1e;
  --surface: #121212;     /* dulu putih, sekarang card gelap             */
  --surface-alt: #1e1e1e; /* dulu abu sangat muda, sekarang surface kedua*/

  /* Tipografi
     Oxanium — display typeface bersudut tegas, techno/futuristic. Dipakai
     untuk SELURUH teks (heading dan body) sesuai permintaan, bukan cuma
     heading. Fallback system-font tetap dijaga untuk kasus font gagal
     dimuat (jaringan lambat/offline) supaya teks tetap terbaca, bukan
     kotak kosong. Oxanium tidak punya varian italic — lihat komentar di
     .placeholder-note / .footer__placeholder / .info-list__value.is-placeholder
     kalau class itu dipakai lagi nanti, font-style:italic akan otomatis
     jatuh ke "oblique" sintetis browser, bukan italic asli. */
  --font-sans: 'Oxanium', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:    clamp(2.15rem, 1.2rem + 3.6vw, 3.9rem);
  --fs-h1:      clamp(1.95rem, 1.2rem + 2.8vw, 3.1rem);
  --fs-h2:      clamp(1.6rem,  1.15rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --fs-lead:    clamp(1.02rem, 0.97rem + 0.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 0.875rem;
  --gap:    1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;

  --section-y:   clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --section-y-s: clamp(3rem, 2rem + 3.5vw, 5rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 900px;
  --pad-x: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);

  /* Bentuk & bayangan */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Shadow di dark theme tidak banyak berguna untuk depth (shadow gelap
     di atas bg gelap tidak kelihatan) — depth utamanya datang dari body
     (--brand-950) vs card (--surface) yang lebih terang. Shadow di bawah
     tetap dipertahankan untuk memberi sedikit "angkat" fisik di ujung
     kartu, nilainya sengaja lebih pekat (alpha lebih tinggi) dari versi
     light-mode supaya tetap kebaca di atas gelap. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow:    0 6px 20px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 22px 54px -14px rgba(0, 0, 0, .65);

  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
   02. RESET & DASAR
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* Body pakai --brand-950 (#080808, paling gelap), BUKAN --surface.
   Ini penting: di dark theme, elevasi kartu dibuat dengan permukaan yang
   makin TERANG semakin "naik" ke atas base — bukan shadow yang makin
   gelap seperti di light mode (shadow gelap di atas bg gelap tidak akan
   pernah terlihat). Card (--surface, #121212) jadi otomatis kelihatan
   terangkat karena lebih terang dari body ini. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--brand-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.005em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--brand-400);
  text-decoration: none;
  transition: color .18s var(--ease);
}
a:hover { color: var(--brand-300); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
li { margin-bottom: .4em; }

strong { color: var(--ink-900); font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gap-lg) 0;
}

::selection { background: var(--brand-500); color: #fff; }

/* Fokus keyboard — jangan dihapus, penting untuk aksesibilitas */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--brand-900);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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


/* ==========================================================================
   03. LAYOUT & UTILITAS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-s); }
.section--alt { background: var(--surface-alt); }
.section--soft { background: var(--brand-50); }

.section--dark {
  background: var(--brand-950);
  color: rgba(255, 255, 255, .72);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark a { color: var(--brand-400); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-500);
}
.section--dark .lead { color: rgba(255, 255, 255, .74); }


/* ==========================================================================
   04. KOMPONEN DASAR
   ========================================================================== */

/* --- Eyebrow (label kecil di atas judul section) --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.125rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-400);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-500);
  flex: none;
}
.section--dark .eyebrow { color: var(--brand-400); }
.section--dark .eyebrow::before { background: var(--brand-400); }

.eyebrow--center { justify-content: center; }

/* --- Kepala section --- */
.section-head { max-width: 720px; margin-bottom: var(--gap-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > p:last-child { margin-bottom: 0; }

/* --- Tombol --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn__arrow {
  transition: transform .22s var(--ease);
  flex: none;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Tombol primer: hover TIDAK mengganti fill ke warna berbeda (dulu ke
   --brand-600 yang jauh lebih tua). Sesuai brief "subtle glow pada elemen
   merah" — fill naik SEDIKIT ke --brand-500-hover, dan glow merah
   ditambahkan lewat box-shadow. Ini juga yang menghindari masalah kontras
   #FF2B35 yang gagal AA kalau dipakai sebagai fill+teks putih. */
.btn--primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(var(--brand-500-rgb), .75);
}
.btn--primary:hover {
  background: var(--brand-500-hover);
  border-color: var(--brand-500-hover);
  color: #fff;
  box-shadow: 0 8px 28px -6px rgba(var(--brand-glow), .55),
              0 0 0 1px rgba(var(--brand-glow), .25);
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-900);
}
.btn--outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-400);
  background: var(--brand-50);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}

.btn--sm { padding: .625rem 1.125rem; font-size: var(--fs-xs); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

/* --- Link dengan panah --- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-400);
}
.arrow-link svg { transition: transform .22s var(--ease); flex: none; }
.arrow-link:hover svg { transform: translateX(4px); }

/* --- Card dasar --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
}
.card > p:last-child { margin-bottom: 0; }

.card--hover:hover {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-lg), 0 0 24px -6px rgba(var(--brand-glow), .35);
  transform: translateY(-3px);
}

.card__num {
  display: block;
  margin-bottom: 1.125rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand-num);
  transition: color .22s var(--ease);
}
.card--hover:hover .card__num { color: var(--brand-400); }

.card__title { margin-bottom: .5rem; }
.card__text { font-size: var(--fs-sm); color: var(--ink-500); }
.card__foot { margin-top: auto; padding-top: 1.5rem; }


/* ==========================================================================
   05. HEADER & NAVIGASI
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 8, 8, .85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(8, 8, 8, .96);
  box-shadow: 0 1px 20px rgba(0, 0, 0, .5);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-h);
}

/* --- Brand / logo ---
   <img> di bawah akan otomatis diganti wordmark teks kalau file
   logo belum ada (lihat atribut onerror di HTML).                */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  color: var(--ink-900);
}
.brand:hover { color: var(--ink-900); }

/* Rasio logo 888x187 (~4.75:1). Tinggi 40px -> lebar ~190px. */
.brand__img { height: 40px; width: auto; }
.footer__brand .brand__img { height: 46px; }

.brand__fallback { display: flex; align-items: center; gap: .625rem; }

/* Wajib: tanpa ini atribut [hidden] ketimpa display:flex di atas,
   dan wordmark teks akan tetap muncul walau logo sudah ada. */
.brand__fallback[hidden] { display: none; }

.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.brand__text {
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink-900);
}
.brand__text small {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --- Navigasi utama --- */
.nav { display: flex; align-items: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }

.nav__link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
}
.nav__link:hover { color: var(--brand-400); background: var(--brand-50); }

.nav__link.is-active { color: var(--brand-400); font-weight: 600; }

.nav__caret { transition: transform .2s var(--ease); flex: none; }

/* Dropdown Solutions */
.nav__item--has-menu { position: relative; }

.nav__menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 340px;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              visibility .18s;
}
.nav__item--has-menu:hover > .nav__menu,
.nav__item--has-menu:focus-within > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__item--has-menu:hover > .nav__link .nav__caret,
.nav__item--has-menu:focus-within > .nav__link .nav__caret {
  transform: rotate(180deg);
}

.nav__menu-link {
  display: block;
  padding: .75rem .875rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}
.nav__menu-link:hover { background: var(--brand-50); }

.nav__menu-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}
.nav__menu-link:hover .nav__menu-title { color: var(--brand-400); }

.nav__menu-desc {
  display: block;
  margin-top: .1rem;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  line-height: 1.45;
}

/* Aksi di kanan header */
.header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }

/* Tombol hamburger */
.nav-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brand-500); }

.nav-toggle__bars {
  position: relative;
  width: 18px; height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: background .2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform .24s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* ==========================================================================
   06. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-950);
  color: rgba(255, 255, 255, .76);
  isolation: isolate;
}

/* Lapisan grid + cahaya di belakang hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 78%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(var(--brand-500-rgb), .34) 0%,
              rgba(var(--brand-500-rgb), .10) 42%,
              transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 8vw, 9rem);
}

.hero__content { max-width: 760px; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 1.5rem;
}
.hero__title em {
  font-style: normal;
  color: var(--brand-400);
}

.hero__text {
  max-width: 620px;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.hero__tagline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* Hero versi ringkas untuk halaman dalam */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-950);
  color: rgba(255, 255, 255, .74);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 100% at 80% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 80% 0%, #000 10%, transparent 75%);
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  right: -5%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(var(--brand-500-rgb),.30) 0%, rgba(var(--brand-500-rgb),.08) 45%, transparent 70%);
  pointer-events: none;
}

.page-hero__inner {
  padding-block: clamp(3.25rem, 2.25rem + 4.5vw, 5.75rem);
}
.page-hero__content { max-width: 780px; }
.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 1.125rem;
}
.page-hero__text {
  max-width: 640px;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .48);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before {
  content: "/";
  color: rgba(255, 255, 255, .28);
}
.breadcrumb a { color: rgba(255, 255, 255, .62); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .9); font-weight: 500; }


/* ==========================================================================
   07. BLOK SECTION
   ========================================================================== */

/* --- Pilar solusi --- */
.pillar {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease),
              transform .24s var(--ease);
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.pillar:hover {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-lg), 0 0 24px -6px rgba(var(--brand-glow), .35);
  transform: translateY(-4px);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__num {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--brand-400);
  margin-bottom: 1.25rem;
}

.pillar__title { margin-bottom: .625rem; }
.pillar__text { font-size: var(--fs-sm); color: var(--ink-500); }
.pillar__foot { margin-top: auto; padding-top: 1.75rem; }

/* --- Lifecycle (6 tahap) --- */
.lifecycle {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 0 1.25rem 0 0;
}
.step::before {
  content: "";
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.step:last-child::before { right: 100%; }

.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-400);
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease);
}
.step:hover .step__dot,
.step.is-active .step__dot {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

.step__title {
  margin-bottom: .4rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.step__text {
  margin: 0;
  padding-right: .5rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-500);
}

/* Versi gelap lifecycle (dipakai di Home) */
.section--dark .step::before { background: rgba(255,255,255,.14); }
.section--dark .step__dot {
  background: var(--brand-900);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.55);
}
.section--dark .step:hover .step__dot {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.section--dark .step__title { color: #fff; }
.section--dark .step__text { color: rgba(255,255,255,.6); }

/* --- Kartu industri --- */
.sector {
  display: flex;
  flex-direction: column;
  padding: 1.875rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
}
.sector:hover {
  border-color: var(--brand-500);
  box-shadow: var(--shadow), 0 0 20px -6px rgba(var(--brand-glow), .3);
  transform: translateY(-3px);
}
.sector__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-400);
  flex: none;
}
.sector:hover .sector__icon { background: var(--brand-500); color: #fff; }
.sector__title { margin-bottom: .5rem; font-size: 1.0625rem; }
.sector__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }

/* --- Daftar fitur / pembeda (Why us) --- */
.feature {
  display: flex;
  gap: 1.125rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.feature:first-child { border-top: 0; padding-top: 0; }

.feature__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-400);
}
.feature__title { margin-bottom: .3rem; font-size: 1.0625rem; }
.feature__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }

.section--dark .feature { border-top-color: rgba(255,255,255,.11); }
.section--dark .feature__icon {
  background: rgba(255,255,255,.08);
  color: var(--brand-400);
}
.section--dark .feature__text { color: rgba(255,255,255,.66); }

/* --- Split (dua kolom teks + panel) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }

.panel {
  padding: 2.25rem 2rem;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
}
.panel--dark {
  background: var(--brand-900);
  border-color: var(--brand-800);
  color: rgba(255,255,255,.72);
}
.panel--dark h2, .panel--dark h3, .panel--dark h4 { color: #fff; }

/* --- CTA band --- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--brand-950);
  isolation: isolate;
}
.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse,
              rgba(var(--brand-500-rgb),.28) 0%, rgba(var(--brand-500-rgb),.06) 45%, transparent 70%);
  pointer-events: none;
}
.cta-band__inner {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  text-align: center;
}
.cta-band__title {
  max-width: 760px;
  margin-inline: auto;
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.025em;
}
.cta-band__text {
  max-width: 620px;
  margin-inline: auto;
  color: rgba(255,255,255,.72);
  font-size: var(--fs-lead);
}
.cta-band .btn-group { justify-content: center; }

/* --- Callout / quote --- */
.callout {
  padding: 1.75rem 2rem;
  background: var(--brand-50);
  border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { margin: 0; color: var(--ink-700); }
.callout p + p { margin-top: 1em; }


/* ==========================================================================
   08. BLOK KHUSUS HALAMAN
   ========================================================================== */

/* --- Prose (blok teks panjang) --- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.25rem; }
.prose h3:first-child { margin-top: 0; }

/* --- Vision / Mission --- */
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.vm {
  position: relative;
  padding: 2.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.vm__label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-400);
}
.vm__text { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-700); }

/* Status placeholder — konten belum tersedia */
.vm--pending { background: var(--surface-alt); border-style: dashed; }
.placeholder-note {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-400);
}
.placeholder-note svg { flex: none; margin-top: 3px; }

/* --- Kartu bernomor (governance) --- */
.numbered {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.numbered:first-child { border-top: 0; padding-top: 0; }
.numbered__num {
  flex: none;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand-400);
  padding-top: .3rem;
  min-width: 28px;
}
.numbered__title { margin-bottom: .3rem; font-size: 1.0625rem; }
.numbered__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }

/* --- Layout halaman detail solusi (sidebar + isi) --- */
.doc-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.side-nav { position: sticky; top: calc(var(--header-h) + 2rem); }
.side-nav__label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.side-nav__list { margin: 0; padding: 0; list-style: none; }
.side-nav__list li { margin: 0; }
.side-nav__link {
  display: block;
  padding: .75rem 1rem;
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background .18s var(--ease);
}
.side-nav__link:hover { color: var(--brand-400); background: var(--brand-50); }
.side-nav__link.is-active {
  border-left-color: var(--brand-500);
  color: var(--brand-400);
  font-weight: 600;
  background: var(--brand-50);
}

/* --- Blok kapabilitas --- */
.capability { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.capability:first-of-type { border-top: 0; padding-top: 0; }
.capability__title {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin-bottom: 1rem;
}
.capability__title span:first-child {
  flex: none;
  margin-top: .15rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand-400);
}

/* --- Careers --- */
.career-block { padding-block: 2.75rem; border-top: 1px solid var(--line); }
.career-block:first-of-type { border-top: 0; padding-top: 0; }

/* --- Contact --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.info-list { margin: 0; padding: 0; list-style: none; }
.info-list li {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1.375rem 0;
  border-top: 1px solid var(--line);
}
.info-list li:first-child { border-top: 0; padding-top: 0; }
.info-list__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-400);
}
.info-list__label {
  display: block;
  margin-bottom: .15rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.info-list__value { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }
.info-list__value.is-placeholder { color: var(--ink-400); font-style: italic; }

/* --- Form --- */
.form-card {
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem;
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .4rem; }

.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-900);
}
.field .req { color: var(--brand-500); }

/* Border form dinaikkan dari --line (#292929, hanya ~1.4:1 di tema gelap)
   ke --brand-700 (#292929 juga tapi dipadukan bg lebih gelap dari card di
   sekitarnya) DAN background dibedakan dari .form-card, supaya field tetap
   terlihat jelas sebagai elemen interaktif tanpa harus mengandalkan warna
   border saja untuk kontras. Border non-teks murni sulit tembus 3:1 dalam
   skema serba-gelap — kompensasinya lewat perbedaan background + state
   focus yang jelas (lihat :focus di bawah). */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8125rem .9375rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: var(--brand-950);
  border: 1px solid var(--brand-700);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  padding-right: 2.5rem;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb), .16);
}

.form-note {
  margin: 1.25rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-400);
}


/* ==========================================================================
   09. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--brand-950);
  color: rgba(255, 255, 255, .58);
  font-size: var(--fs-sm);
}

.footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--gap-lg);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.footer__brand { max-width: 320px; }
.footer__brand .brand__text { color: #fff; }
.footer__brand .brand__text small { color: rgba(255,255,255,.45); }
.footer__brand .brand { color: #fff; }

.footer__about {
  margin: 1.375rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
}

.footer__tag {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-400);
}

.footer__col-title {
  margin: 0 0 1.125rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: .625rem; }
.footer__list a { color: rgba(255, 255, 255, .58); font-size: var(--fs-sm); }
.footer__list a:hover { color: #fff; }

.footer__placeholder {
  color: rgba(255,255,255,.52);   /* 4.97:1 — lolos WCAG AA */
  font-style: italic;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);   /* 5.8:1 — lolos WCAG AA */
}
.footer__bottom p { margin: 0; }


/* ==========================================================================
   10. ANIMASI REVEAL
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }
.reveal-d6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

/* --- Lifecycle: 6 -> 3 kolom --- */
@media (max-width: 1100px) {
  .lifecycle { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .step:nth-child(3)::before { right: 100%; }
}

/* --- Desktop kecil --- */
@media (max-width: 1024px) {
  .nav__link { padding: .55rem .5rem; font-size: .875rem; }
  .footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: 460px; }
  .doc-layout { grid-template-columns: 1fr; }
  .side-nav {
    position: static;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
  }
  .side-nav__list { display: flex; flex-wrap: wrap; gap: .5rem; }
  .side-nav__link {
    border-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .side-nav__link.is-active { border-color: var(--brand-500); }
}

/* --- Tablet: nav jadi panel --- */
@media (max-width: 900px) {

  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: block;
    padding: 1.5rem var(--pad-x) 3rem;
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { display: block; }
  .nav__list > li { border-bottom: 1px solid var(--line-soft); }

  .nav__link {
    justify-content: space-between;
    padding: 1rem .25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 0;
  }
  .nav__link:hover { background: transparent; }

  .nav__item--has-menu > .nav__link .nav__caret { display: none; }

  .nav__menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0 0 .75rem;
    padding: 0 0 0 .25rem;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav__menu-link { padding: .625rem .875rem; background: var(--surface-alt); margin-bottom: .375rem; }
  .nav__menu-desc { display: none; }

  .header__actions .btn { display: none; }

  .split, .split--wide-left,
  .contact-layout,
  .vm-grid { grid-template-columns: 1fr; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Mobile --- */
@media (max-width: 700px) {
  :root { --header-h: 66px; }

  .brand__img { height: 34px; }
  .brand__mark { width: 34px; height: 34px; font-size: .75rem; }
  .brand__text { font-size: .9375rem; }
  .brand__text small { font-size: .5625rem; }

  .lifecycle { grid-template-columns: 1fr; row-gap: 0; }
  .step { padding: 1.25rem 0 1.25rem 3.25rem; }
  .step::before {
    top: 0; bottom: 0; left: 15px;
    right: auto;
    width: 1px; height: auto;
  }
  .step:first-child::before { top: 15px; }
  .step:last-child::before { right: auto; bottom: calc(100% - 15px); }
  .step__dot { position: absolute; left: 0; top: 1.25rem; margin: 0; }
  .step__text { padding-right: 0; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--3 > *:last-child:nth-child(odd) { grid-column: auto; }

  .form-grid { grid-template-columns: 1fr; }

  .footer__main { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .btn-group .btn { width: 100%; }
  .card { padding: 1.75rem 1.5rem; }
  .pillar__body { padding: 1.625rem 1.5rem 1.75rem; }
  .sector__body { padding: 1.5rem 1.5rem 1.75rem; }
  .callout { padding: 1.375rem 1.5rem; }
}

@media (max-width: 420px) {
  .footer__main { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. SLOT GAMBAR & PLACEHOLDER
   --------------------------------------------------------------------------
   Cara kerja:
   - <img> menunjuk ke nama file FINAL di assets/img/content/
   - Selama file belum ada, onerror menyembunyikan <img> dan menampilkan
     kartu placeholder berisi nama file, ukuran, dan deskripsi gambar
   - Begitu file asli ditaruh dengan nama yang sama, gambar langsung
     terpakai. Tidak ada kode yang perlu diubah.

   Daftar lengkap slot + prompt AI ada di:
   assets/img/content/IMAGE-BRIEF.md
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

/* Rasio aspek — menjaga tinggi tetap stabil walau gambar belum ada,
   jadi tidak ada layout shift (CLS) saat gambar masuk. */
.media--16-9  { aspect-ratio: 16 / 9;  }
.media--16-10 { aspect-ratio: 16 / 10; }
.media--3-2   { aspect-ratio: 3 / 2;   }
.media--4-3   { aspect-ratio: 4 / 3;   }
.media--1-1   { aspect-ratio: 1 / 1;   }

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bingkai tipis di atas gambar supaya menyatu dengan kartu di sekitarnya.
   Di tema gelap, bingkai gelap tidak kelihatan di atas foto — dibalik jadi
   highlight putih transparan tipis (pola umum dark-UI untuk memberi tepi
   pada elemen non-teks). */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* --- Kartu placeholder --- */
.media__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: 1.25rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(var(--brand-500-rgb), .05) 0px,
      rgba(var(--brand-500-rgb), .05) 10px,
      transparent 10px,
      transparent 20px
    ),
    var(--brand-50);
  border: 1px dashed var(--brand-100);
  border-radius: inherit;
}

/* Wajib: tanpa ini atribut [hidden] ketimpa display:flex di atas. */
.media__ph[hidden] { display: none; }

/* Saat placeholder tampil, matikan bingkai inset .media::after supaya
   tidak dobel dengan border dashed milik placeholder. */
.media:has(.media__ph:not([hidden]))::after { box-shadow: none; }

.media__ph-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: .375rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-400);
  box-shadow: var(--shadow-sm);
  flex: none;
}

.media__ph-label {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-400);
}

.media__ph-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-900);
  word-break: break-all;
  line-height: 1.4;
}

.media__ph-size {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-400);
}

.media__ph-desc {
  max-width: 34ch;
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ink-500);
}

/* Placeholder versi ringkas — untuk slot kecil seperti thumbnail kartu */
.media--sm .media__ph { gap: .25rem; padding: 1rem; }
.media--sm .media__ph-icon { width: 32px; height: 32px; margin-bottom: .25rem; }
.media--sm .media__ph-desc { display: none; }

/* Placeholder di atas area gelap */
.media--on-dark .media__ph {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .04) 0px,
      rgba(255, 255, 255, .04) 10px,
      transparent 10px,
      transparent 20px
    ),
    var(--brand-900);
  border-color: rgba(255, 255, 255, .16);
}
.media--on-dark { background: var(--brand-900); }
.media--on-dark .media__ph-icon { background: var(--brand-800); color: var(--brand-400); }
.media--on-dark .media__ph-label { color: var(--brand-400); }
.media--on-dark .media__ph-name { color: rgba(255, 255, 255, .92); }
.media--on-dark .media__ph-size { color: rgba(255, 255, 255, .5); }
.media--on-dark .media__ph-desc { color: rgba(255, 255, 255, .58); }
.media--on-dark::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* Gambar dengan garis aksen di bawah — dipakai di blok split */
.media--accent { border-bottom: 3px solid var(--brand-500); }


/* --------------------------------------------------------------------------
   LAPISAN GAMBAR LATAR HERO
   --------------------------------------------------------------------------
   Struktur di HTML:

     <div class="hero__bg" aria-hidden="true">
       <img class="hero__bg-img" src="assets/img/content/hero-home.jpg" alt=""
            fetchpriority="high" onerror="this.remove();">
     </div>

   CATATAN PENTING — jangan kembalikan ke pendekatan lama.
   Versi sebelumnya memasang gambar lewat CSS custom property:
     style="--hero-img:url('assets/img/content/hero-home.jpg')"
   Itu tidak jalan. url() di dalam custom property diresolve relatif ke
   file stylesheet, bukan ke dokumen HTML, sehingga path yang diminta
   browser menjadi assets/css/assets/img/content/... dan selalu 404.

   Pakai <img> biasa: path diresolve relatif ke halaman, jelas dan konsisten
   di semua browser. Bonus: bisa diberi fetchpriority (gambar hero adalah
   elemen LCP) dan punya fallback onerror.

   Kalau file gambarnya belum ada, onerror menghapus <img>-nya dan hero
   tetap tampil seperti semula (hitam + grid + glow merah). Tidak ada
   kondisi "rusak".
   -------------------------------------------------------------------------- */

.hero__bg,
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg-img,
.page-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay gelap di atas gambar supaya teks hero tetap terbaca.
   Sebagai ::after, ini otomatis tergambar di atas <img> di dalamnya. */
.hero__bg::after,
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(5, 5, 11, .95) 0%,
    rgba(5, 5, 11, .86) 38%,
    rgba(5, 5, 11, .58) 72%,
    rgba(5, 5, 11, .44) 100%
  );
}

/* Di mobile teks menumpuk di atas gambar, jadi overlay dibuat lebih rapat */
@media (max-width: 700px) {
  .hero__bg::after,
  .page-hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(5, 5, 11, .93) 0%,
      rgba(5, 5, 11, .88) 55%,
      rgba(5, 5, 11, .80) 100%
    );
  }
}


/* ==========================================================================
   13. KARTU DENGAN GAMBAR DI ATAS
   --------------------------------------------------------------------------
   Kartu pilar dan kartu sektor sekarang punya gambar full-bleed di bagian
   atas, jadi padding dipindah dari kartu ke elemen __body di dalamnya.
   ========================================================================== */

.pillar { padding: 0; }
.pillar__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.875rem 1.875rem 2rem;
}
.pillar__media { border-radius: 0; }
.pillar__media.media::after { border-radius: 0; }
.pillar__num { margin-bottom: .875rem; }

.sector { padding: 0; }
.sector__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.625rem 1.625rem 1.875rem;
}
.sector__media { border-radius: 0; }
.sector__media.media::after { border-radius: 0; }


/* ==========================================================================
   14. UTILITAS JARAK & VARIAN TEKS
   ========================================================================== */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: var(--gap-xl); }

.panel__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-700);
}
.panel--dark .panel__lead { color: rgba(255, 255, 255, .76); }

.arrow-link--light { color: var(--brand-400); }
.arrow-link--light:hover { color: var(--brand-300); }


/* ==========================================================================
   15. TAMBAHAN: HEADING UTILITAS & STATUS FORM
   ========================================================================== */

/* Heading yang perlu ukuran h3 tapi levelnya harus h2 demi urutan
   heading yang benar untuk screen reader. */
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Pesan status form. Ditampilkan JS setelah submit. */
.form-status {
  margin-top: 1.25rem;
  padding: .875rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-status[hidden] { display: none; }

.form-status--info {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--ink-700);
}
.form-status--error {
  background: var(--brand-50);
  border: 1px solid var(--brand-500);
  color: var(--brand-400);
  font-weight: 500;
}

/* Tandai field yang belum diisi saat submit */
.field input:invalid.is-touched,
.field textarea:invalid.is-touched {
  border-color: var(--brand-500);
}


/* ==========================================================================
   16. PERATAAN TEKS — JUSTIFY
   --------------------------------------------------------------------------
   Paragraf isi yang panjangnya 2 baris atau lebih dibuat rata kanan-kiri
   supaya blok teks terlihat rapi dan padat.

   YANG TIDAK DIJUSTIFY:
   - Semua blok yang memang dirata-tengah: .section-head--center,
     .cta-band__inner, .text-center, dan kartu placeholder gambar.
     Override-nya ada di bawah aturan justify supaya menang tanpa !important.
   - Label pendek satu baris: eyebrow, nav, tombol, breadcrumb, label form.
     Pada satu baris, justify tidak berpengaruh (baris terakhir selalu
     rata kiri) tapi tetap berisiko kalau teksnya membungkus, jadi
     sengaja tidak disertakan.

   KENAPA ADA hyphens: auto —
   tanpa pemenggalan kata, justify pada kolom sempit (teks kartu pilar hanya
   ~300px) menghasilkan celah spasi lebar yang biasa disebut "rivers".
   Halaman memakai lang="en" jadi kamus pemenggalan Inggris aktif dan
   hasilnya jauh lebih rapat. Kalau nanti ada versi Bahasa Indonesia,
   ganti lang jadi "id" supaya pemenggalannya ikut benar.
   ========================================================================== */

.hero__text,
.page-hero__text,
.lead,
.prose p,
.split > div > p:not(.eyebrow),
.panel__lead,
.vm__text,
.callout p,
.card__text,
.pillar__text,
.sector__text,
.feature__text,
.numbered__text,
.step__text,
.career-block p:not(.eyebrow),
.footer__about,
.form-note {
  text-align: justify;
  text-justify: inter-word;
  /* Pemenggalan kata DIMATIKAN atas permintaan — teks tetap justify (rata
     kiri-kanan) tapi tidak ada kata yang terpotong tanda hubung di ujung
     baris (mis. "justi-" lalu "fy"). Konsekuensi wajar: di kolom sempit
     bisa muncul sedikit celah antar kata, tapi kata selalu utuh. */
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Kembalikan ke rata tengah untuk blok yang memang dirata-tengah. */
.section-head--center .lead,
.section-head--center p,
.cta-band__inner .lead,
.cta-band__text,
.cta-band__title,
.text-center p,
.text-center .lead {
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Di layar sempit, kolom jadi terlalu pendek untuk justify yang rapi —
   celah antar kata melebar walau sudah ada pemenggalan. Di bawah 560px
   teks dikembalikan ke rata kiri, yang lebih nyaman dibaca di ponsel. */
@media (max-width: 560px) {
  .hero__text,
  .page-hero__text,
  .lead,
  .prose p,
  .split > div > p:not(.eyebrow),
  .panel__lead,
  .vm__text,
  .callout p,
  .card__text,
  .pillar__text,
  .sector__text,
  .feature__text,
  .numbered__text,
  .step__text,
  .career-block p:not(.eyebrow),
  .footer__about,
  .form-note {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  /* Yang dirata-tengah tetap di tengah, jangan ikut jadi rata kiri. */
  .section-head--center .lead,
  .section-head--center p,
  .cta-band__inner .lead,
  .cta-band__text,
  .cta-band__title,
  .text-center p,
  .text-center .lead {
    text-align: center;
  }
}


/* ==========================================================================
   17. IKON KECIL PADA TAHAP LIFECYCLE  (varian .lifecycle--icons)
   --------------------------------------------------------------------------
   Dipakai di approach.html. Blok lifecycle ringkas di index.html tetap
   tanpa ikon — versi ringkasan dibiarkan bersih, halaman detail yang
   membawa penjelasan visualnya.

   Kenapa SVG inline, bukan file gambar:
   - Tajam di semua kepadatan layar tanpa perlu versi @2x
   - Warnanya ikut currentColor, jadi otomatis mengikuti tema dan bisa
     berubah saat hover tanpa memuat file kedua
   - Nol permintaan jaringan tambahan
   Ikonnya dekoratif (aria-hidden di HTML) karena judul dan deskripsi tiap
   tahap sudah menyampaikan maknanya.
   ========================================================================== */

.step__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.125rem;
  flex: none;
  border-radius: var(--radius);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-400);
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease);
}

/* Ukuran gambar SVG diatur DI SINI, bukan lewat atribut width/height di
   HTML. Atribut di HTML sengaja dibiarkan sebagai ukuran intrinsik saja —
   CSS menang atas atribut presentasional, jadi ukuran ikon cukup diubah
   di satu tempat ini untuk keenam tahap sekaligus. */
.step__icon svg {
  width: 28px;
  height: 28px;
}

/* Titik bernomor jadi lebih rapat ke ikon di bawahnya, supaya nomor + ikon
   terbaca sebagai satu kelompok sebelum judul. */
.lifecycle--icons .step__dot { margin-bottom: .75rem; }

/* Hover menyalakan nomor dan ikon bersamaan — satu tahap terasa sebagai
   satu unit, bukan dua elemen yang bereaksi terpisah. */
.step:hover .step__icon {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* Di mobile, .step__dot dipindah jadi absolute di kiri (lihat blok
   responsive), jadi ikon menjadi elemen pertama di kolom teks. Jaraknya
   dirapatkan supaya tidak menambah tinggi kartu terlalu banyak. */
@media (max-width: 700px) {
  .step__icon {
    width: 46px;
    height: 46px;
    margin-bottom: .875rem;
  }
  .step__icon svg {
    width: 25px;
    height: 25px;
  }
  .lifecycle--icons .step__dot { margin-bottom: 0; }
}


/* ==========================================================================
   18. VISION & MISSION VERSI GABUNGAN  (.vm--single)
   --------------------------------------------------------------------------
   Dulu Vision dan Mission dipisah dua kolom (.vm-grid), dengan kotak Mission
   dibiarkan kosong karena dokumen sumber tidak memuatnya. Sekarang digabung
   jadi satu pernyataan penuh lebar, jadi tidak ada kotak menggantung.

   Karena berdiri sendiri, teksnya dinaikkan sedikit supaya terbaca sebagai
   pernyataan arah perusahaan, bukan sekadar paragraf biasa. Lebar bacanya
   dibatasi agar tetap nyaman walau kontainernya lebar.
   ========================================================================== */

.vm--single {
  padding: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-left: 3px solid var(--brand-500);
}

.vm--single .vm__text {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-900);
  text-align: left;   /* pernyataan pendek, tidak perlu justify */
  hyphens: manual;
}


/* ==========================================================================
   19. LAPISAN PENYEMPURNAAN VISUAL  (craftsmanship layer)
   --------------------------------------------------------------------------
   Blok ini bersifat ADDITIVE — tidak menimpa struktur, warna, font, atau
   ukuran mana pun di atas. Tujuannya menaikkan kesan dari "bagus" ke
   "kelas atas" lewat detail yang biasanya dilewati template pasaran:
   grain halus, depth di tepi kartu, dan micro-interaction yang terukur.

   Semua tetap dalam palet yang sama (grafit + aksen merah) dan font yang
   sama (Oxanium). Tidak ada perubahan teks, tidak ada perubahan tautan.
   Semuanya menghormati prefers-reduced-motion (lihat blok paling bawah).
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1  GRAIN HALUS SELURUH HALAMAN
   --------------------------------------------------------------------------
   Tekstur film-grain nyaris tak terlihat di atas seluruh viewport. Ini
   pembeda paling kuat antara permukaan gelap yang terasa "murah dan datar"
   dengan yang terasa "dicetak dengan sengaja". Opacity sangat rendah
   (~3.5%) supaya hanya terasa, bukan terlihat. SVG di-inline sebagai data
   URI jadi nol permintaan jaringan tambahan.

   pointer-events:none + posisi fixed + z-index rendah memastikan lapisan
   ini tidak pernah menghalangi klik tombol/tautan mana pun.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Header, konten, dan footer harus duduk DI ATAS lapisan grain. Semua
   sudah punya z-index atau stacking context sendiri; body > * dinaikkan
   relatif supaya grain (z-index:0, fixed) tinggal di paling belakang. */
body > *:not(script) { position: relative; z-index: 1; }


/* --------------------------------------------------------------------------
   19.2  DEPTH DI TEPI KARTU  (top light edge)
   --------------------------------------------------------------------------
   Di dark UI, kartu terasa "diangkat" bukan dari shadow gelap (tak terlihat
   di atas gelap) melainkan dari highlight tipis di tepi atas — meniru
   cahaya yang jatuh dari atas. Ditambahkan sebagai ::after supaya tidak
   bentrok dengan ::before milik .pillar (garis aksen atas).

   Hanya highlight statis, tanpa animasi — jadi tidak ada beban performa.
   -------------------------------------------------------------------------- */
.card,
.pillar,
.sector,
.vm,
.form-card,
.panel {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, .035) 0%,
    rgba(255, 255, 255, 0) 42%
  );
}
/* Panel bertema merah gelap tetap punya highlight, tapi lebih halus supaya
   tidak mengubah warnanya. */
.panel { background-image:
  linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 40%); }


/* --------------------------------------------------------------------------
   19.3  NAV LINK — UNDERLINE REVEAL HALUS
   --------------------------------------------------------------------------
   Garis aksen tipis yang tumbuh dari kiri saat hover/aktif. Tidak mengubah
   tinggi baris atau posisi teks (pakai ::after absolut), jadi tidak ada
   layout shift. Hanya berlaku di desktop; di panel mobile nav sudah punya
   gaya sendiri (lihat blok responsive), jadi dibungkus min-width.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .nav__link { position: relative; }
  .nav__link::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .28rem;
    height: 2px;
    background: var(--brand-500);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link.is-active::after { transform: scaleX(1); }
  /* Item dengan dropdown (Solutions) memakai caret, bukan underline —
     supaya tidak dobel indikator. */
  .nav__item--has-menu > .nav__link::after { display: none; }
}


/* --------------------------------------------------------------------------
   19.4  SUDUT TEKNIS PADA KARTU PILAR  (corner tick saat hover)
   --------------------------------------------------------------------------
   Dua garis pendek di sudut kanan-atas kartu pilar yang muncul saat hover —
   detail "cetak biru teknis" yang menegaskan karakter Oxanium/techno tanpa
   menambah warna baru. Murni dekoratif, di dalam kartu yang sudah
   overflow:hidden, dan pointer-events:none jadi tidak mengganggu tautan
   "View pillar" di dalamnya.
   -------------------------------------------------------------------------- */
.pillar__body { position: relative; }
.pillar__body::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--brand-500);
  border-right: 2px solid var(--brand-500);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
.pillar:hover .pillar__body::after {
  opacity: .9;
  transform: translate(0, 0);
}


/* --------------------------------------------------------------------------
   19.5  ARROW-LINK — GARIS BAWAH YANG TUMBUH
   --------------------------------------------------------------------------
   Teks "View pillar / More about / Explore" mendapat garis bawah tipis yang
   tumbuh dari kiri saat hover, di samping panah yang sudah bergerak. Detail
   kecil yang membuat tautan terasa hidup. Tidak mengubah warna.
   -------------------------------------------------------------------------- */
.arrow-link {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color .18s var(--ease), background-size .28s var(--ease);
  padding-bottom: 2px;
}
.arrow-link:hover { background-size: 100% 1px; }
/* Panah tetap tidak ikut tergaris-bawahi (di-exclude lewat inline svg). */
.arrow-link svg { background: none; }


/* --------------------------------------------------------------------------
   19.6  EYEBROW — DENYUT HALUS PADA GARIS AKSEN
   --------------------------------------------------------------------------
   Garis merah kecil di depan eyebrow diberi kilau lembut yang bergerak
   sekali-sekali. Sangat halus (opacity rendah, durasi panjang) supaya
   terasa "hidup" tanpa mengganggu. Dimatikan total saat reduced-motion.
   -------------------------------------------------------------------------- */
.eyebrow::before {
  box-shadow: 0 0 0 0 rgba(var(--brand-500-rgb), .0);
  animation: eyebrowPulse 4.5s var(--ease) infinite;
}
@keyframes eyebrowPulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-500-rgb), 0); }
  82%           { box-shadow: 0 0 10px 1px rgba(var(--brand-500-rgb), .55); }
}


/* --------------------------------------------------------------------------
   19.7  HAIRLINE BERCAHAYA DI TEPI SECTION GELAP
   --------------------------------------------------------------------------
   Garis rambut dengan gradien merah samar di batas atas .section--dark dan
   .cta-band, meniru "seam" cahaya antar panel — detail arsitektural yang
   memisahkan blok gelap dengan elegan alih-alih batas keras.
   -------------------------------------------------------------------------- */
.section--dark,
.cta-band { position: relative; }
.section--dark::before,
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--brand-500-rgb), .38) 50%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   19.8  MEDIA — ZOOM HALUS SAAT HOVER KARTU
   --------------------------------------------------------------------------
   Gambar di dalam kartu pilar & sektor melakukan zoom sangat halus saat
   kartu di-hover. Efek editorial standar yang membuat konten terasa
   responsif. object-fit:cover sudah aktif jadi tidak ada distorsi, dan
   kontainer overflow:hidden menahan gambar di dalam bingkai.
   -------------------------------------------------------------------------- */
.pillar__media .media__img,
.sector__media .media__img {
  transition: transform .5s var(--ease);
  will-change: transform;
}
.pillar:hover .pillar__media .media__img,
.sector:hover .sector__media .media__img {
  transform: scale(1.045);
}


/* --------------------------------------------------------------------------
   19.9  TOMBOL — KILAU SAPUAN (sheen) SAAT HOVER
   --------------------------------------------------------------------------
   Sapuan cahaya diagonal yang melintas sekali saat tombol primer di-hover.
   Detail premium klasik. Dibangun dengan ::before di dalam tombol yang
   sudah punya overflow tersembunyi; pointer-events:none supaya klik tetap
   diteruskan ke tombol/tautannya. Tidak mengubah warna fill.
   -------------------------------------------------------------------------- */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .28) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.btn--primary:hover::before { left: 140%; }


/* --------------------------------------------------------------------------
   19.10  SCROLLBAR SELARAS TEMA GELAP
   --------------------------------------------------------------------------
   Scrollbar default putih/terang merusak kesan dark premium. Diselaraskan
   ke grafit dengan thumb yang menyala merah saat hover. Firefox pakai
   scrollbar-color; WebKit pakai ::-webkit-scrollbar.
   -------------------------------------------------------------------------- */
html {
  scrollbar-color: var(--brand-700) var(--brand-950);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--brand-950); }
::-webkit-scrollbar-thumb {
  background: var(--brand-700);
  border: 3px solid var(--brand-950);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }


/* --------------------------------------------------------------------------
   19.11  LOGO BRAND — ANGKAT HALUS SAAT HOVER
   --------------------------------------------------------------------------
   Logo di header naik 1px dan sedikit lebih terang saat di-hover, memberi
   umpan balik bahwa ia tautan (ke beranda) tanpa berlebihan.
   -------------------------------------------------------------------------- */
.brand__img {
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.brand:hover .brand__img {
  transform: translateY(-1px);
  filter: brightness(1.08);
}


/* --------------------------------------------------------------------------
   19.12  FORM FIELD — LABEL MENYALA SAAT FOKUS
   --------------------------------------------------------------------------
   Saat sebuah field difokus, label di dalam .field yang sama berubah ke
   aksen merah. Menegaskan field aktif — praktik form UX yang matang.
   Memakai :focus-within jadi tidak perlu JS.
   -------------------------------------------------------------------------- */
.field:focus-within label { color: var(--brand-400); }


/* --------------------------------------------------------------------------
   19.13  HORMATI REDUCED-MOTION
   --------------------------------------------------------------------------
   Semua gerakan tambahan di blok ini dimatikan bila pengguna meminta
   pengurangan animasi. Blok reduced-motion global di §10 sudah memangkas
   durasi transition, tapi animasi keyframe (sheen, denyut) dan zoom perlu
   dinolkan eksplisit agar benar-benar diam.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; }
  .btn--primary::before { display: none; }
  .pillar:hover .pillar__media .media__img,
  .sector:hover .sector__media .media__img { transform: none; }
  .pillar__body::after { transition: none; }
}


/* ==========================================================================
   20. HALAMAN CONTACT — FORM TUNGGAL
   --------------------------------------------------------------------------
   Halaman kontak sekarang hanya berisi form (alamat, email, dan gambar kantor
   sudah dihapus atas permintaan). Form berdiri sendiri, dibatasi lebarnya dan
   dirata-tengah supaya tetap seimbang tanpa kolom pendamping.
   ========================================================================== */

.contact-single {
  max-width: 760px;
  margin-inline: auto;
}

/* Form versi tunggal: sedikit lebih lega dari versi dua-kolom. */
.form-card--single { width: 100%; }

/* Widget hCaptcha — beri jarak dan pastikan tidak melebihi lebar kolom di
   layar sempit. hCaptcha merender <iframe> berukuran tetap; transform-origin
   dibiarkan default, hanya diberi ruang. */
.h-captcha {
  margin-top: .25rem;
  min-height: 78px;
}
.h-captcha iframe { max-width: 100%; }


/* ==========================================================================
   21. POPUP SUKSES FORM  (.form-toast)
   --------------------------------------------------------------------------
   Notifikasi "Message sent successfully" yang muncul di tengah layar setelah
   form kontak terkirim lewat AJAX, lalu hilang otomatis ~1 detik (dikendalikan
   di main.js). Bertema gelap sesuai situs, dengan centang hijau agar makna
   "berhasil" langsung terbaca. pointer-events:none supaya tidak menghalangi
   klik apa pun saat muncul/menghilang.
   ========================================================================== */

.form-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: var(--brand-900);
  border: 1px solid var(--brand-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--ink-900);
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s;
}
.form-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Ikon centang — lingkaran hijau lembut, satu-satunya tempat warna hijau
   dipakai di situs (khusus umpan balik "berhasil", bukan bagian brand). */
.form-toast__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(34, 197, 94, .16);
  color: #22c55e;
}

@media (prefers-reduced-motion: reduce) {
  .form-toast { transition: opacity .2s linear; }
  .form-toast.is-visible { transform: translate(-50%, -50%); }
}


/* ==========================================================================
   22. UTILITAS .no-justify
   --------------------------------------------------------------------------
   Override rata kiri untuk elemen tertentu yang tidak cocok di-justify —
   mis. teks hero di solutions.html yang kata terakhirnya ("engagement.")
   jatuh sendirian di baris bawah dan membuat baris atas terlihat renggang.
   Dipakai per-elemen dengan menambahkan class="... no-justify".
   ========================================================================== */
.no-justify {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}