/* =========================================================
   TENTANG KAMI — OrangBaik.id
   Wajib dimuat SETELAH global.css. Warna, tipografi, shadow,
   radius, spacing, tombol, pill-tab & dot-pagination sudah ada
   di global.css — file ini di-scope ke .tk supaya tidak
   memengaruhi navbar/footer di luar wrapper ini, dan HANYA
   berisi style spesifik halaman Tentang Kami.
   ========================================================= */

/* =========================================================
   RESET & BASE — di-scope ke .tk (reset umum sudah di global.css,
   ini hanya memastikan cakupannya konsisten di dalam wrapper)
   ========================================================= */
.tk, .tk *, .tk *::before, .tk *::after { box-sizing: border-box; }

.tk { scrollbar-gutter: stable; }

.tk img { max-width: 100%; display: block; }
.tk a { text-decoration: none; color: inherit; }
.tk ul, .tk ol { margin: 0; padding: 0; list-style: none; }
.tk button { font-family: inherit; cursor: pointer; border: none; background: none; }
.tk h1, .tk h2, .tk h3, .tk h4, .tk p { margin: 0; }

.tk {
  font-family: var(--font-body);
  color: var(--text-muted);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}
.tk h1, .tk h2, .tk h3, .tk h4 { font-family: var(--font-display); }

.tk .container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.tk .section { padding: var(--section-space) 0; }
.tk .section--soft { background: var(--bg-soft); padding: var(--section-space) 0; }

.tk .eyebrow { color: var(--text-brand); }

.tk .section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-dark);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
}
.tk .section-title .eyebrow { color: var(--text-brand); }

.tk .section-lead {
  color: var(--text-muted);
  font-size: var(--fs-base);
  max-width: 1200px;
  margin: 1px 0 var(--space-6);
  line-height: 1.5;
}

.tk .fade-in { animation: fadeUp .5s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   HERO / PROFIL LEMBAGA
   ========================================================= */
.tk .hero { background: var(--bg-white); overflow: hidden; }

.tk section.hero .container { padding-left: var(--page-padding) !important; padding-right: var(--page-padding) !important; }
@media (max-width: 640px) {
  .tk section.hero .container {
    padding-left: var(--page-padding-mobile) !important;
    padding-right: var(--page-padding-mobile) !important;
  }
}

.tk .hero__grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0;
}
.tk .hero__title {
  font-size: var(--fs-h2);
  font-weight: 550;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: var(--space-3);
}
.tk .hero__text { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.5; }
.tk .hero__mark { display: flex; justify-content: center; }
.tk .hero__mark img { width: 100%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: contain; }

/* =========================================================
   VISI & MISI
   ========================================================= */
.tk .visi-misi {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
.tk .vm-block { display: flex; gap: var(--space-4); margin-bottom: var(--space-7); }
.tk .vm-block:last-child { margin-bottom: 0; }
.tk .vm-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text-brand-tint);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tk .vm-block h3 { font-weight: var(--fw-semibold); color: var(--text-dark); margin-bottom: 6px; }
.tk .vm-block p { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5; }
.tk .vm-block ol { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5; counter-reset: item; }
.tk .vm-block ol li { counter-increment: item; position: relative; padding-left: 22px; margin-bottom: 4px; }
.tk .vm-block ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  font-weight: 200;
  color: var(--text-muted);
}
.tk .vm-note { margin-top: var(--space-4); font-size: var(--fs-xs); font-style: italic; color: var(--text-muted); }
.tk .visi-misi__image { display: flex; justify-content: center; }
.tk .visi-misi__image img { width: 100%; max-width: 600px; aspect-ratio: 4 / 4; object-fit: contain; }

/* =========================================================
   LEGALITAS LEMBAGA
   ========================================================= */
.tk .legalitas-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.tk .legalitas-card {
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.tk .legalitas-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }

