/* =====================================================================
   TBD AGENCY — SISTEM DESAIN
   ---------------------------------------------------------------------
   Berkas ini berdiri sendiri: halaman yang memakainya TIDAK memuat
   flatsome.css maupun site-inline.css. Itu sebabnya seluruh nama kelas
   diawali "tbd-" — supaya kalau suatu saat dua sistem sempat bertemu di
   satu halaman, tidak ada yang saling menimpa.

   Susunan berkas:
     1. Token        — warna, huruf, jarak, radius, bayangan
     2. Dasar        — reset dan elemen polos
     3. Tata letak   — container, section, grid
     4. Tipografi    — judul, eyebrow, lead
     5. Komponen     — tombol, kartu, pil, statistik, garis waktu, form
     6. Kerangka     — header, footer, pita CTA
     7. Utilitas & gerak
   ===================================================================== */

/* =====================================================================
   1. TOKEN
   ---------------------------------------------------------------------
   Catatan kontras (rasio terhadap latar putih #FFFFFF):
     --tbd-navy      #0B2244  →  15.8:1   aman untuk teks ukuran apa pun
     --tbd-text      #16233A  →  13.6:1   aman
     --tbd-muted     #566float →  lihat di bawah
     --tbd-blue-text #0060B8  →   5.6:1   aman untuk teks biasa (AA)
     --tbd-blue      #0074DA  →   4.1:1   TIDAK aman untuk teks kecil,
                                          jadi hanya dipakai sebagai LATAR
                                          tombol dan aksen non-teks.
   Biru merek tetap hidup sebagai warna tombol; untuk teks dan tautan
   dipakai versi yang sedikit lebih tua supaya lolos WCAG AA.
   ===================================================================== */
:root {
  /* Warna inti */
  --tbd-navy:        #0B2244;   /* judul, pita CTA, footer */
  --tbd-navy-soft:   #14335E;   /* lapis kedua di atas navy */
  --tbd-blue:        #0074DA;   /* latar tombol, aksen non-teks */
  --tbd-blue-text:   #0060B8;   /* tautan dan label — versi aman kontras */
  --tbd-blue-dark:   #004E96;   /* keadaan ditekan */
  --tbd-lime:        #B7EC0C;   /* aksen kecil saja, tidak pernah jadi teks */
  --tbd-green:       #0F7A38;   /* angka pertumbuhan, pesan berhasil */
  --tbd-red:         #B3261E;   /* galat */

  /* Netral */
  --tbd-text:        #16233A;   /* teks utama */
  --tbd-muted:       #5A6B85;   /* teks sekunder — 4.9:1 di atas putih */
  --tbd-line:        #E3E9F2;   /* garis dan bingkai */
  --tbd-surface:     #FFFFFF;
  --tbd-surface-2:   #F6F8FC;   /* latar bagian selang-seling */

  /* Huruf */
  --tbd-font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tbd-font-head:   "Manrope", var(--tbd-font);

  /* Jarak — kelipatan 4 supaya konsisten */
  --tbd-1:  4px;   --tbd-2:  8px;   --tbd-3: 12px;  --tbd-4: 16px;
  --tbd-5: 20px;   --tbd-6: 24px;   --tbd-8: 32px;  --tbd-10: 40px;
  --tbd-12: 48px;  --tbd-16: 64px;  --tbd-20: 80px; --tbd-24: 96px;

  /* Bentuk */
  --tbd-radius:    14px;
  --tbd-radius-sm: 10px;
  --tbd-radius-pill: 999px;

  /* Bayangan — sengaja tipis; "bersih" berarti bidang dan jarak yang
     bekerja, bukan bayangan tebal. */
  --tbd-shadow:    0 1px 2px rgba(11, 34, 68, .04), 0 8px 24px rgba(11, 34, 68, .05);
  --tbd-shadow-lg: 0 2px 4px rgba(11, 34, 68, .05), 0 18px 44px rgba(11, 34, 68, .10);

  --tbd-maxw: 1200px;
}

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

.tbd {
  margin: 0;
  font-family: var(--tbd-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tbd-text);
  background: var(--tbd-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Peramban memberi <figure> dan <blockquote> margin bawaan 40px kiri-kanan.
   Kalau dibiarkan, jarak antarkartu jadi jauh lebih lebar dari yang diatur
   gap — dan perhitungan geseran carousel ikut meleset. */
.tbd figure,
.tbd blockquote { margin: 0; }

/* Dibungkus :where() supaya spesifisitasnya nol.
   Tanpa itu ".tbd a" (0-1-1) mengalahkan ".tbd-btn" dan ".tbd-nav__link"
   (0-1-0), sehingga teks tombol dan menu ikut berwarna biru tautan —
   termasuk tombol navy yang teksnya jadi nyaris tak terbaca. */
:where(.tbd a) { color: var(--tbd-blue-text); text-decoration: none; }
:where(.tbd a:hover) { text-decoration: underline; }

.tbd :focus-visible {
  outline: 3px solid var(--tbd-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tautan lewati-ke-konten untuk pengguna papan ketik. */
.tbd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tbd-navy); color: #fff;
  padding: var(--tbd-3) var(--tbd-5); border-radius: 0 0 var(--tbd-radius-sm) 0;
}
.tbd-skip:focus { left: 0; }

/* =====================================================================
   3. TATA LETAK
   ===================================================================== */
.tbd-container {
  width: 100%;
  max-width: var(--tbd-maxw);
  margin-inline: auto;
  padding-inline: var(--tbd-5);
}

.tbd-section { padding-block: var(--tbd-20); }
.tbd-section--tight { padding-block: var(--tbd-12); }
.tbd-section--alt { background: var(--tbd-surface-2); }

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

.tbd-stack { display: flex; flex-direction: column; gap: var(--tbd-4); }
.tbd-row   { display: flex; flex-wrap: wrap; gap: var(--tbd-3); align-items: center; }

/* =====================================================================
   4. TIPOGRAFI
   ===================================================================== */
.tbd-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tbd-blue-text);
  margin-bottom: var(--tbd-4);
}
/* Di atas navy, biru bawaannya cuma 1,9:1 — nyaris tidak terbaca. Lime dipakai
   di sini karena sudah jadi warna aksen di bidang navy (lihat .tbd-band__icon
   dan .tbd-visi__label) dan kontrasnya 11,3:1. */
.tbd-eyebrow--onNavy { color: var(--tbd-lime); }

.tbd-h1, .tbd-h2, .tbd-h3, .tbd-h4 {
  font-family: var(--tbd-font-head);
  color: var(--tbd-navy);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.tbd-h1 { font-size: clamp(32px, 4.6vw, 52px); }
.tbd-h2 { font-size: clamp(26px, 3.2vw, 38px); }
.tbd-h3 { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -.015em; }
.tbd-h4 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.tbd-lead {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--tbd-muted);
  line-height: 1.7;
  max-width: 46ch;
  margin: var(--tbd-5) 0 0;
  text-wrap: pretty;
}

/* Kalimat definisi "TBD Agency adalah …" di halaman Tentang Kami.
   Sedikit lebih besar dan lebih terang daripada paragraf pendukung di
   bawahnya, supaya mata pembaca berhenti di keterangannya lebih dulu, bukan di
   naskah pemasarannya. Lebarnya dilonggarkan sedikit dari 46ch bawaan agar
   kalimatnya tidak pecah jadi terlalu banyak baris pendek.

   Warnanya di atas hero navy diatur di bagian "DUA ARAH DESAIN", bukan di
   sini: aturan warna .tbd-lead versi navy ada di sana dengan kekhususan yang
   sama persis, jadi kalau ditulis di sini yang menang justru aturan yang di
   bawah. */
.tbd-lead--definisi { font-size: clamp(17px, 1.45vw, 20px); max-width: 52ch; font-weight: 500; }

.tbd-text  { color: var(--tbd-muted); margin: 0; }
.tbd-small { font-size: 13.5px; }

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

/* ---------- Tombol ---------- */
.tbd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tbd-2);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--tbd-radius-pill);
  font-family: var(--tbd-font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-decoration: none;
}
.tbd-btn:hover { text-decoration: none; transform: translateY(-1px); }
.tbd-btn:active { transform: translateY(0); }
.tbd-btn svg { width: 17px; height: 17px; transition: transform .18s ease; }
.tbd-btn:hover svg { transform: translateX(3px); }

.tbd-btn--primary { background: var(--tbd-navy); color: #fff; }
.tbd-btn--primary:hover { background: var(--tbd-navy-soft); color: #fff; }

.tbd-btn--blue { background: var(--tbd-blue); color: #fff; }
.tbd-btn--blue:hover { background: var(--tbd-blue-dark); color: #fff; }

.tbd-btn--outline { background: transparent; border-color: var(--tbd-line); color: var(--tbd-navy); }
.tbd-btn--outline:hover { border-color: var(--tbd-navy); background: var(--tbd-surface-2); }

/* Varian untuk dipakai di atas latar navy. */
.tbd-btn--onNavy { background: #fff; color: var(--tbd-navy); }
.tbd-btn--onNavy:hover { background: #eef3fa; color: var(--tbd-navy); }
.tbd-btn--onNavyGhost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.tbd-btn--onNavyGhost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* Tautan berpanah — dipakai di kaki kartu.
   Jarak atas-bawah dibuat cukup supaya area sentuhnya mencapai 44px tanpa
   bergantung pada deteksi jenis perangkat, yang tidak selalu tepat di
   tablet dan laptop layar sentuh. Jarak itu ditarik balik dengan margin
   negatif agar tata letaknya tetap rapat seperti terlihat. */
.tbd-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 11px;
  margin-block: -11px;
  font-family: var(--tbd-font-head); font-weight: 700; font-size: 14.5px;
  color: var(--tbd-blue-text);
}
.tbd-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.tbd-link:hover { text-decoration: none; }
.tbd-link:hover svg { transform: translateX(3px); }

/* ---------- Kartu ---------- */
.tbd-card {
  display: flex;
  flex-direction: column;
  gap: var(--tbd-3);
  padding: var(--tbd-6);
  background: var(--tbd-surface);
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-card--hover:hover {
  border-color: #C9D8EC;
  box-shadow: var(--tbd-shadow);
  transform: translateY(-2px);
}
.tbd-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #EAF3FD;
  color: var(--tbd-blue-text);
  flex: 0 0 44px;
}
.tbd-card__icon svg { width: 22px; height: 22px; }
.tbd-card__foot { margin-top: auto; padding-top: var(--tbd-2); }

/* ---------- Chip & pil penyaring ---------- */
.tbd-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #EAF3FD;
  color: var(--tbd-blue-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tbd-filters {
  display: flex; flex-wrap: wrap; gap: var(--tbd-2);
  margin-bottom: var(--tbd-8);
}
.tbd-filter {
  padding: 9px 18px;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius-pill);
  background: #fff;
  color: var(--tbd-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .16s ease;
}
.tbd-filter:hover { border-color: var(--tbd-navy); color: var(--tbd-navy); text-decoration: none; }
.tbd-filter.is-active { background: var(--tbd-navy); border-color: var(--tbd-navy); color: #fff; }

/* ---------- Hero: teks + gambar ---------- */
.tbd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tbd-12); align-items: center; }

/* Bila gambar hero tidak ada, teksnya memakai seluruh lebar. Tanpa aturan ini
   separuh kanan layar tertinggal kosong di desktop. */
.tbd-hero > *:only-child { grid-column: 1 / -1; }
/* Bawaan — dipakai halaman Layanan, Detail Layanan, dan Tentang Kami, yang
   gambar hero-nya foto biasa (buram): ditaruh di dalam bingkai bersudut
   membulat.

   Bingkainya sengaja TIDAK dipatok rasio tertentu. Waktu dipatok 4:3 (dan 1:1
   di arah desain B), foto mendatar seperti di Tentang Kami — 1085x630 —
   kehilangan 42% lebarnya karena object-fit: cover memangkas kiri-kanan. Dengan
   tinggi mengikuti gambar, seluruh foto tampil utuh dan tidak ada bagian yang
   hilang, apa pun proporsi berkas yang diunggah pemilik situs.

   max-height hanya jaring pengaman: kalau suatu saat yang diunggah foto potret
   sangat jangkung, tingginya dibatasi dan object-fit: contain menahan agar
   gambarnya tidak gepeng. */
.tbd-hero__media {
  border-radius: var(--tbd-radius);
  overflow: hidden;
  background: var(--tbd-surface-2);
}
.tbd-hero__media img { width: 100%; height: auto; max-height: 620px; object-fit: contain; }

/* Beranda. Gambarnya bukan foto biasa melainkan ilustrasi yang latarnya SUDAH
   dipotong (PNG transparan), jadi dua hal diubah:

   1. Bingkainya dilepas. Kalau bidangnya tetap diberi warna, yang muncul
      justru kotak terang di belakang orangnya — bukan sosok yang berdiri di
      atas navy. Karena tidak ada bidang yang perlu diisi penuh, potongannya
      pindah ke contain supaya tidak ada bagian ilustrasi yang terpangkas.
   2. Gambarnya diturunkan sampai menyentuh sisi bawah bagian hero. Ilustrasi
      ini terpotong rata di pinggang, dan tanpa bingkai potongan itu terbaca
      sebagai garis mendatar di atas navy; di batas bawah ada pita statistik
      yang menumpang dan menutupinya. Angka negatifnya menyamai padding bawah
      bagian hero, sehingga tepi gambar jatuh persis di batas itu.

   Kelas penanda ini WAJIB hanya dipasang pada hero yang benar-benar diikuti
   pita statistik — tanpa pita, tepi potongannya terbuka dan gambarnya menembus
   ke bagian berikutnya. */
.tbd-hero-section--tumpang .tbd-hero__media {
  border-radius: 0;
  overflow: visible;
  background: none;
  align-self: end;
  margin-bottom: calc(var(--tbd-20) * -1);
}
.tbd-hero-section--tumpang .tbd-hero__media img { object-position: center bottom; }
.tbd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tbd-3); margin-top: var(--tbd-8); }

/* Logo platform di bawah tombol hero. Bukan lencana kemitraan — sekadar
   "kami bekerja di dua kanal ini". Logonya siluet putih, jadi bagian ini
   hanya terbaca di hero navy (variant b). */
.tbd-hero__platform {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tbd-6);
  margin-top: var(--tbd-10);
}
.tbd-hero__platformlabel {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: #8FA3C0;
  padding-right: var(--tbd-4);
  border-right: 1px solid rgba(255, 255, 255, .18);
}
/* Dua logo tingginya beda (26 vs 18 px) memang disengaja: yang disamakan
   tinggi TULISANNYA — tanda kantong Shopee jauh lebih tinggi dari hurufnya,
   jadi menyamakan tinggi berkas justru membuat tulisannya timpang. */
.tbd-hero__platform img { display: block; width: auto; opacity: .92; }

/* ---------- Statistik ---------- */
.tbd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--tbd-5);
}
.tbd-stat { display: flex; gap: var(--tbd-3); align-items: flex-start; }
.tbd-stat__icon { color: var(--tbd-blue-text); flex: 0 0 22px; }
.tbd-stat__icon svg { width: 22px; height: 22px; }
.tbd-stat__num {
  display: block;
  font-family: var(--tbd-font-head);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--tbd-navy);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.tbd-stat__label { display: block; font-size: 13px; color: var(--tbd-muted); margin-top: 2px; }

