/* ══════════════════════════════════════════════════════════════════════
   KETERBACAAN & KENYAMANAN SENTUH DI MOBILE

   Berkas terpisah, dimuat paling akhir, dan sengaja TIDAK menyunting CSS
   bawaan theme (main.css/utility.css) yang berukuran ratusan KB dan akan
   tertimpa setiap kali theme diperbarui.

   Dua keluhan yang ditangani, keduanya terukur pada viewport 390px:
   1. Teks tag turun sampai 13px — di bawah 16px, ukuran minimum yang
      nyaman dibaca di ponsel dan ambang di mana iOS Safari berhenti
      memperbesar sendiri.
   2. Banyak kontrol hanya setinggi 24–36px, sebagian bahkan 20x27.
      Panduan sentuh menuntut minimal 44x44 (Apple HIG) — di bawah itu
      jari orang dewasa mudah meleset.

   Seluruh aturan dibatasi ke lebar mobile agar tampilan desktop tidak
   ikut berubah. Tautan teks di dalam paragraf sengaja tidak dipaksa 44px
   karena memang dikecualikan dari aturan target sentuh.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {

  /* ---- 1. Ukuran teks minimum ---- */

  /* Tag, baik di bawah artikel maupun di sidebar */
  .tags ul li a,
  .tagcloud a {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* Keterangan kecil yang ikut turun di bawah 16px */
  .post-meta,
  .post-meta *,
  .time,
  .date,
  small {
    font-size: 15px;
  }

  /* ---- 2. Luas area sentuh ---- */

  /* Tag berbentuk pil: diberi tinggi dan jarak sentuh yang layak */
  .tags ul li a,
  .tagcloud a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
  }

  .tags ul,
  .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Jarak antar-tag lama dinetralkan agar tidak berlipat dengan gap */
  .tags ul li,
  .tagcloud li {
    margin: 0;
  }

  /* Kontrol header: tombol menu, tutup menu, tutup pencarian.
     Sebelumnya 40x40, 20x38, dan 18x38 — semuanya di bawah ambang. */
  .mobile-menu-open,
  .menu-close,
  .search__close-btn,
  .search-close-btn,
  .search-icon,
  .mobile-nav-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Butir menu utama pada panel mobile */
  .mobile-menu ul li a,
  .mobile-nav ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Tautan pagination dan tombol aksi lain yang berbentuk kotak kecil */
  .pagination a,
  .pagination span,
  .page-numbers,
  .btn,
  .theme-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Ikon sosial. Selector disesuaikan dengan kelas yang benar-benar
     dipakai theme — terukur 49x16, jadi tingginya yang paling kurang. */
  a.social,
  .social a,
  .social-area a,
  .social-icon a,
  .social-links a,
  .tags-social-area a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Titik navigasi slider: terukur hanya 8px lebarnya, nyaris mustahil
     dikenai jari. Titiknya sendiri tetap kecil secara visual; yang
     diperbesar area sentuhnya lewat padding. */
  .slick-dots li,
  .slick-dots li button,
  .owl-dot,
  .swiper-pagination-bullet {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Tautan berbentuk pil/kategori yang terukur setinggi 28–36px */
  .post-cat a,
  .categories a,
  .cat a,
  .blog-cat a,
  .tagcloud a,
  .tags ul li a {
    min-height: 44px;
  }

  /* ---- 3. Kolom isian ----
     iOS Safari memperbesar halaman sendiri saat kolom teks berukuran
     di bawah 16px, dan halaman tidak pernah kembali ke skala semula. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  button {
    min-height: 44px;
  }
}