.tk .legalitas-card__badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  overflow: hidden;
  padding: 14px;
}
.tk .legalitas-card__badge img { width: 100%; height: 100%; object-fit: contain; }
.tk .legalitas-card__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-dark); margin-bottom: var(--space-4); }
.tk .legalitas-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}

/* =========================================================
   TABS (Laporan Keuangan & Penghargaan)
   ========================================================= */
.tk .year-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }

.tk .year-tab:not(.is-active) {
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
}
.tk .year-tab { flex-shrink: 0; }

/* =========================================================
   LAPORAN KEUANGAN
   ========================================================= */
.tk .lk-panel.is-hidden { display: none; }
.tk .lk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.tk .lk-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tk .lk-doc__label { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tk .lk-doc__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--text-brand-tint);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tk .lk-doc__text {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk .lk-doc__arrow { flex-shrink: 0; }
.tk .lk-empty, .tk .pgh-empty { color: var(--text-muted); font-size: var(--fs-sm); }

/* =========================================================
   AWAL PERJALANAN KAMI — "Company Milestones" mountain timeline
   Meniru gaya template referensi: garis zigzag lancip (bukan
   bulat) naik-turun menghubungkan titik, meluncur sampai ke
   tepi kiri/kanan chart, label bergantian di atas (puncak) dan
   di bawah (lembah), tag tahun berbentuk pita (ribbon), ikon
   kecil netral di setiap label, dot berwarna solid tepat di atas
   garis. Garis SVG digambar oleh JS berdasarkan posisi asli tiap
   .journey__dot supaya presisi untuk jumlah data apa pun.

   CATATAN PERBAIKAN: padding horizontal .journey__chart diperbesar
   (70px -> 120px, dan turunannya di breakpoint mobile/tablet) supaya
   label titik pertama & terakhir (lebar 200px, menjorok 100px dari
   pusat titik) tidak terpotong tepi jendela scroll. scroll-snap juga
   ditambahkan di .journey & .journey__point supaya hasil scroll/panah
   selalu berhenti pas di satu titik, tidak berhenti di posisi tanggung
   yang membuat titik ujung terlihat separuh terpotong.

   CATATAN PERBAIKAN #2: deskripsi (.journey__desc) sebelumnya dibatasi
   -webkit-line-clamp: 3 sehingga teks panjang dari database terpotong
   dan diberi "...". Clamp itu dihapus supaya deskripsi tampil penuh.
   Karena tinggi teks jadi tidak tetap, --peak/--valley/height chart
   diperbesar dan lebar label ditambah (200px -> 240px, dan turunannya
   di breakpoint mobile/tablet) supaya ada ruang napas vertikal yang
   cukup sebelum mentok ke tepi atas/bawah .journey (yang overflow-y-nya
   otomatis clip karena overflow-x: auto). Ini bukan jaminan mutlak untuk
   deskripsi yang SANGAT panjang (banyak kalimat) — kalau itu terjadi,
   opsi paling aman adalah membatasi panjang teks di form admin, atau
   memperbesar lagi --peak/--valley/height di bawah ini.
   ========================================================= */
.tk .journey-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.tk .journey-head .section-lead { margin-left: auto; margin-right: auto; }

.tk .journey-wrap { position: relative; }

/* Tombol panah navigasi kiri/kanan — pengganti drag/scrollbar di desktop */
.tk .journey-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-brand);
  z-index: 5;
  transition: box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.tk .journey-arrow:hover:not(:disabled) { box-shadow: var(--shadow-soft); transform: translateY(-50%) translateY(-2px); }
.tk .journey-arrow:disabled { opacity: .35; cursor: default; }
.tk .journey-arrow svg { width: 18px; height: 18px; }
.tk .journey-arrow--prev { left: 8px; }
.tk .journey-arrow--next { right: 8px; }

@media (max-width: 900px) {
  .tk .journey-arrow { width: 38px; height: 38px; }
  .tk .journey-arrow--prev { left: 4px; }
  .tk .journey-arrow--next { right: 4px; }
}
/* Di mobile tetap bisa swipe langsung dengan jari, panah disembunyikan */
@media (max-width: 640px) {
  .tk .journey-arrow { display: none; }
}