/* ---------- Pita navy ---------- */
.tbd-band {
  background: var(--tbd-navy);
  color: #fff;
  border-radius: var(--tbd-radius);
  padding: var(--tbd-10);
}
.tbd-band--full { border-radius: 0; }
.tbd-band .tbd-h2,
.tbd-band .tbd-h3 { color: #fff; }
.tbd-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--tbd-8); }
.tbd-band__item { display: flex; gap: var(--tbd-3); align-items: flex-start; }
.tbd-band__icon { color: var(--tbd-lime); flex: 0 0 22px; }
.tbd-band__icon svg { width: 22px; height: 22px; }
/* display: block wajib di sini. Keduanya <span>, jadi tanpa ini judul dan
   penjelasannya mengalir jadi satu paragraf dan margin-top di bawah tidak
   pernah berlaku — margin tegak memang diabaikan pada elemen inline. */
.tbd-band__title { display: block; font-family: var(--tbd-font-head); font-weight: 700; font-size: 15px; color: #fff; }
.tbd-band__text { display: block; font-size: 13.5px; color: #B9C9DF; margin-top: 2px; line-height: 1.6; }

/* Pita ajakan bertindak di kaki setiap halaman.
   ---------------------------------------------------------------------
   Wujudnya KARTU navy di atas jalur terang, bukan pita navy selebar layar.
   Sebabnya praktis: footer juga berlatar navy, jadi pita polos bersambung
   dengan footer dan batas keduanya hilang. Dengan jalur terang di
   sekelilingnya, kartu ini punya tepi yang jelas dan footer kembali terbaca
   sebagai bagian tersendiri. */
.tbd-cta {
  /* Hampir semua halaman menutup dengan .tbd-section--alt yang warnanya sama,
     jadi jalur ini menyambung mulus di sana — tidak muncul garis sambungan
     tepat di atas kartu. */
  background: var(--tbd-surface-2);
  padding-block: var(--tbd-12);
}
.tbd-cta__panel {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tbd-5) var(--tbd-6);
  padding: var(--tbd-6) var(--tbd-8);
  /* Radius sengaja lebih besar dari --tbd-radius: bidang selebar ini butuh
     sudut lebih membulat supaya terasa sama tumpulnya dengan kartu biasa. */
  border-radius: 22px;
  color: #fff;
  /* Gradasi tipis navy-soft ke navy supaya bidang selebar ini tidak datar.
     Keduanya tetap gelap: teks putih 12,6:1 ke atas, #B9C9DF 7,5:1 ke atas. */
  background: linear-gradient(118deg, var(--tbd-navy-soft), var(--tbd-navy) 62%);
  box-shadow: var(--tbd-shadow-lg);
}
/* Kotak ikon: bidang yang lebih terang dari panelnya dengan ikon beraksen —
   pola yang sama dengan .tbd-band__icon. Putih pekat disimpan untuk tombol
   utama saja supaya tidak ada dua bidang putih yang berebut perhatian. */
.tbd-cta__icon {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--tbd-lime);
}
.tbd-cta__icon svg { width: 26px; height: 26px; }
/* Blok teks mengambil sisa ruang, jadi tombol terdorong ke kanan tanpa perlu
   margin-left:auto — dan saat ruang habis, tombol turun ke baris berikutnya
   dengan rata kiri, bukan menggantung sendirian di kanan. */
.tbd-cta__copy { flex: 1 1 340px; min-width: 0; }
/* Berkas ini tidak punya reset margin untuk <p>, jadi ditulis eksplisit —
   kalau tidak, margin bawaan peramban 16px merenggangkan kartunya. */
.tbd-cta__title {
  margin: 0;
  font-family: var(--tbd-font-head);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800; line-height: 1.25;
  color: #fff; letter-spacing: -.02em;
  text-wrap: balance;
}
/* Tanpa max-width: lebar barisnya sudah dibatasi kolom teks itu sendiri, dan
   membatasinya lagi membuat subjudul sepanjang satu kalimat pecah dua baris
   padahal ruangnya masih ada. */
.tbd-cta__text {
  margin: 6px 0 0;
  font-size: 14.5px; line-height: 1.6;
  color: #B9C9DF;
  overflow-wrap: break-word;
}
.tbd-cta__actions { display: flex; align-items: center; gap: var(--tbd-3); flex-wrap: wrap; }
/* .tbd-btn tingginya 43px; di kartu ini dinaikkan supaya target sentuh lewat
   44px tanpa mengubah tombol di seluruh situs. */
.tbd-cta__btn { min-height: 46px; }
/* Tepi tombol garis-tepi dipertegas: di atas gradasi yang lebih terang ini,
   rgba(255,255,255,.35) bawaan cuma mencapai 2,5:1 — di bawah syarat 3:1
   untuk pembatas komponen. Nilai .5 mencapai 4,3:1. */
.tbd-cta__btn.tbd-btn--onNavyGhost { border-color: rgba(255, 255, 255, .5); }
/* Ikon WhatsApp berdiri di DEPAN label sebagai penanda saluran, jadi ia tidak
   ikut bergeser seperti panah di tombol lain. */
.tbd-cta__btn:hover svg:first-child { transform: none; }

@media (max-width: 1024px) {
  .tbd-cta__panel { padding: var(--tbd-6); }
  .tbd-cta__copy  { flex: 1 1 320px; }
}
/* Ponsel: menumpuk tegak. flex-basis pada .tbd-cta__copy WAJIB dinolkan di
   sini — pada flex-direction:column nilai itu jatuh ke TINGGI, dan blok teks
   akan terpaksa setinggi 340px. */
@media (max-width: 560px) {
  .tbd-cta { padding-block: var(--tbd-10); }
  .tbd-cta__panel {
    flex-direction: column; align-items: flex-start;
    gap: var(--tbd-4); padding: var(--tbd-5); border-radius: 18px;
  }
  .tbd-cta__icon { width: 48px; height: 48px; border-radius: 14px; }
  .tbd-cta__icon svg { width: 24px; height: 24px; }
  .tbd-cta__copy,
  .tbd-cta__actions { flex: 0 0 auto; width: 100%; }
}
/* Aturan umum di bawah berkas hanya memangkas durasi; di sini geseran panah
   dan angkatan tombol dimatikan sekalian. */
@media (prefers-reduced-motion: reduce) {
  .tbd-cta__btn:hover { transform: none; }
  .tbd-cta__btn:hover svg { transform: none; }
}

/* ---------- Garis waktu ---------- */
.tbd-timeline { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tbd-6); }
.tbd-timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px;
  height: 2px; background: var(--tbd-line);
}
.tbd-timeline__item { position: relative; padding-top: var(--tbd-8); }
.tbd-timeline__dot {
  position: absolute; top: 0; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--tbd-blue);
}
.tbd-timeline__year { font-family: var(--tbd-font-head); font-weight: 800; color: var(--tbd-navy); font-size: 17px; }
.tbd-timeline__text { font-size: 13.5px; color: var(--tbd-muted); margin-top: 4px; line-height: 1.6; }

/* ---------- Formulir ---------- */
.tbd-field { display: block; margin-bottom: var(--tbd-5); }
.tbd-field > span { display: block; font-size: 14px; font-weight: 600; color: var(--tbd-text); margin-bottom: 6px; }
.tbd-field .tbd-req { color: var(--tbd-red); }

.tbd-input, .tbd-select, .tbd-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--tbd-text);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tbd-input::placeholder, .tbd-textarea::placeholder { color: #9AA8BE; }
.tbd-input:focus, .tbd-select:focus, .tbd-textarea:focus {
  outline: none;
  border-color: var(--tbd-blue);
  box-shadow: 0 0 0 4px rgba(0, 116, 218, .12);
}
.tbd-textarea { resize: vertical; min-height: 120px; }
.tbd-help { font-size: 13px; color: var(--tbd-muted); margin-top: 6px; }
.tbd-error { font-size: 13px; color: var(--tbd-red); margin-top: 6px; }

/* =====================================================================
   6. KERANGKA — header, footer
   ===================================================================== */
.tbd-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--tbd-line);
}
.tbd-header__inner { display: flex; align-items: center; gap: var(--tbd-6); height: 74px; }
.tbd-header__logo { flex: 0 0 auto; }
.tbd-header__logo img { height: 38px; width: auto; }

.tbd-nav { display: flex; align-items: center; gap: var(--tbd-1); margin-left: auto; }
.tbd-nav__link {
  position: relative;
  /* Ikon panah submenu berupa SVG, dan SVG di sini display:block. Tanpa
     inline-flex, ikon itu turun ke baris sendiri dan label menunya
     terdorong ke atas. */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tbd-text);
  border-radius: var(--tbd-radius-sm);
}
.tbd-nav__link:hover { color: var(--tbd-blue-text); text-decoration: none; background: var(--tbd-surface-2); }
.tbd-nav__link.is-active { color: var(--tbd-blue-text); }
.tbd-nav__link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--tbd-blue);
}

/* Submenu */
.tbd-nav__item { position: relative; }
.tbd-nav__caret { width: 14px; height: 14px; vertical-align: -2px; margin-left: 3px; }
.tbd-nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 250px; padding: var(--tbd-2);
  background: #fff; border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius); box-shadow: var(--tbd-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  list-style: none; margin: 0;
}
.tbd-nav__item:hover .tbd-nav__sub,
.tbd-nav__item:focus-within .tbd-nav__sub { opacity: 1; visibility: visible; transform: none; }
.tbd-nav__sublink {
  display: block; padding: 10px 12px; border-radius: var(--tbd-radius-sm);
  font-size: 14.5px; font-weight: 600; color: var(--tbd-text);
}
.tbd-nav__sublink:hover { background: var(--tbd-surface-2); color: var(--tbd-blue-text); text-decoration: none; }

.tbd-header__cta { flex: 0 0 auto; margin-left: var(--tbd-3); }
.tbd-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius-sm);
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  margin-left: auto;
}
.tbd-burger svg { width: 22px; height: 22px; color: var(--tbd-navy); }

/* Menu versi ponsel — muncul hanya saat tombol garis tiga ditekan. */
.tbd-mobile {
  border-top: 1px solid var(--tbd-line);
  background: #fff;
  padding-block: var(--tbd-5) var(--tbd-8);
  max-height: calc(100dvh - 74px);
  overflow-y: auto;
}
.tbd-mobile[hidden] { display: none; }
.tbd-mobile__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tbd-mobile__list > li > a {
  display: block; padding: 13px 0;
  font-family: var(--tbd-font-head); font-weight: 700; font-size: 17px;
  color: var(--tbd-navy); border-bottom: 1px solid var(--tbd-line);
}
.tbd-mobile__sub { list-style: none; margin: 0; padding: var(--tbd-2) 0 var(--tbd-3) var(--tbd-4); }
.tbd-mobile__sub a { display: block; padding: 8px 0; font-size: 15px; color: var(--tbd-muted); }
.tbd-mobile .tbd-btn { width: 100%; justify-content: center; }

/* Footer */
.tbd-footer {
  background: var(--tbd-navy);
  color: #B9C9DF;
  padding-block: var(--tbd-16) var(--tbd-8);
  /* Garis tipis yang memudar di kedua ujung — memisahkan footer dari pita
     ajakan bertindak di atasnya tanpa terlihat seperti garis pemisah kaku. */
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 30%, rgba(255,255,255,.16) 70%, transparent) 1;
}

/* Dibungkus :where() supaya spesifisitasnya nol.
   Sebelum ini ditulis ".tbd-footer a" (0-1-1), yang MENGALAHKAN warna teks
   .tbd-btn--onNavy (0-1-0) — akibatnya tombol "Chat WhatsApp" di footer jadi
   teks putih kebiruan di atas bidang putih, kontrasnya cuma 1,1:1 alias tidak
   terbaca sama sekali. Dengan :where(), varian tombol menang seperti mestinya. */
:where(.tbd-footer a) { color: #D6E2F2; }
:where(.tbd-footer a):hover { color: #fff; }

.tbd-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: var(--tbd-10); }
.tbd-footer__brand { max-width: 40ch; }

/* Logonya berwarna navy gelap — di atas footer yang juga navy, ia praktis
   tidak terlihat. Berkasnya PNG transparan, jadi cukup diputihkan lewat filter
   tanpa perlu menyiapkan berkas logo versi terang. */
.tbd-footer__logo img {
  height: 38px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.tbd-footer__tag { margin: var(--tbd-5) 0 0; font-size: 14px; line-height: 1.7; color: #9FB3CE; }
.tbd-footer__alamat {
  display: flex; gap: 9px; align-items: flex-start;
  margin: var(--tbd-4) 0 0; font-size: 13.5px; line-height: 1.6; color: #9FB3CE;
}
.tbd-footer__alamat svg { flex: 0 0 auto; margin-top: 3px; color: #7E93B2; }

.tbd-footer__title {
  font-family: var(--tbd-font-head); font-weight: 700; color: #fff;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--tbd-5);
}
.tbd-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
/* Tautan bergeser sedikit saat disentuh kursor — penanda halus bahwa
   barisnya bisa diklik, tanpa menambah garis bawah yang meramaikan. */
.tbd-footer__list a { display: inline-block; transition: transform .16s ease, color .16s ease; }
.tbd-footer__list a:hover { transform: translateX(3px); }
.tbd-footer__kontak li { display: flex; gap: 9px; align-items: center; }
.tbd-footer__kontak svg { flex: 0 0 auto; color: #7E93B2; }
.tbd-footer__wa { margin-top: var(--tbd-6); }

.tbd-footer__socials { display: flex; gap: var(--tbd-2); margin-top: var(--tbd-6); }
/* Ditulis sebagai ".tbd-footer a.tbd-footer__social" agar mengalahkan
   warna dasar tautan footer. */
.tbd-footer a.tbd-footer__social {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tbd-footer a.tbd-footer__social:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
}
.tbd-footer__social svg { width: 18px; height: 18px; }

.tbd-footer__bottom {
  margin-top: var(--tbd-12); padding-top: var(--tbd-6);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--tbd-4); flex-wrap: wrap;
  font-size: 13.5px; color: #8FA5C2;
}
.tbd-footer a.tbd-footer__atas {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: #B9C9DF;
}
.tbd-footer a.tbd-footer__atas:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tbd-footer__list a:hover { transform: none; }
  .tbd-footer a.tbd-footer__social:hover { transform: none; }
}

/* =====================================================================
   6b. HALAMAN LAYANAN
   ===================================================================== */
.tbd-service { position: relative; }

/* Berkas ikon layanan sudah memuat kotak berwarnanya sendiri (sekitar 80%
   pikselnya gelap), jadi tidak dibungkus kotak lagi — kalau dibungkus akan
   terlihat seperti dua lapis kotak bertumpuk. */
.tbd-service__icon {
  background: none;
  border: 0;
  padding: 0;
  width: 64px; height: 64px; flex-basis: 64px;
}
.tbd-service__icon img { width: 64px; height: 64px; object-fit: contain; }

/* Daftar poin layanan datang dari database dalam bentuk <ul>. */
.tbd-service__points ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tbd-service__points li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; color: var(--tbd-muted); line-height: 1.55;
}
.tbd-service__points li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #EAF3FD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060B8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.tbd-service__points p { margin: 0; font-size: 14.5px; color: var(--tbd-muted); }

.tbd-service__img {
  margin-top: var(--tbd-2);
  border-radius: var(--tbd-radius-sm);
  overflow: hidden;
  background: var(--tbd-surface-2);
  aspect-ratio: 16 / 10;
}
.tbd-service__img img { width: 100%; height: 100%; object-fit: cover; }

.tbd-service__no {
  font-family: var(--tbd-font-head);
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--tbd-blue-text);
}

/* Daftar layanan di halaman Layanan: baris melebar berselang-seling, bukan
   grid tiga kolom. Layanannya lima — di grid tiga kolom selalu ada dua kartu
   yang tertinggal sendirian di baris kedua — dan poin-poinnya butuh ruang
   lebih dari yang bisa diberikan kartu sempit. */
.tbd-svcs { display: flex; flex-direction: column; gap: var(--tbd-16); }
.tbd-svc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tbd-10); align-items: center;
}
/* Gambar pindah ke kiri di baris genap supaya matanya tidak berjalan lurus
   ke bawah di satu sisi saja. */
