/* ══════════════════════════════════════════════════════════════════════
   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.author-text sengaja TIDAK ikut: itu tautan teks nama penulis, yang
     dikecualikan aturan target sentuh. Memaksanya 44px justru menebalkan
     baris meta sampai dua kali lipat tanpa manfaat. */
  a.social,
  .social a:not(.author-text),
  .social-area a:not(.author-text),
  .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;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TATA LETAK KEPALA ARTIKEL DI MOBILE

   Diukur pada iPhone 14 Pro (viewport 393x660). Masalahnya bukan meluber
   ke samping — halamannya pas selebar layar — melainkan proporsi vertikal:

   · judul 40px membuat satu judul panjang setinggi 256px, yaitu 39% layar,
     sehingga isi artikel terdorong jauh ke bawah lipatan;
   · jarak hero ke blok meta 66px, menyisakan pita kosong lebar;
   · blok meta setinggi 134px karena penulis, tanggal, dan waktu baca
     menumpuk sendiri-sendiri dan semuanya rata tengah;
   · breadcrumb rata tengah membungkus di tengah kata pada judul panjang.

   Rata tengah dipertahankan theme untuk layar lebar; di layar sempit
   teks panjang lebih mudah dipindai bila rata kiri.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {

  /* ---- Judul ---- */
  .inner-hero .main-heading h1 {
    font-size: 28px;
    line-height: 1.25;
    text-wrap: balance;
  }

  /* ---- Breadcrumb ----
     Digulir mendatar alih-alih membungkus, supaya jalur navigasinya tetap
     terbaca sebagai satu baris utuh dan tidak patah di tengah kata. */
  .inner-hero .page-prog {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    text-align: left;
    scrollbar-width: none;
  }

  .inner-hero .page-prog::-webkit-scrollbar { display: none; }

  .inner-hero .page-prog > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Judul halaman saat ini dipangkas, bukan dibiarkan mendorong baris */
  .inner-hero .page-prog > :last-child {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Rapatkan jarak vertikal ----
     Hero dipatok min-height 350px dan judulnya diberi padding-top 60px oleh
     theme. Di layar lebar itu memberi kelegaan; di layar sempit hasilnya
     pita kosong 136px di atas breadcrumb sebelum ada satu pun teks. Tingginya
     dilepas agar mengikuti isinya. */
  .inner-hero {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .inner-hero .main-heading {
    padding-top: 0;
  }

  .blog-details1-all.sp {
    padding-top: 24px;
  }

  .blog-page3-single-box.text-center,
  .blog-page3-single-box .heading1 p {
    text-align: left;
  }

  /* ---- Baris meta ----
     Penulis, tanggal, dan waktu baca dijadikan satu arus yang membungkus
     rapi, bukan tiga blok bertumpuk setinggi 134px.

     Selector menirukan rantai tiga kelas milik theme, yang di bawah 767px
     justru memaksa display:block — tanpa spesifisitas setara, aturan ini
     kalah dan barisnya tetap menumpuk. */
  .blog-page3-single-box .heading1 .social-area,
  .blog-details1-all .social-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    text-align: left;
  }

  .blog-page3-single-box .heading1 .social-area .author-area,
  .blog-details1-all .social-area .author-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0;
    padding-top: 0;
  }

  /* mt-16 milik theme menambah jarak atas pada tiap butir; di susunan
     mendatar jarak itu justru membuat barisnya tidak sejajar */
  .blog-page3-single-box .heading1 .social-area .time.mt-16,
  .blog-page3-single-box .heading1 .social-area .hero-slide-cat.mt-16,
  .blog-details1-all .social-area .time.mt-16,
  .blog-details1-all .social-area .hero-slide-cat.mt-16 {
    margin-top: 0;
  }

  /* Badge favorit sempat 13px — dinaikkan agar sebaris dengan meta lain */
  .blog-details1-all .social-area .hero-slide-cat {
    font-size: 15px;
  }

  /* ---- Tombol kembali ke atas ----
     Posisinya fixed sehingga selalu melayang di atas isi. Diberi ruang di
     kaki halaman agar tidak menutupi tautan terakhir, dan digeser sedikit
     supaya tidak menabrak tepi layar. */
  footer,
  .footer1-section,
  .footer2-section {
    padding-bottom: 84px;
  }
}