/* ==========================================================================
   INTEGRASI (revamp) — section .wz-ig

   Section lama (.elementor-element-da5467a) berlatar navy dan menyajikan
   integrasi sebagai TIGA KOLOM DAFTAR CENTANG di sebelah satu gambar berisi
   16 logo yang sudah digabung jadi satu file. Tiga hal yang diperbaiki:

   1. Logo-nya tidak bisa dibaca. integrasi-watzap.webp berukuran 349x349
      untuk 16 logo, jadi tiap logo hanya ~70px dan sebagian namanya hilang.
      Padahal 16 logo aslinya ADA satuan di assets/img (1_orderonline-min.avif
      dan kawan-kawan, 100x100). Di sini dipakai satuan.

   2. Daftar centang dan gambar logo menyampaikan hal yang sama dua kali,
      dan nama di daftar tidak berpasangan dengan logo di gambar. Di sini
      keduanya jadi satu: kartu = logo + nama.

   3. Tiap kartu SENGAJA hanya memuat logo, nama, dan kategorinya. Klaim
      per aplikasi ("Gmail memicu WhatsApp" dan sejenisnya) tidak bisa
      dipastikan dari isi situs, jadi tidak ditulis sama sekali daripada
      ditulis 16 kali dengan kemungkinan salah.

   Latar sengaja TERANG: logo warna-warni di atas navy harus dibungkus
   lingkaran putih dulu (itu yang dilakukan gambar lama), dan bungkus itu
   memakan ruang tanpa menambah informasi. Di atas putih, logo tampil apa
   adanya. Section navy tepat di atasnya juga jadi punya lawan.

   Daftar aplikasi mengikuti tooltip "3rd Party Integrations" di kartu
   PREMIUM (.wz-pk) supaya dua tempat tidak berselisih: 16 aplikasi,
   termasuk TokoTalk yang belum ada di daftar centang lama.

   Skrip: assets/js/integrasi-revamp.js (saringan kategori + reveal)
   ========================================================================== */

.wz-ig {
  --wz-ig-line: #e7e7ec;
  /* #5a5a5a = --wz-ink-soft, warna teks pendukung yang dipakai kartu .wz4
     dan .wz-pk. Sebelumnya #6d6d6d — beda tipis tapi tidak ada di sistem. */
  --wz-ig-mute: #5a5a5a;
  --wz-ig-ground: #f7f7fa;

  /* Judul dan sub mengikuti skala yang sudah dipatok tipografi.css:
     Hind 700 / 38-33-28 / 1,28 / -0,4px, dan Quicksand 500 / 18-16 / 1,66.
     Nilainya disalin, bukan diwarisi, karena tipografi.css mendaftar id
     Elementor satu per satu dan section ini bukan salah satunya. */
  --wz-ig-display: "Hind", system-ui, sans-serif;

  padding: 66px 0 70px;
  background: #fff;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

.wz-ig-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Kepala ------------------------------------------------------ */

.wz-ig-head {
  max-width: 660px;
  margin: 0 auto 34px;
  text-align: center;
}

.wz-ig-title {
  margin: 16px 0 10px;
  font-family: var(--wz-ig-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.4px;
  text-wrap: balance;
  color: var(--wz-ink);
}

/* Frasa beraksen dijaga utuh dalam satu baris. Tanpa ini, di 375px judulnya
   patah jadi "dengan Aplikasi / Favorit Anda" — separuh frasa merah, separuh
   hitam di baris yang sama. Lebarnya 178px, jadi aman di semua lebar layar. */
.wz-ig-title b {
  font-weight: 700;
  white-space: nowrap;
  color: var(--wz-brand);
}

.wz-ig-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.66;
  color: #565656;
}

/* ---------- Baris hitungan + saringan ----------------------------------- */

.wz-ig-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--wz-ig-line);
}

.wz-ig-count {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--wz-ink);
}

.wz-ig-count span {
  font-weight: 500;
  color: var(--wz-ig-mute);
}

.wz-ig-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wz-ig-chip {
  padding: 8px 15px;
  border: 1px solid var(--wz-ig-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wz-ink-soft);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.wz-ig-chip:hover { background: #f2f2f6; color: var(--wz-ink); }
.wz-ig-chip:active { background: #e9e9ef; }

.wz-ig-chip[aria-pressed="true"] {
  border-color: var(--wz-btn-bg);
  background: var(--wz-btn-bg);
  color: #fff;
  cursor: default;
}

.wz-ig-chip:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 2px;
}

/* ---------- Kisi aplikasi ----------------------------------------------- */

.wz-ig-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.wz-ig-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--wz-ig-line);
  transition: box-shadow .18s ease, transform .18s ease;
}

