:root{
  --maroon:#2e0810; --maroon-d:#2e0810; --maroon-l:#510012;
  --gold:#f8ce46; --gold-l:#f3e5ab; --cream:#faf5ec; --ink:#3a0a12;
  --script:'Cormorant Garamond', serif;
  --sans:'Poppins', sans-serif;
  
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--maroon-d);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
i[data-lucide],svg.lucide{width:1em;height:1em;vertical-align:-.12em}
.hidden{display:none!important}
.script{font-family:var(--script);font-weight:400}
.gold-text{background:linear-gradient(135deg,#bf953f,#fcf6ba 30%,#b38728 55%,#fbf5b7 80%,#aa771c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.glow{color:var(--gold-l);text-shadow:0 0 14px rgba(243,229,171,.55)}
.small{font-size:.8rem;opacity:.85}

/* Tombol pil krem ala mockup */
.pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--cream);color:var(--maroon);border:2px solid var(--gold);border-radius:999px;padding:.5rem 1.2rem;font-weight:700;font-size:.85rem;box-shadow:0 0 14px rgba(243,229,171,.45);transition:transform .2s}
.pill:hover{transform:translateY(-2px)}
.pill .dot{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--maroon);color:var(--cream)}

/* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem 1rem;background:var(--maroon-d);border-bottom:1px solid rgba(212,175,55,.35);position:sticky;top:0;z-index:40}
.topbar .brand{font-family:var(--script);font-size:1.7rem;color:var(--gold)}
.topbar.floating{position:fixed;top:.6rem;right:.6rem;left:auto;background:transparent;border:0;padding:0;z-index:60}
.topbar.floating .brand{display:none}
.tb-btn{border:1px solid rgba(212,175,55,.5);background:rgba(46,8,16,.75);color:var(--gold-l);border-radius:8px;padding:.35rem .7rem;font-size:.72rem;font-weight:700;margin-left:.3rem;backdrop-filter:blur(6px)}
.tb-btn.on{background:var(--gold);color:var(--maroon-d)}
.tb-btn.danger{color:#fda4af;border-color:#4a0e17}

/* Cover: tirai + batik */
.cover{
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    overflow: hidden;

    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
        url("aset/cover2.jpeg") center center / cover no-repeat;

    transition: transform .9s cubic-bezier(.7,0,.2,1);
}
.cover.open{transform:translateY(-100%)}
.cover::before{content:"";position:absolute;inset:0;opacity:.14;background:
  radial-gradient 31px 32px,transparent 33px;
  background-size:110px 110px,150px 150px}

