/* ===== Tema: nilai bawaan, ditimpa oleh :root dari inc/themes.php ===== */
:root{--paper:#14110d;--surface:#1d1913;--line:#3a3124;--ink:#f3ead8;--muted:#b9ab90;--accent:#c9a35b;--accent-ink:#14110d;--overlay:rgba(10,8,5,.62);--f-script:'Great Vibes',cursive;--f-head:'Cormorant Garamond',serif;--f-body:Montserrat,system-ui,sans-serif;--r:18px;--pattern:none}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.7;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:var(--accent)}
.script{font-family:var(--f-script);font-weight:400;line-height:1.2;color:var(--accent)}
.title{font-family:var(--f-head);font-weight:600;font-size:1.9rem;text-align:center;margin-bottom:1.4rem;letter-spacing:.02em}
.title::after{content:var(--orn,'❦');display:block;font-size:1rem;color:var(--accent);margin-top:.2rem;letter-spacing:0}
.eyebrow{text-transform:uppercase;letter-spacing:.35em;font-size:.72rem}
.small{font-size:.82rem}.muted{color:var(--muted)}.center{text-align:center}
.preview-bar{position:fixed;top:0;left:0;right:0;z-index:99;background:#b4232a;color:#fff;text-align:center;font-size:.8rem;padding:4px}

/* ===== Layout: kolom HP di kanan, foto di kiri (desktop) ===== */
.side{display:none}
.phone{position:relative;max-width:480px;margin-left:auto;margin-right:auto;min-height:100vh;background:var(--paper);overflow:hidden}
@media (min-width:900px){
  .side{display:flex;position:fixed;inset:0 480px 0 0;background:var(--overlay) center/cover;background-image:linear-gradient(var(--overlay),var(--overlay)),var(--bg);color:#fff;align-items:flex-end;padding:4rem}
  .side .script{font-size:4.5rem;color:#fff}
  .phone{margin-right:0;box-shadow:-10px 0 40px rgba(0,0,0,.25)}
}

/* ===== Cover ===== */
.cover{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  background-image:linear-gradient(var(--overlay),var(--overlay)),var(--bg);background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .9s}
@media (min-width:900px){.cover{left:auto;width:480px}}
.cover.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
.cover-inner{padding:2rem 1.5rem}
.cover h1{font-size:3.4rem;color:#fff;margin:.4rem 0}
.date-line{letter-spacing:.2em;font-size:.85rem}
.to-box{margin:2rem 0 1.6rem}
.guest-name{font-family:var(--f-head);font-size:1.6rem;font-weight:600;margin:.3rem 0}
.cover .muted{color:rgba(255,255,255,.7)}
.btn-main{display:inline-block;border:0;cursor:pointer;background:var(--btn,var(--accent));color:var(--accent-ink);font:500 .9rem var(--f-body);padding:.8rem 1.6rem;border-radius:999px;letter-spacing:.05em;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .2s}
.btn-main:hover{transform:translateY(-2px)}
.btn-main:disabled{opacity:.6}
.btn-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}
.btn-sm{display:inline-block;border:1px solid var(--btn,var(--accent));background:var(--btn,var(--accent));color:var(--accent-ink);font:500 .78rem var(--f-body);padding:.5rem 1rem;border-radius:999px;text-decoration:none;cursor:pointer}
.btn-sm.ghost{background:transparent;color:var(--accent)}

/* ===== Sections ===== */
.hero,.closing{min-height:100vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;padding:3rem 1.5rem 5rem;
  background-image:linear-gradient(transparent 30%,var(--overlay)),var(--bg);background-size:cover;background-position:center}
.closing{align-items:center;background-image:linear-gradient(var(--overlay),var(--overlay)),var(--bg)}
.hero .script,.closing .script{color:#fff}
.big{font-size:3.6rem}
.sec{padding:4rem 1.5rem}
.sec:not(.closing){background-image:var(--pattern)}
.sec:not(.closing):nth-of-type(even){background-color:color-mix(in srgb,var(--surface) 55%,var(--paper))}
.ornament{text-align:center;font-size:2rem;color:var(--accent);margin-bottom:1rem}
blockquote{font-family:var(--f-head);font-style:italic;font-size:1.15rem;text-align:center;line-height:1.6}
cite{display:block;margin-top:.8rem;font-style:normal;font-size:.85rem;color:var(--accent);font-family:var(--f-body)}
.couple{text-align:center}
.person{margin:2.2rem 0}
.photo-frame{width:190px;height:240px;margin:0 auto 1rem;border-radius:100px 100px 12px 12px;overflow:hidden;border:2px solid var(--accent);padding:6px;background:var(--surface)}
.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:94px 94px 8px 8px}
.person h3{font-size:2.6rem}
.fullname{font-family:var(--f-head);font-size:1.3rem;font-weight:600}
.parents{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.ig{font-size:.8rem;text-decoration:none}
.amp{font-size:3.4rem}
.countdown{display:flex;justify-content:center;gap:.6rem}
.countdown div{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*.66);width:72px;padding:.7rem 0;text-align:center}
.countdown b{display:block;font-family:var(--f-head);font-size:1.8rem;color:var(--accent);line-height:1.1}
.countdown span{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.3rem;margin-bottom:1.2rem}
.event{text-align:center}
.event h3{font-size:2.3rem}
.ev-date{font-weight:600}
.venue{font-family:var(--f-head);font-weight:600;font-size:1.25rem;margin-top:.6rem}
.badge{display:inline-block;margin-top:.3rem;background:var(--btn,var(--accent));color:var(--accent-ink);border-radius:999px;padding:.1rem .8rem;font-size:.78rem}
.timeline{border-left:2px solid var(--accent);margin-left:.6rem;padding-left:1.3rem}
.tl-item{position:relative;margin-bottom:1.6rem}
.tl-item::before{content:"";position:absolute;left:calc(-1.3rem - 7px);top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.tl-item h4{font-family:var(--f-head);font-size:1.25rem;font-weight:600}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.g-item{border:0;padding:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden;aspect-ratio:3/4}
.g-item:nth-child(3n+1){grid-column:span 2;aspect-ratio:16/10}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.g-item:hover img{transform:scale(1.05)}

/* RSVP */
form label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.9rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:400 .92rem var(--f-body)}
input[readonly]{opacity:.75}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-msg{margin-top:.6rem;font-size:.85rem;min-height:1.2em}
#qr{display:inline-block;background:#fff;padding:12px;border-radius:12px;margin:1rem 0 .5rem}
.wishes{margin-top:1.5rem}
#wishList{max-height:460px;overflow-y:auto;padding-right:.3rem}
.wish{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*.75);padding:.9rem 1rem;margin-bottom:.7rem}
.wish p{font-size:.88rem;margin:.2rem 0}
.wish time{font-size:.72rem;color:var(--muted)}
.tag{font-size:.68rem;padding:.05rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.hadir{border-color:#3c9a5f;color:#3c9a5f}.tag.tidak{border-color:#b4535c;color:#b4535c}
.gift{text-align:center}
.bank-name{font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.acc{font-family:var(--f-head);font-size:1.6rem;font-weight:600;letter-spacing:.06em}
.bank .btn-sm{margin-top:.6rem}
.foot{text-align:center;font-size:.75rem;padding:1.5rem 1rem 6rem;color:var(--muted)}

/* Dock & musik */
.dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.35rem .6rem;box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media (min-width:900px){.dock{left:auto;right:240px;transform:translateX(50%)}}
.dock a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;text-decoration:none;font-size:1rem}
.dock a:hover{background:var(--paper)}
.music{position:fixed;right:16px;bottom:80px;z-index:41;width:44px;height:44px;border-radius:50%;border:0;background:var(--btn,var(--accent));color:var(--accent-ink);font-size:1.2rem;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.music.playing{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:1rem}
.lightbox img{max-height:90vh;border-radius:8px}
.lightbox button{position:absolute;top:12px;right:16px;font-size:2rem;color:#fff;background:none;border:0;cursor:pointer}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:95;background:#222;color:#fff;padding:.5rem 1rem;border-radius:999px;font-size:.82rem}

/* Animasi muncul */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.cover{transition:none}.music.playing{animation:none}}
[hidden]{display:none!important}