/* =========================================================================
   DIGITAL CATALYST
   Satu berkas gaya. Urutannya:
     1. Token     2. Dasar      3. Tata letak   4. Kepala & kaki
     5. Komponen  6. Bagian     7. Layar kecil  8. Gerak
   ========================================================================= */

/* ============================== 1. TOKEN =============================== */
/* Palet terang ditulis lengkap di sini. Blok gelap di bawahnya hanya
   MENIMPA token yang sama — tidak ada satu pun warna yang lahir di dalam
   media query, supaya halaman tidak pernah menampilkan teks satu tema di
   atas latar tema yang lain. */
:root {
  --ground:        #FFFFFF;
  --ground-2:      #F4F7FD;
  --panel:         #FFFFFF;
  --panel-lembut:  rgba(3, 62, 182, .04);
  --panel-kaca:    rgba(255, 255, 255, .72);
  /* Untuk kartu yang duduk di atas foto: harus jauh lebih pekat
     daripada kaca biasa, kalau tidak tulisannya tenggelam. */
  --kaca-pekat:    rgba(255, 255, 255, .93);

  --garis:         rgba(10, 27, 51, .10);
  --garis-terang:  rgba(10, 27, 51, .16);
  --garis-kilau:   rgba(255, 255, 255, .9);

  --tinta:         #0A1B33;
  --tinta-2:       #33415A;
  --redup:         #5F6B80;
  --redup-2:       #8C97A8;

  --biru:          #033EB6;   /* warna merek, dipakai untuk isian */
  --biru-teks:     #033EB6;   /* versi yang aman dibaca di atas latar */
  --biru-cerah:    #1E5BD6;
  --biru-lembut:   #EEF3FD;

  /* Cahaya latar. Di terang ia kabut biru tipis, di gelap ia sumber cahaya. */
  --cahaya-1:      rgba(3, 62, 182, .13);
  --cahaya-2:      rgba(30, 91, 214, .09);
  --cahaya-3:      rgba(3, 62, 182, .05);
  --bintik:        rgba(3, 62, 182, .16);
  --foto-saring:   none;

  --bayang-1:      0 1px 2px rgba(10, 27, 51, .05);
  --bayang-2:      0 2px 6px rgba(10, 27, 51, .05), 0 14px 34px rgba(10, 27, 51, .07);
  --bayang-3:      0 24px 60px rgba(10, 27, 51, .13);
  --bayang-biru:   0 10px 30px rgba(3, 62, 182, .26);

  --judul: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ui: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --lebar: 1180px;
  --bulat-kecil: 10px;
  --bulat: 16px;
  --bulat-besar: 24px;
  --pil: 999px;

  color-scheme: light;
}

/* Sistem gelap, selama pembaca tidak memilih terang secara sadar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #05070E;
    --ground-2:      #090D18;
    --panel:         rgba(255, 255, 255, .045);
    --panel-lembut:  rgba(255, 255, 255, .03);
    --panel-kaca:    rgba(12, 17, 30, .66);
  --kaca-pekat:    rgba(7, 11, 21, .88);
    --kaca-pekat:    rgba(7, 11, 21, .88);

    --garis:         rgba(255, 255, 255, .10);
    --garis-terang:  rgba(255, 255, 255, .18);
    --garis-kilau:   rgba(255, 255, 255, .14);

    --tinta:         #EEF2F9;
    --tinta-2:       #C4CDDC;
    --redup:         #93A0B6;
    --redup-2:       #6F7C93;

    --biru-teks:     #6E9DFF;
    --biru-cerah:    #3B74EE;
    --biru-lembut:   rgba(47, 107, 255, .12);

    --cahaya-1:      rgba(35, 92, 220, .40);
    --cahaya-2:      rgba(12, 48, 150, .34);
    --cahaya-3:      rgba(60, 120, 255, .12);
    --bintik:        rgba(160, 195, 255, .5);
    /* Foto kantor yang terang menyilaukan di atas latar hitam. */
    --foto-saring:   brightness(.88) contrast(1.03);

    --bayang-1:      0 1px 2px rgba(0, 0, 0, .5);
    --bayang-2:      0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .55);
    --bayang-3:      0 30px 70px rgba(0, 0, 0, .6);
    --bayang-biru:   0 10px 34px rgba(30, 91, 214, .45);

    color-scheme: dark;
  }
}

