/* ============================================================
   TemuKlik — Penyempurnaan tampilan HP & Tablet (dipakai semua halaman)
   Dibuat terpisah agar satu perubahan langsung berlaku di seluruh situs.
   Aturan di sini SENGAJA hanya aktif di layar kecil, jadi tampilan
   desktop tidak berubah sama sekali.
   ============================================================ */

/* ---------- 1. Kenyamanan dasar di layar sentuh ---------- */
@media (max-width: 1023px) {
  /* Cegah teks ikut mengecil/membesar sendiri saat layar diputar */
  html { -webkit-text-size-adjust: 100%; }

  /* Tidak ada yang boleh melebar keluar layar */
  body { overflow-x: hidden; }

  /* Jeda sentuh lebih responsif (hilangkan delay 300ms di sebagian browser) */
  a, button, .btn, .chip, input, select, textarea { touch-action: manipulation; }
}

/* ---------- 2. Tombol mengambang (WhatsApp & Kembali ke atas) ---------- */
@media (max-width: 639px) {
  /* Sedikit dikecilkan supaya tidak memakan layar HP,
     tapi tetap di atas 44px agar nyaman disentuh. */
  #fab-wa {
    height: 48px; width: 48px;
    left: 14px; bottom: 14px;
  }
  #fab-wa svg { width: 22px; height: 22px; }

  #toTop {
    height: 44px; width: 44px;
    right: 14px; bottom: 14px;
  }
  #toTop svg { width: 19px; height: 19px; }
}

/* ---------- 3. Footer: jarak sentuh & ruang aman ----------
   Berlaku sampai 1023px karena tablet juga perangkat sentuh. */
@media (max-width: 1023px) {
  /* Beri ruang di dasar halaman supaya baris terakhir footer
     tidak tertutup tombol mengambang. */
  footer { padding-bottom: 76px; }

  /* Link footer sebelumnya hanya setinggi ~18px — terlalu kecil untuk jari.
     Diberi area sentuh vertikal tanpa mengubah tampilan visualnya. */
  footer ul li a {
    display: inline-block;
    padding: 7px 0;
    min-height: 34px;
  }

  /* Ikon sosial media dibuat pas untuk jari */
  footer a[aria-label] { min-height: 44px; min-width: 44px; }

  /* Kolom footer diberi jarak lebih lega saat menumpuk */
  footer .grid { gap: 26px; }
}

/* ---------- 3b. Tautan "Baca selengkapnya" di Blog ---------- */
@media (max-width: 1023px) {
  /* Sebelumnya hanya setinggi 20px — sulit dikenai jari.
     Ditambah area sentuh tanpa mengubah posisi visualnya. */
  .tk-readmore { padding: 8px 0; min-height: 40px; }
}

/* ---------- 3c. Tautan "Lihat semua ... tema" di Beranda ---------- */
@media (max-width: 1023px) {
  #galeriSeeAll { padding: 9px 0; min-height: 42px; }
}

/* ---------- 3d. Blok statistik di Beranda ----------
   Di HP, ikon + angka berjajar menyisakan hanya ~80px untuk teks,
   sehingga angka panjang seperti "50.000+" terpotong di tepi layar.
   Solusi: ikon dipindah ke atas angka supaya teks dapat lebar penuh. */
@media (max-width: 639px) {
  #statsGrid { gap: 22px 14px; }

  #statsGrid > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ikon sedikit dikecilkan agar proporsional saat ditumpuk */
  #statsGrid > div > span {
    height: 42px;
    width: 42px;
  }

  /* angka menyesuaikan lebar layar, tidak lagi terpotong */
  #statsGrid .display {
    font-size: clamp(1.5rem, 7.5vw, 1.875rem);
    line-height: 1.1;
    white-space: nowrap;
  }
}

/* ---------- 4. Menu mobile: item lebih mudah disentuh ---------- */
@media (max-width: 1023px) {
  #mobileMenu .menu-link {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* ---------- 5. Judul besar agar tidak terlalu memenuhi layar HP ---------- */
@media (max-width: 400px) {
  /* Pada HP kecil (mis. iPhone SE), judul raksasa membuat pengunjung
     harus menggulir jauh sebelum melihat isi. Sedikit dikecilkan. */
  .display { letter-spacing: -0.015em; }
  h1.display { font-size: 2.55rem; line-height: 1.06; }
}

/* ---------- 6. Hormati pengguna yang mematikan animasi ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}