/* Halaman contoh Sowanin (salinan template dari docs/pratinjau). Alat pratinjau desain disembunyikan;
   yang tampil hanya undangan tamu. Mode ?embed=1 dipakai di bingkai HP landing (tanpa pita, tanpa bingkai). */

@font-face { font-family: 'Marcellus'; src: url('/contoh/huruf/marcellus-normal-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/contoh/huruf/lora-normal-400-600.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/contoh/huruf/lora-italic-400.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/contoh/huruf/cormorant-garamond-normal-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-sub-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

html.contoh { --tinggi-pita: 52px; }
html.contoh-embed { --tinggi-pita: 0px; }
html.contoh, html.contoh body { min-height: 100%; }
html.contoh body { margin: 0; background: #1f3f37; }
html.contoh-embed body { background: var(--t-bg, #1f3f37); overflow: hidden; }

/* Alat pratinjau desain: tidak dipakai di halaman contoh */
.contoh .panel-wrap,
.contoh #tamu .kode,
.contoh #tamu > .wrap > h2,
.contoh #tamu .lead,
.contoh .demo-grid > div + div,
.contoh .phone-actions,
.contoh .toast-page { display: none !important; }

.contoh main, .contoh #tamu, .contoh #tamu > .wrap, .contoh .demo-grid { display: block; margin: 0; padding: 0; max-width: none; }
.contoh .phone { width: 100%; max-width: 480px; margin: 0 auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.contoh .screen { height: calc(100vh - var(--tinggi-pita)); height: calc(100dvh - var(--tinggi-pita)); border-radius: 0; }
.contoh-embed .phone { max-width: none; }
.contoh-embed .scroller { scrollbar-width: none; }
.contoh-embed .scroller::-webkit-scrollbar { display: none; }

/* Pita "ini contoh" di atas halaman contoh penuh */
.contoh-pita {
  display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap;
  min-height: var(--tinggi-pita); padding: 6px 16px; background: #1f3f37; color: #fbf7ef;
  font: 400 14px/1.35 'Plus Jakarta Sans', system-ui, sans-serif; text-align: center;
}
.contoh-pita a { color: #e2c077; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.contoh-pita a:focus-visible { outline: 3px solid #e2c077; outline-offset: 2px; }
.contoh-embed .contoh-pita { display: none; }
@media (max-width: 420px) { .contoh-pita { justify-content: space-between; text-align: left; } }

/* Di halaman contoh tidak ada foto pasangan: kotak "Tempat foto sampul" terlihat belum jadi, jadi disembunyikan. */
.contoh .foto-ph { display: none; }
/* Di bingkai HP landing, tombol suara gong menutupi tepi bingkai; gong tetap hanya berbunyi setelah tamu menekan "Buka Undangan". */
.contoh-embed .cover-suara { display: none; }