/* ============================================================
   06-responsive.css  — aturan per ukuran layar
   Ukuran utama pakai clamp() -> otomatis pas semua layar.
   Media query ini untuk kasus khusus aja.
   ============================================================ */

/* ---------- tablet ---------- */
@media (max-width: 900px){
  .nama{ -webkit-text-stroke-width: 3px; }
}

/* ---------- HP ---------- */
@media (max-width: 640px){
  :root{ --r-kartu:18px; --garis:2.5px; --lebar:100%; }

  .slide{ padding: clamp(52px,8vh,70px) 10px clamp(78px,12vh,96px); }
  .tape{ width:54px; height:20px; }
  .foto-grid, .kocak-grid{ gap:10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
  .foto, .kocak{ border-radius:14px; }
  .voucher-box, .surat{ border-radius:18px; }
  .kontrol__btn{ width:34px; height:34px; font-size:.9rem; }
  .kontrol__dots span{ width:7px; height:7px; }
  .video-box{ aspect-ratio: 9/16; }
}

/* ---------- tombol nav: perkecil di layar sempit ---------- */
@media (max-width: 480px){
  .kontrol__nav-btn{ padding:.55em .8em; }
  .kontrol__nav-btn--next{ padding-right:1em; }
}

@media (max-width: 380px){
  .kontrol__nav-txt{ display:none; }
  .kontrol__nav-btn{ padding:.55em .75em; }
}

/* ---------- HP sangat kecil ---------- */
@media (max-width: 360px){
  :root{ --jarak:12px; }
  .nama{ -webkit-text-stroke-width: 2.5px; text-shadow: 4px 4px 0 var(--kuning); }
  .nama.is-panjang{ font-size: clamp(1.7rem, 9vw, 3rem); }
  .foto-grid, .kocak-grid{ grid-template-columns: 1fr 1fr; }
  .tape{ display:none; }
  .kontrol__dots{ display:none; }
}

/* ---------- HP landscape (tinggi pendek) ---------- */
@media (max-height: 520px) and (orientation: landscape){
  .slide{ padding-top: 54px; padding-bottom: 62px; gap: 8px; }
  .slide__head{ font-size: clamp(1.1rem, 3.4vh, 1.4rem); }
  .nama{ font-size: clamp(2.2rem, 12vh, 4rem); }
  .kue-panggung{ width: min(38vh, 46vw); }
  .akhir__kata{ font-size: clamp(1.8rem, 12vh, 3.4rem); }
  .surat{ max-height: 58svh; }
  .foto-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ---------- layar besar ---------- */
@media (min-width: 1600px){
  :root{ --lebar: 1240px; }
  body{ font-size: 20px; }
}

/* ---------- perangkat sentuh ---------- */
@media (hover: none){
  .btn:hover, .amplop:hover, .kado:hover{ transform:none; }
  .btn:hover{ transform: translateY(-2px); }
}

/* ---------- cetak ---------- */
@media print{
  .crayon-frame, .confetti, .boot, .kontrol, .paper-grain{ display:none !important; }
  body{ overflow:visible; background:#fff; }
  .slide{ position:static; display:flex !important; height:auto; page-break-after:always; }
  .panel, .surat, .voucher-box, .foto{ box-shadow:none; }
}