/* ==========================================================================
   Footer versi baru (.wzf-) — rombakan kedua

   Versi pertama gelap dan berkolom-kolom: navy setinggi 454px dengan peta
   situs tiga kolom, 16 tautan. Ditolak karena blok gelapnya terasa
   tidak nyambung dengan halaman yang serba terang, dan karena bobotnya
   terlalu besar untuk sesuatu yang cuma penutup.

   Yang ini kebalikannya:

   1. TERANG. Krem paling muda (#faf7f9) dengan satu garis rambut di atas.
      Tidak ada lompatan warna di ujung halaman — footer-nya menyelesaikan
      halaman, bukan memotongnya.

   2. SATU BARIS TAUTAN, BUKAN TIGA KOLOM. Delapan tautan berjajar
      mendatar, dipisahkan jarak saja. Yang dibuang justru yang paling
      mudah ditebak: peta situs lengkap tidak pernah dipakai orang di
      halaman satu-halaman seperti ini — mereka menggulir. Yang tersisa
      cuma yang benar-benar membawa pergi: panduan, dokumentasi API,
      testimoni, afiliasi, dan pintu masuk aplikasi.

   3. TINGGINYA SEPERTIGA. Dari 454px jadi sekitar 150px di layar lebar.

   Semua tautannya menuju tempat yang benar-benar ada dan sudah dicek
   hidup. Tidak ada "Kebijakan Privasi" atau akun media sosial karangan —
   watzap.id memang tidak punya. #cobasekarang sengaja dihindari walau
   tombol "Daftar" di nav memakainya: id itu tidak ada di halaman ini.

   Disclaimer merek dagang Facebook disalin apa adanya. Itu teks legal.

   Footer lama (elementor-element-06750e9) sudah dicabut, jadi <footer>
   ini yang sekarang memegang role="contentinfo" sendirian.
   ========================================================================== */

.wzf {
  --wzf-bg: #faf7f9;
  --wzf-ink: #171717;
  --wzf-soft: #55505a;
  --wzf-mute: #6f6976;      /* 5,31:1 di atas --wzf-bg */
  --wzf-line: #ebe4e9;
  --wzf-k: #c42a5e;
  --wzf-body: "Quicksand", system-ui, -apple-system, sans-serif;

  position: relative;
  background: var(--wzf-bg);
  border-top: 1px solid var(--wzf-line);
  font-family: var(--wzf-body);
  color: var(--wzf-soft);
}

.wzf :where(p, h2, ul, li) { margin: 0; }
.wzf :where(ul) { padding: 0; list-style: none; }

.wzf-in {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- Baris atas: logo + tautan ------------------------------------- */

.wzf-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 34px 0 30px;
}

.wzf-logo { display: inline-flex; text-decoration: none; }
.wzf-logo img { display: block; width: auto; height: 30px; }

.wzf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.wzf-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--wzf-soft);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.16s ease, background 0.16s ease;
}
.wzf-nav a:hover,
.wzf-nav a:focus-visible { background: #fdeef4; color: var(--wzf-k); }

/* Panah kecil untuk tautan yang membuka domain lain. */
.wzf-nav a svg {
  display: block;
  width: 12px;
  height: 12px;
  color: var(--wzf-mute);
  transition: color 0.16s ease;
}
.wzf-nav a:hover svg { color: var(--wzf-k); }

/* Tanpa titik pemisah. Titik di antara tautan hanya masuk akal selama
   semuanya muat dalam satu baris; begitu barisnya membungkus — dan pada
   delapan tautan itu terjadi di mana saja di bawah ~1050px — titiknya ikut
   pindah dan menggantung sendirian di awal baris berikutnya. CSS tidak
   bisa tahu di mana baris pecah, jadi yang dipakai jaraknya saja. */
.wzf-nav li { display: flex; align-items: center; }

/* ---------- Baris bawah: hak cipta + disclaimer --------------------------- */

.wzf-bawah {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 16px 0 22px;
  border-top: 1px solid var(--wzf-line);
}

.wzf-cr {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wzf-soft);
}

.wzf-dis {
  max-width: 64ch;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wzf-mute);
}

/* ---------- Layar sempit -------------------------------------------------- */

@media (max-width: 860px) {
  .wzf-in { width: calc(100% - 36px); }
  .wzf-atas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 30px 0 24px;
  }
  .wzf-nav { margin-left: -10px; }
}

@media (max-width: 560px) {
  .wzf-atas { align-items: center; }
  .wzf-nav { justify-content: center; margin-left: 0; }
  .wzf-bawah { justify-content: center; text-align: center; }
  .wzf-dis { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wzf-nav a,
  .wzf-nav a svg { transition: none; }
}