.tbd-svc:nth-child(even) .tbd-svc__gbr { order: -1; }
.tbd-svc__isi { display: flex; flex-direction: column; gap: var(--tbd-4); align-items: flex-start; }
.tbd-svc__kepala { display: flex; align-items: center; gap: var(--tbd-3); }
.tbd-svc__gbr {
  border-radius: var(--tbd-radius); overflow: hidden;
  background: var(--tbd-surface-2); border: 1px solid var(--tbd-line);
}
.tbd-svc__gbr img { width: 100%; height: auto; display: block; }

/* Pengganti gambar untuk layanan yang belum punya foto: panel navy berisi
   angka. Lebih menjelaskan daripada foto stok, dan barisnya tetap seimbang
   dengan baris lain yang bergambar. */
.tbd-svc__panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tbd-5);
  padding: var(--tbd-8);
  border-radius: var(--tbd-radius);
  background: linear-gradient(118deg, var(--tbd-navy-soft), var(--tbd-navy) 62%);
  box-shadow: var(--tbd-shadow-lg);
}
.tbd-svc__angka { display: flex; flex-direction: column; gap: 4px; }
.tbd-svc__nilai {
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1;
  color: #fff; letter-spacing: -.03em;
}
.tbd-svc__ket { font-size: 13px; line-height: 1.5; color: #B9C9DF; }
@media (max-width: 560px) {
  .tbd-svc__panel { padding: var(--tbd-6); gap: var(--tbd-4); }
}

@media (max-width: 900px) {
  /* Menumpuk ke bawah, gambar selalu di atas teks.
     Kedua selektor ditulis lengkap karena aturan selang-seling di atas
     memakai :nth-child(even) — kalau di sini cukup ".tbd-svc__gbr", baris
     genap tetap kalah spesifisitas dan gambarnya jatuh ke bawah teks. */
  .tbd-svc { grid-template-columns: minmax(0, 1fr); gap: var(--tbd-6); }
  .tbd-svc:nth-child(odd)  .tbd-svc__gbr,
  .tbd-svc:nth-child(even) .tbd-svc__gbr { order: -1; }
  .tbd-svcs { gap: var(--tbd-12); }
}

.tbd-band--wide { padding: var(--tbd-12); }

/* =====================================================================
   6d. KOMPONEN HALAMAN LAIN
   ===================================================================== */

/* ---------- Isi tulisan (artikel & halaman teks) ---------- */
.tbd-prose { max-width: 68ch; font-size: 17px; line-height: 1.75; color: #26344B; }
.tbd-prose > * + * { margin-top: 1.15em; }
.tbd-prose h2 { font-family: var(--tbd-font-head); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--tbd-navy); letter-spacing: -.02em; line-height: 1.25; margin-top: 1.9em; }
.tbd-prose h3 { font-family: var(--tbd-font-head); font-size: 20px; font-weight: 700; color: var(--tbd-navy); margin-top: 1.6em; }
.tbd-prose img { border-radius: var(--tbd-radius-sm); margin-block: 1.6em; }
.tbd-prose ul, .tbd-prose ol { padding-left: 1.3em; }
.tbd-prose li + li { margin-top: .5em; }
.tbd-prose a { text-decoration: underline; text-underline-offset: 3px; }
.tbd-prose blockquote {
  margin-inline: 0; padding: var(--tbd-4) var(--tbd-6);
  border-left: 3px solid var(--tbd-blue); background: var(--tbd-surface-2);
  border-radius: 0 var(--tbd-radius-sm) var(--tbd-radius-sm) 0; color: var(--tbd-muted);
}
.tbd-prose strong { color: var(--tbd-navy); }

/* ---------- Kartu artikel ---------- */
.tbd-post {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius); overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-post:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow); transform: translateY(-2px); }
.tbd-post__media { aspect-ratio: 16 / 9; background: var(--tbd-surface-2); overflow: hidden; }
.tbd-post__media img { width: 100%; height: 100%; object-fit: cover; }
.tbd-post__body { padding: var(--tbd-5); display: flex; flex-direction: column; gap: var(--tbd-2); flex: 1; }
.tbd-post__title {
  font-family: var(--tbd-font-head); font-size: 17px; font-weight: 700;
  line-height: 1.35; letter-spacing: -.015em; margin: 0;
}
.tbd-post__title a { color: var(--tbd-navy); }
.tbd-post__title a:hover { color: var(--tbd-blue-text); text-decoration: none; }
.tbd-post__excerpt { font-size: 14.5px; color: var(--tbd-muted); margin: 0; }
.tbd-post__meta {
  margin-top: auto; padding-top: var(--tbd-3);
  font-size: 13px; color: var(--tbd-muted);
  display: flex; align-items: center; gap: 8px;
}
.tbd-post__meta span + span::before { content: "•"; margin-right: 8px; color: #B8C4D6; }

/* Kartu sorotan — mendatar di layar lebar. */
.tbd-post--feature { display: grid; grid-template-columns: 1.15fr 1fr; }
/* Artikel sorotan tanpa gambar tetap memakai lebar penuh. */
.tbd-post--feature > *:only-child { grid-column: 1 / -1; }
.tbd-post--feature .tbd-post__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
.tbd-post--feature .tbd-post__body { padding: var(--tbd-10); justify-content: center; }
.tbd-post--feature .tbd-post__title { font-size: clamp(20px, 2.2vw, 27px); }

/* ---------- Etalase video ----------
   Kartunya tegak 9:16 mengikuti bentuk aslinya — video ini konten TikTok dan
   rekaman siaran, memaksanya jadi mendatar berarti memotong isinya. */
/* Jumlah kolom mengikuti jumlah video (diisi templat lewat --tbd-kartu).
   Dengan auto-fit, enam video di lebar 1160px terbagi jadi lima kolom plus
   satu kartu yatim di baris kedua. */
.tbd-videos {
  display: grid;
  grid-template-columns: repeat(var(--tbd-kartu, 6), minmax(0, 1fr));
  gap: var(--tbd-5);
}
.tbd-video {
  position: relative; margin: 0;
  border-radius: var(--tbd-radius); overflow: hidden;
  background: var(--tbd-navy);
  border: 1px solid var(--tbd-line);
  box-shadow: var(--tbd-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tbd-video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16; object-fit: cover;
  background: var(--tbd-navy);
}
.tbd-video:hover { transform: translateY(-3px); box-shadow: var(--tbd-shadow-lg); }

/* Judul mengambang di bawah video, di atas gradasi gelap supaya tetap
   terbaca berapa pun terangnya isi video di baliknya. */
.tbd-video__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--tbd-8) var(--tbd-4) var(--tbd-3);
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6, 18, 38, .82));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Tombol putar — hanya dipasang JS untuk pengunjung yang minta hemat-gerak,
   yang videonya sengaja tidak diputar otomatis. Tanpa tombol ini kartunya
   cuma poster diam tanpa penanda apa pun, dan terbaca seperti video rusak. */
.tbd-video__putar {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(6, 18, 38, .30);
}
.tbd-video__putar:hover { background: rgba(6, 18, 38, .16); }
.tbd-video__putarikon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 18px rgba(6, 18, 38, .35);
  /* Segitiga putar digambar dari border supaya tidak perlu berkas ikon. */
  position: relative;
}
.tbd-video__putarikon::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--tbd-navy);
}

@media (max-width: 1024px) {
  .tbd-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tbd-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-3); }
  .tbd-video__label { font-size: 12px; padding: var(--tbd-6) var(--tbd-3) var(--tbd-2); }
}
@media (prefers-reduced-motion: reduce) {
  .tbd-video:hover { transform: none; }
}

/* ---------- Bukti dashboard ----------
   Tiap bukti adalah satu baris: tangkapan layar di satu sisi, penjelasannya di
   sisi lain, arahnya berselang-seling seperti baris layanan. Tangkapan yang
   ditumpuk di tengah dengan keterangan menggantung di bawahnya terlihat seperti
   lampiran, bukan bagian halaman.

   Bingkai jendela perambannya bukan hiasan: tangkapan mentah yang ditempel
   begitu saja gampang terbaca sebagai grafik buatan desainer; dengan batang
   jendela di atasnya pembaca langsung tahu ini layar aplikasi yang dipotret. */
.tbd-bukti { display: grid; gap: var(--tbd-16); }

.tbd-bukti__item {
  display: grid; margin: 0;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--tbd-10);
  align-items: center;
}
.tbd-bukti__item--balik .tbd-bukti__layar { order: 2; }

.tbd-bukti__layar {
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  overflow: hidden;
  background: var(--tbd-surface);
  box-shadow: var(--tbd-shadow-lg);
  /* --tbd-lebar diisi dari ukuran asli berkasnya, jadi tangkapan tidak pernah
     direntangkan melebihi ukurannya sendiri lalu jadi buram. */
  max-width: var(--tbd-lebar, 100%);
  margin-inline: auto;
}
.tbd-bukti__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--tbd-4); height: 34px;
  background: var(--tbd-surface-2);
  border-bottom: 1px solid var(--tbd-line);
}
.tbd-bukti__titik {
  width: 9px; height: 9px; border-radius: 50%;
  background: #D4DBE6; flex: none;
}
.tbd-bukti__alamat {
  margin-left: var(--tbd-3);
  font-size: 12px; font-weight: 600; color: var(--tbd-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tinggi mengikuti gambar: keempat tangkapan rasionya berbeda-beda, dan rasio
   tetap akan memotong salah satunya. */
.tbd-bukti__layar img { display: block; width: 100%; height: auto; }

.tbd-bukti__teks p { margin: var(--tbd-3) 0 0; color: var(--tbd-muted); font-size: 15px; line-height: 1.65; }
.tbd-bukti__periode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--tbd-radius-pill);
  background: var(--tbd-surface-2); border: 1px solid var(--tbd-line);
  margin-top: var(--tbd-4) !important;
  font-size: 13px; font-weight: 600; color: var(--tbd-text);
}
.tbd-bukti__periode svg { color: var(--tbd-blue-text); flex: none; }

@media (max-width: 860px) {
  .tbd-bukti { gap: var(--tbd-12); }
  /* Kembali menumpuk: gambar dulu, teks di bawahnya — untuk kedua arah. */
  .tbd-bukti__item { grid-template-columns: 1fr; gap: var(--tbd-5); }
  .tbd-bukti__item--balik .tbd-bukti__layar { order: 0; }
}

/* ---------- TBD Client (beranda) ----------
   Ditaruh menempel pada Bukti dashboard di atas karena keduanya bicara dengan
   bahasa yang sama: tangkapan layar aplikasi di dalam bingkai jendela peramban.
   Bedanya bidang ini gelap, jadi bingkainya tidak bisa memakai kelas yang sama —
   garis --tbd-line dan latar --tbd-surface-2 hilang tertelan navy.

   Seluruh seksi berlatar navy. Judul dan lead di bawah kelas ini WAJIB ditimpa
   warnanya: .tbd-h2 bawaannya navy dan .tbd-lead abu — keduanya nyaris tak
   terbaca di atas latar sendiri. */
.tbd-client {
  /* Gradasi tipis, bukan navy rata: bidang setinggi ini terlihat mati kalau
     datar. Keduanya tetap gelap, jadi teks putih tetap di atas 12:1. */
  background: linear-gradient(158deg, var(--tbd-navy-soft), var(--tbd-navy) 58%);
  color: #fff;
}
.tbd-client .tbd-h2 { color: #fff; }
.tbd-client .tbd-lead { color: #B9C9DF; max-width: 52ch; }

/* Naskah di kiri, tangkapan layar di kanan. Kolomnya minmax(0, …) — tanpa itu
   lebar minimum kolom grid mengikuti isi terlebarnya (gambar 1400px), dan
   seluruh halaman ikut melebar. */
.tbd-client__atas {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--tbd-10);
  align-items: center;
}

.tbd-client__layar {
  min-width: 0;
  border-radius: var(--tbd-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  /* Bayangan --tbd-shadow-lg memakai navy transparan yang tidak terlihat di
     atas navy; di sini yang bekerja justru bayangan hitam. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  /* Elemennya <button> supaya bisa dijangkau papan ketik, jadi gaya bawaan
     tombol dinolkan dulu — kalau tidak, ia mewarisi padding, warna latar,
     dan huruf tombol sistem, dan bingkai jendelanya jadi berantakan. */
  display: block; width: 100%; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: zoom-in;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tbd-client__layar:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(0, 0, 0, .46); }
.tbd-client__layar:focus-visible { outline: 3px solid var(--tbd-lime); outline-offset: 3px; }
.tbd-client__layar[disabled] { cursor: default; }
.tbd-client__layar[disabled]:hover { transform: none; }

/* Penanda "bisa diperbesar". Muncul lembut saat disorot, tidak menutupi isi. */
.tbd-client__zoom {
  position: absolute; right: 12px; bottom: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11, 34, 68, .82); color: #fff;
  opacity: .85; transition: opacity .18s ease;
}
.tbd-client__layar:hover .tbd-client__zoom { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tbd-client__layar, .tbd-client__zoom { transition: none; }
  .tbd-client__layar:hover { transform: none; }
}

/* ---------- Tampilan penuh tangkapan layar TBD Client ---------- */
.tbd-shotbox {
  border: 0; padding: 0; background: transparent;
  width: min(96vw, 1400px); max-height: 92vh;
  overflow: visible;
}
.tbd-shotbox::backdrop { background: rgba(6, 18, 38, .82); backdrop-filter: blur(4px); }
.tbd-shotbox__inner { position: relative; }
.tbd-shotbox__img {
  display: block; width: 100%; height: auto;
  max-height: 92vh; object-fit: contain;
  border-radius: var(--tbd-radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: #fff;
}
.tbd-shotbox__tutup {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28);
  background: var(--tbd-navy); color: #fff;
}
.tbd-shotbox__tutup:hover { background: #14335E; }
@media (max-width: 560px) {
  .tbd-shotbox__tutup { top: -10px; right: -10px; width: 36px; height: 36px; }
}
.tbd-client__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--tbd-4);
  background: #E9EEF6;
  border-bottom: 1px solid #D8E1EE;
}
.tbd-client__titik { width: 9px; height: 9px; border-radius: 50%; background: #B9C6D8; flex: none; }
/* min-width: 0 wajib: bawaan flex item adalah min-width auto, jadi teks
   white-space: nowrap ini bisa memaksa batang jendelanya lebih lebar dari
   layarnya sendiri dan menggeser seluruh halaman di ponsel. */
.tbd-client__alamat {
  min-width: 0;
  margin-left: var(--tbd-3);
  font-size: 12px; font-weight: 600; color: #5A6B85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbd-client__layar img { display: block; width: 100%; height: auto; }

.tbd-client__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tbd-4);
  margin-top: var(--tbd-16);
}
/* Kartu kaca, bukan kartu putih: enam kotak putih di atas navy akan berebut
   perhatian dengan tangkapan layar di atasnya, padahal yang harus dilihat
   lebih dulu adalah layarnya. */