/* Pilihan sadar pembaca lewat tombol, menang di kedua arah. */
:root[data-theme="dark"] {
  --ground:        #05070E;
  --ground-2:      #090D18;
  --panel:         rgba(255, 255, 255, .045);
  --panel-lembut:  rgba(255, 255, 255, .03);
  --panel-kaca:    rgba(12, 17, 30, .66);
  --kaca-pekat:    rgba(7, 11, 21, .88);

  --garis:         rgba(255, 255, 255, .10);
  --garis-terang:  rgba(255, 255, 255, .18);
  --garis-kilau:   rgba(255, 255, 255, .14);

  --tinta:         #EEF2F9;
  --tinta-2:       #C4CDDC;
  --redup:         #93A0B6;
  --redup-2:       #6F7C93;

  --biru-teks:     #6E9DFF;
  --biru-cerah:    #3B74EE;
  --biru-lembut:   rgba(47, 107, 255, .12);

  --cahaya-1:      rgba(35, 92, 220, .40);
  --cahaya-2:      rgba(12, 48, 150, .34);
  --cahaya-3:      rgba(60, 120, 255, .12);
  --bintik:        rgba(160, 195, 255, .5);
  --foto-saring:   brightness(.88) contrast(1.03);

  --bayang-1:      0 1px 2px rgba(0, 0, 0, .5);
  --bayang-2:      0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .55);
  --bayang-3:      0 30px 70px rgba(0, 0, 0, .6);
  --bayang-biru:   0 10px 34px rgba(30, 91, 214, .45);

  color-scheme: dark;
}

/* ============================== 2. DASAR =============================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--judul);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--biru-teks);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Tautan lompat. Disembunyikan sampai difokuskan lewat papan ketik — dulu
   digeser keluar layar lewat gaya sebaris, jadi ia tak pernah bisa muncul. */
.lewati {
  position: absolute; inset-inline-start: -9999px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: var(--pil);
  background: var(--biru); color: #fff; font-size: 14px; font-weight: 600;
}
.lewati:focus { inset-inline-start: 16px; }

/* Titik biru di ujung judul — tanda merek yang sama di setiap halaman. */
.titik { color: var(--biru-teks); }

/* ========================== 3. TATA LETAK ============================== */

.wadah { width: 100%; max-width: var(--lebar); margin-inline: auto; padding-inline: 24px; }
.bagian {
  padding-block: 88px; position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.bagian--rapat { padding-block: 48px; }
.bagian--lembut { background: var(--ground-2); }

.kepala-bagian { max-width: 660px; margin-inline: auto; text-align: center; margin-bottom: 52px; }
.kepala-bagian h2 { font-size: clamp(30px, 3.6vw, 44px); }
.kepala-bagian p { margin-top: 16px; color: var(--redup); font-size: 16.5px; }

.mata {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--biru-teks);
  padding: 7px 14px; border-radius: var(--pil);
  border: 1px solid var(--garis-terang);
  background: var(--panel-lembut);
  margin-bottom: 20px;
}
.mata::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--biru-teks); box-shadow: 0 0 0 4px var(--biru-lembut);
}

.kisi { display: grid; gap: 20px; }
.kisi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kisi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kisi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Lapisan cahaya latar.
   Ditaruh di elemen tersendiri, bukan di body, supaya bisa dipasang hanya
   pada bagian yang memang butuh — dan supaya tidak ikut menggeser apa pun. */
.cahaya {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.cahaya::before, .cahaya::after {
  content: ""; position: absolute; border-radius: 50%;
}
.cahaya::before {
  width: 1040px; height: 760px; top: -390px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--cahaya-1), transparent 74%);
}
.cahaya::after {
  width: 720px; height: 560px; top: 10px; right: -220px;
  background: radial-gradient(closest-side, var(--cahaya-2), transparent 72%);
}
.cahaya--kaki::before { top: auto; bottom: -380px; }
.cahaya--kaki::after { display: none; }

/* Butiran halus, memberi tekstur pada bidang gelap yang luas. */
.bintik {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, var(--bintik) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 14%, var(--bintik) 0 1px, transparent 1.4px),
    radial-gradient(circle at 34% 68%, var(--bintik) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 76%, var(--bintik) 0 1px, transparent 1.4px),
    radial-gradient(circle at 58% 40%, var(--bintik) 0 1px, transparent 1.4px);
  opacity: .8;
}

.atas { position: relative; z-index: 1; }

/* ========================= 4. KEPALA & KAKI ============================ */