.wz-ig-card:hover {
  box-shadow: inset 0 0 0 1px #d6c0ca, 0 10px 22px -14px rgba(23, 23, 23, .55);
  transform: translateY(-2px);
}

/* Kotak logo diberi latar abu tipis supaya logo berlatar putih (Zapier,
   Contact Form 7) tetap punya bentuk, dan logo gelap (Elementor, Berdu)
   tidak menempel langsung ke kartu. */
.wz-ig-card__l {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--wz-ig-ground);
}

.wz-ig-card__l img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Cadangan untuk aplikasi yang belum punya berkas logo (TokoTalk).
   Huruf awal di atas latar yang sama — bukan kotak kosong. */
.wz-ig-card__l em {
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  color: var(--wz-btn-navy);
}

/* Judul kartu memakai ukuran yang sama dengan kartu fitur (.wz4-c h3):
   Hind 16px/700, -0,1px. Dua kisi kartu di halaman yang sama tidak boleh
   punya dua ukuran judul. */
.wz-ig-card__t {
  min-width: 0;
  font-family: var(--wz-ig-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.1px;
}

.wz-ig-card__k {
  display: block;
  margin: 3px 0 0;
  font-family: var(--wz-ui-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--wz-ig-mute); /* 6,90:1 */
}

.wz-ig-card[hidden] { display: none; }

/* ---------- Penutup: CTA lalu catatan kaki ------------------------------
   Dulu ini satu palang abu berisi judul, kalimat, dan tombol berdampingan.
   Tiga hal yang salah di sana:

     - Bentuknya sama persis dengan 16 kartu di atasnya, cuma lebih lebar.
       Terbaca sebagai kartu ke-17, bukan sebagai penutup section.
     - Hierarkinya terbalik. Catatan untuk developer (REST API / n8n) dapat
       judul tebal dan dua pertiga lebar; tombol yang jadi tujuan section
       ini justru terdesak ke kanan.
     - Judulnya bertanya "belum ada di daftar?" tapi tombol di sebelahnya
       menjawab dengan harga — pertanyaan dan aksinya tidak nyambung.

   Sekarang tanpa kotak dan tanpa garis: tombol di tengah sebagai aksi
   utama, catatannya satu baris kecil di bawahnya. Jarak dari kisi kartu
   yang memisahkan keduanya, bukan garis.
   ----------------------------------------------------------------------- */

.wz-ig-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 34px 0 0;
  text-align: center;
}

.wz-ig-end__n {
  max-width: 480px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--wz-ig-mute);
}

.wz-ig-end a:not(.wz-btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b8bcc3;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}

.wz-ig-end a:not(.wz-btn):hover {
  color: var(--wz-btn-bg);
  text-decoration-color: currentColor;
}

/* ---------- Reveal ------------------------------------------------------
   Kelas .wz-ig-js baru dipasang skrip, jadi tanpa JS semuanya tetap
   terlihat penuh — bukan halaman kosong.
   ----------------------------------------------------------------------- */

.wz-ig-js .wz-ig-rv {
  opacity: 0;
  transform: translateY(14px);
}

.wz-ig-js .wz-ig-rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out var(--d, 0s), transform .5s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}

/* ---------- Layar sedang ------------------------------------------------ */

@media (max-width: 1024px) {
  .wz-ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wz-ig-title { font-size: 33px; line-height: 1.3; }
}

/* ---------- Ponsel ------------------------------------------------------ */

@media (max-width: 767px) {
  .wz-ig { padding: 48px 0 52px; }
  .wz-ig-title { font-size: 28px; line-height: 1.32; }
  .wz-ig-sub { font-size: 16px; }
  .wz-ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wz-ig-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px; }
  .wz-ig-end { gap: 13px; padding-top: 28px; }
  .wz-ig-end .wz-btn { width: 100%; justify-content: center; }
  .wz-ig-end__n { font-size: 13.5px; }
  .wz-ig-bar { justify-content: flex-start; }
}

/* Saringan yang bisa digulir mendatar di layar paling sempit — supaya
   empat chip tidak patah jadi dua baris dan mendorong kisi ke bawah. */
@media (max-width: 480px) {
  .wz-ig-filter {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .wz-ig-filter::-webkit-scrollbar { display: none; }
  .wz-ig-chip { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-ig-js .wz-ig-rv { opacity: 1; transform: none; }
  .wz-ig-card, .wz-ig-chip { transition: none; }
  .wz-ig-card:hover { transform: none; }
}