/* .journey adalah "jendela" yang di-scroll lewat tombol panah (atau swipe di
   mobile). CATATAN PENTING: overflow-x:auto membuat browser otomatis
   memperlakukan overflow-y sebagai auto/clip (aturan bawaan CSS, tidak bisa
   di-override jadi "visible" begitu saja) — jadi solusinya BUKAN mengizinkan
   overflow vertikal, tapi memastikan kontennya memang tidak pernah melebihi
   tinggi kotak (lihat --peak/--valley/height di bawah, yang sudah diperbesar
   supaya deskripsi tanpa line-clamp tetap muat).
   scroll-snap-type + scroll-padding ditambahkan supaya posisi scroll berhenti
   center per titik, tidak nanggung. */
.tk .journey {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 120px;
  /* CATATAN PERBAIKAN #3: sebelumnya teks kartu tetangga yang belum sampai
     di tengah "mengintip" di tepi layar dan terpotong mentah di tengah kata
     (terlihat seperti error saat responsive/mobile). Ditambahkan mask
     gradient di tepi kiri-kanan supaya potongan itu memudar ke warna
     background, bukan terpotong tegas — variabel --journey-fade diatur
     ulang per breakpoint di bawah supaya proporsional dengan padding
     chart yang juga berubah per breakpoint. */
  --journey-fade: 90px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--journey-fade),
    #000 calc(100% - var(--journey-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--journey-fade),
    #000 calc(100% - var(--journey-fade)),
    transparent 100%
  );
}
.tk .journey::-webkit-scrollbar { display: none; }

.tk .journey__chart {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 760px;      /* fallback sebelum JS mengukur konten asli & menimpa nilai ini */
  width: max-content;   /* lebar mengikuti jumlah titik, bukan dipaksa 100% */
  min-width: 100%;
  margin: 0 auto;        /* otomatis center kalau datanya sedikit & muat */
  padding: 0 120px;      /* ruang napas kiri/kanan: cukup untuk setengah lebar label (120px) + jarak aman, supaya label/garis titik pertama & terakhir tidak terpotong */
  --peak: 260px;    /* fallback — di-timpa inline oleh JS sesuai tinggi label asli */
  --valley: 460px;  /* fallback — di-timpa inline oleh JS sesuai tinggi label asli */
  --gap: 20px;      /* jarak stem antara dot & label        */
  --amplitude: 200px; /* jarak vertikal puncak↔lembah yang dipertahankan JS saat menghitung ulang --peak/--valley, supaya siluet "gunung" tetap konsisten walau tinggi total menyesuaikan panjang teks */
}

.tk .journey__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

/* Garis dibuat lancip (miter join, butt cap) supaya puncak/lembah
   tajam seperti pegunungan pada desain referensi, bukan bulat. */
.tk .journey__line-shadow {
  fill: none;
  stroke: var(--border-soft);
  stroke-width: 34;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
  opacity: .5;
  transform: translateY(14px);
  filter: blur(6px);
}
.tk .journey__line {
  fill: none;
  stroke: #d7dbe3;
  stroke-width: 26;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

.tk .journey__point {
  position: relative;
  flex: 0 0 260px;   /* lebar tetap: tidak menyusut walau data bertambah banyak */
  width: 260px;
  height: 100%;
  z-index: 2;
  opacity: 0;
  animation: journeyFade .6s ease forwards;
  animation-delay: var(--d, 0ms);
  scroll-snap-align: center;   /* biar berhenti center per titik, tidak terpotong */
}
@keyframes journeyFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tk .journey__point { animation: none; opacity: 1; }
}

/* Dot solid berwarna (bukan lagi outline putih polos) supaya
   tampak seperti penanda pada garis di desain referensi. */
.tk .journey__dot {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-brand);
  border: 4px solid var(--bg-white);
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 0 1px var(--border-soft);
}