.kepala { position: sticky; top: 0; z-index: 60; padding-block: 14px; }
.kepala__isi {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 20px;
  border: 1px solid var(--garis);
  border-radius: var(--pil);
  background: var(--panel-kaca);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--bayang-1);
}

.merek { display: flex; align-items: center; gap: 10px; flex: none; }
.merek__tanda {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
  color: #fff; box-shadow: var(--bayang-biru);
}
.merek__nama {
  font-family: var(--ui); font-weight: 700; font-size: 13px;
  letter-spacing: .01em; line-height: 1.15;
}
.merek__nama span { display: block; color: var(--redup); font-weight: 500; font-size: 11.5px; }

.navigasi { display: flex; align-items: center; gap: 4px; }
.navigasi a {
  font-size: 14.5px; color: var(--tinta-2); padding: 8px 14px;
  border-radius: var(--pil); transition: color .18s ease, background .18s ease;
}
.navigasi a:hover { color: var(--tinta); background: var(--panel-lembut); }
.navigasi a[aria-current="page"] { color: var(--tinta); background: var(--panel-lembut); font-weight: 600; }

.kepala__aksi { display: flex; align-items: center; gap: 8px; flex: none; }

.tombol-tema {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--garis);
  background: var(--panel-lembut); color: var(--tinta-2);
  transition: color .18s ease, border-color .18s ease;
}
.tombol-tema:hover { color: var(--tinta); border-color: var(--garis-terang); }
.tombol-tema .ikon-bulan { display: none; }
.tombol-tema .ikon-matahari { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tombol-tema .ikon-bulan { display: block; }
  :root:not([data-theme="light"]) .tombol-tema .ikon-matahari { display: none; }
}
:root[data-theme="dark"] .tombol-tema .ikon-bulan { display: block; }
:root[data-theme="dark"] .tombol-tema .ikon-matahari { display: none; }

.tombol-laci {
  display: none; width: 38px; height: 38px;
  place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--garis); background: var(--panel-lembut); color: var(--tinta);
}

/* Laci layar kecil */
.tirai {
  position: fixed; inset: 0; z-index: 70; background: rgba(3, 8, 20, .55);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  backdrop-filter: blur(3px);
}
.tirai.buka { opacity: 1; visibility: visible; }
.laci {
  position: fixed; z-index: 80; inset-block: 0; inset-inline-end: 0;
  width: min(340px, 86vw); background: var(--ground);
  border-inline-start: 1px solid var(--garis);
  padding: 22px; display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.laci.buka { transform: translateX(0); }
.laci__atas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.laci__tutup {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--garis); background: transparent; color: var(--tinta);
}
.laci a {
  padding: 13px 14px; border-radius: var(--bulat-kecil);
  font-size: 16px; color: var(--tinta-2);
}
.laci a:hover, .laci a[aria-current="page"] { background: var(--panel-lembut); color: var(--tinta); }
.laci .tombol { margin-top: 14px; justify-content: center; }

/* Kaki halaman */
.kaki { position: relative; overflow: hidden; border-top: 1px solid var(--garis); }
.kaki__isi { position: relative; z-index: 1; }
.kaki__atas {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px;
  padding-block: 64px 44px;
}
.kaki__ringkas { margin-top: 18px; color: var(--redup); font-size: 14.5px; max-width: 34ch; }
.kaki h4 {
  font-family: var(--ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--redup-2);
  margin-bottom: 18px;
}
.kaki__tautan { display: flex; flex-direction: column; gap: 12px; }
.kaki__tautan a { font-size: 14.5px; color: var(--tinta-2); }
.kaki__tautan a:hover { color: var(--biru-teks); }
.kaki__hubungi { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; color: var(--tinta-2); }
.kaki__hubungi div { display: flex; align-items: center; gap: 10px; }
.kaki__hubungi svg { color: var(--redup); flex: none; }
.kaki__sosial { display: flex; gap: 10px; margin-top: 4px; }
.kaki__sosial a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--garis);
  background: var(--panel-lembut); color: var(--tinta-2);
}
.kaki__sosial a:hover { color: var(--biru-teks); border-color: var(--garis-terang); }

