/* ═══════════════════════════════════════════════════════════════════════════
   HALAMAN /tentang-kami/
   ═══════════════════════════════════════════════════════════════════════════
   Dimuat SESUDAH paket-internet.css. Dari sana diambil pembungkus (.pi-wrap),
   pembuka (.pi-hero), tombol (.pi-btn), daftar (.pi-daftar), tanya-jawab
   (.pi-faq), dan penutup — supaya halaman ini tetap satu keluarga dengan
   halaman lainnya.

   Yang ditambahkan di sini hanya yang memang khas halaman profil:
   kartu kantor, kartu angka jangkauan, nilai IMPACT, dan dua galeri lencana
   (penghargaan dan sertifikasi ISO).

   Awalan kelas: tk-
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════ PEMBUKA ══════════
   PERINGATAN (aturan A17): "padding-block" menimpa "padding-top" milik
   .pi-hero — TERMASUK jarak aman dari header yang melayang di layar HP.
   Cacat itu pernah terjadi dua kali: remah navigasi tertimbun penuh di
   belakang header. Karena baris di bawah ini menimpa padding hero, jarak
   amannya WAJIB dipasang ulang. Jangan hapus blok @media-nya. */
.tk-hero { padding-block: 28px 34px; }
@media (min-width: 768px) {
  .tk-hero { padding-block: 42px 48px; }
}
@media (max-width: 1024px) {
  .tk-hero { padding-top: calc(var(--tinggi-header, 68px) + clamp(14px, 3.5vw, 26px)); }
}
.tk-hero .pi-lead { max-width: 62ch; }

