/* hp.css: lapisan tampilan HP untuk semua halaman.
   KENAPA ADA. Hampir semua pengunjung datang dari Instagram dan TikTok,
   artinya dari HP. Tiap halaman punya CSS sendiri di <style>, jadi aturan
   yang berlaku di semua halaman ditaruh di sini, dimuat SESUDAH <style>
   halaman supaya menang tanpa !important. Aturan khusus satu halaman
   (misalnya geser kartu di beranda) tetap di halaman itu.
   Isinya sengaja kecil: jarak antarbagian, footer yang enak diketuk, rasa
   tekan saat tombol disentuh, dan tabel yang berubah jadi kartu. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* Rasa tekan. Cuma di layar sentuh, supaya kursor di laptop tidak ikut. */
@media (hover:none){
  .btn,.lib-link,.feature-tile,.faq-q,.tp-daftar summary,.traktir-tombol,.tanya-tombol,.laci-isi a,.flinks a{transition:transform .18s cubic-bezier(.22,.8,.34,1),opacity .18s;}
  .btn:active,.traktir-tombol:active,.tanya-tombol:active{transform:scale(.96);}
  .lib-link:active,.feature-tile:active{transform:scale(.985);}
  .faq-q:active,.tp-daftar summary:active,.laci-isi a:active,.flinks a:active{opacity:.6;}
}

@media (max-width:640px){
  /* Jarak antarbagian. Di layar lebar 56-76 px atas dan bawah terasa lega,
     di HP dua bagian berdempetan jadi celah kosong 110-150 px. */
  section{padding-top:44px;padding-bottom:44px;}

  /* Footer: dua kolom, tiap tautan satu baris penuh yang gampang diketuk. */
  footer .flinks{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:14px 0;}
  footer .flinks a{min-height:46px;font-size:14.5px;border-bottom:1px solid color-mix(in srgb, currentColor 12%, transparent);}

  /* Tabel tiga kolom (jadwal ujian, nilai lulus) jadi kartu per baris:
     kolom 1 dan 2 sejajar, kolom 3 turun ke bawah. Tadinya kolom ketiga
     terpotong di luar layar dan harus digeser tanpa tanda. */
  .gulir{overflow:visible;}
  .gulir table.jadwal,.gulir table.jadwal tbody{display:block;width:100%;min-width:0;}
  .gulir table.jadwal thead{display:none;}
  .gulir table.jadwal tr{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:14px 16px;border-bottom:1px solid var(--border);}
  .gulir table.jadwal tr:last-child{border-bottom:0;}
  .gulir table.jadwal td{display:block;padding:0;border:0;}
  .gulir table.jadwal td:first-child{font-weight:600;}
  .gulir table.jadwal td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .gulir table.jadwal td:nth-child(3){grid-column:1 / -1;font-size:14px;color:var(--text-soft);}
}