.tbd-client__fitur {
  padding: var(--tbd-6);
  border-radius: var(--tbd-radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.tbd-client__ikon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--tbd-lime);
  margin-bottom: var(--tbd-4);
}
.tbd-client__ikon svg { width: 22px; height: 22px; }
/* Huruf besar dibuat lewat CSS, bukan diketik di templat: pembaca layar
   mengeja kata yang ditulis kapital semua huruf per huruf. */
.tbd-client__judul {
  margin: 0;
  font-family: var(--tbd-font-head);
  font-size: 14px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35; color: #fff;
}
.tbd-client__ket { margin: var(--tbd-2) 0 0; font-size: 14.5px; line-height: 1.6; color: #B9C9DF; }

/* Kalimat penutup dipisah garis tipis supaya terbaca sebagai simpulan seksi,
   bukan sebagai kartu ketujuh yang kehilangan kotaknya. */
.tbd-client__tutup {
  margin-top: var(--tbd-12);
  padding-top: var(--tbd-10);
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.tbd-client__slogan {
  margin: 0;
  font-family: var(--tbd-font-head);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  color: #fff; text-wrap: balance;
}
/* Lime dipakai di sini karena kontrasnya 11,3:1 di atas navy — sama seperti
   .tbd-eyebrow--onNavy — dan ukurannya masih cukup besar untuk warna aksen. */
.tbd-client__sub { margin: var(--tbd-3) 0 0; font-size: 15.5px; font-weight: 600; color: var(--tbd-lime); }

@media (max-width: 1024px) {
  .tbd-client__atas { grid-template-columns: minmax(0, 1fr); gap: var(--tbd-8); }
  .tbd-client__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--tbd-12); }
}
@media (max-width: 620px) {
  .tbd-client__grid { grid-template-columns: minmax(0, 1fr); }
  .tbd-client__tutup { margin-top: var(--tbd-10); padding-top: var(--tbd-8); }
}

/* ---------- Foto set siaran ----------
   Berkasnya sudah berbingkai ponsel dengan latar transparan, jadi tidak
   dikurung kartu lagi — kartu di dalam kartu terlihat ganda. */
.tbd-studio {
  display: grid;
  grid-template-columns: repeat(var(--tbd-kartu, 5), minmax(0, 1fr));
  gap: var(--tbd-5);
  align-items: end;
}
.tbd-studio__item { margin: 0; }
.tbd-studio__item img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 22px rgba(11, 34, 68, .16));
}
.tbd-studio__item figcaption {
  margin-top: var(--tbd-3);
  text-align: center;
  font-size: 13px; font-weight: 600; color: var(--tbd-muted);
}
@media (max-width: 900px) {
  .tbd-studio { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--tbd-8); }
}
@media (max-width: 560px) {
  .tbd-studio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Poster kampanye ---------- */
.tbd-kampanye {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--tbd-12);
  align-items: center;
}
.tbd-kampanye__poster img {
  display: block; width: 100%; height: auto;
  border-radius: var(--tbd-radius);
  box-shadow: var(--tbd-shadow-lg);
}

.tbd-poin { list-style: none; margin: var(--tbd-6) 0 0; padding: 0; }
.tbd-poin li {
  display: flex; align-items: flex-start; gap: var(--tbd-3);
  padding: var(--tbd-2) 0;
  color: var(--tbd-text); font-size: 16px; line-height: 1.55;
}
/* Ikon centang tidak boleh ikut mengecil saat teksnya membungkus ke baris kedua. */
.tbd-poin svg { flex: none; margin-top: 3px; color: var(--tbd-green); }

@media (max-width: 860px) {
  .tbd-kampanye { grid-template-columns: 1fr; gap: var(--tbd-8); }
  /* Poster potret setinggi layar mendorong seluruh isi turun di ponsel. */
  .tbd-kampanye__poster { max-width: 320px; margin-inline: auto; }
}

/* ---------- Logo klien ----------
   Semua logo sudah diseragamkan jadi siluet PUTIH, jadi bisa berdiri di atas
   satu bidang navy tanpa terlihat tambal sulam — mengikuti gaya slide Company
   Profile. Karena warnanya seragam, ubin tidak diperlukan lagi: logo tampil
   dengan bentuk aslinya, hanya tingginya yang disamakan. */
.tbd-klien-sec {
  background: var(--tbd-navy);
  /* Garis pemisah tipis yang memudar di ujung, sama seperti footer. */
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 30%, rgba(255,255,255,.14) 70%, transparent) 1;
}
.tbd-klien-sec .tbd-eyebrow { color: #8FB4E8; }

.tbd-klien {
  flex: 0 0 auto; margin: 0;
  display: flex; align-items: center;
  /* Reset tombol: logonya kini <button> pembuka pratinjau, bukan lagi <figure>.
     Tanpa reset ini muncul bingkai dan latar tombol bawaan browser. */
  border: 0; padding: 0; background: none; font: inherit; cursor: pointer;
  /* Diredam sedikit supaya deretannya tidak lebih ramai dari isi halaman,
     lalu penuh saat disentuh kursor. */
  opacity: .72;
  transition: opacity .22s ease, transform .22s ease;
}
.tbd-klien:focus-visible {
  outline: 2px solid #8FB4E8; outline-offset: 6px; border-radius: 6px; opacity: 1;
}
/* Ukurannya dipatok LANGSUNG di gambar, bukan lewat height:100% pada figur.
   Persentase itu tidak pernah terpecahkan — figurnya tidak punya tinggi pasti
   untuk dijadikan acuan, jadi gambar jatuh ke tinggi alaminya, meluap dari
   barisnya, lalu terpotong overflow milik marquee.

   Semua berkas logo sudah dicetak ke kanvas berasio sama (900x300), jadi di
   sini cukup satu ukuran tetap — tidak perlu pembatas lebar atau object-fit. */
.tbd-klien img { width: 132px; height: 44px; display: block; }
.tbd-klien:hover { opacity: 1; transform: translateY(-2px); }

@media (max-width: 560px) {
  .tbd-klien img { width: 102px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbd-klien:hover { transform: none; }
}

/* ---------- Pratinjau logo klien (dialog) ----------
   Dipakai bersama tombol .tbd-klien. Panelnya navy karena logonya siluet
   putih — di atas bidang terang logonya lenyap. */
/* ---------- Semua logo klien dalam satu layar ----------
   Deret logo berjalan terus dan hanya memuat sebagian di layar. Dialog ini
   memperlihatkan seluruhnya sekaligus, dengan namanya — supaya pengunjung
   (dan pemilik situs) bisa memastikan brand mana saja yang sudah masuk. */
.tbd-logoall {
  border: 0; padding: 0; color: #fff;
  width: min(94vw, 1040px);
  max-height: 88vh;
  border-radius: var(--tbd-radius);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(0, 116, 218, .3) 0%, rgba(0, 116, 218, 0) 62%),
    linear-gradient(180deg, var(--tbd-navy-soft), var(--tbd-navy));
  box-shadow: var(--tbd-shadow-lg);
  overflow: hidden;
}
.tbd-logoall::backdrop { background: rgba(6, 18, 38, .78); backdrop-filter: blur(4px); }
.tbd-logoall__inner { display: flex; flex-direction: column; max-height: 88vh; }
.tbd-logoall__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--tbd-4);
  padding: var(--tbd-6) var(--tbd-6) var(--tbd-4);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.tbd-logoall__judul {
  margin: 0; font-family: var(--tbd-font-head); font-weight: 700;
  font-size: 19px; color: #fff; text-align: left;
}
.tbd-logoall__jumlah {
  display: block; margin-top: 2px;
  font-family: var(--tbd-font); font-weight: 500; font-size: 13px;
  color: #8FA3C0;
}
.tbd-logoall__tutup {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08); color: #fff;
}
.tbd-logoall__tutup:hover { background: rgba(255, 255, 255, .16); }
/* Daftarnya yang menggulung, bukan seluruh dialog — judul dan tombol tutup
   tetap terlihat saat digulung. */
.tbd-logoall__grid {
  list-style: none; margin: 0; padding: var(--tbd-6);
  overflow-y: auto;
  display: grid; gap: var(--tbd-4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tbd-logoall__sel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tbd-3);
  padding: var(--tbd-4) var(--tbd-3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}
/* Tanpa baris nama, petaknya dibuat berproporsi tetap supaya logo yang lebar
   (Domino's) dan yang tinggi (Cap Kapal) tetap berdiri di petak seukuran. */
.tbd-logoall__sel { aspect-ratio: 16 / 9; }
.tbd-logoall__sel img { width: 100%; max-width: 128px; height: auto; display: block; }

/* Tautan "More brands" — sengaja kecil dan tenang, bukan tombol penuh. */
.tbd-klien-lagi {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer;
  padding: var(--tbd-2) var(--tbd-3);
  font-family: var(--tbd-font); font-size: 13.5px; font-weight: 600;
  color: #A9BDD8;
}
.tbd-klien-lagi:hover { color: #fff; }
.tbd-klien-lagi svg { transition: transform .18s ease; }
.tbd-klien-lagi:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .tbd-klien-lagi:hover svg { transform: none; }
}

@media (max-width: 560px) {
  .tbd-logoall__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: var(--tbd-4); }
  .tbd-logoall__judul { font-size: 17px; }
}

.tbd-logobox {
  border: 0; padding: 0; background: transparent; color: #fff;
  width: min(92vw, 440px);
  /* Kotak dialog bawaan browser dibersihkan; tampilannya diatur .__inner. */
  overflow: visible;
}
.tbd-logobox::backdrop {
  background: rgba(6, 18, 38, .72);
  backdrop-filter: blur(4px);
}
.tbd-logobox__inner { position: relative; }
.tbd-logobox__panel {
  display: grid; place-items: center;
  padding: var(--tbd-16) var(--tbd-10);
  border-radius: var(--tbd-radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 116, 218, .35) 0%, rgba(0, 116, 218, 0) 60%),
    linear-gradient(180deg, var(--tbd-navy-soft), var(--tbd-navy));
  box-shadow: var(--tbd-shadow-lg);
}
.tbd-logobox__img {
  width: 100%; max-width: 340px; height: auto; display: block;
}
.tbd-logobox__nama {
  margin: var(--tbd-5) 0 0;
  text-align: center;
  font-family: var(--tbd-font-head); font-weight: 700; font-size: 17px;
  color: #fff;
}
.tbd-logobox__tutup {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: var(--tbd-navy);
  color: #fff; cursor: pointer;
  transition: background .18s ease;
}
.tbd-logobox__tutup:hover { background: var(--tbd-navy-soft); }
.tbd-logobox__tutup:focus-visible { outline: 2px solid #8FB4E8; outline-offset: 2px; }
@media (max-width: 560px) {
  .tbd-logobox__tutup { top: 8px; right: 8px; }
}
/* Muncul dengan sedikit skala + pudar. Animasi ditaruh di .__inner, bukan di
   dialog-nya, supaya berjalan tiap kali dibuka tanpa perlu @starting-style. */
.tbd-logobox[open] .tbd-logobox__inner {
  animation: tbd-logobox-masuk .2s ease both;
}
@keyframes tbd-logobox-masuk {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tbd-logobox[open] .tbd-logobox__inner { animation: none; }
}

/* ---------- Tim ---------- */
.tbd-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--tbd-5); }
/* Jumlah kolomnya dikirim dari partials/tim.php lewat --tbd-tim, dihitung dari
   jumlah orang yang benar-benar tampil. Dibiarkan mengalir sendiri, deretnya
   gampang menyisakan satu kartu menggantung sendirian di baris kedua. */
