/* Andrew & Putri — bingkai desktop (lihat desktop.js).
   Foto besar di kiri, undangan selebar ponsel di kanan. Isi undangan tidak diubah: ia hidup di iframe. */

html.dk-shell {
  /* Lebar ponsel: 30rem, tetapi tidak lebih lebar dari tinggi layar x 0,58 dan tidak kurang dari 22,5rem. */
  --dk-col: min(30rem, max(22.5rem, 58svh));
  overflow: hidden;
  height: 100%;
}
html.dk-shell body { overflow: hidden; height: 100%; }
/* Isi undangan yang asli tidak dipakai di sini; ia dimuat di iframe. */
html.dk-shell body > *:not(.dk-root) { display: none !important; }

.dk-root { position: fixed; inset: 0; display: flex; color: var(--putih); background: var(--gelap); font-family: var(--serif); }

.dk-panel { position: relative; min-width: 0; flex: 1; overflow: hidden; background: var(--gelap); }
.dk-slot { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s var(--ease); }
.dk-slot[data-on="1"] { opacity: 1; }
.dk-slot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.dk-slot[data-on="1"] img { animation: dk-drift 46s ease-in-out infinite alternate; }
/* Foto kecil: utuh di tengah (tanpa dibesarkan), latarnya foto yang sama dikaburkan. */
.dk-slot--kotak[data-on="1"] img { animation: none; }
/* Butiran halus di atas panel: menyamarkan pita (banding) pada langit berkabut dan menyatukan foto dengan latar. */
.dk-panel::after { position: absolute; inset: 0; z-index: 1; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.16; pointer-events: none; }

/* Foto panel dalam bingkai gading bergaris hijau, dan tanggal vertikal. */
.dk-slot--kotak .dk-latar { filter: blur(34px) brightness(0.62) saturate(0.9); transform: scale(1.3); }
.dk-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Latar panel: panggung hitam dengan sorot lampu ke foto, tirai hijau di kiri (mengulang tirai sampul), untaian lampu dan bokeh emas. */
.dk-deco::before { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse 42% 68% at 72% 50%, rgba(255, 238, 200, 0.34), rgba(255, 238, 200, 0.08) 55%, transparent 75%), radial-gradient(ellipse 90% 80% at 30% 100%, rgba(34, 92, 58, 0.34), transparent 65%), linear-gradient(180deg, #161615, #0b0b0a); }
.dk-tirai { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: repeating-linear-gradient(90deg, rgba(10, 34, 22, 0.95) 0 22px, rgba(28, 82, 54, 0.85) 22px 46px, rgba(10, 34, 22, 0.95) 46px 70px), #0d2a1b; -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent); mask-image: linear-gradient(90deg, #000 20%, transparent); opacity: 0.55; }
.dk-sinar { position: absolute; inset: -20% 0 0 0; background: conic-gradient(from 188deg at 72% -6%, transparent 0 4deg, rgba(255, 238, 200, 0.12) 6deg 9deg, transparent 11deg 15deg, rgba(255, 238, 200, 0.09) 17deg 19deg, transparent 21deg 26deg, rgba(255, 238, 200, 0.1) 28deg 31deg, transparent 34deg); filter: blur(6px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.dk-tali { position: absolute; top: 0; left: 0; width: 100%; height: 5.5rem; }
.dk-b { animation: dk-kedip 2.6s ease-in-out infinite; }
.dk-bokeh { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 160, 0.55), rgba(255, 226, 160, 0.08) 65%, transparent 72%); filter: blur(1px); opacity: 0.6; animation: dk-melayang 9s ease-in-out infinite alternate; }
@keyframes dk-kedip { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes dk-melayang { from { transform: translateY(0) scale(1); opacity: 0.25; } to { transform: translateY(-2.4rem) scale(1.15); opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .dk-b, .dk-bokeh { animation: none; } }
.dk-tgl { position: absolute; top: 50%; left: clamp(0.8rem, 1.6vw, 1.6rem); translate: 0 -50%; writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(251, 250, 247, 0.55); font: 500 0.7rem / 1 var(--sans); letter-spacing: 0.5em; text-transform: uppercase; }
.dk-slot--kotak .dk-bingkai { position: absolute; top: 6%; right: 9%; bottom: 6%; display: flex; padding: 0.95rem; background: linear-gradient(145deg, #faf6ea, #e6dec8); box-shadow: 0 1.8rem 3.6rem rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(201, 164, 95, 0.55); }
.dk-slot--kotak .dk-bingkai::before { position: absolute; inset: 0.4rem; z-index: 1; content: ""; border: 1px solid rgba(38, 96, 64, 0.7); pointer-events: none; }
.dk-slot--kotak .dk-bingkai img { position: static; display: block; width: auto; height: 100%; max-width: 100%; inset: auto; object-fit: cover; filter: none; box-shadow: 0 0 0 1px rgba(60, 50, 30, 0.35); }
@keyframes dk-drift { from { transform: scale(1.01); } to { transform: scale(1.11) translate(-1%, -1.4%); } }

.dk-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 18, 0.86) 0%, rgba(20, 20, 18, 0.46) 26%, rgba(20, 20, 18, 0) 54%), linear-gradient(180deg, rgba(20, 20, 18, 0.4) 0%, rgba(20, 20, 18, 0) 22%); }
.dk-title { position: absolute; bottom: clamp(2rem, 6vh, 4.5rem); left: clamp(2rem, 4.4vw, 5rem); display: grid; max-width: calc(100% - 4rem); gap: 0.4rem; }
.dk-kicker { margin: 0; font: 500 clamp(0.7rem, 0.9vw, 0.9rem) / 1.4 var(--sans); letter-spacing: 0.42em; opacity: 0.9; text-shadow: var(--bayang); text-transform: uppercase; }
.dk-names { margin: 0; font-family: var(--script); font-size: clamp(3.6rem, 8.4vw, 9rem); font-weight: 400; line-height: 1.02; text-shadow: var(--bayang); }
.dk-names span { font-family: var(--serif); font-size: 0.6em; font-style: italic; }
.dk-date { margin: 0.2rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.7rem); font-style: italic; letter-spacing: 0.04em; text-shadow: var(--bayang); }

.dk-phone { position: relative; z-index: 2; width: var(--dk-col); height: 100%; flex: 0 0 var(--dk-col); background: var(--gelap); box-shadow: -0.8rem 0 3rem rgba(0, 0, 0, 0.55); }
.dk-phone iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--gelap); color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  .dk-slot { transition-duration: 0.01s; }
  .dk-slot[data-on="1"] img { animation: none; }
}