/* Nama merek raksasa sebagai tanda tangan halaman */
.tanda-tangan {
  font-family: var(--judul); font-weight: 700;
  /* Ukurannya dibatasi supaya namanya muat satu baris penuh di dalam wadah.
     Angkanya disetel ulang tiap kali panjang nama merek berubah — "Digital
     Catalyst" sembilan huruf lebih pendek daripada nama sebelumnya, jadi
     ukurannya dinaikkan supaya tetap membentang selebar wadah. */
  font-size: min(11.4vw, 148px);
  line-height: .92; letter-spacing: -.045em; text-align: center;
  background: linear-gradient(178deg, var(--biru-cerah) 6%, var(--biru) 46%, transparent 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-top: 24px;
  user-select: none;
  white-space: nowrap;
  opacity: .92;
}
.kaki__bawah {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-block: 26px; border-top: 1px solid var(--garis);
  font-size: 13px; color: var(--redup);
}
.kaki__bawah nav { display: flex; gap: 22px; }

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

.tombol {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--pil);
  font-family: var(--ui); font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
  color: #fff; box-shadow: var(--bayang-biru);
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.tombol:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(3, 62, 182, .34); }
.tombol svg { flex: none; }
.tombol--garis {
  background: var(--panel-lembut); color: var(--tinta);
  border-color: var(--garis-terang); box-shadow: none;
}
.tombol--garis:hover { box-shadow: var(--bayang-1); }
.tombol--kecil { padding: 10px 18px; font-size: 13.5px; }
.tombol--terang { background: #fff; color: var(--biru); box-shadow: var(--bayang-2); }

.tautan-panah {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--biru-teks);
}
.tautan-panah svg { transition: transform .18s ease; }
.tautan-panah:hover svg { transform: translateX(3px); }

/* Kartu kaca — bentuk dasar semua kartu di situs ini */
.kartu {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--bulat-besar);
  padding: 26px;
  display: flex; flex-direction: column;
  box-shadow: var(--bayang-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}
/* Garis kilau tipis di bibir atas kartu — sumber cahayanya dari atas. */
.kartu::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 22px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--garis-kilau), transparent);
}
.kartu:hover { transform: translateY(-3px); box-shadow: var(--bayang-2); border-color: var(--garis-terang); }
.kartu h3 { font-size: 20px; margin: 18px 0 10px; }
.kartu p { color: var(--redup); font-size: 14.5px; line-height: 1.68; }
.kartu .tautan-panah { margin-top: auto; padding-top: 18px; align-self: flex-start; }

.ikon-bulat {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
  color: #fff; box-shadow: var(--bayang-biru);
}
.ikon-kotak {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--biru-lembut); color: var(--biru-teks);
  border: 1px solid var(--garis);
}

.daftar-centang { display: flex; flex-direction: column; gap: 13px; }
.daftar-centang li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; color: var(--tinta-2); line-height: 1.55;
}
.daftar-centang svg { flex: none; margin-top: 2px; color: var(--biru-teks); }

.daftar-titik { display: flex; flex-direction: column; gap: 11px; }
.daftar-titik li {
  position: relative; padding-inline-start: 18px;
  font-size: 14.5px; color: var(--tinta-2); line-height: 1.55;
}
.daftar-titik li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--biru-teks);
}

/* Pita bukti sosial */
.peringkat {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center; font-size: 13.5px; color: var(--redup);
}
.peringkat__bintang { display: flex; gap: 3px; color: #F5B544; }
.peringkat b { color: var(--tinta); font-weight: 600; }

.deret-logo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.deret-logo span {
  font-family: var(--judul); font-size: 19px; font-weight: 600;
  color: var(--tinta-2); letter-spacing: -.01em; white-space: nowrap;
  opacity: .7;
}

/* Panel besar bercahaya — pembungkus bagian penting */
.panel-cahaya {
  --panel-pad: clamp(28px, 5vw, 58px);
  position: relative; border-radius: 34px; overflow: hidden;
  border: 1px solid var(--garis);
  background:
    radial-gradient(120% 100% at 50% -18%, var(--cahaya-3), transparent 62%),
    var(--panel-lembut);
  padding: var(--panel-pad);
}

/* --- Foto --- */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--bulat-besar);
  border: 1px solid var(--garis);
  background: var(--panel-lembut);
  box-shadow: var(--bayang-2);
}
.media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--foto-saring);
}
.media--lebar   { aspect-ratio: 16 / 9; }
.media--persegi { aspect-ratio: 4 / 3; }
.media--pendek  { aspect-ratio: 21 / 9; }
.media--tegak   { aspect-ratio: 4 / 5; }
.media--sedang  { aspect-ratio: 3 / 2; }
.media--panjang { aspect-ratio: 5 / 4; }