.tk .journey__stem {
  position: absolute;
  left: 50%;
  width: 2px;
  background: var(--border-soft);
  transform: translateX(-50%);
  z-index: 2;
}

.tk .journey__label {
  position: absolute;
  left: 50%;
  width: 240px;
  transform: translateX(-50%);
}

.tk .journey__tag {
  display: inline-block;
  position: relative;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--text-brand);
  padding: 5px 14px 5px 12px;
  margin-bottom: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%);
}

/* Warna gantian teal → navy tiap 2 titik, dot ikut warna tag-nya,
   supaya bergantian rapi seperti pada desain referensi. */
.tk .journey__point:nth-child(4n+1) .journey__tag,
.tk .journey__point:nth-child(4n+2) .journey__tag { background: var(--text-brand); }
.tk .journey__point:nth-child(4n+3) .journey__tag,
.tk .journey__point:nth-child(4n+4) .journey__tag { background: #2b3a55; }

.tk .journey__point:nth-child(4n+1) .journey__dot,
.tk .journey__point:nth-child(4n+2) .journey__dot { background: var(--text-brand); }
.tk .journey__point:nth-child(4n+3) .journey__dot,
.tk .journey__point:nth-child(4n+4) .journey__dot { background: #2b3a55; }

.tk .journey__label-row { display: flex; align-items: flex-start; gap: 10px; }
.tk .journey__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5568; /* netral abu-navy, tidak ikut warna tag, seperti referensi */
  margin-top: 2px;
}
.tk .journey__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

.tk .journey__title {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Deskripsi ditampilkan penuh (line-clamp dihapus) — lihat catatan
   perbaikan #2 di atas untuk konteks ruang vertikal chart. */
.tk .journey__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Puncak (label & tag di atas garis) ---- */
.tk .journey__point--top .journey__dot,
.tk .journey__point--top .journey__stem { top: var(--peak); }
.tk .journey__point--top .journey__stem { height: var(--gap); margin-top: calc(var(--gap) * -1); }
.tk .journey__point--top .journey__label {
  top: calc(var(--peak) - var(--gap));
  transform: translate(-50%, -100%);
}

/* ---- Lembah (label & tag di bawah garis) ---- */
.tk .journey__point--bottom .journey__dot,
.tk .journey__point--bottom .journey__stem { top: var(--valley); }
.tk .journey__point--bottom .journey__stem { height: var(--gap); }
.tk .journey__point--bottom .journey__label { top: calc(var(--valley) + var(--gap)); }

/* =========================================================
   RESPONSIVE — journey mountain
   ========================================================= */
@media (max-width: 900px) {
  .tk .journey__chart { height: 660px; padding: 0 90px; --amplitude: 200px; }
  .tk .journey__label { width: 210px; }
  .tk .journey { --journey-fade: 60px; }
}

@media (max-width: 640px) {
  .tk .journey-wrap { margin: 0 calc(var(--page-padding-mobile) * -1); padding: 0 var(--page-padding-mobile); }
  .tk .journey__chart { padding: 0 60px; height: 600px; --amplitude: 180px; }
  .tk .journey__point { flex: 0 0 190px; width: 190px; }
  .tk .journey__label { width: 180px; }
  .tk .journey__title { font-size: 13px; }
  .tk .journey__desc { font-size: 12px; }
  .tk .journey { --journey-fade: 32px; }
}

/* =========================================================
   PROFIL KEPENGURUSAN
   ========================================================= */
.tk .pengurus-group { margin-bottom: var(--space-9); }
.tk .pengurus-group__title { text-align: center; font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--text-dark); margin-bottom: var(--space-5); }
.tk .pengurus-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); max-width: 900px; margin: 0 auto; }
.tk .pengurus-card { width: 160px; text-align: center; }
.tk .pengurus-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: var(--space-3); }
.tk .pengurus-card__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-dark); line-height: 1.4; }
.tk .pengurus-card__role { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

@media (min-width: 861px) {
  .tk .pengurus-grid { gap: var(--space-9); max-width: 1100px; }
  .tk .pengurus-card { width: 210px; }
}

/* =========================================================
   PENGHARGAAN
   ========================================================= */
.tk .pgh-panel.is-hidden { display: none; }
.tk .pgh-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--space-4); }
.tk .pgh-card {
  flex: 0 1 220px;
  max-width: 240px;
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tk .pgh-card__thumb { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden; }
.tk .pgh-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.tk .pgh-card:hover .pgh-card__thumb img { transform: scale(1.05); }
.tk .pgh-card__year {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bg-white);
  color: var(--text-brand);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.tk .pgh-card__body { padding: 12px 14px; }
.tk .pgh-card__title {
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  color: var(--text-dark);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk .pgh-card__date { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* Navbar & footer TIDAK didefinisikan di sini — sepenuhnya mengikuti
   navbar.css & footer.css yang dipakai bersama di seluruh situs. */

/* =========================================================
   RESPONSIVE (breakpoint acuan: lihat komentar di global.css)
   ========================================================= */
@media (max-width: 1024px) {
  .tk .legalitas-grid { grid-template-columns: repeat(3, 1fr); }
  .tk .lk-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tk .hero__grid, .tk .visi-misi { gap: var(--space-7); }
}

@media (max-width: 860px) {
  .tk .hero__grid, .tk .visi-misi { grid-template-columns: 1fr; }
  .tk .hero__mark { margin-top: var(--space-6); }
}

@media (max-width: 640px) {
  .tk .container { padding: 0 var(--page-padding-mobile); }
  .tk .section, .tk .section--soft { padding: var(--section-space-mobile) 0; }
  .tk .hero__grid { padding: var(--section-space-mobile) 0; }
  .tk .hero__title { font-size: clamp(1.5rem, 5vw, 1.8rem); }

  .tk .legalitas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .tk .legalitas-card { flex: 0 0 calc(33.333% - 7px); max-width: calc(33.333% - 7px); padding: 14px 8px; }
  .tk .legalitas-card__badge { width: 56px; height: 56px; padding: 8px; margin-bottom: var(--space-3); }
  .tk .legalitas-card__label { font-size: 0.7rem; line-height: 1.3; margin-bottom: var(--space-3); }
  .tk .legalitas-card__link { font-size: 0.68rem; }
  .tk .legalitas-card__link svg { width: 10px; height: 10px; }

  .tk .lk-grid { grid-template-columns: 1fr; }

  /* Tab tahun (Laporan Keuangan & Penghargaan) jadi slider horizontal
     di mobile, bukan wrap ke banyak baris — flex-nowrap + scroll-snap,
     scrollbar disembunyikan supaya tetap terlihat rapi seperti pill-tab. */
  .tk .year-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--page-padding-mobile);
    margin: 0 calc(var(--page-padding-mobile) * -1) var(--space-6);
    padding: 0 var(--page-padding-mobile) 2px;
  }
  .tk .year-tabs::-webkit-scrollbar { display: none; }
  .tk .year-tabs .year-tab { scroll-snap-align: start; white-space: nowrap; }

  .tk .pengurus-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-5); max-width: 100%; }
  .tk .pengurus-card { flex: 1 1 0; min-width: 0; max-width: 150px; }

  .tk .pengurus-card--ketua { order: -1; flex: 1 1 100%; width: 100%; max-width: none; margin-bottom: var(--space-2); }
  .tk .pengurus-card--ketua img { max-width: 150px; aspect-ratio: 4 / 5; margin: 0 auto var(--space-3); }
  .tk .pengurus-card__name { font-size: 0.72rem; }
  .tk .pengurus-card__role { font-size: 0.65rem; }

  .tk .pgh-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    justify-content: flex-start;
  }
  .tk .pgh-grid::-webkit-scrollbar { display: none; }
  .tk .pgh-card { flex: 0 0 200px; scroll-snap-align: start; }
}