/* ============================================================
   responsive.css — dibaca terakhir agar menimpa style.css
   ============================================================ */

/* ---------- laptop kecil ---------- */
@media (max-width: 1080px) {
  .eksplorasi { grid-template-columns: repeat(2, 1fr); }
  .alur { display: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .dua-kolom  { grid-template-columns: 1fr; }
  .pigura.lekat { position: static; }
  .pengantar-kolom { columns: 1; }
  .profil { grid-template-columns: 1fr; gap: 1.6rem; }
  .profil-foto { max-width: 260px; margin-inline: auto; }
  .pilih-tokoh { grid-template-columns: 1fr; gap: 1.4rem; }
  .nav-tautan { gap: .9rem; }
  .nav-tautan a { font-size: .62rem; letter-spacing: .12em; }
}

/* ---------- ponsel ---------- */
@media (max-width: 620px) {
  body { line-height: 1.7; }

  .nav { flex-wrap: wrap; gap: .5rem .9rem; padding: .7rem 1rem; }
  .nav-merek { font-size: .92rem; }

  .hero { min-height: 92svh; }
  .hero .tombol { width: 100%; justify-content: center; }

  .prosa p, .pengantar-kolom { text-align: left; }

  .silsilah-simpul { grid-template-columns: 1fr; gap: .5rem; }
  .silsilah-simpul::before { left: 10px; }
  .silsilah-gen { text-align: left; padding: 0 0 0 30px; }
  .silsilah-tombol { margin-left: 30px; width: calc(100% - 30px); }
  .silsilah-isi { margin-left: 30px; }

  .fitur-baris { grid-template-columns: 1fr; gap: .35rem; }
  .profil-baris { grid-template-columns: 1fr; gap: .15rem; }

  .eksplorasi { grid-template-columns: 1fr; }
  .katalog { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .galeri  { grid-template-columns: repeat(2, 1fr); }

  .urutan-baris { grid-template-columns: 32px 1fr; }
  .urutan-hit { grid-column: 2; justify-self: start; }

  .gending-kepala { flex-direction: column; align-items: flex-start; }
  .tombol-audio { margin-left: 0; }

  .popup-kotak { padding: 1.6rem 1.1rem; max-height: 90svh; }
  .popup-nav { flex-direction: column; }
  .popup-nav .tombol { width: 100%; justify-content: center; }

  .notasi, .cakepan { font-size: .74rem; padding: .9rem 1rem; }
  .cakepan-syair { font-size: 1.02rem; padding-left: 1rem; }
}

/* ---------- ponsel kecil ---------- */
@media (max-width: 380px) {
  .katalog { grid-template-columns: 1fr; }
  .galeri  { grid-template-columns: 1fr; }
}

/* ---------- cetak ---------- */
@media print {
  body::before, body::after, .gebyok, .nav, .alur, .debu { display: none; }
  body { background: #fff; color: #000; }
  .prosa p, .pengantar-kolom { color: #000; }
}