@media (min-width: 1040px) {
  .tbd-team { grid-template-columns: repeat(var(--tbd-tim, 4), minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 1039px) {
  .tbd-team { grid-template-columns: repeat(var(--tbd-tim-tablet, 3), minmax(0, 1fr)); }
}
.tbd-member {
  text-align: center;
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  padding: var(--tbd-4) var(--tbd-4) var(--tbd-5);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-member:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow); transform: translateY(-2px); }
/* Panel di belakang orangnya. Sebelumnya diisi --tbd-surface-2 — warna yang
   sama persis dengan section-nya — sehingga panel ini tidak pernah terlihat
   dan foto tim seakan mengambang di halaman kosong.

   isolation: isolate mengurung pencampuran warna di bawah supaya hanya
   bercampur dengan gradasi panel ini, tidak menembus ke kartu putihnya. */
.tbd-member__photo {
  aspect-ratio: 1; border-radius: 12px;
  overflow: hidden; isolation: isolate; margin-bottom: var(--tbd-4);
  background:
    radial-gradient(76% 58% at 50% 104%, #D3E3F8 0%, rgba(211, 227, 248, 0) 74%),
    linear-gradient(180deg, #F4F8FD, #E6EFFB);
}
/* Foto tim berlatar PUTIH PEKAT — hanya keempat sudutnya yang transparan,
   jadi panel di atas tidak akan muncul begitu saja. multiply membuat putih
   berperilaku seperti transparan di atas panel terang, sementara sosok
   orangnya tetap utuh: panelnya cukup muda sehingga warna bajunya nyaris
   tidak bergeser. */
.tbd-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  mix-blend-mode: multiply;
}
.tbd-member__name { font-family: var(--tbd-font-head); font-weight: 700; color: var(--tbd-navy); font-size: 16px; }
.tbd-member__role { font-size: 13.5px; color: var(--tbd-muted); margin-top: 2px; }

/* ---------- Sorotan CEO (beranda) + halaman biografi ----------
   Beranda menampilkan satu kartu besar: panel foto navy di kiri, kutipan visi
   di kanan. Panelnya memakai bahasa yang sama dengan panel foto kartu tim —
   gradasi dengan cahaya dari bawah — hanya digelapkan ke navy supaya cutout
   foto (bukan foto berlatar putih) tampil seperti berdiri di atas panggung. */
.tbd-ceo {
  display: grid; grid-template-columns: minmax(300px, 2fr) 3fr;
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  box-shadow: var(--tbd-shadow-lg);
  overflow: hidden;
}
.tbd-ceo__panel {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 420px;
  padding-inline: var(--tbd-6);
  background:
    radial-gradient(90% 62% at 50% 106%, rgba(0, 116, 218, .55) 0%, rgba(0, 116, 218, 0) 72%),
    linear-gradient(180deg, var(--tbd-navy-soft), var(--tbd-navy));
}
/* Lingkaran garis tipis di belakang kepala — aksen sunyi, bukan hiasan ramai. */
.tbd-ceo__panel::before {
  content: "";
  position: absolute; inset: auto;
  top: 8%; left: 50%; transform: translateX(-50%);
  width: min(78%, 300px); aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.tbd-ceo__foto {
  position: relative;
  display: block;
  width: auto; max-width: 88%;
  max-height: 460px;
  margin-top: var(--tbd-8);
}
.tbd-ceo__isi { padding: var(--tbd-10); align-self: center; }
/* Tanda kutip dekoratif digambar lewat pseudo-elemen supaya markup tetap bersih. */
.tbd-ceo__isi::before {
  content: "\201C";
  display: block;
  font-family: var(--tbd-font-head);
  font-size: 84px; font-weight: 800; line-height: .6;
  color: var(--tbd-blue);
  opacity: .28;
  margin-bottom: var(--tbd-3);
}
.tbd-ceo__label {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tbd-blue-text);
  margin-bottom: var(--tbd-4);
}
.tbd-ceo__kutip {
  margin: 0;
  font-family: var(--tbd-font-head);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700; line-height: 1.45; letter-spacing: -.015em;
  color: var(--tbd-navy);
}
.tbd-ceo__who { margin-top: var(--tbd-6); }
.tbd-ceo__nama { display: block; font-family: var(--tbd-font-head); font-weight: 800; font-size: 17px; color: var(--tbd-navy); }
.tbd-ceo__jabatan { display: block; font-size: 13.5px; color: var(--tbd-muted); margin-top: 2px; }
.tbd-ceo__aksi { display: flex; flex-wrap: wrap; gap: var(--tbd-3); margin-top: var(--tbd-6); }

@media (max-width: 900px) {
  .tbd-ceo { grid-template-columns: minmax(0, 1fr); }
  .tbd-ceo__panel { min-height: 0; padding-top: var(--tbd-8); }
  .tbd-ceo__foto { max-height: 340px; }
  .tbd-ceo__isi { padding: var(--tbd-6); }
}

/* --- Hero halaman biografi: cutout di panel kaca + pelat nama menumpang. --- */
.tbd-ceo-hero__media {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(88% 60% at 50% 104%, rgba(0, 116, 218, .5) 0%, rgba(0, 116, 218, 0) 70%),
    rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
}
.tbd-ceo-hero__media img { object-position: center bottom; padding-top: var(--tbd-6); }
.tbd-ceo-hero__plate {
  position: absolute; left: var(--tbd-4); bottom: var(--tbd-4);
  display: block;
  padding: 10px 16px;
  background: rgba(11, 34, 68, .78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--tbd-radius-sm);
}
.tbd-ceo-hero__nama { display: block; font-family: var(--tbd-font-head); font-weight: 800; font-size: 16px; color: #fff; }
.tbd-ceo-hero__jabatan { display: block; font-size: 12.5px; color: #B9C9DF; margin-top: 1px; }

/* --- Prosa cerita di tengah halaman. --- */
.tbd-prose--tengah { margin-inline: auto; }

/* Kotak sorot paragraf AI: satu-satunya penekanan visual di tengah cerita. */
.tbd-ceo-ai {
  display: flex; gap: var(--tbd-4); align-items: flex-start;
  background: #EAF3FD;
  border: 1px solid #CFE3F9;
  border-radius: var(--tbd-radius);
  padding: var(--tbd-5) var(--tbd-6);
}
.tbd-ceo-ai__icon { flex: 0 0 auto; color: var(--tbd-blue-text); margin-top: 3px; }
.tbd-ceo-ai p { margin: 0; font-size: 16px; }

/* --- Tiga pola masalah (alasan agensi dibangun). --- */
.tbd-ceo-masalah { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--tbd-5); }
.tbd-ceo-masalah__item {
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  padding: var(--tbd-6);
}
.tbd-ceo-masalah__icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #EAF3FD; color: var(--tbd-blue-text);
  margin-bottom: var(--tbd-4);
}
.tbd-ceo-masalah__item p { margin: 0; color: #26344B; line-height: 1.65; }

/* Pernyataan "Dari situlah TBD Agency lahir" — dibuat sebagai momen, bukan paragraf. */
.tbd-ceo-lahir { max-width: 720px; margin-inline: auto; text-align: center; }
.tbd-ceo-lahir__akibat { margin: 0; color: var(--tbd-muted); line-height: 1.7; }
.tbd-ceo-lahir__utama {
  margin: var(--tbd-4) 0;
  font-family: var(--tbd-font-head);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--tbd-navy);
}
.tbd-ceo-lahir__teks { margin: 0; color: #26344B; line-height: 1.7; }

/* --- Empat kartu fokus. Dua kolom tetap, bukan auto-fit: dengan empat kartu,
       auto-fit kerap menghasilkan tiga kolom plus satu kartu yatim di baris
       kedua. Susunan 2x2 selalu seimbang dan memberi ruang untuk teksnya
       yang panjang. --- */
.tbd-ceo-fokus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-5); }
@media (max-width: 640px) { .tbd-ceo-fokus { grid-template-columns: minmax(0, 1fr); } }
.tbd-ceo-fokus__card {
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  padding: var(--tbd-6);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-ceo-fokus__card:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow); transform: translateY(-2px); }
.tbd-ceo-fokus__icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #EAF3FD; color: var(--tbd-blue-text);
  margin-bottom: var(--tbd-4);
}
.tbd-ceo-fokus__card p { margin: var(--tbd-2) 0 0; font-size: 14.5px; color: var(--tbd-muted); line-height: 1.65; }

/* --- Kutipan keyakinan: kartu navy selebar wadah, teks di tengah. --- */
.tbd-ceo-believe { max-width: 900px; margin-inline: auto; text-align: center; padding: var(--tbd-12) var(--tbd-10); }
.tbd-ceo-believe__label {
  display: block; margin-bottom: var(--tbd-4);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tbd-lime);
}
.tbd-ceo-believe__teks {
  margin: 0;
  font-family: var(--tbd-font-head);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700; line-height: 1.55; letter-spacing: -.01em;
  color: #fff;
}

/* --- Pesan dari founder: kartu tengah dengan foto bundar. --- */
.tbd-ceo-pesan {
  max-width: 780px; margin-inline: auto;
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  box-shadow: var(--tbd-shadow);
  padding: var(--tbd-10);
  text-align: center;
}
.tbd-ceo-pesan__ava {
  display: inline-block; width: 84px; height: 84px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #EAF3FD;
  margin-bottom: var(--tbd-4);
  /* Latar lembut supaya cutout transparan tidak menggantung di bidang putih. */
  background: linear-gradient(180deg, #F4F8FD, #D9E7F9);
}
.tbd-ceo-pesan__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tbd-ceo-pesan__teks { margin: 0 0 1em; color: #26344B; line-height: 1.75; font-size: 16.5px; }
.tbd-ceo-pesan__teks:last-of-type { margin-bottom: 0; }
.tbd-ceo-pesan__ttd { margin-top: var(--tbd-6); }
.tbd-ceo-pesan__nama { display: block; font-family: var(--tbd-font-head); font-weight: 800; font-size: 19px; color: var(--tbd-navy); }
.tbd-ceo-pesan__jabatan { display: block; font-size: 13.5px; color: var(--tbd-muted); margin-top: 3px; }

@media (max-width: 560px) {
  .tbd-ceo-believe { padding: var(--tbd-8) var(--tbd-5); }
  .tbd-ceo-pesan { padding: var(--tbd-6) var(--tbd-5); }
}

/* =====================================================================
   Halaman TBD Partner
   ===================================================================== */

/* Logo di hero berdiri di panel terang, bukan langsung di atas navy: sebagian
   bentuk logonya dipisahkan garis putih, dan di atas latar gelap garis itu
   terbaca sebagai goresan yang tidak disengaja. */
/* Logo hero berdiri langsung di atas navy — tanpa panel, tanpa bingkai.
   Yang dipasang di sini versi siluet putihnya; berkas berwarna aslinya dibuat
   untuk latar terang dan akan lenyap sebagian di sini. */
.tbd-partner-logohero { justify-self: center; width: min(100%, 460px); }
.tbd-partner-logohero img { width: 100%; height: auto; display: block; }

/* --- Bagian "Apa itu": teks kiri, dua sisi ekosistem di kanan --- */
.tbd-partner-apa { grid-template-columns: 320px 1fr; }
/* minmax(0, 1fr), bukan 1fr: kolom grid bawaannya tidak boleh lebih sempit
   dari isinya, jadi kartu berisi daftar panjang bisa memaksa baris melebar
   melewati wadahnya. */
/* Kartunya diregangkan sama tinggi (align-items: stretch), bukan dirapatkan ke
   tengah: begitu masing-masing punya tombol di kaki, dua kartu yang tingginya
   beda membuat tombolnya tidak sejajar — dan yang lebih tinggi terbaca sebagai
   pilihan yang lebih utama, padahal keduanya setara. */
.tbd-partner-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--tbd-5); align-items: stretch;
}
.tbd-partner-duo__logo {
  align-self: center;
  display: grid; place-items: center;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(75% 75% at 50% 35%, #FFFFFF 0%, #EAF3FD 100%);
  border: 1px solid var(--tbd-line);
  box-shadow: var(--tbd-shadow);
}
.tbd-partner-duo__logo img { width: 74px; height: auto; display: block; }
.tbd-partner-sisi { gap: var(--tbd-4); }
.tbd-partner-sisi__head { display: flex; align-items: center; gap: var(--tbd-3); }
.tbd-partner-sisi__head .tbd-h3 { margin: 0; }
/* margin-top: auto mendorong tombol ke dasar kartu: jumlah poin di kedua daftar
   bisa berubah sewaktu-waktu, dan tanpa ini tombolnya ikut naik-turun mengikuti
   daftar terpendek. */
.tbd-partner-sisi__aksi { margin-top: auto; padding-top: var(--tbd-3); }
/* Tombolnya selebar kartu supaya kedua sisi terlihat setara — tombol pill
   selebar teksnya sendiri akan berbeda lebar mengikuti panjang label. */
.tbd-partner-sisi__aksi .tbd-btn { width: 100%; justify-content: center; }
/* Daftar di dalam kartu tidak perlu jarak pembuka sebesar versi lepasnya. */
.tbd-poin--rapat { margin-top: 0; }
.tbd-poin--rapat li { font-size: 15px; padding: 5px 0; }

@media (max-width: 1024px) {
  .tbd-partner-apa { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Logo penghubung dilepas di layar sempit: begitu kartunya menumpuk, ia
     hanya jadi jeda besar di tengah tumpukan. */
  .tbd-partner-duo { grid-template-columns: 1fr; }
  .tbd-partner-duo__logo { display: none; }
}

/* Catatan sumber data di bawah pita statistik. */
.tbd-partner-catatan {
  margin: var(--tbd-4) 0 0;
  text-align: center; font-size: 12.5px; color: var(--tbd-muted);
}

/* --- Kartu yang isinya rata tengah (solusi & layanan brand) --- */
.tbd-card--tengah { text-align: center; align-items: center; }
.tbd-card--tengah .tbd-card__icon { margin-inline: auto; }

/* --- "Kenapa brand memilih": daftar alasan + foto creator ---
   Fotonya menyatu ke tepi panel (tanpa jarak, tanpa bingkai sendiri) dan
   mengisi tinggi penuh. Sebelumnya foto itu kotak mengambang di tengah bidang
   navy dengan ruang kosong mengelilinginya — dari situ panelnya terbaca datar
   dan bolong. */
.tbd-partner-why {
  display: grid; grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border-radius: var(--tbd-radius);
  overflow: hidden;
  box-shadow: var(--tbd-shadow-lg);
  /* Gradasi diagonal + semburat biru di sudut kiri atas: bidang navy rata
     tanpa arah cahaya terlihat mati, apalagi seluas ini. */
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(0, 116, 218, .38) 0%, rgba(0, 116, 218, 0) 62%),
    linear-gradient(155deg, var(--tbd-navy-soft) 0%, var(--tbd-navy) 58%);
}
.tbd-partner-why__isi { padding: var(--tbd-12) var(--tbd-10); }
.tbd-partner-why .tbd-h2 { margin-top: 0; color: #fff; }

/* Dua kolom baris berbingkai. Tiap alasan jadi punya bidangnya sendiri, jadi
   deretannya terbaca sebagai daftar yang padat, bukan teks menggantung. */
.tbd-partner-why__poin {
  list-style: none; margin: var(--tbd-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-3);
}
.tbd-partner-why__poin li {
  display: flex; align-items: center; gap: var(--tbd-3);
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--tbd-radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #E4ECF7; font-size: 14.5px; line-height: 1.4;
  transition: background .18s ease, border-color .18s ease;
}
.tbd-partner-why__poin li:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.tbd-partner-why__ceklis {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  /* Lime, bukan hijau tua: di atas navy hijau tua nyaris hilang. */
  background: rgba(183, 236, 12, .16); color: var(--tbd-lime);
}

/* Foto: mengisi penuh kolomnya, dipotong 8% dari atas — dipotong dari tengah,
   ubun-ubunnya terpangkas; di angka ini kepala utuh dan ponsel di sudut kanan
   bawah masih masuk. */
.tbd-partner-why__foto { position: relative; margin: 0; min-height: 340px; }
/* Fotonya dilepas dari alur (absolute) supaya TINGGI PANEL ditentukan daftar
   alasan di kiri, bukan oleh tinggi alami foto. Waktu masih ikut alur, berkas
   potret 4:5 ini merentang panel sampai 705 px sementara isinya cuma butuh
   sekitar 470 — sisanya kembali jadi ruang kosong seperti versi sebelumnya. */
.tbd-partner-why__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 8%;
}
/* Tepi kiri foto dilarutkan ke warna panel supaya sambungannya tidak berupa
   garis lurus yang memotong panel jadi dua. */
.tbd-partner-why__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--tbd-navy) 0%, rgba(11, 34, 68, .35) 18%, rgba(11, 34, 68, 0) 42%);
}
.tbd-partner-why__badge {
  position: absolute; left: var(--tbd-5); bottom: var(--tbd-5); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--tbd-radius-pill);
  background: rgba(11, 34, 68, .78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-family: var(--tbd-font-head); font-weight: 700; font-size: 13px;
}
.tbd-partner-why__titik {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tbd-lime);
  box-shadow: 0 0 0 0 rgba(183, 236, 12, .6);
  animation: tbd-denyut 2.2s ease-out infinite;
}
@keyframes tbd-denyut {
  0%   { box-shadow: 0 0 0 0 rgba(183, 236, 12, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(183, 236, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(183, 236, 12, 0); }
}

@media (max-width: 860px) {
  /* Ditumpuk: foto di atas, isi di bawah. Larutan tepinya ikut berputar jadi
     dari bawah, mengikuti arah sambungannya yang baru. */
  .tbd-partner-why { grid-template-columns: 1fr; }
  .tbd-partner-why__foto { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .tbd-partner-why__foto::after {
    background: linear-gradient(0deg, var(--tbd-navy) 0%, rgba(11, 34, 68, 0) 38%);
  }
  .tbd-partner-why__isi { padding: var(--tbd-8) var(--tbd-6) var(--tbd-10); }
}
@media (max-width: 560px) {
  .tbd-partner-why__poin { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tbd-partner-why__titik { animation: none; }
}

/* --- Alur kerja 6 langkah (bawaannya 5) ---
   Ditulis dengan dua kelas sekaligus supaya menang atas .tbd-process, yang
   dideklarasikan JAUH DI BAWAH sini. Dengan satu kelas saja, aturan 5 kolom
   milik .tbd-process yang berlaku — dan langkah ke-6 membungkus ke baris
   kedua sementara garis penghubung langkah ke-5 menjulur keluar grid, membuat
   seluruh halaman bisa digeser ke samping. */
.tbd-process.tbd-process--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) {
  .tbd-process.tbd-process--6 { grid-template-columns: repeat(3, 1fr); row-gap: var(--tbd-8); }
  /* Garis penghubung dimatikan begitu langkahnya membungkus ke baris kedua —
     kalau dibiarkan, garisnya menyeberang dari ujung baris ke awal baris
     berikutnya dan alurnya jadi salah dibaca. */
  .tbd-process.tbd-process--6 .tbd-step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .tbd-process.tbd-process--6 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Bagian creator: manfaat di kiri, foto di kanan --- */
.tbd-partner-creator {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--tbd-12); align-items: center;
}
.tbd-partner-manfaat {
  display: grid; gap: var(--tbd-5); margin-top: var(--tbd-8);
}
.tbd-partner-manfaat__item { display: flex; gap: var(--tbd-4); align-items: flex-start; }
.tbd-partner-manfaat__judul {
  display: block; font-family: var(--tbd-font-head); font-weight: 700;
  font-size: 16px; color: var(--tbd-navy);
}
.tbd-partner-manfaat__teks {
  display: block; font-size: 14.5px; color: var(--tbd-muted);
  margin-top: 2px; line-height: 1.6;
}
.tbd-partner-creator__foto {
  margin: 0; border-radius: var(--tbd-radius); overflow: hidden;
  box-shadow: var(--tbd-shadow-lg);
}
.tbd-partner-creator__foto img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .tbd-partner-creator { grid-template-columns: 1fr; gap: var(--tbd-8); }
}

/* Judul opsional di atas deret logo klien (dipakai halaman TBD Partner). */
.tbd-klien-sec__judul { color: #fff; margin-top: 0; }

/* --- Galeri testimoni: tangkapan layar percakapan ---
   Tangkapannya dipajang sebagai bukti, kutipannya diketik ulang di bawah kartu
   supaya tetap terbaca di ponsel dan terbaca mesin pencari — teks di dalam
   gambar tidak terbaca keduanya. */
.tbd-testigal {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tbd-5);
}
.tbd-testigal__item {
  margin: 0; display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  overflow: hidden;
  box-shadow: var(--tbd-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-testigal__item:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow-lg); transform: translateY(-2px); }
/* Reset tombol — seluruh tangkapan layar jadi area klik pembuka pratinjau. */
.tbd-testigal__tombol {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
  border-bottom: 1px solid var(--tbd-line);
}
.tbd-testigal__tombol img { width: 100%; height: auto; display: block; }
.tbd-testigal__tombol:focus-visible { outline: 2px solid var(--tbd-blue); outline-offset: -2px; }
/* Penanda "bisa diperbesar". Tanpa ini tidak ada apa pun yang memberi tahu
   bahwa gambarnya bisa diklik. */
.tbd-testigal__zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11, 34, 68, .82); color: #fff;
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.tbd-testigal__item:hover .tbd-testigal__zoom,
.tbd-testigal__tombol:focus-visible .tbd-testigal__zoom { opacity: 1; transform: none; }
.tbd-testigal__cap { padding: var(--tbd-5); display: flex; flex-direction: column; flex: 1; }
/* Kutipan sendirian di bawah gambar — nama dan label perannya dilepas waktu
   testimoni dibuat anonim, jadi tidak ada lagi yang perlu didorong ke dasar
   kartu; margin bawahnya ikut hilang supaya tingginya pas. */
.tbd-testigal__kutip {
  margin: 0; flex: 1;
  color: #26344B; font-size: 14.5px; line-height: 1.6;
}

/* Pratinjau tangkapan layar: lebih lebar daripada pratinjau logo karena yang
   harus terbaca di sini teks percakapan, bukan bentuk. */
.tbd-chatbox { width: min(94vw, 860px); }
.tbd-chatbox__panel { padding: var(--tbd-3); background: #fff; border-color: var(--tbd-line); }
.tbd-chatbox__img { width: 100%; height: auto; display: block; border-radius: var(--tbd-radius-sm); }

@media (max-width: 1024px) { .tbd-testigal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tbd-testigal { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) {
  /* Di layar sentuh tidak ada hover, jadi penandanya ditampilkan terus. */
  .tbd-testigal__zoom { opacity: 1; transform: none; }
}

/* --- Sorotan TBD Talent (slide proposal) ---
   Dua kartu talent berdampingan. Kartunya terang, bukan panel navy: bagian
   "kenapa brand memilih" di atasnya sudah navy besar, dua bidang gelap
   beruntun membuat halaman berat sebelah. */
.tbd-talents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-5); }
.tbd-talent {
  display: flex; flex-direction: column;
  padding: var(--tbd-8);
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius);
  box-shadow: var(--tbd-shadow);
  background:
    radial-gradient(70% 80% at 0% 0%, #EAF3FD 0%, rgba(234, 243, 253, 0) 62%),
    #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-talent:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow-lg); transform: translateY(-2px); }
.tbd-talent__head { display: flex; align-items: center; gap: var(--tbd-5); }
.tbd-talent__ava {
  flex: 0 0 96px; width: 96px; height: 96px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--tbd-blue), var(--tbd-shadow);
  /* Latar lembut di belakang potongan foto yang latarnya polos. */
  background: linear-gradient(180deg, #F4F8FD, #D9E7F9);
}
.tbd-talent__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tbd-talent__nama {
  display: block; margin-bottom: 6px;
  font-family: var(--tbd-font-head); font-weight: 800; font-size: 21px;
  color: var(--tbd-navy);
}
.tbd-talent__teks { margin: var(--tbd-5) 0 0; color: #26344B; font-size: 15.5px; line-height: 1.7; }
/* margin-top auto: baris statistik kedua kartu selalu sejajar di dasar,
   berapa pun beda panjang deskripsinya. Jarak minimum dari teks dijaga oleh
   padding-top milik kartu, bukan margin, supaya auto tetap bekerja. */
.tbd-talent__stat {
  display: flex; flex-wrap: wrap; gap: var(--tbd-8);
  margin-top: auto; padding-top: var(--tbd-6);
  border-top: 1px solid var(--tbd-line);
}
.tbd-talent__teks { padding-bottom: var(--tbd-6); }
.tbd-talent__statnum {
  display: block;
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.01em;
  color: var(--tbd-navy);
}
.tbd-talent__statlabel { display: block; font-size: 13px; color: var(--tbd-muted); margin-top: 2px; }
.tbd-talent__subjudul { margin: var(--tbd-12) 0 var(--tbd-6); }

/* --- Top Creator: kolase slide + chip data yang terbaca --- */
.tbd-tc__ringkas { margin: var(--tbd-2) 0 0; color: var(--tbd-muted); font-size: 15px; }
.tbd-tc__ringkas strong { color: var(--tbd-navy); }
.tbd-tc {
  margin: 0;
  border-radius: var(--tbd-radius);
  overflow: hidden;
  box-shadow: var(--tbd-shadow-lg);
  border: 1px solid var(--tbd-line);
}
.tbd-tc img { width: 100%; height: auto; display: block; }
.tbd-tc__chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--tbd-2);
  margin-top: var(--tbd-5);
}
.tbd-tc__chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius-pill);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tbd-tc__chip:hover { text-decoration: none; border-color: var(--tbd-blue); box-shadow: var(--tbd-shadow); }
.tbd-tc__handle { font-family: var(--tbd-font-head); font-weight: 700; font-size: 13.5px; color: var(--tbd-navy); }
.tbd-tc__jumlah { font-size: 12.5px; color: var(--tbd-blue-text); font-weight: 600; }

