/* Studio Cetak: pratinjau & hasil cetak. Satuan mm; ukuran tulisan memakai em dari --fs agar ikut ukuran kertas. */
#pra { flex: 1; width: 100%; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 0 16px 40px; }
.judul-lembar { font-size: 12px; font-weight: 700; color: var(--s-redup); margin: 12px 0 6px; align-self: center; }
.wadah-lembar { flex: none; position: relative; box-shadow: 0 8px 24px rgba(37,48,42,.18); background: #fff; }
.kosong-pra { padding: 40px; color: var(--s-merah); text-align: center; }
#info-cetak { width: 100%; max-width: 760px; font-size: 12.5px; text-align: center; margin-bottom: 8px; color: var(--s-teks); }
#info-cetak .pr { color: var(--s-merah); font-weight: 600; margin-top: 3px; }
#pratinjau { min-height: 0; }
#cetak-area { position: fixed; left: -100000px; top: 0; visibility: hidden; pointer-events: none; }
.k-isi .s.pola { opacity: .42; }

/* lembar */
.lembar { position: relative; background: #fff; overflow: hidden; transform-origin: top left; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--teks); }
.sel { position: absolute; }
.kertas { position: relative; overflow: hidden; background: var(--latar); }
.tanda { position: absolute; background: #000; display: block; }
.tanda.lipat { background: repeating-linear-gradient(180deg, #000 0 .6mm, transparent .6mm 1.1mm); }
.garis-lipat { position: absolute; top: 0; bottom: 0; width: 0; border-left: .3mm dashed rgba(200,40,40,.75); z-index: 5; pointer-events: none; }

/* panel */
.panel { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--latar); color: var(--teks); font-family: var(--f-isi), Georgia, serif; font-size: calc(var(--fs) * var(--sk, 1)); line-height: 1.38; text-align: center; }
.aman { position: absolute; left: calc(var(--bl) + 6mm); right: calc(var(--br) + 6mm); top: calc(var(--bv) + 6mm); bottom: calc(var(--bv) + 6mm); border: .2mm dashed rgba(40,120,200,.55); pointer-events: none; z-index: 5; }
.isi-p { position: absolute; left: calc(var(--bl) + 7mm); right: calc(var(--br) + 7mm); top: calc(var(--bv) + 7mm); bottom: calc(var(--bv) + 7mm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; z-index: 2; overflow: hidden; }
.k-isi:has(.strip.atas) .isi-p, .k-isi:has(.sudut) .isi-p { top: calc(var(--bv) + 13%); }
.k-isi:has(.strip.bawah) .isi-p, .k-isi:has(.sudut) .isi-p { bottom: calc(var(--bv) + 13%); }
p { margin: 0; }
.s { position: absolute; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; }
.s.pola { inset: 0; background-image: var(--seni-pola); background-repeat: repeat; background-size: 34mm auto; opacity: .75; }
.s.pola.kuat { opacity: 1; }
.s.strip { left: 0; right: 0; height: calc(var(--bv) + 10%); background-size: auto 100%; background-repeat: repeat-x; }
.s.strip.atas { top: 0; background-image: var(--seni-atas); background-position: center top; }
.s.strip.bawah { bottom: 0; background-image: var(--seni-bawah); background-position: center bottom; }
.s.strip.bawah.besar { height: calc(var(--bv) + 22%); }
.s.sudut { width: calc(var(--w) * .22); height: calc(var(--w) * .22); }
.s.sudut.ka { left: calc(var(--bl) + 3mm); top: calc(var(--bv) + 3mm); background-image: var(--seni-sudut-kiri-atas); }
.s.sudut.kb { right: calc(var(--br) + 3mm); top: calc(var(--bv) + 3mm); background-image: var(--seni-sudut-kanan-atas); }
.s.sudut.kk { left: calc(var(--bl) + 3mm); bottom: calc(var(--bv) + 3mm); background-image: var(--seni-sudut-kiri-bawah); }
.s.sudut.kl { right: calc(var(--br) + 3mm); bottom: calc(var(--bv) + 3mm); background-image: var(--seni-sudut-kanan-bawah); }
.bingkai-tipis, .bingkai-ganda { position: absolute; left: calc(var(--bl) + 4mm); right: calc(var(--br) + 4mm); top: calc(var(--bv) + 4mm); bottom: calc(var(--bv) + 4mm); border: .25mm solid var(--t-utama); pointer-events: none; }
.bingkai-ganda { outline: .25mm solid var(--t-utama); outline-offset: -1.6mm; }
.s.mahkota { position: relative; width: 36%; aspect-ratio: 180 / 70; background-image: var(--seni-mahkota); flex: none; }
.s.karangan { left: calc(var(--bl) - 4%); right: calc(var(--br) - 4%); top: var(--bv); bottom: var(--bv); background-image: var(--seni-karangan); background-size: 100% 100%; }
.s.gapura { position: relative; width: 56%; aspect-ratio: 4 / 5; max-height: 48%; flex: 0 1 auto; background-image: var(--seni-gapura); }
.s.adegan { inset: 0; background-image: var(--seni-adegan); background-size: cover; }
.s.pita { left: 0; right: 0; height: calc(var(--bv) + 7%); background-image: var(--seni-pita); background-repeat: repeat-x; background-size: auto 100%; }
.s.pita.atas { top: 0; } .s.pita.bawah { bottom: 0; transform: scaleY(-1); }
.s.bunga-sisi { top: 50%; width: 24%; height: 36%; transform: translateY(-50%); background-image: var(--seni-bunga-sisi); background-size: 100% auto; }
.s.bunga-sisi.kiri { left: calc(var(--bl) - 6%); } .s.bunga-sisi.kanan { right: calc(var(--br) - 6%); transform: translateY(-50%) scaleX(-1); }

/* tulisan */
.monogram { display: flex; align-items: center; gap: .6em; font-family: var(--f-tajuk), serif; font-size: 1.25em; letter-spacing: .08em; color: var(--t-utama); }
.monogram i { width: .25mm; height: 1.4em; background: currentColor; }
.kecil { font-family: var(--f-tajuk), serif; text-transform: uppercase; letter-spacing: .2em; font-size: .78em; color: var(--t-utama); }
.nama { margin: 0; font-family: var(--f-judul), cursive; font-weight: 400; font-size: 3.1em; line-height: 1.1; color: var(--t-nama); overflow-wrap: anywhere; }
.nama.tumpuk span { display: block; }
.nama .dan2 { font-size: .62em; margin: 0 .15em; }
.tgl { font-family: var(--f-tajuk), serif; font-size: 1.02em; letter-spacing: .06em; color: var(--teks); }
.papan { background: var(--kartu); background: color-mix(in srgb, var(--kartu) 94%, transparent); padding: 1.6em 1.3em; width: 88%; display: flex; flex-direction: column; align-items: center; gap: .5em; border-radius: 2mm; }
.garis-papan { border: .3mm solid var(--t-utama-k); outline: .3mm solid var(--t-utama-k); outline-offset: -1.5mm; }
.papan-k { --t-utama: var(--t-utama-k); --t-nama: var(--t-nama-k); --teks: var(--teks-k); color: var(--teks); }
.medali { width: 76%; aspect-ratio: 300 / 440; max-height: 100%; background-image: var(--seni-medali); background-size: 100% 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16% 10%; gap: .35em; overflow: hidden; }
.medali .nama { font-size: 2.3em; } .medali .kecil { font-size: .62em; letter-spacing: .12em; } .medali .tgl { font-size: .78em; }
.k-oval .isi-p.sempit { left: calc(var(--bl) + 17%); right: calc(var(--br) + 17%); top: calc(var(--bv) + 15%); bottom: calc(var(--bv) + 15%); }
.k-oval .nama { font-size: 2.5em; } .k-oval .kecil { letter-spacing: .08em; font-size: .68em; } .k-oval .tgl { font-size: .85em; }
.foto { background-size: cover; background-position: center top; position: relative; cursor: pointer; }
.foto.penuh { position: absolute; inset: 0; }
.foto.lengkung { width: 58%; aspect-ratio: 3 / 4; flex: 0 1 auto; max-height: 52%; border-radius: 999px 999px 2mm 2mm; border: .8mm solid var(--kartu); }
.redup { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.25) 40%, rgba(0,0,0,.72)); }
.isi-p.bawah { justify-content: flex-end; padding-bottom: 4%; }
.isi-p.terang .nama, .isi-p.terang .kecil, .isi-p.terang .tgl { color: #fff; }
.isi-p.kiri { align-items: flex-start; justify-content: space-between; text-align: left; }
.garis-atas { width: 100%; display: flex; justify-content: space-between; gap: 1em; border-top: .3mm solid var(--t-utama); border-bottom: .3mm solid var(--t-utama); padding: .5em 0; align-items: center; }
.garis-atas .kecil { font-size: .66em; letter-spacing: .14em; } .garis-atas .tgl { font-size: .72em; text-align: right; }
.nama.raksasa { font-size: 4.4em; line-height: 1.25; overflow: hidden; padding-bottom: .12em; width: 100%; } .nama.raksasa span { display: block; } .nama.raksasa .dan2 { font-size: .5em; margin: 0; }
.tanda-contoh { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; font-size: 2.6mm; padding: .6mm 2mm; border-radius: 3mm; white-space: nowrap; }
.foto.lengkung .tanda-contoh { bottom: 6%; font-size: 2mm; }
.bismillah { font-family: 'Amiri', serif; font-size: 1.6em; color: var(--t-utama); line-height: 1.5; direction: rtl; }
.salam { font-family: var(--f-tajuk), serif; font-weight: 600; font-size: .98em; }
.pengantar, .penutup { max-width: 34em; }
.ayat { font-style: italic; font-size: .9em; max-width: 34em; }
.ayat .sumber { font-style: normal; font-family: var(--f-tajuk), serif; font-weight: 600; color: var(--t-utama); margin-top: .25em; }
.mempelai { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.nama-org { font-family: var(--f-judul), cursive; font-size: 1.95em; line-height: 1.15; color: var(--t-nama); }
.ortu { font-size: .88em; line-height: 1.3; }
.mempelai .dan { font-family: var(--f-judul), cursive; font-size: 1.5em; color: var(--t-utama); line-height: 1; }
.acara { display: flex; flex-direction: column; gap: .7em; width: 100%; }
.acara .nm, .turut .nm { font-family: var(--f-tajuk), serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .98em; color: var(--t-utama); }
.acara .wkt { font-family: var(--f-tajuk), serif; font-weight: 600; } .acara .wkt.kecil { text-transform: none; letter-spacing: 0; font-size: .92em; color: inherit; font-weight: 400; }
.acara .tmp { font-weight: 700; } .acara .alm { font-size: .88em; line-height: 1.25; }
.ttd { display: flex; flex-direction: column; align-items: center; }
.keluarga { font-family: var(--f-tajuk), serif; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; }
.nama-akhir { font-family: var(--f-judul), cursive; font-size: 2.1em; color: var(--t-nama); line-height: 1.2; }
.kepada { width: 86%; text-align: left; display: flex; flex-direction: column; gap: .45em; font-family: var(--f-tajuk), serif; }
.kepada .titik { border-bottom: .25mm dotted currentColor; height: 1.5em; }
.turut { font-size: .9em; line-height: 1.3; }
.baris-qr { display: flex; justify-content: center; gap: 1.4em; }
.qr { margin: 0; width: 21mm; flex: none; text-align: center; background: #fff; color: #111; padding: 0 0 1mm; border-radius: 1mm; }
.qr svg { width: 100%; display: block; } .qr figcaption { font-size: 2.2mm; line-height: 1.1; font-family: Arial, sans-serif; }
.denah { margin: 0; width: 72%; flex: 0 1 auto; min-height: 0; } .denah img { width: 100%; display: block; max-height: 42mm; object-fit: contain; } .denah figcaption { font-size: .78em; }
.catatan { font-size: .74em; font-style: italic; max-width: 34em; }
.p-tutup .isi-p { left: var(--bl); right: var(--br); }
.p-tutup .monogram { flex-direction: column; }
.p-tutup .monogram i { width: 1.4em; height: .25mm; }

/* edit di pratinjau */
#pra [data-edit] { cursor: text; outline: .2mm dashed transparent; outline-offset: .4mm; }
@media (hover: hover) { #pra [data-edit]:hover { outline-color: #3f6153; } }
#pra [data-edit].dipilih, #pra [data-edit][contenteditable] { outline: .4mm solid #3f6153; }
#pra [data-edit]:empty::before { content: 'Klik untuk mengisi'; opacity: .55; font-style: italic; }
#pra [data-buka], #pra [data-edit-foto] { cursor: pointer; }

/* panel Studio Cetak */
#badan.badan-cetak { grid-template-columns: 96px 360px 1fr; }
.grid-c { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kartu-tpl-c { border: 1px solid var(--s-garis); border-radius: 9px; background: transparent; padding: 6px; text-align: left; }
.kartu-tpl-c.aktif { border-color: var(--s-aksen); box-shadow: 0 0 0 2px var(--s-aksen); }
.kartu-tpl-c img { width: 100%; aspect-ratio: 13 / 18; object-fit: cover; object-position: top; display: block; border-radius: 5px; background: var(--s-lembut); }
.kartu-tpl-c b { display: block; font-size: 12.5px; margin-top: 6px; }
.kartu-tpl-c span { display: block; font-size: 11px; line-height: 1.3; color: var(--s-redup); }
.pilih-format { display: grid; gap: 7px; } .pilih-format.dua { grid-template-columns: 1fr 1fr; }
.pilih-format button { border: 1px solid var(--s-garis); background: transparent; border-radius: 8px; padding: 9px 10px; text-align: left; min-height: 44px; }
.pilih-format button.aktif { border-color: var(--s-aksen); box-shadow: 0 0 0 1px var(--s-aksen); }
.pilih-format b { display: block; font-size: 13px; } .pilih-format span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--s-redup); }
#dialog ol.langkah { margin: 0; } #dialog .info ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 1180px) and (min-width: 901px) { #badan.badan-cetak { grid-template-columns: 58px 330px 1fr; } }
@media (max-width: 900px) { #badan.badan-cetak { grid-template-columns: 1fr; } }

/* label tamu */
.label-tamu { position: absolute; border: .15mm dashed #999; display: flex; flex-direction: column; justify-content: center; padding: 1.5mm 3mm; background: #fff; color: #111; font-family: var(--f-tajuk), serif; overflow: hidden; }
.label-tamu small { font-size: 2.6mm; line-height: 1.2; } .label-tamu b { font-size: 3.7mm; line-height: 1.2; margin: .6mm 0; font-weight: 700; overflow-wrap: anywhere; }

/* hasil cetak */
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body > *:not(#cetak-area) { display: none !important; }
  #cetak-area { display: block !important; position: static !important; visibility: visible !important; }
  #cetak-area .lembar { break-after: page; break-inside: avoid; transform: none; }
  #cetak-area .lembar:last-child { break-after: auto; }
}