/* Foto hero dengan kartu angka melayang di atasnya, seperti pada acuan. */
.foto-hero {
  position: relative;
  margin-top: 48px;
  /* Menembus padding wadah sampai tepi layar, tapi berhenti di 1560px supaya
     di monitor lebar fotonya tidak melar sampai kehilangan wajah orangnya. */
  margin-inline: calc(50% - min(50vw, 780px));
  width: min(100vw, 1560px);
}
.foto-hero .media {
  /* 21:9 memotong terlalu banyak: empat dari lima foto hero hampir persegi,
     dan layar presentasinya justru di bagian atas yang ikut terbuang. */
  aspect-ratio: 16 / 9;
  border-radius: 0; border-inline: 0; border-block-start: 0;
  box-shadow: none;
}
/* Tepi bawah dilarutkan ke warna halaman — tokennya ikut tema, jadi larutnya
   benar baik di terang maupun gelap. */
.foto-hero::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px;
  height: 26%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ground));
}
.apung { z-index: 2; }
/* Kartu angka menumpang di tepi bawah foto, bukan melayang di tengahnya.

   Sewaktu fotonya masih kotak kecil, melayang di kanan tidak mengganggu apa
   pun. Begitu fotonya membentang selebar layar, kartu-kartu itu mendarat
   tepat di atas grafik "Your Growth Map" — menutupi justru bagian yang
   paling bercerita. */
.apung {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--lebar);
  margin: -58px auto 0; padding-inline: 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.apung .metrik {
  background: var(--kaca-pekat); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--bayang-3); border-color: var(--garis-terang);
}

.tempel {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--bulat);
  background: var(--kaca-pekat);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--garis-terang);
  box-shadow: var(--bayang-3);
  inset-block-end: -18px; inset-inline-start: -18px;
}
.tempel__ikon {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--biru-lembut); color: var(--biru-teks);
}
.tempel__label { display: block; font-size: 11.5px; color: var(--redup); }
.tempel__nilai { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

/* Pembungkus foto yang boleh ditumpangi chip: pemotongan sudut pindah ke
   .media di dalamnya, kalau tidak chipnya ikut tergunting. */
.berchip { position: relative; }

.sekat {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--garis-terang), transparent);
}

/* =========================== 6. BAGIAN ================================= */

/* --- Hero --- */
.hero { position: relative; padding-block: clamp(52px, 7vw, 96px) 56px; overflow: hidden; }
.hero__isi { position: relative; z-index: 1; text-align: center; }
.hero h1 { font-size: clamp(38px, 6vw, 74px); max-width: 17ch; margin-inline: auto; }
.hero__ringkas { margin: 22px auto 0; color: var(--redup); font-size: 17px; max-width: 56ch; }
.hero__tombol {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin: 34px 0 22px;
}

/* Papan angka buatan — pengganti foto tempelan.
   Dibangun dari markah, bukan berkas gambar, supaya ikut berganti tema dan
   tidak pernah menjadi kotak abu-abu yang menunggu diisi. */
.papan {
  position: relative; margin-top: 56px;
  border-radius: var(--bulat-besar);
  border: 1px solid var(--garis);
  background: var(--panel);
  box-shadow: var(--bayang-3);
  overflow: hidden;
  text-align: start;
}
.papan__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--garis);
  background: var(--panel-lembut);
}
.papan__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--garis-terang); }
.papan__bar span { margin-inline-start: 10px; font-size: 12px; color: var(--redup); }
.papan__badan { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 24px; }
.papan__kiri { display: flex; flex-direction: column; gap: 14px; }