.cover-in{position:relative;z-index:2;max-width:26rem}
.cover .kicker{font-size:1.15rem;color:var(--gold-l);margin-bottom:.3rem}
.cover h1{font-family:var(--script);font-weight:400;font-size:clamp(3.2rem,9vw,4.6rem);line-height:1.1;margin-bottom:2rem}
.guest-card{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--gold);border-radius:22px;padding:1.2rem 2.5rem;margin-bottom:1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.guest-card p{font-size:.85rem}
.guest-card b{font-size:1.05rem;display:block;font-weight:500}
.guest-card .sprig{position:absolute;top:50%;transform:translateY(-50%);width:1.6rem;height:2.6rem;opacity:.35;color:#a89070}
.guest-card .sprig.l{left:.7rem}.guest-card .sprig.r{right:.7rem}

/* Layout split: foto kiri (sticky) + panel kanan */
.stage{display:flex;align-items:flex-start}
.photo{position:sticky;top:0;flex:0 0 57%;height:100vh;background:#200 url('aset/coverfinal.jpeg') center/cover;overflow:hidden}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.15) 55%,rgba(0,0,0,.35))}
.photo-cap{position:absolute;z-index:2;left:0;right:0;bottom:12%;text-align:center;color:#fff}
.photo-cap i{font-family:var(--script);font-style:normal;font-size:1.6rem;display:block}
.photo-cap b{font-family:var(--script);font-weight:400;font-size:clamp(2.6rem,5vw,4rem);line-height:1.1}
.panel{flex:1;min-width:0}

.sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.5rem 1.6rem;position:relative;
  background-color:var(--maroon);background-image:radial-gradient(rgba(212,175,55,.09) 1px,transparent 1.5px);background-size:22px 22px;border-left:1px solid var(--gold)}
.sec+.sec{border-top:1px solid rgba(212,175,55,.25)}
.sec.cream{background-color:var(--cream);color:var(--ink);background-image:radial-gradient(rgba(212,175,55,.18) 1px,transparent 1.5px)}
.sec h2{font-family:var(--script);font-weight:400;font-size:2.6rem;line-height:1.15;margin-bottom:1rem}
.sec h3.sub{font-weight:700;font-size:1.05rem;color:var(--gold-l);margin:.9rem 0 .5rem}
.sec p{font-size:.85rem;max-width:26rem}
.rule{width:100%;max-width:22rem;height:1px;background:rgba(243,229,171,.5);margin:.8rem auto}
#tujuan{
  background-color:#faf8f3;
  background-image:url("aset/bg-floral.jpeg");
  background-size:cover;
  background-repeat:no repeat;
}

/*Info*/
.card-maroon{background:var(--maroon-d);border-radius:4px;padding:2rem 1.5rem;width:100%;max-width:30rem; min-height: 700 px;box-shadow:12px 14px 22px rgba(0,0,0,.45)}
.card-maroon p{font-weight:500;margin-inline:auto}
.card-maroon{color:var(--cream);background:var(--maroon-d);border-radius:4px;padding:2rem 1.5rem;width:100%;max-width:30rem; min-height: 700 px;box-shadow:12px 14px 22px rgba(0,0,0,.45)}
.names{font-family:var(--script);font-size:1.7rem;color:var(--gold-l);line-height:1.3;margin:.2rem 0}



/* Foto berbingkai */
.frame{border:2px solid var(--cream);box-shadow:0 6px 18px rgba(0,0,0,.45);background:#000}
.frame img{width:100%;height:100%;object-fit:cover}
.gal-frame {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.sec.frame{
  background-color:var(#2e0810);
  background-image:url("aset/bgkn.jpeg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.gal-frame img,
.gal-frame video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  object-fit: cover;
}
.bride-photo{width:9.5rem;height:11.5rem;margin:0 auto .6rem}
.person{margin:.8rem 0}
.person .nm{font-family:var(--script);font-size:1.9rem;color:var(--gold-l);line-height:1.1}
.person p{margin:auto;font-size:.82rem}
.ig{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--cream);color:var(--maroon);border:2px solid var(--gold);box-shadow:0 0 12px rgba(243,229,171,.6);margin:.4rem;text-decoration:none}
.hearts{color:var(--gold-l);font-size:1.4rem;display:flex;align-items:center;gap:.6rem;justify-content:center;width:100%}
.hearts::before,.hearts::after{content:"";height:1px;flex:1;background:rgba(243,229,171,.5)}


/* Countdown */
.cd{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.6rem 0}
.cd-box{background:var(--cream);color:var(--maroon);border-radius:6px;min-width:3.4rem;padding:.35rem .3rem;box-shadow:0 0 14px rgba(243,229,171,.5)}
.cd-box b{display:block;font-size:1.5rem;line-height:1.2}
.cd-box span{font-size:.6rem;font-weight:500}
.cd-sep{color:var(--gold);font-weight:700}
.line-gold{width:100%;max-width:22rem;border-top:1px solid var(--gold);margin:.9rem auto}


/* Gallery */
.gal-frame{background:#fff;padding:1.4rem;width:100%;max-width:32rem;box-shadow:0 10px 24px rgba(0,0,0,.5);display:grid;gap:1.2rem}
.gal-frame img{width:100%;height:15rem;object-fit:cover;border:2px solid var(--gold)}

/* Doa: bingkai ornamen emas */
.sec.doa{background-image:radial-gradient(circle at 0 0,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),radial-gradient(circle at 100% 0,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),radial-gradient(circle at 0 100%,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),radial-gradient(circle at 100% 100%,transparent 0 46px,var(--gold) 47px 50px,transparent 51px);background-size:100% 100%}
.doa-box{background:#fff;color:var(--maroon-d);border:2px solid #111;padding:1.8rem 1.4rem;max-width:24rem;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.doa-box h2{color:var(--gold)}
.doa-box p{font-weight:500;margin:auto}
.sec.doa{
  background-color:#2e0810;
  background-image:
    radial-gradient(circle at 0 0,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),
    radial-gradient(circle at 100% 0,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),
    radial-gradient(circle at 0 100%,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),
    radial-gradient(circle at 100% 100%,transparent 0 46px,var(--gold) 47px 50px,transparent 51px),
    url("aset/bgkn.jpeg");
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
  background-position:0 0, 0 0, 0 0, 0 0, center;
  background-repeat:no-repeat;
}
.doa-box{background:#fff;color:var(--maroon-d);border:2px solid #111;padding:1.8rem 1.4rem;max-width:24rem;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.doa-box h2{color:var(--gold)}
.doa-box p{font-weight:500;margin:auto}


/* Story */
.story{margin-bottom:1rem}
.story .frame{width:100%;max-width:26rem;height:16rem;margin:.3rem auto .8rem}
.story p{max-width:26rem}
.story .frame{width:100%;max-width:18rem;height:auto;margin:.3rem auto .8rem}
.story .frame img{width:100%;height:auto;display:block}


/* Gift */
.gift-photo{width:14rem;height:10rem;margin-bottom:.8rem}

/* RSVP */
.rsvp-form{background:#fff;color:var(--maroon);border:2px solid #111;width:100%;max-width:23rem;padding:1rem;text-align:left;margin-top:1rem;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.rsvp-form label{display:block;font-weight:700;font-size:.85rem;margin:.5rem 0 .2rem}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{width:100%;padding:.5rem .6rem;border:2px solid var(--maroon);font:inherit;font-size:.85rem;color:var(--maroon);background:#fff}
.rsvp-form button{width:100%;margin-top:.8rem;padding:.5rem;border:2px solid var(--maroon);background:#fff;color:var(--maroon);font-weight:700}
.rsvp-form button:hover{background:var(--maroon);color:#fff}
.wishes{width:100%;max-width:23rem;text-align:left;margin-top:1.4rem;max-height:14rem;overflow:auto;padding-right:.4rem}
.wishes h4{color:var(--gold-l);font-size:.85rem;margin-bottom:.5rem}
.wish{background:rgba(0,0,0,.3);border:1px solid rgba(212,175,55,.25);border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem;font-size:.78rem}
.wish .row{display:flex;justify-content:space-between;gap:.5rem}
.wish em{opacity:.85}
.badge{padding:0 .5rem;border-radius:5px;font-size:.65rem;border:1px solid}
.badge.ok{background:#052e1e;color:#34d399;border-color:#065f46}
.badge.no{background:#4c0519;color:#fb7185;border-color:#ef117960}

/* Ending */
.end-photo{width:16rem;height:10.5rem;margin-bottom:1rem}
.sec.cream h2{color:var(--maroon)}
.sec.cream .frame{border-color:var(--maroon-d)}
#ending{
  background-color:#faf8f3;
  background-image:url("aset/bg-floral.jpeg");
  background-size:cover;
  background-repeat:no repeat;
}

#acara,
#story,
#pengantin,
#gift,
#rsvp,
#doa,
.sec.gallery{
  background-color:#2e0810;
  background-image:url("aset/bgkn.jpeg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Modal & toast */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:1rem}
.modal-box{position:relative;background:var(--maroon);border:1px solid var(--gold);border-radius:22px;padding:2rem 1.5rem;max-width:26rem;width:100%;text-align:center}
.modal-x{position:absolute;top:.8rem;right:.8rem;background:none;border:0;color:#ccc;font-size:1.3rem}
.modal-ico{font-size:2.2rem;color:var(--gold)}
.modal-box h3{font-size:2.2rem;color:var(--gold-l)}
.acc{margin-top:1rem;background:var(--maroon-d);border:1px solid rgba(212,175,55,.3);border-radius:16px;padding:1.2rem}
.acc .num{font-family:monospace;font-size:1.6rem;letter-spacing:.08em;margin:.3rem 0}
.toast{position:fixed;bottom:1.2rem;right:1.2rem;z-index:120;background:var(--gold);color:var(--maroon-d);font-weight:700;font-size:.85rem;padding:.7rem 1.1rem;border-radius:12px;display:flex;gap:.5rem;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.toast.show{opacity:1}

/* Login & Dashboard */
.center-page{min-height:calc(100vh - 3rem);display:grid;place-items:center;padding:1rem}
.box{background:var(--maroon);border:1px solid rgba(212,175,55,.4);border-radius:20px;padding:1.5rem;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.login{max-width:26rem;width:100%;padding:2rem}
.login h2,.dash h1{font-family:var(--script);font-weight:400;color:var(--gold-l)}
.login h2{font-size:2.4rem;text-align:center}
.f-label{display:block;font-size:.75rem;font-weight:700;color:var(--gold-l);margin:.7rem 0 .25rem}
.f-in{width:100%;padding:.55rem .8rem;border-radius:10px;background:var(--maroon-d);border:1px solid rgba(212,175,55,.35);color:#fff;font:inherit;font-size:.85rem}
.f-in:focus,.rsvp-form :focus-visible{outline:2px solid var(--gold)}
.btn-gold{width:100%;margin-top:1rem;padding:.65rem;border:0;border-radius:10px;background:var(--gold);color:var(--maroon-d);font-weight:700}
.dash{padding:1.5rem;max-width:72rem;margin:auto}
.dash h1{font-size:2.4rem}
.dash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-bottom:1px solid rgba(212,175,55,.3);padding-bottom:1rem;margin-bottom:1.2rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin-bottom:1.2rem}
.stat p{font-size:.72rem;font-weight:700;color:var(--gold)}
.stat b{font-size:2rem}
.grid3{display:grid;gap:1.2rem;grid-template-columns:1fr}
.row{display:flex;gap:.7rem}
table{width:100%;border-collapse:collapse;font-size:.8rem}
th{color:var(--gold);text-align:left;padding:.6rem;border-bottom:1px solid rgba(212,175,55,.3)}
td{padding:.6rem;border-bottom:1px solid rgba(212,175,55,.1)}
.tbl{overflow-x:auto}
.del{background:none;border:0;color:#fb7185;font-size:1rem}
audio{
    display:none;
}

/* Mobile: foto jadi bagian pertama, panel penuh */
@media(max-width:820px){
  .stage{display:block}
  .photo{position:relative;height:100vh;height:100svh}
  .sec{border-left:0}
  .curtain{width:22%}
  .guest-card{padding:1.1rem 2.2rem}
}
@media(min-width:821px){.grid3{grid-template-columns:1fr 2fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}