/* ══════════ BAGIAN ══════════ */
.tk-bagian { padding-block: 36px; }
@media (min-width: 768px) {
  .tk-bagian { padding-block: 52px; }
}
.tk-bagian:nth-of-type(even) {
  background: #ffffff;
  border-block: 1px solid var(--pkcat-border, #ece5f4);
}
.tk-bagian .pi-wrap > p { max-width: 72ch; }

/* ══════════════════════════════════════════════════════════════════════════
   KARTU KANTOR
   ══════════════════════════════════════════════════════════════════════════
   Ditaruh paling atas karena inilah yang paling dicari orang: "kantor
   myrepublic pekanbaru" saja muncul 771 kali di pencarian selama 16 bulan
   terakhir, dan seluruh kata kunci sejenis menembus 3.696 tayangan.
   Dibuat seperti kartu nama supaya alamat dan jam buka langsung terbaca,
   tidak perlu menggulir.
   ══════════════════════════════════════════════════════════════════════════ */
.tk-kantor {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
@media (min-width: 768px) {
  .tk-kantor { padding: 24px 26px; }
}

.tk-kantor-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.tk-kantor-daftar li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

/* bulatan ikon */
.tk-ikon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-light, #f5f3ff);
  color: var(--primary, #672e8a);
}
.tk-ikon svg { width: 17px; height: 17px; }

.tk-kantor-label {
  display: block;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pkcat-ink-soft, #4a4060);
  margin-bottom: 3px;
}
.tk-kantor-nilai {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--pkcat-text-main, #1b1033);
}
.tk-kantor-nilai strong { font-weight: 700; }
/* Aturan A15: tautan tidak boleh sewarna latar tempatnya berdiri.
   Latar kartu ini putih, jadi ungu tua aman dan kontrasnya tinggi. */
.tk-kantor-nilai a {
  color: var(--primary, #672e8a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tk-kantor-nilai a:hover { color: #4d1f69; }

.tk-kantor-catatan {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--pkcat-border, #ece5f4);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--pkcat-ink-soft, #4a4060);
}
.tk-kantor-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 420px) {
  .tk-kantor-aksi .pi-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══════════ KARTU ANGKA JANGKAUAN ══════════ */
/* Tiga kartu di dua kolom akan menyisakan satu celah kosong di baris kedua.
   Jadi di layar HP kartu pertama (angka 162) dibuat selebar penuh sebagai
   judul angka, lalu 64 dan 98 berjajar di bawahnya. Mulai 560px ketiganya
   muat sebaris. */
.tk-angka-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.tk-angka-grid > .tk-angka:first-child { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .tk-angka-grid { grid-template-columns: repeat(3, 1fr); }
  .tk-angka-grid > .tk-angka:first-child { grid-column: auto; }
}
.tk-angka {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
}
.tk-bagian:nth-of-type(even) .tk-angka { background: var(--primary-light, #f5f3ff); }
.tk-angka b {
  display: block;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(27px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary, #672e8a);
}
.tk-angka span {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pkcat-ink-soft, #4a4060);
}

/* ══════════ STRUKTUR PERUSAHAAN ══════════ */
.tk-korporat {
  background: var(--primary-light, #f5f3ff);
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-left: 4px solid var(--primary, #672e8a);
  border-radius: 14px;
  padding: 16px 18px;
  max-width: 76ch;
}
.tk-korporat p { margin: 0 0 10px; }
.tk-korporat p:last-child { margin-bottom: 0; }
.tk-kode-bursa {
  display: inline-block;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffffff;
  background: var(--primary, #672e8a);
  border-radius: 6px;
  padding: 3px 9px;
}

/* ══════════ VISI ══════════ */
.tk-visi {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.tk-bagian:nth-of-type(even) .tk-visi { background: var(--primary-light, #f5f3ff); }
.tk-visi-teks {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(17px, 4.4vw, 21px) !important;
  font-weight: 700;
  line-height: 1.55 !important;
  color: var(--pkcat-text-main, #1b1033) !important;
  margin: 0 !important;
}

/* ══════════ NILAI IMPACT ══════════ */
.tk-nilai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}
@media (min-width: 620px) {
  .tk-nilai-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .tk-nilai-grid { grid-template-columns: repeat(3, 1fr); }
}
.tk-nilai {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 14px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  align-items: start;
}
.tk-bagian:nth-of-type(even) .tk-nilai { background: var(--primary-light, #f5f3ff); }
.tk-nilai-huruf {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(140deg, #6b2f95 0%, #a855f7 100%);
}
.tk-nilai h3 {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 15.5px !important;
  font-weight: 700;
  color: var(--pkcat-text-main, #1b1033) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
}
.tk-nilai p {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--pkcat-ink-soft, #4a4060) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALERI LENCANA — PENGHARGAAN
   ══════════════════════════════════════════════════════════════════════════
   Bentuk gambar aslinya berbeda-beda: ada yang persegi (320x320), ada yang
   tinggi (188x320), ada yang lebar (320x227). Kalau dibiarkan apa adanya,
   barisnya jadi naik-turun tidak rata.

   Jadi tiap gambar ditaruh di dalam kotak setinggi tetap dan dipasang
   "object-fit: contain" — gambarnya mengecil sampai muat seluruhnya, tidak
   pernah terpotong dan tidak pernah gepeng. Tinggi kotaknya dikunci supaya
   tidak ada lompatan tata letak saat gambarnya selesai dimuat.
   ══════════════════════════════════════════════════════════════════════════ */
.tk-lencana-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .tk-lencana-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .tk-lencana-grid { grid-template-columns: repeat(4, 1fr); gap: 13px; }
}
@media (min-width: 1100px) {
  .tk-lencana-grid { grid-template-columns: repeat(5, 1fr); }
}

.tk-lencana {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 14px;
  padding: 13px 11px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.tk-bagian:nth-of-type(even) .tk-lencana { background: var(--primary-light, #f5f3ff); }
/* CARA MENGUNCI TINGGINYA — dan cara yang GAGAL.

   Percobaan pertama memakai "max-height: 100%" pada gambarnya. Itu TIDAK
   mengikat: lencana Great Place To Work tetap tergambar setinggi 240px di
   dalam kotak 86px, lalu tumpah menimpa tulisan keterangannya. Cacatnya
   tidak terlihat dari tinggi kartunya — kartunya tetap 175px — jadi hanya
   ketahuan setelah tampilannya benar-benar dilihat.

   Cara yang dipakai sekarang: kotaknya diberi tinggi tetap, lalu gambarnya
   disuruh MENGISI kotak itu (width/height 100%) dengan "object-fit: contain".
   Gambar mengecil sampai muat seluruhnya, tetap utuh, tidak gepeng, dan
   tidak mungkin tumpah keluar kotak. */
.tk-lencana-gambar {
  display: block;
  width: 100%;
  height: 86px;
}
@media (min-width: 768px) {
  .tk-lencana-gambar { height: 104px; }
}
.tk-lencana-gambar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.tk-lencana figcaption {
  font-size: 12px;
  line-height: 1.45;
  color: var(--pkcat-ink-soft, #4a4060);
}
@media (min-width: 768px) {
  .tk-lencana figcaption { font-size: 12.5px; }
}
.tk-lencana figcaption strong {
  display: block;
  color: var(--pkcat-text-main, #1b1033);
  font-weight: 700;
}

/* ══════════ SERTIFIKASI ISO ══════════
   Lencana ISO ukurannya sudah seragam 88x88, jadi tidak perlu kotak berisi
   seperti penghargaan — cukup dijejer rapi. */
.tk-iso-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 560px) {
  .tk-iso-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .tk-iso-grid { grid-template-columns: repeat(6, 1fr); }
}
.tk-iso {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 14px;
  padding: 14px 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.tk-bagian:nth-of-type(even) .tk-iso { background: var(--primary-light, #f5f3ff); }
.tk-iso img { width: 62px; height: 62px; object-fit: contain; }
.tk-iso figcaption {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pkcat-text-main, #1b1033);
}
.tk-iso figcaption span {
  display: block;
  font-family: var(--pkcat-font-body, "Inter", sans-serif);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--pkcat-ink-soft, #4a4060);
  margin-top: 2px;
}

/* ══════════ CATATAN SUMBER GAMBAR ══════════ */
.tk-sumber {
  margin-top: 16px;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: var(--pkcat-ink-soft, #4a4060) !important;
  max-width: 76ch;
}

/* ══════════ KEBIJAKAN MUTU ══════════ */
.tk-mutu {
  counter-reset: mutu;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 78ch;
}
.tk-mutu li {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 12px;
  padding: 13px 15px 13px 46px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pkcat-ink-soft, #4a4060);
}
.tk-bagian:nth-of-type(even) .tk-mutu li { background: var(--primary-light, #f5f3ff); }
.tk-mutu li::before {
  counter-increment: mutu;
  content: counter(mutu);
  position: absolute;
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: var(--primary, #672e8a);
}

/* ══════════ PENUTUP ══════════ */
.tk-penutup { text-align: center; }
.tk-penutup .pi-penutup-aksi { justify-content: center; }