@media (max-width: 860px) {
  .tbd-talents { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .tbd-talent__head { flex-direction: column; text-align: center; }
  .tbd-talent__stat { justify-content: center; }
}

/* --- Galeri brand partner: 40 logo bundar ---
   Bukan marquee berjalan seperti di beranda: jumlahnya empat kali lipat, dan
   deret bergerak membuat orang harus menunggu untuk melihat semuanya. Sebagai
   galeri diam, seluruh portofolio terbaca sekali pandang. */
.tbd-brandgal {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--tbd-5);
}
.tbd-brandgal__item {
  /* Reset tombol — tiap logo membuka pratinjau. */
  border: 1px solid var(--tbd-line); padding: 0; font: inherit; cursor: pointer;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #fff;
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tbd-brandgal__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tbd-brandgal__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--tbd-shadow);
  border-color: #C9D8EC;
}
.tbd-brandgal__item:focus-visible { outline: 2px solid var(--tbd-blue); outline-offset: 3px; }

/* Keterangan penutup di bawah deret — bukan bulatan tambahan, supaya tidak
   terbaca sebagai salah satu brand. */
.tbd-brandgal__ket {
  margin: var(--tbd-8) 0 0;
  text-align: center;
  font-family: var(--tbd-font-head); font-weight: 700; font-size: 17px;
  color: var(--tbd-navy);
}

@media (max-width: 1024px) { .tbd-brandgal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tbd-brandgal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tbd-4); } }
@media (max-width: 420px)  { .tbd-brandgal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tbd-brandgal__item:hover { transform: none; } }

/* Pratinjau logo brand berlatar putih — panel navy bawaannya dipakai untuk
   logo klien yang siluetnya putih; logo brand di sini berwarna penuh dan
   sebagian berlatar putih, jadi butuh bidang terang. */
.tbd-logobox__panel--terang {
  background: #fff;
  border-color: var(--tbd-line);
  padding: var(--tbd-10);
}
.tbd-logobox__panel--terang .tbd-logobox__img { max-width: 260px; border-radius: 50%; }

/* ---------- Halaman Kontak ---------- */
.tbd-kontak { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--tbd-16); align-items: start; }
.tbd-kontak__form {
  background: #fff; border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius); padding: var(--tbd-8);
  box-shadow: var(--tbd-shadow);
}
.tbd-lead--tengah { margin-inline: auto; }

.tbd-sosial {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--tbd-surface-2); color: var(--tbd-navy);
  transition: background .18s ease, color .18s ease;
}
.tbd-sosial:hover { background: var(--tbd-navy); color: #fff; }
/* Varian di atas latar navy (hero halaman CEO): versi terang di sana justru jadi
   dua bulatan putih yang berebut perhatian dengan tombol utama, dan hover-nya
   yang berlatar navy malah membuat ikonnya lenyap. */
.tbd-sosial--onNavy {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.tbd-sosial--onNavy:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.tbd-form { display: flex; flex-direction: column; gap: var(--tbd-4); }
.tbd-form__baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-4); }
.tbd-field { display: flex; flex-direction: column; gap: 6px; }
.tbd-field__label { font-size: 13.5px; font-weight: 600; color: var(--tbd-navy); }
.tbd-field__galat { font-size: 12.5px; color: var(--tbd-red); }
.tbd-input.is-galat, .tbd-textarea.is-galat { border-color: var(--tbd-red); }
.tbd-textarea { resize: vertical; min-height: 120px; }
.tbd-form__catatan { margin: 0; font-size: 12.5px; color: var(--tbd-muted); }
.tbd-form .tbd-btn { align-self: flex-start; }

/* Perangkap robot: harus tetap ada di susunan halaman dan terbaca robot,
   tapi tidak boleh terlihat maupun bisa difokus orang. display:none akan
   membuat sebagian robot melewatinya, jadi dipindah ke luar layar. */
.tbd-jebakan {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.tbd-notis {
  display: flex; align-items: flex-start; gap: var(--tbd-3);
  padding: var(--tbd-4) var(--tbd-5); border-radius: var(--tbd-radius-sm);
  font-size: 14px; line-height: 1.6; margin-top: var(--tbd-5);
}
.tbd-notis svg { flex: 0 0 auto; margin-top: 2px; }
.tbd-notis--baik  { background: #E7F6EC; color: #0B5B28; }   /* 8,3:1 */
.tbd-notis--galat { background: #FDECEA; color: #8C1D16; }   /* 8,1:1 */

@media (max-width: 900px) {
  .tbd-kontak { grid-template-columns: minmax(0, 1fr); gap: var(--tbd-10); }
}
@media (max-width: 560px) {
  .tbd-kontak__form { padding: var(--tbd-5); }
  .tbd-form__baris { grid-template-columns: minmax(0, 1fr); }
  .tbd-form .tbd-btn { align-self: stretch; }
}

/* ---------- FAQ ----------
   Dibangun di atas <details>/<summary>, bukan JavaScript: buka-tutupnya sudah
   ditangani peramban, bisa dioperasikan lewat papan ketik tanpa tambahan
   apa pun, dan isinya tetap ada di HTML meski sedang tertutup. */
.tbd-faq { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--tbd-3); }
.tbd-faq__item {
  background: #fff; border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tbd-faq__item[open] { border-color: #C9D8EC; box-shadow: var(--tbd-shadow); }
.tbd-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tbd-4);
  padding: var(--tbd-4) var(--tbd-5); min-height: 56px;
  cursor: pointer;
  font-family: var(--tbd-font-head); font-weight: 700; font-size: 15.5px;
  line-height: 1.4; color: var(--tbd-navy);
  /* Dua baris ini menghilangkan segitiga bawaan peramban: display:flex sudah
     cukup untuk Chrome dan Firefox, ::-webkit-details-marker untuk Safari. */
  list-style: none;
}
.tbd-faq__q::-webkit-details-marker { display: none; }
.tbd-faq__q:hover { background: var(--tbd-surface-2); }
.tbd-faq__q:focus-visible { outline: 2px solid var(--tbd-blue); outline-offset: -2px; }
/* Panahnya berbalik tanpa transisi. Sengaja: transisi transform pada elemen di
   dalam <summary> tidak pernah selesai berjalan — nilainya tertahan di matriks
   awal, sehingga panahnya sama sekali tidak berbalik. Tanpa transisi, ia
   berbalik seketika, dan untuk penanda buka-tutup itu sudah cukup. */
.tbd-faq__ikon { flex: 0 0 auto; color: var(--tbd-blue-text); }
.tbd-faq__item[open] .tbd-faq__ikon svg { transform: rotate(180deg); }
.tbd-faq__a { padding: 0 var(--tbd-5) var(--tbd-5); }
.tbd-faq__a p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--tbd-muted); }

/* ---------- Visi & Misi ---------- */
.tbd-visi { display: flex; align-items: center; gap: var(--tbd-6); }
.tbd-visi__icon {
  flex: 0 0 auto; width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--tbd-lime);
}
.tbd-visi__icon svg { width: 28px; height: 28px; }
.tbd-visi__label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tbd-lime);   /* 11,3:1 di atas navy */
}
.tbd-visi__teks {
  margin: 0;
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.32;
  color: #fff; letter-spacing: -.02em;
}

.tbd-misi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tbd-4); }
.tbd-misi__item {
  display: flex; gap: var(--tbd-4); align-items: flex-start;
  padding: var(--tbd-5);
  background: #fff; border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
}
/* Lima poin di dua kolom menyisakan satu sendirian di baris terakhir; yang
   terakhir dibiarkan melebar penuh supaya barisnya tidak setengah kosong. */
.tbd-misi__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tbd-misi__no {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 10px;
  background: #EAF3FD; color: var(--tbd-blue-text);
  font-family: var(--tbd-font-head); font-weight: 800; font-size: 14px;
}
.tbd-misi__item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tbd-text); }

/* ---------- Galeri ---------- */
.tbd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tbd-4); }
.tbd-gallery figure { margin: 0; border-radius: var(--tbd-radius); overflow: hidden; background: var(--tbd-surface-2); aspect-ratio: 4 / 3; }
.tbd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tbd-gallery figure:hover img { transform: scale(1.04); }