.metrik {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: var(--bulat);
  border: 1px solid var(--garis); background: var(--panel-lembut);
}
.metrik__ikon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--biru-lembut); color: var(--biru-teks);
}
.metrik__label { display: block; font-size: 12px; color: var(--redup); }
.metrik__nilai { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metrik__delta { display: block; font-size: 11.5px; color: var(--biru-teks); font-weight: 600; }
.metrik--utama { background: linear-gradient(140deg, var(--biru-cerah), var(--biru)); border-color: transparent; }
.metrik--utama .metrik__ikon { background: rgba(255, 255, 255, .16); color: #fff; }
.metrik--utama .metrik__label,
.metrik--utama .metrik__delta { color: rgba(255, 255, 255, .82); }
.metrik--utama .metrik__nilai { color: #fff; }

.grafik {
  border-radius: var(--bulat); border: 1px solid var(--garis);
  background: var(--panel-lembut); padding: 18px; display: flex; flex-direction: column;
}
.grafik__judul { font-size: 12px; color: var(--redup); }
.grafik__nilai { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.grafik svg { margin-top: auto; width: 100%; height: auto; }

/* --- Tiga pilar --- */
.pilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pilar__butir { padding: 30px 26px; }
.pilar__nomor {
  font-family: var(--judul); font-size: 15px; font-weight: 600;
  color: var(--biru-teks); letter-spacing: .06em;
}
.pilar__butir h3 { font-size: 21px; margin: 18px 0 10px; }
.pilar__butir p { color: var(--redup); font-size: 14.5px; line-height: 1.68; }

/* --- Baris solusi berselang --- */
.solusi { display: flex; flex-direction: column; gap: 22px; }
.solusi__baris { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.solusi__baris--balik .solusi__teks { order: 2; }

/* Fotonya menempel ke tepi luar panel, tidak berhenti di dalam padding.
   Baris ganjil fotonya di kanan, baris genap di kiri. */
.solusi__baris .media { margin-inline-end: calc(var(--panel-pad) * -1); }
.solusi__baris--balik .media {
  margin-inline-end: 0; margin-inline-start: calc(var(--panel-pad) * -1);
}
.solusi__baris .media {
  border-start-end-radius: var(--bulat-besar);
  border-end-end-radius: var(--bulat-besar);
}
.solusi__nomor { font-family: var(--judul); font-size: 15px; color: var(--biru-teks); letter-spacing: .06em; }
.solusi__teks h3 { font-size: clamp(25px, 2.9vw, 33px); margin: 12px 0 14px; }
.solusi__teks > p { margin-bottom: 22px; color: var(--redup); font-size: 15.5px; }

/* --- Alur proses bernomor --- */
.proses { position: relative; display: flex; flex-direction: column; gap: 18px; }
.proses__langkah {
  display: grid; grid-template-columns: 52px 1fr 1fr; gap: 28px;
  align-items: start; padding: 30px 28px;
}
.proses__bulat {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--judul); font-size: 17px; font-weight: 600;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
  color: #fff; box-shadow: var(--bayang-biru);
}
.proses__isi h3 { font-size: 23px; margin-bottom: 10px; }
.proses__isi p { color: var(--redup); font-size: 14.5px; line-height: 1.68; }

/* --- Kartu studi kasus --- */
.kasus { padding: 0; }
/* Foto di kepala kartu: pita nama di kiri atas, lencana ikon menggantung di
   tepi bawah — lencananya sengaja keluar bingkai, jadi pemotongan sudut ada
   pada .media di dalamnya, bukan pada pembungkus ini. */
.kasus__foto { position: relative; padding: 0 0 4px; }
.kasus__foto .media {
  border-radius: 0; border-inline: 0; border-block-start: 0;
  border-end-start-radius: 0; border-end-end-radius: 0;
  box-shadow: none;
}
.kasus__foto .kasus__pita {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
  background: var(--kaca-pekat); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--garis-terang); box-shadow: var(--bayang-1);
}
.kasus__foto .ikon-bulat {
  position: absolute; inset-block-end: -22px; inset-inline-start: 26px;
}
.kasus .kasus__badan { padding-top: 34px; }
.kasus__pita {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--biru-teks); padding: 6px 12px; border-radius: var(--pil);
  border: 1px solid var(--garis); background: var(--biru-lembut);
}
.kasus__badan { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.kasus__badan > p { color: var(--redup); font-size: 14.5px; margin-bottom: 22px; }
.kasus__kaki {
  display: flex; align-items: center; padding-top: 20px; margin-top: auto;
  border-block-start: 1px solid var(--garis);
}

/* --- Testimoni: satu kutipan besar, wajah di bawahnya --- */
.testimoni { text-align: center; }
.testimoni__kutip {
  font-family: var(--judul); font-size: clamp(22px, 2.7vw, 33px);
  line-height: 1.44; letter-spacing: -.018em; max-width: 34ch;
  margin: 0 auto; text-wrap: balance;
}
.testimoni__orang { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.testimoni__butir { display: none; }
.testimoni__butir.aktif { display: block; }

.wajah {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--judul); font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
}
.testimoni__nama { text-align: start; }
.testimoni__nama b { display: block; font-size: 15px; }
.testimoni__nama span { font-size: 13px; color: var(--redup); }

.pemilih { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 42px; }
.pemilih button {
  display: flex; align-items: center; gap: 12px; text-align: start;
  padding: 14px 16px; border-radius: var(--bulat);
  border: 1px solid var(--garis); background: var(--panel-lembut);
  color: inherit; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.pemilih button:hover { border-color: var(--garis-terang); }
.pemilih button[aria-selected="true"] {
  border-color: var(--biru-teks);
  background: var(--biru-lembut);
  box-shadow: var(--bayang-1);
}
.pemilih .wajah { width: 38px; height: 38px; font-size: 14px; }
.pemilih b { display: block; font-size: 14px; font-weight: 600; }
.pemilih span { font-size: 12.5px; color: var(--redup); }

/* --- Tiga model kerja sama, satu ditonjolkan --- */
.model { align-items: stretch; }
.model__kartu { padding: 30px 28px; }
.model__kartu--utama {
  border-color: var(--biru-teks);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--biru-lembut), transparent 66%),
    var(--panel);
  box-shadow: var(--bayang-2);
}
.model__pita {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(140deg, var(--biru-cerah), var(--biru));
  padding: 6px 14px; border-end-start-radius: var(--bulat);
}
.model__kartu h3 { font-size: 22px; margin: 0 0 10px; }
.model__cocok { font-size: 13px; color: var(--biru-teks); font-weight: 600; }
.model__kartu > p { color: var(--redup); font-size: 14.5px; margin: 12px 0 22px; }
.model__kartu .daftar-centang { margin-bottom: 26px; }
.model__kartu .tombol { margin-top: auto; justify-content: center; }

/* --- Pita percaya --- */
.percaya { border-block: 1px solid var(--garis); }
.percaya__isi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.percaya__butir {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 26px 24px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.5;
}
.percaya__butir + .percaya__butir { border-inline-start: 1px solid var(--garis); }
.percaya__butir svg { color: var(--biru-teks); flex: none; margin-top: 1px; }

/* --- Ajakan penutup --- */
.ajakan { position: relative; overflow: hidden; text-align: center; }
.ajakan__isi { position: relative; z-index: 1; }
.ajakan h2 { font-size: clamp(30px, 4.2vw, 50px); max-width: 20ch; margin-inline: auto; }
.ajakan p { margin: 18px auto 32px; color: var(--redup); max-width: 48ch; font-size: 16.5px; }

/* --- Formulir --- */
.formulir { display: flex; flex-direction: column; gap: 18px; }
.medan { display: flex; flex-direction: column; gap: 8px; }
.medan label { font-size: 13.5px; font-weight: 600; }
.medan input, .medan select, .medan textarea {
  width: 100%; padding: 13px 15px;
  border-radius: var(--bulat-kecil);
  border: 1px solid var(--garis);
  background: var(--ground); color: var(--tinta);
  font-family: var(--ui); font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.medan input::placeholder, .medan textarea::placeholder { color: var(--redup-2); }
.medan input:focus, .medan select:focus, .medan textarea:focus {
  outline: none; border-color: var(--biru-teks);
  box-shadow: 0 0 0 3px var(--biru-lembut);
}
.medan textarea { resize: vertical; min-height: 104px; }
.formulir .tombol { justify-content: center; margin-top: 6px; }
.formulir__catatan {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--redup); line-height: 1.55;
}
.formulir__catatan svg { flex: none; margin-top: 1px; color: var(--biru-teks); }
/* display:flex pada kelas ini menang atas aturan bawaan [hidden]{display:none},
   jadi pesan "terkirim" tampil sejak halaman dibuka — padahal belum ada yang
   dikirim. Atributnya harus dihormati secara tegas. */
.kabar-kirim[hidden] { display: none; }
.kabar-kirim {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--bulat-kecil);
  background: var(--biru-lembut); border: 1px solid var(--garis-terang);
  font-size: 14px; color: var(--tinta);
}

/* --- Tanya jawab --- */
.tanya { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
.tanya h3 { font-size: 17px; margin: 0 0 8px; }
.tanya p { font-size: 14px; }

/* --- Baris berikon / bernomor kecil --- */
.butir-baris { display: flex; gap: 14px; align-items: flex-start; }
.butir-baris h4 { font-family: var(--ui); font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.butir-baris p { font-size: 14px; color: var(--redup); line-height: 1.6; }
.nomor-kecil {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: linear-gradient(140deg, var(--biru-cerah), var(--biru)); color: #fff;
}

/* --- Potret tim --- */
.tim__foto {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--bulat-besar);
  background:
    radial-gradient(120% 80% at 30% 12%, var(--cahaya-3), transparent 60%),
    linear-gradient(160deg, var(--biru-lembut), var(--panel-lembut));
  border: 1px solid var(--garis);
  overflow: visible;
}
.tim__foto .media { border: 0; border-radius: inherit; box-shadow: none; height: 100%; }
.tim__lencana { position: absolute; inset-block-end: -18px; inset-inline-start: 20px; }
.tim .tim__butir:nth-child(even) { margin-block-start: 40px; }
.tim__butir h3 { font-size: 18px; margin: 32px 0 8px; }
.tim__butir p { font-size: 14px; color: var(--redup); line-height: 1.65; }

/* ========================= 7. LAYAR KECIL ============================== */

@media (max-width: 1040px) {
  .navigasi { display: none; }
  .tombol-laci { display: grid; }
  .kepala__aksi .tombol { display: none; }
  .papan__badan { grid-template-columns: 1fr; }
  .kaki__atas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .kisi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bagian { padding-block: 76px; }
  .solusi__baris .media,
  .solusi__baris--balik .media { margin-inline: 0; border-radius: var(--bulat-besar); }
  .tim .tim__butir:nth-child(even) { margin-block-start: 0; }
  .tempel { inset-inline-start: 12px; inset-block-end: 12px; }
  /* Kartu angka berhenti melayang: di lebar ini ia menutupi hampir seluruh
     foto, termasuk wajah orang-orangnya. */
  .apung { margin-top: -34px; gap: 10px; }
  .apung .metrik { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .apung .metrik__nilai { font-size: 18px; }
  .foto-hero .media { aspect-ratio: 4 / 3; }
  .foto-hero::after { height: 22%; }
  .pilar { grid-template-columns: 1fr; }
  .kisi--3 { grid-template-columns: 1fr; }
  .solusi__baris { grid-template-columns: 1fr; gap: 28px; }
  .solusi__baris--balik .solusi__teks { order: 0; }
  .proses__langkah { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 20px; }
  .proses__isi, .proses__langkah > .daftar-titik { grid-column: 2; }
  .proses__langkah > .daftar-titik { margin-top: 16px; }
  .percaya__isi { grid-template-columns: repeat(2, 1fr); }
  .percaya__butir:nth-child(3) { border-inline-start: 0; }
  .percaya__butir:nth-child(n+3) { border-block-start: 1px solid var(--garis); }
  .pemilih { grid-template-columns: 1fr; }
  .model { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bagian { padding-block: 60px; }
  .wadah { padding-inline: 18px; }
  .kisi--2, .kisi--4 { grid-template-columns: 1fr; }
  .tim.kisi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .tim .tim__butir h3 { font-size: 16px; margin-top: 28px; }
  .tim .tim__butir p { font-size: 13px; }
    .percaya__isi { grid-template-columns: 1fr; }
  .percaya__butir + .percaya__butir { border-inline-start: 0; border-block-start: 1px solid var(--garis); }
  .kaki__atas { grid-template-columns: 1fr; }
  .kaki__bawah { flex-direction: column; align-items: flex-start; }
  .deret-logo { justify-content: center; gap: 20px 26px; }
  .deret-logo span { font-size: 16px; }
  .hero__tombol .tombol { width: 100%; justify-content: center; }
  .apung { grid-template-columns: 1fr; margin-top: -26px; }
  .papan__badan { padding: 16px; gap: 14px; }
}

/* ============================= 8. GERAK ================================ */

/* Aturan penyembunyian hanya berlaku kalau skripnya benar-benar jalan.
   Tanpa penjaga ini, halaman tanpa JavaScript akan kosong melompong. */
[data-js="on"] .muncul {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-js="on"] .muncul.tampil { opacity: 1; transform: none; }
.tunda-1 { transition-delay: .06s; }
.tunda-2 { transition-delay: .12s; }
.tunda-3 { transition-delay: .18s; }
.tunda-4 { transition-delay: .24s; }

@keyframes mengapung {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.mengapung { animation: mengapung 6s ease-in-out infinite; }
.mengapung--2 { animation-duration: 7.4s; animation-delay: -1.6s; }
.mengapung--3 { animation-duration: 6.6s; animation-delay: -3.2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-js="on"] .muncul { opacity: 1; transform: none; }
}