/* Undangan publik — ringan (±6 KB), tanpa framework. Warna & font dari variabel tema. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--ink);font:400 16px/1.65 var(--fb)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fh);font-weight:600;line-height:1.2;margin:0}
p{margin:0 0 .8em}
a{color:var(--accent2)}
.wrap{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;box-shadow:0 0 60px rgba(0,0,0,.1);overflow:hidden}
body.locked{overflow:hidden}
body.locked #main{display:none}
.preview-bar{position:sticky;top:0;z-index:80;background:#222;color:#fff;font:600 12px/1 var(--fb);text-align:center;padding:9px 8px}

/* Cover */
.cover{position:fixed;z-index:60;top:0;bottom:0;left:50%;width:100%;max-width:480px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg) center/cover no-repeat;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .6s}
.cover.hide{transform:translate(-50%,-105%);opacity:.2;pointer-events:none}
.cover-in{padding:28px;width:100%}
.cover-in.on-photo,.cover-in.on-photo .eyebrow,.cover-in.on-photo .to span,.cover-in.on-photo small{color:#fff}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--accent);margin-bottom:10px}
.names{font-size:clamp(38px,12vw,56px);color:var(--accent2)}
.cover-in.on-photo .names{color:#fff}
.names.big{font-size:clamp(40px,13vw,60px)}
.cover-date{margin:12px 0 0;letter-spacing:.08em}
.to{margin:34px 0 28px}
.to span{display:block;font-size:13px;color:var(--muted)}
.to strong{display:block;font:600 24px var(--fh);margin:4px 0}
.to small{display:block;font-size:11px;color:var(--muted)}

/* Seksi umum */
.sec{padding:56px 24px;text-align:center}
.sec.alt{background:var(--soft)}
.h{font-size:30px;margin-bottom:22px;color:var(--accent2)}
.lead{font-size:15.5px;color:var(--ink);opacity:.9}
.muted{color:var(--muted);font-size:14px}
.date-line{letter-spacing:.06em}
.orn{display:flex;align-items:center;gap:12px;color:var(--accent);margin:22px auto;max-width:220px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
.card{background:var(--card);border-radius:18px;padding:22px;margin:0 0 16px;box-shadow:0 6px 24px rgba(0,0,0,.07);text-align:center}
.card h3{font-size:22px;margin-bottom:6px;color:var(--accent2)}
.btn{display:inline-block;background:var(--accent);color:var(--onaccent);padding:13px 26px;border-radius:999px;border:1.5px solid var(--accent);font:600 14px var(--fb);cursor:pointer;text-decoration:none;letter-spacing:.02em}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--accent2)}
.btn.sm{padding:9px 18px;font-size:13px;margin-top:6px}

/* Tokoh */
.people{display:grid;gap:26px}
.person img,.person .ph{width:170px;height:170px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:4px solid var(--card);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.person .ph{display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--onaccent);font:600 64px var(--fh)}
.person h3{font-size:26px;color:var(--accent2)}
.person p{font-size:14px;color:var(--muted);margin-top:6px}

/* Acara */
.ev-date{font-weight:600;margin:6px 0 0}
.ev-time{margin:0 0 8px;color:var(--muted)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}
.cd div{background:var(--accent);color:var(--onaccent);border-radius:14px;padding:14px 2px}
.cd b{display:block;font:700 28px var(--fh)}
.cd span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* Kisah */
.tl{text-align:left;border-left:2px solid var(--accent);margin:0 6px;padding-left:22px}
.tl-item{position:relative;padding-bottom:26px}
.tl-item::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.tl-item small{color:var(--accent2);font-weight:600;letter-spacing:.06em}
.tl-item h3{font-size:21px;margin:2px 0 4px}

/* Galeri & video */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:zoom-in;background:var(--soft)}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#000}
.yt img,.yt iframe{width:100%;height:100%;object-fit:cover;border:0}
.yt .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center}

/* Hadiah */
.gift{display:flex;flex-direction:column;gap:4px;align-items:center}
.gift .acc{font:600 22px/1.2 var(--fh);letter-spacing:.05em;word-break:break-all}
.gift small{color:var(--muted)}

/* Form */
.f{text-align:left}
.f label,.f legend{display:block;font-size:13px;font-weight:600;margin-bottom:14px}
.f input[type=text],.f textarea,.f select{width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid rgba(128,128,128,.35);border-radius:12px;background:var(--bg);color:var(--ink);font:400 15px var(--fb)}
.f input:focus,.f textarea:focus,.f select:focus{outline:2px solid var(--accent);outline-offset:1px}
.att{border:0;padding:0;margin:0 0 6px}
.att label{display:inline-flex;gap:6px;align-items:center;font-weight:500;margin:0 12px 10px 0}
.f .btn{width:100%;margin-top:4px}
.hi{margin:0 0 14px}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.alert{margin:12px 0;padding:10px 14px;border-radius:12px;font-size:14px;text-align:left}
.alert.ok{background:#e4f4e6;color:#1f6b2c}
.alert.err{background:#fde8e6;color:#9a2a20}

/* Ucapan */
.wishes{text-align:left;margin-top:22px;max-height:520px;overflow:auto}
.wish{display:flex;gap:12px;background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:0 3px 14px rgba(0,0,0,.05)}
.wish .av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--onaccent);display:flex;align-items:center;justify-content:center;font:700 16px var(--fh)}
.wish p{margin:4px 0;font-size:14.5px;word-break:break-word}
.wish small{color:var(--muted);font-size:12px}
.tag{font-size:10.5px;padding:2px 8px;border-radius:99px;margin-left:6px;background:var(--soft);color:var(--accent2);font-weight:600;vertical-align:middle}
.tag-hadir{background:#e4f4e6;color:#1f6b2c}.tag-tidak{background:#fde8e6;color:#9a2a20}

/* Penutup, QR, footer */
.qr{width:200px;height:200px;margin:12px auto;background:#fff;padding:10px;border-radius:12px}
.qr svg{width:100%;height:100%;display:block}
.tok{display:inline-block;font:600 18px ui-monospace,Menlo,monospace;letter-spacing:.2em;background:var(--soft);padding:4px 12px;border-radius:8px}
.foot{text-align:center;padding:18px 12px 80px;font-size:12px;color:var(--muted)}
.music{position:fixed;bottom:18px;right:max(14px,calc(50% - 226px));z-index:55;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--onaccent);font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.music.on{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lb{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:96vw;max-height:92vh;border-radius:8px}

/* Animasi muncul */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}