/* Lima foto tidak pernah rapi di grid biasa — selalu menyisakan satu yatim di
   baris kedua. Dengan foto pertama mengambil dua kolom kali dua baris, empat
   kolom kali dua baris terisi penuh oleh lima foto, tanpa sel kosong. */
.tbd-gallery--sorot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbd-gallery--sorot > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* ---------- Tangkapan layar portofolio ---------- */
.tbd-shot {
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
  overflow: hidden; background: #fff; box-shadow: var(--tbd-shadow);
}
.tbd-shot img { width: 100%; height: auto; display: block; }
.tbd-shot__cap { padding: var(--tbd-4) var(--tbd-5); font-size: 13.5px; color: var(--tbd-muted); border-top: 1px solid var(--tbd-line); }

/* ---------- Daftar bernomor (visi & misi) ---------- */
.tbd-numbered { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--tbd-5); }
.tbd-numbered li { display: flex; gap: var(--tbd-4); align-items: flex-start; }
.tbd-numbered__no {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #EAF3FD; color: var(--tbd-blue-text);
  font-family: var(--tbd-font-head); font-weight: 800; font-size: 14px;
}
.tbd-numbered p { margin: 0; color: var(--tbd-muted); font-size: 15px; line-height: 1.65; }

/* ---------- Penomoran halaman ---------- */
.tbd-pager { display: flex; flex-wrap: wrap; gap: var(--tbd-2); justify-content: center; margin-top: var(--tbd-12); }
.tbd-pager a, .tbd-pager span {
  min-width: 44px; height: 44px; padding-inline: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius-sm);
  font-size: 14.5px; font-weight: 600; color: var(--tbd-muted); background: #fff;
}
.tbd-pager a:hover { border-color: var(--tbd-navy); color: var(--tbd-navy); text-decoration: none; }
.tbd-pager .is-current { background: var(--tbd-navy); border-color: var(--tbd-navy); color: #fff; }
.tbd-pager .is-dots { border-color: transparent; background: none; }

/* ---------- Remah roti ---------- */
.tbd-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--tbd-muted); }
.tbd-crumbs a { color: var(--tbd-muted); }
.tbd-crumbs a:hover { color: var(--tbd-blue-text); }
.tbd-crumbs li + li::before { content: "/"; margin-right: 8px; color: #C3CDDC; }
.tbd-crumbs ol, .tbd-crumbs ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* ---------- Daftar kontak ---------- */
.tbd-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tbd-6); }
/* Ikon disejajarkan ke TENGAH teksnya. Baris Telepon, Email, dan Jam kerja
   isinya cuma dua baris pendek, jadi dengan flex-start ikon 42px-nya
   menggantung lebih tinggi dari teks dan deretnya terbaca miring. */
.tbd-contact li { display: flex; gap: var(--tbd-4); align-items: center; }
/* Kecuali baris alamat: isinya beberapa baris plus tautan peta, jadi ikonnya
   tetap sejajar baris pertama supaya tidak melayang di tengah paragraf. */
.tbd-contact li.is-multi { align-items: flex-start; }
.tbd-contact__icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: #EAF3FD; color: var(--tbd-blue-text);
}
.tbd-contact__label { font-family: var(--tbd-font-head); font-weight: 700; font-size: 14px; color: var(--tbd-navy); }
/* Satu ukuran untuk semua nilai (nomor, email, jam kerja) — sebelumnya 14.5px
   dan terbaca lebih kecil dari labelnya. */
.tbd-contact__value { display: block; font-size: 15px; line-height: 1.55; color: var(--tbd-muted); margin-top: 2px; }

/* ---------- Keadaan kosong ---------- */
.tbd-empty { text-align: center; padding: var(--tbd-20) var(--tbd-5); color: var(--tbd-muted); }
.tbd-empty__icon { color: #C3CDDC; margin-inline: auto; margin-bottom: var(--tbd-4); }

@media (max-width: 860px) {
  .tbd-post--feature { grid-template-columns: 1fr; }
  .tbd-post--feature .tbd-post__media { min-height: 200px; aspect-ratio: 16/9; }
  .tbd-post--feature .tbd-post__body { padding: var(--tbd-6); }
  .tbd-prose { font-size: 16px; }
}

/* =====================================================================
   6e. BLOK BERANDA
   ===================================================================== */

/* ---------- Lencana kecil di atas judul hero ---------- */
.tbd-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--tbd-radius-pill);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--tbd-5);
}
.tbd-badge svg { width: 14px; height: 14px; color: var(--tbd-lime); }

/* Baris kedua judul dengan warna aksen. */
.tbd-accent { color: var(--tbd-blue); display: block; }
[data-variant="b"] .tbd-hero-section .tbd-accent { color: #4FA9FF; }

/* ---------- Lencana kemitraan yang menumpuk di atas foto hero ---------- */
.tbd-hero__media { position: relative; }
/* Sisi bawah bidang gambar kini tersembunyi di balik pita statistik, jadi
   lencananya dinaikkan sejauh tarikan itu supaya tetap terlihat. */
.tbd-partners {
  position: absolute; left: var(--tbd-4); right: var(--tbd-4);
  bottom: calc(var(--tbd-4) + var(--tbd-20));
  display: flex; gap: var(--tbd-2); flex-wrap: wrap;
}
.tbd-partner {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--tbd-radius-sm);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; line-height: 1.25; color: var(--tbd-navy); font-weight: 600;
  box-shadow: 0 4px 14px rgba(11, 34, 68, .18);
}
.tbd-partner strong { display: block; font-family: var(--tbd-font-head); font-size: 12px; font-weight: 800; }
.tbd-partner svg { width: 16px; height: 16px; color: var(--tbd-blue-text); flex: 0 0 16px; }

/* ---------- Pita statistik ---------- */
.tbd-statsbar {
  background: #fff; border: 1px solid var(--tbd-line);
  border-radius: var(--tbd-radius); box-shadow: var(--tbd-shadow-lg);
  padding: var(--tbd-8) var(--tbd-6);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--tbd-5);
}
/* Ditarik naik supaya menumpuk di batas hero, seperti di rancangan. */
.tbd-statsbar--overlap { margin-top: calc(var(--tbd-16) * -1); position: relative; z-index: 5; }
.tbd-statsbar .tbd-stat { justify-content: center; }

/* ---------- Proses kerja ---------- */
.tbd-process {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--tbd-4); position: relative;
}
.tbd-step { text-align: center; position: relative; }
.tbd-step__icon {
  width: 62px; height: 62px; margin: 0 auto var(--tbd-4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--tbd-navy); color: #fff;
  position: relative; z-index: 2;
}
.tbd-step__icon svg { width: 26px; height: 26px; }
.tbd-step__no {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tbd-blue-text); margin-bottom: 5px;
}
.tbd-step__title { font-family: var(--tbd-font-head); font-weight: 700; font-size: 15.5px; color: var(--tbd-navy); }
.tbd-step__text { font-size: 13px; color: var(--tbd-muted); margin-top: 5px; line-height: 1.6; }

/* Garis penghubung antarlangkah. */
.tbd-step:not(:last-child)::after {
  content: ""; position: absolute; top: 31px; left: calc(50% + 40px); right: calc(-50% + 40px);
  height: 2px; background: repeating-linear-gradient(90deg, var(--tbd-line) 0 6px, transparent 6px 12px);
  z-index: 1;
}

/* ---------- Kartu studi kasus ---------- */
/* Jumlah kolom mengikuti jumlah studi kasus yang aktif, lewat --tbd-kartu yang
   diisi templat. Sebelumnya dipatok tiga kolom, jadi begitu kasusnya tinggal
   satu, dua sel di sebelahnya menganga kosong. */
.tbd-cases {
  display: grid;
  grid-template-columns: repeat(var(--tbd-kartu, 3), minmax(0, 1fr));
  gap: var(--tbd-5);
}
/* Satu kasus tidak perlu selebar layar — dibatasi dan berdiri di tengah. */
.tbd-cases:has(> :only-child) { max-width: 720px; margin-inline: auto; }
@media (max-width: 860px) { .tbd-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tbd-cases { grid-template-columns: minmax(0, 1fr); } }

/* Teks di kiri, foto menempel di tepi kanan kartu — mengikuti rancangan owner.
   Tinggi kartu ditentukan isi teksnya; fotonya ikut memanjang lewat posisi
   absolut, jadi kolom foto tidak pernah menambah tinggi baris. */
.tbd-case {
  display: grid; grid-template-columns: minmax(0, 1fr) 40%;
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
  background: #fff; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tbd-case--tanpafoto { grid-template-columns: minmax(0, 1fr); }
.tbd-case:hover { border-color: #C9D8EC; box-shadow: var(--tbd-shadow); transform: translateY(-2px); }
.tbd-case__media { position: relative; background: var(--tbd-surface-2); }
.tbd-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Gambar mendatar (tangkapan layar dasbor) melebar di atas teks dan tampil
   utuh — kalau dipaksa ke kolom sempit 40%, angka pentingnya justru terpotong.
   Gambar tegak (foto produk) tetap menempel di sisi kanan seperti rancangan. */
/* grid-template-rows wajib: tanpa itu baris gambarnya ikut melar mengikuti
   kartu tertinggi, dan gambar yang lebih pendek menyisakan bidang putih
   menganga di bawahnya. Dengan "auto 1fr", gambar setinggi dirinya sendiri
   dan sisa ruang jatuh ke badan teks. */
.tbd-case--mendatar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.tbd-case--mendatar .tbd-case__media {
  order: -1; position: static; aspect-ratio: auto;
  background: #fff; border-bottom: 1px solid var(--tbd-line);
}
.tbd-case--mendatar .tbd-case__media img {
  position: static; width: 100%; height: auto; object-fit: contain;
}

.tbd-case__body { padding: var(--tbd-5); display: flex; flex-direction: column; gap: var(--tbd-3); }
.tbd-case__kepala { display: flex; align-items: center; gap: var(--tbd-3); flex-wrap: wrap; }
.tbd-case__periode {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--tbd-muted);
}
.tbd-case__periode svg { width: 14px; height: 14px; }

/* Tabel bukti: label di kiri, "sebelum -> sesudah" di kanan. Angkanya memakai
   tabular-nums supaya digitnya berbaris rapi antarbaris. */
.tbd-case__metrik { display: flex; flex-direction: column; gap: 7px; }
.tbd-case__mbaris {
  display: grid; grid-template-columns: auto 1fr; gap: var(--tbd-3);
  align-items: baseline; font-size: 13.5px;
  padding-bottom: 7px; border-bottom: 1px solid var(--tbd-line);
}
.tbd-case__mbaris:last-child { border-bottom: 0; padding-bottom: 0; }
.tbd-case__mlabel { color: var(--tbd-muted); }
.tbd-case__mnilai {
  text-align: right; color: var(--tbd-navy); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tbd-case__mlama  { color: var(--tbd-muted); font-weight: 400; }
.tbd-case__mpanah { color: var(--tbd-muted); margin-inline: 6px; }
.tbd-case__ringkas { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--tbd-muted); }
/* Hanya di kartu studi kasus label industrinya ditulis kapital; di blog chip
   yang sama dipakai untuk nama kategori, yang tidak boleh diubah bentuknya. */
.tbd-case .tbd-chip { align-self: flex-start; text-transform: uppercase; letter-spacing: .06em; }
.tbd-case__title { font-family: var(--tbd-font-head); font-weight: 800; font-size: 19px; color: var(--tbd-navy); letter-spacing: -.02em; }
.tbd-case__rows { display: flex; flex-direction: column; gap: var(--tbd-3); }
/* Label di atas, angkanya di bawah — sekelompok, bukan sebaris. */
.tbd-case__row      { display: flex; flex-direction: column; gap: 2px; }
.tbd-case__rowlabel { font-size: 12.5px; color: var(--tbd-muted); }
.tbd-case__rowval   { font-size: 14px; font-weight: 600; color: var(--tbd-navy); }
.tbd-case__rowval small { font-weight: 400; font-size: 12.5px; color: var(--tbd-muted); }
.tbd-case__growth   { margin-top: auto; padding-top: var(--tbd-2); display: flex; flex-direction: column; gap: 2px; }
.tbd-case__pct {
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1;
  color: var(--tbd-green); letter-spacing: -.03em;
}
.tbd-case__pctlabel { font-size: 12.5px; color: var(--tbd-muted); }

/* Susunannya tetap teks-kiri/foto-kanan sampai layar terkecil: fotonya potret,
   jadi memindahkannya ke atas sebagai bidang mendatar justru memotong produk.
   Yang dikecilkan hanya porsi kolom fotonya. */
@media (max-width: 560px) {
  /* Porsi fotonya justru dilebarkan: kartu di sini lebih jangkung, dan kolom
     yang terlalu kurus membuat object-fit memangkas produk terlalu banyak. */
  .tbd-case { grid-template-columns: minmax(0, 1fr) 42%; }
  .tbd-case__body { padding: var(--tbd-4); }
}

/* ---------- Cerita studi kasus (halaman Case Study) ----------
   Bedanya dengan .tbd-case di atas: yang itu KARTU ringkas di beranda, tiga
   berjajar; yang ini CERITA panjang, satu per baris, dengan angka, naskah, dan
   tangkapan dashboard di dalamnya. Dipisah namanya karena keduanya memang
   berbeda benda — memakai ulang .tbd-case akan memaksa satu set aturan melayani
   dua tata letak yang berlawanan. */
.tbd-stories { display: flex; flex-direction: column; gap: var(--tbd-24); }

/* Ceritanya dibatasi lebarnya sendiri, bukan selebar container: baris teks
   sepanjang 1200px sulit dibaca — mata kehilangan barisnya waktu kembali ke
   kiri. Tangkapan dashboard di dalamnya tetap boleh melebar penuh. */
.tbd-story { max-width: 900px; margin-inline: auto; width: 100%; }
.tbd-story + .tbd-story { border-top: 1px solid var(--tbd-line); padding-top: var(--tbd-24); }

.tbd-story__meta { display: flex; align-items: center; gap: var(--tbd-3); flex-wrap: wrap; margin-bottom: var(--tbd-4); }
.tbd-story__periode {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--tbd-muted);
}
.tbd-story__periode svg { width: 14px; height: 14px; flex: none; }
.tbd-story .tbd-chip { text-transform: uppercase; letter-spacing: .06em; }
/* Ringkasannya sudah berupa pengantar cerita, jadi boleh selebar kolomnya —
   batas 46ch bawaan .tbd-lead membuatnya menggantung sempit di tengah. */
.tbd-story__kepala .tbd-lead { max-width: none; }

/* Angka dan persentase dikumpulkan dalam satu panel sebelum naskahnya, supaya
   pembaca yang hanya memindai tetap dapat intinya tanpa membaca penuh. */
.tbd-story__angka {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tbd-8); align-items: center;
  margin-top: var(--tbd-8); padding: var(--tbd-6);
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
  background: var(--tbd-surface-2);
}
.tbd-story__growth { display: flex; flex-direction: column; gap: 2px; }
.tbd-story__pct {
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1;
  color: var(--tbd-green); letter-spacing: -.03em;
}
.tbd-story__pctlabel { font-size: 12.5px; color: var(--tbd-muted); }

.tbd-story__metrik { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.tbd-story__mbaris {
  display: grid; grid-template-columns: auto 1fr; gap: var(--tbd-3);
  align-items: baseline; font-size: 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--tbd-line);
}
.tbd-story__mbaris:last-child { border-bottom: 0; padding-bottom: 0; }
.tbd-story__mlabel { color: var(--tbd-muted); }
.tbd-story__mnilai {
  margin: 0; text-align: right; color: var(--tbd-navy); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tbd-story__mlama  { color: var(--tbd-muted); font-weight: 400; }
.tbd-story__mpanah { color: var(--tbd-muted); margin-inline: 6px; }

/* Naskahnya HTML bebas dari admin (h3 + p), jadi elemennya digayakan lewat
   pemilih anak — bukan lewat kelas yang harus diketik ulang tiap menyunting. */
.tbd-story__isi { margin-top: var(--tbd-8); }
.tbd-story__isi h3 {
  font-family: var(--tbd-font-head); font-weight: 800;
  font-size: clamp(18px, 1.7vw, 22px); color: var(--tbd-navy);
  letter-spacing: -.02em; line-height: 1.3;
  margin: var(--tbd-8) 0 var(--tbd-3);
}
.tbd-story__isi h3:first-child { margin-top: 0; }
.tbd-story__isi p { margin: 0 0 var(--tbd-4); line-height: 1.75; color: var(--tbd-text); }
.tbd-story__isi p:last-child { margin-bottom: 0; }

.tbd-story__gbr {
  margin-top: var(--tbd-8);
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius);
  overflow: hidden; background: #fff; box-shadow: var(--tbd-shadow);
}
.tbd-story__gbr img { width: 100%; height: auto; display: block; }

/* Bagian bukti dashboard sudah membawa padding section sendiri; di dalam
   cerita padding itu berlebihan dan memutus alirannya. */
.tbd-story .tbd-section { padding-block: var(--tbd-10) 0; }
.tbd-story .tbd-container { padding-inline: 0; }

@media (max-width: 640px) {
  .tbd-stories { gap: var(--tbd-16); }
  .tbd-story + .tbd-story { padding-top: var(--tbd-16); }
  /* Persentase pindah ke atas daftar metrik: dua kolom di layar sempit
     menyisakan angka besar berdesakan dengan tabel di sebelahnya. */
  .tbd-story__angka { grid-template-columns: minmax(0, 1fr); gap: var(--tbd-5); padding: var(--tbd-5); }
}

/* ---------- Testimoni ---------- */
.tbd-testi {
  display: flex; flex-direction: column; gap: var(--tbd-4);
  padding: var(--tbd-6);
  border: 1px solid var(--tbd-line); border-radius: var(--tbd-radius); background: #fff;
}
.tbd-testi__stars { display: flex; gap: 2px; color: #F5A524; }
.tbd-testi__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tbd-testi__quote { font-size: 14.5px; line-height: 1.7; color: #26344B; margin: 0; }
.tbd-testi__who { display: flex; align-items: center; gap: var(--tbd-3); margin-top: auto; padding-top: var(--tbd-2); }
.tbd-testi__ava {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: #EAF3FD; display: grid; place-items: center; flex: 0 0 44px;
  font-family: var(--tbd-font-head); font-weight: 800; color: var(--tbd-blue-text);
}
.tbd-testi__ava img { width: 100%; height: 100%; object-fit: cover; }
/* display:block supaya jabatan turun ke baris sendiri, tidak menyambung
   di belakang nama. */
.tbd-testi__name { display: block; font-family: var(--tbd-font-head); font-weight: 700; font-size: 14.5px; color: var(--tbd-navy); line-height: 1.3; }
.tbd-testi__role { display: block; font-size: 12.5px; color: var(--tbd-muted); margin-top: 2px; }

/* =====================================================================
   Carousel berjalan sendiri
   ---------------------------------------------------------------------
   Dibuat dengan menggandakan isinya lalu menggeser satu set penuh, jadi
   perulangannya mulus tanpa lompatan dan tanpa pustaka apa pun.
   Berhenti saat disentuh kursor atau saat ada isian yang mendapat fokus
   papan ketik, supaya pengunjung sempat membacanya.
   ===================================================================== */
.tbd-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.tbd-marquee__track {
  display: flex;
  gap: var(--tbd-4);
  width: max-content;
  animation: tbd-marquee var(--tbd-marquee-durasi, 60s) linear infinite;
}
.tbd-marquee:hover .tbd-marquee__track,
.tbd-marquee:focus-within .tbd-marquee__track { animation-play-state: paused; }

.tbd-marquee .tbd-testi { width: 340px; flex: 0 0 340px; }
/* Logo lebarnya beragam (Luxia sangat lebar, Sipnpack nyaris persegi), jadi
   jaraknya dilonggarkan dari bawaan 16px supaya tidak terlihat berdesakan. */
.tbd-marquee--klien .tbd-marquee__track { gap: var(--tbd-10); }

@keyframes tbd-marquee {
  /* Bergeser tepat separuh, yaitu satu set penuh, lalu kembali ke awal. */
  to { transform: translateX(calc(-50% - (var(--tbd-4) / 2))); }
}

/* Tanpa gerak: berubah jadi baris yang bisa digeser sendiri oleh pengguna.
   Memakai !important karena aturan hemat-gerak umum di bagian 7 juga
   memakainya; tanpa ini animasinya cuma dipercepat jadi 0,001 detik dan
   track berhenti di posisi yang sudah tergeser separuh. */
@media (prefers-reduced-motion: reduce) {
  .tbd-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-snap-type: x proximity;
    /* Deretnya tetap bisa digeser sendiri — itu gantinya animasi yang
       dimatikan. Tapi bilah gulungnya disembunyikan: di bidang navy ia
       muncul sebagai garis abu-abu selebar seksi yang terbaca seperti
       tampilan rusak, bukan seperti sesuatu yang bisa digeser. Menggulungnya
       tetap jalan lewat trackpad, roda tetikus, sentuhan, dan tombol panah. */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* Edge lawas */
  }
  .tbd-marquee::-webkit-scrollbar { width: 0; height: 0; }
  .tbd-marquee__track { animation: none !important; transform: none !important; }
  .tbd-marquee .tbd-testi,
  .tbd-marquee .tbd-klien { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .tbd-marquee .tbd-testi { width: 280px; flex-basis: 280px; }
}

/* ---------- Susunan judul-kiri, isi-kanan ---------- */
.tbd-split { display: grid; grid-template-columns: 340px 1fr; gap: var(--tbd-12); align-items: start; }

/* Kartu layanan di beranda: sejajar satu baris di sebelah kanan judul,
   mengikuti rancangan. Kartunya sempit, jadi isinya ringkasan satu paragraf —
   bukan daftar poin seperti di halaman Layanan.
   Jumlah kolomnya mengikuti jumlah layanan lewat --tbd-kartu, supaya
   menambah atau mengurangi layanan dari admin tidak merusak barisnya. */
.tbd-split__cards {
  display: grid;
  grid-template-columns: repeat(var(--tbd-kartu, 4), minmax(0, 1fr));
  gap: var(--tbd-4);
}
.tbd-split__cards .tbd-card { padding: 28px; gap: var(--tbd-4); }
.tbd-split__cards .tbd-h3 { font-size: 17.5px; line-height: 1.3; }
.tbd-split__cards .tbd-text { font-size: 14.5px; line-height: 1.6; }

/* Bagian ini diberi lebar sedikit lebih lega dari bagian lain supaya lima
   kartu tetap muat sebaris tanpa menyempit. */
.tbd-split--wide { --tbd-maxw-section: 1340px; grid-template-columns: 300px 1fr; gap: var(--tbd-10); }
.tbd-section:has(.tbd-split--wide) .tbd-container { max-width: 1340px; }

@media (max-width: 1240px) {
  .tbd-split, .tbd-split--wide { grid-template-columns: 1fr; gap: var(--tbd-8); }
  .tbd-split__cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 560px) {
  .tbd-split__cards { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .tbd-statsbar { grid-template-columns: repeat(3, 1fr); gap: var(--tbd-6); }
  .tbd-statsbar--overlap { margin-top: var(--tbd-8); }
  .tbd-process { grid-template-columns: repeat(3, 1fr); gap: var(--tbd-8); }
  .tbd-step:not(:last-child)::after { display: none; }
  .tbd-split { grid-template-columns: 1fr; gap: var(--tbd-8); }
  /* Dua kolom poin misi jadi terlalu sempit untuk kalimat sepanjang ini. */
  .tbd-misi { grid-template-columns: minmax(0, 1fr); }
  /* Foto sorotan turun jadi selebar dua kolom, tapi setinggi satu baris. */
  .tbd-gallery--sorot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbd-gallery--sorot > :first-child { grid-row: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .tbd-statsbar { grid-template-columns: repeat(2, 1fr); padding: var(--tbd-6) var(--tbd-5); }
  .tbd-process { grid-template-columns: 1fr; gap: var(--tbd-6); }
  .tbd-partners { position: static; margin-top: var(--tbd-3); }
}

/* =====================================================================
   6c. DUA ARAH DESAIN
   ---------------------------------------------------------------------
   Perbedaannya sengaja dibuat terasa tapi tetap satu keluarga: keduanya
   memakai token, komponen, dan struktur yang sama. Yang berbeda hanya
   sikapnya — A tenang dan lapang, B tegas dan berkontras tinggi.
   ===================================================================== */

/* ---- Arah B: hero gelap, penuh sampai tepi layar ---- */
[data-variant="b"] .tbd-hero-section {
  background: var(--tbd-navy);
  padding-block: var(--tbd-24) var(--tbd-20);
  margin-bottom: 0;
}
[data-variant="b"] .tbd-hero-section .tbd-h1 { color: #fff; }
[data-variant="b"] .tbd-hero-section .tbd-lead { color: #B9C9DF; }
/* Kalimat definisi dibuat lebih terang dari paragraf pendukung di bawahnya —
   9,9:1 di atas navy, jadi tetap aman dibaca. */
[data-variant="b"] .tbd-hero-section .tbd-lead--definisi { color: #E4EDF8; }
[data-variant="b"] .tbd-hero-section .tbd-eyebrow { color: var(--tbd-lime); }
[data-variant="b"] .tbd-hero-section .tbd-btn--primary { background: var(--tbd-blue); }
[data-variant="b"] .tbd-hero-section .tbd-btn--primary:hover { background: #0086F5; }
[data-variant="b"] .tbd-hero-section .tbd-btn--outline { border-color: rgba(255,255,255,.35); color: #fff; }
[data-variant="b"] .tbd-hero-section .tbd-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* Rasio bingkai hero tidak lagi dipatok di sini: tingginya mengikuti gambar
   supaya tidak ada foto yang terpangkas. Lihat catatan di .tbd-hero__media. */

/* Kartu arah B: lebih tegas, tanpa foto, bernomor. */
[data-variant="b"] .tbd-section--alt { background: #fff; }
[data-variant="b"] .tbd-service {
  border-color: #DCE5F1;
  border-radius: var(--tbd-radius-sm);
  padding: var(--tbd-8) var(--tbd-6);
}
[data-variant="b"] .tbd-service:hover { border-color: var(--tbd-navy); }
/* Ikon dibiarkan apa adanya di kedua arah desain — warnanya sudah sesuai
   identitas merek, dan membalik warnanya justru merusak bentuknya. */

/* ---- Arah A: lebih lapang, bidang selang-seling lembut ---- */
[data-variant="a"] .tbd-hero-section { padding-block: var(--tbd-24) var(--tbd-16); }
[data-variant="a"] .tbd-service { padding: var(--tbd-6); }

/* Penanda arah desain, hanya tampil selama masa pemilihan. */
.tbd-variantbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--tbd-navy); color: #fff;
  padding: 10px var(--tbd-5);
  display: flex; align-items: center; justify-content: center; gap: var(--tbd-4);
  font-size: 13.5px; flex-wrap: wrap;
  box-shadow: 0 -6px 24px rgba(11, 34, 68, .28);
}
.tbd-variantbar strong { color: var(--tbd-lime); }
.tbd-variantbar a {
  color: #fff; border: 1px solid rgba(255,255,255,.4);
  padding: 6px 14px; border-radius: var(--tbd-radius-pill); font-weight: 600;
}
.tbd-variantbar a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.tbd-variantbar a.is-active { background: #fff; color: var(--tbd-navy); border-color: #fff; }
body.tbd { padding-bottom: 0; }
body.tbd:has(.tbd-variantbar) { padding-bottom: 58px; }

/* =====================================================================
   7. UTILITAS & GERAK
   ===================================================================== */
.tbd-center { text-align: center; }
/* Pembatas lebar untuk satu blok, mis. kotak pencarian di halaman 404. */
.tbd-narrow { max-width: 520px; margin-inline: auto; }
.tbd-center .tbd-lead { margin-inline: auto; }
.tbd-mt-0  { margin-top: 0; }
.tbd-mt-6  { margin-top: var(--tbd-6); }
.tbd-mt-10 { margin-top: var(--tbd-10); }
.tbd-mb-8  { margin-bottom: var(--tbd-8); }
.tbd-py-10 { padding-block: var(--tbd-10); }
.tbd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   RESPONSIF
   ===================================================================== */
@media (max-width: 1024px) {
  .tbd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbd-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--tbd-8); }
  .tbd-hero { gap: var(--tbd-8); }
}

@media (max-width: 860px) {
  .tbd-nav, .tbd-header__cta { display: none; }
  .tbd-burger { display: flex; }
  .tbd-hero { grid-template-columns: 1fr; }
  .tbd-hero__media { order: -1; }
  /* Di sini gambar naik ke ATAS teks dan pita statistik tidak lagi menumpang,
     jadi tarikan ke bawahnya harus dibatalkan — kalau tidak, ia menindih
     judulnya dan tepi potongannya malah terbuka. */
  .tbd-hero-section--tumpang .tbd-hero__media { align-self: auto; margin-bottom: 0; }
  .tbd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbd-section { padding-block: var(--tbd-12); }

  /* Pil penyaring digeser ke samping, bukan dibungkus ke bawah. */
  .tbd-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--tbd-5) * -1);
    padding-inline: var(--tbd-5);
  }
  .tbd-filters::-webkit-scrollbar { display: none; }

  /* Garis waktu jadi menurun. */
  .tbd-timeline { grid-template-columns: 1fr; gap: 0; }
  .tbd-timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tbd-timeline__item { padding: 0 0 var(--tbd-8) var(--tbd-10); }
  .tbd-timeline__dot { top: 2px; }
}

@media (max-width: 560px) {
  .tbd-grid--2, .tbd-grid--3, .tbd-grid--4 { grid-template-columns: 1fr; }
  .tbd-footer__grid { grid-template-columns: 1fr; gap: var(--tbd-8); }
  .tbd-band { padding: var(--tbd-6); }
  .tbd-visi { flex-direction: column; align-items: flex-start; gap: var(--tbd-4); }
  .tbd-gallery--sorot { grid-template-columns: minmax(0, 1fr); }
  .tbd-gallery--sorot > :first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .tbd-btn { width: 100%; justify-content: center; }
  .tbd-hero__actions .tbd-btn { width: auto; }
}

/* Target sentuh minimal 44px di perangkat sentuh. */
@media (pointer: coarse) {
  .tbd-nav__link, .tbd-filter, .tbd-link { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tbd *, .tbd *::before, .tbd *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .tbd-header, .tbd-cta, .tbd-footer { display: none; }
}