/* ==========================================================================
   Motion Floral — undangan pernikahan hijau botani
   Referensi tata letak: mer.id/tema/classic_floral
   Metrik acuan @1440: kolom kanan 576 (40%), padding 40, kartu 496, gap 12,
   panel kiri 864 (60%) = cover yang mengecil setelah dibuka.
   Seluruh aset lokal: font self-host, ornamen SVG, tanpa CDN.
   ========================================================================== */

/* ------------------------------- tokens --------------------------------- */
:root{
  --green:#224b3f;
  --green-2:#34715f;
  --green-3:#4d8574;
  --ink:#224b3f;
  --muted:#7e9a91;
  --mint:#eef2ee;
  --mint-2:#e7eee9;
  --paper:#f2f5f2;

  --f-display:'Gabriela','Philosopher',Georgia,'Times New Roman',serif;
  --f-body:'Quicksand','Amiri','Segoe UI',system-ui,-apple-system,sans-serif;

  --col:576px;
  --radius:24px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-soft:0 16px 40px -24px rgba(20,54,44,.45);
  --shadow-card:0 22px 50px -30px rgba(20,54,44,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.fl-locked,html.fl-locked body{overflow:hidden;height:100%}
html.fl-noscroll{overflow:hidden}
body.fl-body{
  margin:0;
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.7;
  color:var(--green-2);
  background:var(--green);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4,blockquote,figure{margin:0}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}

/* ------------------------------- helpers --------------------------------- */
.fl-sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
.fl-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fl-kicker{
  font-size:10px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--green-2);
}
.fl-h2{
  font-family:var(--f-display);font-weight:500;font-size:36px;line-height:1.15;
  letter-spacing:0;color:var(--green);
}
.fl-h2--light{color:#fff}
.fl-sub{font-size:14px;line-height:1.7;color:var(--muted);margin-top:8px}
.fl-lead{font-size:14px;line-height:1.75;color:#5d857a;margin:14px auto 0;max-width:350px}
.fl-head{text-align:center;margin-bottom:32px}
.fl-dots{height:0;border-top:1px dashed rgba(34,75,63,.38);margin:28px 0 26px}

/* -------------------------------- layout --------------------------------- */
.fl-col{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#fff;
  padding:12px 12px 96px;
  overflow-x:clip;
}
.fl-sec{
  position:relative;
  border-radius:var(--radius);
  padding:44px 22px;
  margin-bottom:12px;
  overflow:hidden;
}
.fl-sec:last-of-type{margin-bottom:0}

@media (min-width:1024px){
  .fl-col{
    width:50%;
    max-width:var(--col);
    margin-left:auto;
    padding:52px 40px 40px;
  }
  .fl-sec{padding:60px 32px}
  .fl-open{
    min-height:792px;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:300px 48px 60px;
  }
  .fl-save{
    min-height:333px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .fl-dress{
    min-height:332px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .fl-closing__body{padding-bottom:88px}
}
@media (min-width:1280px){
  .fl-col{width:40%}
}

/* ------------------------------ tombol ----------------------------------- */
.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 26px;border-radius:999px;
  font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.35px;
  border:1px solid transparent;
  transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),opacity .5s var(--ease);
}
.fl-btn:active{transform:scale(.985)}
.fl-btn--green{
  background:var(--green);color:#fff;
  box-shadow:0 18px 28px -12px rgba(20,54,44,.55);
}
.fl-btn--green:hover{background:#1a3d33}
.fl-btn--outline{
  border-color:rgba(34,75,63,.42);color:var(--green);background:transparent;
}
.fl-btn--outline:hover{background:rgba(34,75,63,.06)}
.fl-btn--wide{width:100%}
.fl-btn .fl-ico{width:16px;height:16px}

.fl-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 20px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  border:1px solid transparent;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.fl-pill--green{background:var(--green);color:#fff}
.fl-pill--green:hover{background:#1a3d33}
.fl-pill--light{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.06)}
.fl-pill--light:hover{background:rgba(255,255,255,.14)}
.fl-pill--outline{border-color:rgba(255,255,255,.62);color:#fff;background:transparent}
.fl-pill--outline:hover{background:rgba(255,255,255,.12)}
.fl-pill--wide{width:100%}
.fl-iconbtn{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;
  border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent;
  transition:background-color .3s var(--ease);
}
.fl-iconbtn:hover{background:rgba(255,255,255,.14)}
.fl-iconbtn .fl-ico{width:19px;height:19px}

/* ------------------------------ input ------------------------------------ */
.fl-input,.fl-textarea{
  width:100%;border:1px solid transparent;border-radius:12px;
  background:#fff;color:var(--ink);font-family:var(--f-body);
  font-size:14px;line-height:1.6;padding:13px 16px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.fl-input:focus,.fl-textarea:focus{outline:none;border-color:rgba(34,75,63,.35);box-shadow:0 0 0 3px rgba(34,75,63,.08)}
.fl-textarea{min-height:84px;resize:vertical}
.fl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------- reveal on scroll ---------------------------- */
.fl-anim .fl-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.fl-anim .fl-reveal.is-in{opacity:1;transform:none}

/* ================================ COVER ================================= */
.fl-cover{
  --media:60%;
  --media-gap:60px;
  position:fixed;top:0;left:0;z-index:60;
  width:100%;height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:#fff;
  transition:width .7s var(--ease),transform .9s var(--ease),opacity .9s var(--ease),visibility .9s var(--ease);
}
.fl-cover__media{
  position:relative;z-index:1;
  flex:0 0 var(--media);height:var(--media);
  overflow:hidden;background:#16332b;
  border-radius:0 0 64px 64px;
  box-shadow:0 2px 10px rgba(8,26,21,.08);
}
.fl-cover__media .fl-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:0;transform:scale(1.01);transform-origin:50% 0;
  transition:opacity 1.2s ease,transform 7s linear;
  will-change:opacity,transform;
}
.fl-cover__media .fl-slide.is-active{opacity:1;transform:scale(1.075)}
/* Video galeri: hanya diputar di desktop, foto tetap dipakai di mobile. */
.fl-cover__videos{position:absolute;inset:0;display:none;background:#16332b}
.fl-cover__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:0;transition:opacity .9s ease;
}
.fl-cover__video.is-active{opacity:1}
@media (min-width:1024px){
  .fl-cover__media.has-video .fl-cover__videos{display:block}
  .fl-cover__media.has-video .fl-slide{display:none}
}
.fl-cover__panel{
  position:relative;z-index:0;
  flex:1 1 auto;min-height:0;margin-top:calc(-1 * var(--media-gap));
  background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--media-gap) + 50px) 24px 32px;
  text-align:center;
}
.fl-cover__art{position:absolute;width:440px;pointer-events:none;z-index:0;opacity:1}
.fl-cover__art img{width:100%;animation:flSway 12s ease-in-out infinite}
.fl-cover__art--l{left:-8px;bottom:-8px}
.fl-cover__art--r{right:-8px;bottom:-8px;transform:scaleX(-1)}

.fl-cover__card{
  position:relative;z-index:2;
  width:100%;max-width:527px;
  background:rgba(255,255,255,.8);
  border-radius:12px;
  padding:16px 48px;
  display:flex;flex-direction:column;align-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.fl-cover__content{display:contents}
.fl-cover__kicker{
  font-size:16px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--green);line-height:1.55;
}
.fl-cover__names{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(38px,4.2vw,60px);line-height:1.02;color:var(--green-2);
  margin-top:18px;
}
.fl-cover__names span{font-weight:400}
.fl-cover__guest{margin-top:26px}
.fl-cover__to{font-size:14px;line-height:1.45;color:rgba(34,75,63,.8)}
.fl-cover__guestname{font-size:16px;font-weight:700;color:var(--green-2);margin-top:5px;line-height:1.5}
.fl-cover__btn{margin-top:26px;min-height:44px;padding:0 34px;font-size:14px;letter-spacing:.35px;z-index:3}
.fl-cover__note{display:none}
.fl-opened .fl-cover__btn{opacity:0;pointer-events:none;visibility:hidden}

/* dekorasi panel bawah */
.fl-cover__panel::before,
.fl-cover__panel::after{
  content:"";position:absolute;bottom:-20px;width:300px;height:230px;
  background:url('img/floral-sprig.svg') no-repeat center/contain;
  opacity:.4;pointer-events:none;
}
.fl-cover__panel::before{left:-70px;transform:rotate(180deg)}
.fl-cover__panel::after{right:-70px;transform:rotate(180deg) scaleX(-1)}

/* countdown */
.fl-cd{display:flex;align-items:flex-start;justify-content:center;gap:9px}
.fl-cd__cell{display:flex;flex-direction:column;align-items:center}
.fl-cd__num{
  font-family:var(--f-display);font-weight:400;font-size:36px;line-height:36px;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.fl-cd__label{
  font-size:10px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--green-2);margin-top:4px;
}
.fl-cover__cd{
  position:absolute;top:calc(var(--media) - 64px);left:0;
  width:100%;gap:8px;z-index:20;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
}
.fl-cover__cd .fl-cd__cell{
  width:96px;height:112px;border-radius:16px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -20px rgba(20,54,44,.4);
}
.fl-cover__cd .fl-cd__num{font-size:36px;line-height:1}
.fl-cover__cd .fl-cd__label{font-size:10px;letter-spacing:.5px;margin-top:7px}
.fl-opened .fl-cover__cd{opacity:0;visibility:hidden}

/* =============================== PEMBUKA ================================ */
.fl-open{
  background:linear-gradient(to top,rgba(34,75,63,.2) 0%,#ffffff 62%);
  padding:316px 48px 60px;
  text-align:left;
}
.fl-open__art{
  position:absolute;top:-6px;right:-6px;width:500px;height:370px;overflow:hidden;
  pointer-events:none;z-index:0;opacity:.38;transform:rotate(180deg);
}
.fl-open__art img{width:100%;height:100%;animation:flSway 12s ease-in-out infinite}
.fl-open__inner{position:relative;z-index:1}
.fl-open__kicker{
  font-size:16px;line-height:1.55;letter-spacing:.4px;color:var(--green-2);
}
.fl-open__names{
  font-family:var(--f-display);font-weight:700;
  font-size:36px;line-height:45px;color:var(--green-2);
  margin-top:6px;
}
.fl-open__names span{font-weight:400}
.fl-quote{
  font-size:14px;line-height:2;color:rgba(52,113,95,.85);text-align:left;
}
.fl-quote__p + .fl-quote__p{margin-top:16px}
.fl-quote__ar{
  font-family:'Amiri',var(--f-body);
  font-size:22px;line-height:1.64;color:var(--green-2);
  direction:rtl;text-align:right;
}
.fl-quote__src{
  font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--green);
}

/* ============================ SAVE THE DATE ============================= */
.fl-save{background:var(--green);padding:60px 32px;text-align:center;color:#fff}
.fl-save__label{
  font-family:var(--f-display);font-weight:400;
  font-size:24px;line-height:32px;letter-spacing:5px;text-transform:uppercase;
  color:#fff;
}
.fl-save .fl-cd{margin-top:26px;gap:9px}
.fl-save .fl-cd__cell{
  min-width:66px;padding:11px 7px 8px;border-radius:10px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);
}
.fl-save .fl-cd__num{color:#fff;font-size:26px;line-height:30px}
.fl-save .fl-cd__label{color:#c3d8cf;font-size:9px;letter-spacing:1.4px;margin-top:6px}
.fl-save__date{font-size:14px;color:#dbe9e3;margin-top:20px;letter-spacing:.2px}

/* =============================== MEMPELAI =============================== */
.fl-couple{
  background-color:var(--mint);
  background-image:url('img/paper.svg');
  background-repeat:repeat;
  padding:56px 32px 48px;
  text-align:center;
}
.fl-couple .fl-head{margin-bottom:20px}
.fl-couple__card{
  position:relative;z-index:1;
  max-width:322px;margin:0 auto;
  background:transparent;
  border:1px solid rgba(52,113,95,.34);
  border-radius:22px;
  padding:0;
  overflow:hidden;
  text-align:left;
}
.fl-person__photo{
  aspect-ratio:1.04/1;background:#e2e9e4;
}
.fl-person__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.fl-person__body{padding:14px 18px 18px}
.fl-person__name{
  font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.32;
  color:var(--green);
}
.fl-person__parents{font-size:13px;line-height:1.72;color:var(--muted);margin-top:3px}
.fl-person__ig{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;font-weight:600;color:var(--green-2);
}
.fl-person__ig .fl-ico{width:14px;height:14px}
.fl-person + .fl-person{
  margin-top:0;padding-top:0;border-top:1px solid rgba(52,113,95,.3);
}
.fl-person:last-child{text-align:right}
.fl-person:last-child .fl-person__ig{justify-content:flex-end}
.fl-sprig{display:none}

/* ================================ ACARA ================================= */
.fl-acara-sec{
  padding:0;background-color:var(--mint);background-image:url('img/paper.svg');
  background-repeat:repeat;overflow:hidden;border-radius:var(--radius);
}
.fl-acara{
  background:var(--green);color:#e7f0eb;
  padding:60px 40px 60px;text-align:center;
}
.fl-acara .fl-h2{font-size:36px;line-height:1.15;color:#fff;font-weight:500}
.fl-acara__title{
  font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.35;
  color:#fff;margin-top:18px;
}
.fl-acara__date{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin:26px 0 4px;
}
.fl-acara__side{
  font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#dbe9e3;
}
.fl-acara__num{
  font-family:var(--f-display);font-weight:400;font-size:44px;line-height:.9;
  color:#fff;min-width:44px;
}
.fl-acara__num small{
  display:block;font-family:var(--f-body);font-size:12px;font-weight:400;
  letter-spacing:1.2px;color:#c3d8cf;margin-top:7px;
}
.fl-acara__bar{width:1px;height:52px;background:rgba(255,255,255,.35);display:block}
.fl-acara__time{font-size:14px;color:#dbe9e3;margin-top:12px}
.fl-acara__caption{
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#c3d8cf;margin-top:26px;
}
.fl-acara__venue{font-size:14px;font-weight:700;color:#fff;margin-top:12px}
.fl-acara__addr{font-size:14px;line-height:1.6;color:#dbe9e3;margin-top:6px;margin-left:auto;margin-right:auto;max-width:340px}
.fl-acara__btns{display:flex;justify-content:center;gap:10px;margin-top:18px}

.fl-confirm{
  position:relative;margin:30px auto 0;max-width:400px;
  padding:26px 18px 20px;border-radius:12px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.08);
}
.fl-confirm__badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.2px;color:#fff;white-space:nowrap;
  background:#2c5a4b;border:1px solid rgba(255,255,255,.28);
  padding:4px 12px;border-radius:7px;
}
.fl-confirm__text{font-size:14px;line-height:1.6;color:#e7f0eb}
.fl-confirm__btns{display:flex;justify-content:center;gap:10px;margin-top:16px}
.fl-confirm__btns .fl-pill{min-height:40px;padding:0 22px;font-size:13px}

.fl-acara__note{font-size:14px;line-height:1.85;color:#dbe9e3;margin:34px 0 0}
.fl-acara__salam{font-size:14px;color:#e7f0eb;margin-top:24px}

.fl-events{padding:24px 32px 40px;display:flex;flex-direction:column;gap:14px}
.fl-event{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(235,241,236,.92) 100%);
  border:1px solid rgba(34,75,63,.26);
  border-radius:18px;padding:26px 24px;text-align:left;
  box-shadow:0 16px 30px -28px rgba(20,54,44,.45);
}
.fl-event__title{
  font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.3;color:var(--green);
}
.fl-event__venue{font-size:14px;font-weight:700;color:var(--green);margin-top:14px}
.fl-event__addr{font-size:13px;line-height:1.7;color:#5d857a;margin-top:4px}
.fl-event__date{font-size:13px;color:var(--green-2);margin-top:14px}
.fl-event__time{font-size:13px;color:var(--green-2);margin-top:2px}
.fl-event__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fl-event__btns .fl-pill{min-height:36px;padding:0 16px;font-size:12px}

/* live streaming (di dalam section acara) */
.fl-live{
  margin:0 32px 40px;text-align:center;
  background:rgba(255,255,255,.7);border:1px solid rgba(34,75,63,.22);border-radius:16px;
  padding:30px 22px;
}
.fl-live .fl-pill{margin-top:18px}

/* ============================== LOVE STORY ============================== */
.fl-story-sec{
  padding:60px 0 0;background:#fff;text-align:center;
}
.fl-story-sec .fl-head{padding:0 32px;margin-bottom:40px}
.fl-story-card{
  background:var(--green);border-radius:var(--radius);
  padding:80px 20px 100px;box-shadow:var(--shadow-card);text-align:left;
}
.fl-story{position:relative;padding:0 0 44px 28px}
.fl-story:last-child{padding-bottom:0}
.fl-story::before{
  content:"";position:absolute;left:7px;top:14px;bottom:0;width:1px;
  background:linear-gradient(to bottom,rgba(255,255,255,.34),rgba(255,255,255,.12));
}
.fl-story:last-child::before{display:none}
.fl-story__dot{
  position:absolute;left:2px;top:6px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid #dbe9e3;background:var(--green);
}
.fl-story__idx{
  font-size:12px;font-weight:400;letter-spacing:.3px;color:#9fbdb2;
}
.fl-story__title{
  font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.32;
  color:#fff;margin-top:6px;
}
.fl-story__text{font-size:13px;line-height:1.9;color:#c8dcd4;margin-top:8px}

/* ================================ GALERI ================================ */
.fl-gallery{
  background-color:var(--mint);background-image:url('img/paper.svg');
  background-repeat:repeat;padding:60px 32px;text-align:center;
}
.fl-gallery .fl-head{margin-bottom:0}
.fl-gal{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:64px;padding:0 8px;
}
.fl-gal__item{
  position:relative;display:block;width:100%;aspect-ratio:3/4;
  border-radius:0;overflow:hidden;background:var(--mint-2);
}
.fl-gal__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.fl-gal__item:hover img{transform:scale(1.04)}
.fl-gal__item video{
  width:100%;height:100%;object-fit:cover;object-position:center 25%;
  transition:transform .8s var(--ease);
}
.fl-gal__item:hover video{transform:scale(1.04)}
.fl-gal__play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.fl-gal__play .fl-ico{
  width:32px;height:32px;color:#fff;fill:rgba(10,28,22,.5);stroke-width:1.4;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* Variasi Layout Galeri (mengikuti pilihan di admin) */
.fl-gal--2{grid-template-columns:repeat(2,1fr)}
.fl-gal--masonry{display:block;column-count:3;column-gap:4px}
.fl-gal--masonry .fl-gal__item{
  width:100%;aspect-ratio:auto;margin:0 0 4px;
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.fl-gal--masonry .fl-gal__item:nth-child(3n+1){aspect-ratio:3/4}
.fl-gal--masonry .fl-gal__item:nth-child(3n+2){aspect-ratio:1/1}
.fl-gal--masonry .fl-gal__item:nth-child(3n){aspect-ratio:4/5}
.fl-gal--slideshow{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 8px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fl-gal--slideshow::-webkit-scrollbar{display:none}
.fl-gal--slideshow .fl-gal__item{flex:0 0 82%;aspect-ratio:4/5;scroll-snap-align:center}

.fl-gal--move{display:block}
.fl-gal__stack{display:grid;grid-template-columns:1.15fr .85fr;gap:4px}
.fl-gal__stack .fl-gal__item:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.fl-gal__stack .fl-gal__item:nth-child(2),
.fl-gal__stack .fl-gal__item:nth-child(3){aspect-ratio:4/3}
.fl-gal__move{position:relative;margin-top:4px;overflow:hidden}
.fl-gal__track{display:flex;gap:4px;transition:transform .7s var(--ease);will-change:transform}
.fl-gal__item--move{flex:0 0 calc((100% - 8px)/3);aspect-ratio:3/4}
.fl-gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--green);
  border:1px solid rgba(34,75,63,.18);
  box-shadow:0 6px 16px -8px rgba(20,54,44,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.fl-gal__nav:hover{background:#fff}
.fl-gal__nav:active{transform:translateY(-50%) scale(.94)}
.fl-gal__nav .fl-ico{width:16px;height:16px;stroke-width:1.9}
.fl-gal__nav--prev{left:6px}
.fl-gal__nav--next{right:6px}
.fl-gal__wide{margin-top:4px}
.fl-gal__wide .fl-gal__item{aspect-ratio:16/9}

/* ================================ UCAPAN ================================ */
.fl-wish{
  padding:60px 32px;
  background:var(--mint);
  text-align:center;
}
.fl-wish__form{display:flex;flex-direction:column;gap:12px;margin-top:30px;text-align:left}
.fl-wish__form .fl-btn{min-height:40px;font-size:13px}
.fl-thanks{margin-top:32px;text-align:center}
.fl-thanks > p{font-size:13px;line-height:1.8;color:#5d857a;margin:0 auto;max-width:340px}
.fl-thanks > .fl-thanks__label{font-size:13px;color:var(--muted);margin-top:24px;max-width:none}
.fl-thanks > .fl-thanks__names{
  font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.25;
  color:var(--green);margin-top:4px;
}
.fl-wishes{
  background:#fff;border-radius:24px;
  padding:48px 48px 40px;margin-top:40px;text-align:left;
}
.fl-wishes__item{display:flex;gap:16px;padding:0;margin-bottom:36px}
.fl-wishes__item:last-of-type{margin-bottom:0}
.fl-wishes__item.is-extra{display:none}
.fl-wishes__mark{flex:none;width:28px;height:28px;color:var(--green-2);opacity:.85;margin-top:0}
.fl-wishes__mark .fl-ico{width:26px;height:26px;fill:currentColor;stroke:none}
.fl-wishes__name{font-size:14px;font-weight:700;color:var(--green);line-height:1.5}
.fl-wishes__text{font-size:13px;line-height:1.85;color:#5d857a;margin-top:3px}
.fl-wishes__meta{display:none}
.fl-wishes__empty{font-size:13px;color:var(--muted);padding:10px 0}
.fl-wishes__more{
  display:block;width:100%;min-height:44px;margin-top:32px;
  border:1px solid var(--green);border-radius:999px;background:transparent;
  font-size:14px;font-weight:500;color:var(--green);
}

/* ============================== LOVE GIFT =============================== */
.fl-gift__box{max-width:420px;max-height:90vh;overflow:auto}
.fl-banks{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.fl-bank{
  position:relative;background:var(--mint);border:1px solid rgba(34,75,63,.18);
  border-radius:14px;padding:16px 18px 54px;text-align:left;
}
.fl-bank__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fl-bank__name{font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--green)}
.fl-bank__logo{height:22px;width:auto}
.fl-bank__label{
  font-size:9px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);margin-top:12px;
}
.fl-bank__num{font-size:16px;font-weight:700;letter-spacing:.6px;color:var(--ink);margin-top:2px}
.fl-bank__holder{font-size:12px;color:#5d857a;margin-top:1px}
.fl-bank__copy{
  position:absolute;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--green-2);
  border:1px solid rgba(34,75,63,.28);border-radius:999px;
  padding:6px 12px;
}
.fl-bank__copy .fl-ico{width:12px;height:12px}
.fl-qris{
  margin-top:12px;background:var(--mint);border:1px solid rgba(34,75,63,.18);
  border-radius:14px;overflow:hidden;text-align:left;
}
.fl-qris summary{
  padding:14px 18px;font-size:13px;font-weight:600;color:var(--green-2);
  display:flex;justify-content:space-between;align-items:center;
}
.fl-qris summary::after{content:"+";font-size:16px;color:var(--muted)}
.fl-qris[open] summary::after{content:"–"}
.fl-qris__body{padding:0 18px 18px;text-align:center}
.fl-qris__body img{width:100%;max-width:200px;margin:0 auto;border-radius:10px}
.fl-gift__box > .fl-btn{margin-top:16px}

/* ============================== DRESSCODE =============================== */
.fl-dress{
  background-color:var(--mint);background-image:url('img/paper.svg');
  background-repeat:repeat;padding:50px 32px 56px;text-align:center;
}
.fl-dress__body{margin-top:30px}
.fl-dress .tpl-dress{
  display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;
  font-family:var(--f-body)!important;font-size:14px!important;
  gap:18px 34px!important;color:var(--green);
}
.fl-dress .tpl-dress > span:first-child{display:none!important}
.fl-dress .tpl-dress > span{
  display:inline-flex!important;align-items:center;gap:10px!important;
  font-size:14px!important;color:var(--green);
}
.fl-dress .tpl-dress > span > span:first-child{
  width:auto!important;height:auto!important;background:none!important;
  border:0!important;box-shadow:none!important;font-size:14px!important;color:var(--green);
}
.fl-dress .tpl-dress > span > span:last-child{
  width:44px!important;height:44px!important;border-radius:12px!important;
  border:3px solid #fff!important;
  box-shadow:0 0 0 1px rgba(34,75,63,.12),0 10px 20px -12px rgba(20,54,44,.7)!important;
}

/* ============================ LIVE STREAMING ============================ */
.fl-live-sec{
  background-color:#fff;border:1px solid rgba(34,75,63,.16);text-align:center;
}

/* =============================== PENUTUP ================================ */
.fl-closing{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#fff;margin-top:0;border:0;
}
.fl-closing__photo{position:relative;aspect-ratio:496/330;overflow:hidden;background:#16332b}
.fl-closing__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.fl-closing__photo video{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.fl-closing__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 78%,rgba(255,255,255,.9) 100%);
}
.fl-closing__body{position:relative;padding:28px 32px 40px;text-align:center}
.fl-closing__art{position:absolute;width:170px;opacity:.35;pointer-events:none;z-index:0}
.fl-closing__art img{width:100%;animation:flSway 10s ease-in-out infinite}
.fl-closing__art--l{left:-58px;bottom:40px}
.fl-closing__art--r{right:-58px;bottom:40px;transform:scaleX(-1)}
.fl-closing .fl-kicker{font-size:10px;letter-spacing:2.4px}
.fl-closing__names{
  font-family:var(--f-display);font-weight:700;font-size:36px;line-height:1.15;
  color:var(--green);margin-top:8px;
}
.fl-closing__date{
  font-size:12px;letter-spacing:2px;color:var(--muted);margin-top:10px;
}
.fl-closing__msg{font-size:13px;line-height:1.9;color:#5d857a;margin:20px auto 0;max-width:360px}
.fl-closing__invite{font-size:12px;color:var(--muted);margin-top:20px}
.fl-closing__invite span{display:block;font-size:13px;color:#4a7467;margin-top:3px}

.fl-footer{margin-top:34px;padding-top:22px;border-top:1px solid rgba(34,75,63,.14)}
.fl-footer__names{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--green)}
.fl-footer__love{font-size:12px;color:#6f9186;margin-top:6px;letter-spacing:.2px}
.fl-footer__by{font-size:11px;color:#9aafa7;margin-top:12px}
.fl-footer__by a{color:var(--green-2);font-weight:600;border-bottom:1px solid rgba(52,113,95,.3)}

/* ================================ NAV =================================== */
.fl-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none;
  opacity:0;transform:translateY(100%);
  transition:opacity .6s var(--ease),transform .8s cubic-bezier(.16,1,.3,1);
}
.fl-opened .fl-nav{opacity:1;transform:none}
.fl-nav__inner{
  pointer-events:none;display:flex;align-items:stretch;justify-content:space-between;
  width:100%;max-width:448px;height:62px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(34,75,63,.08);
  border-radius:999px;padding:6px 12px;
  box-shadow:0 14px 34px -26px rgba(20,54,44,.4);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.fl-opened .fl-nav__inner{pointer-events:auto}
.fl-nav a{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:999px;
  font-size:10px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;
  color:var(--green-2);
  transition:color .3s var(--ease),font-weight .3s var(--ease);
}
.fl-nav a .fl-ico{width:21px;height:21px;stroke-width:1.6}
.fl-nav a.is-active{color:var(--green);font-weight:700}
.fl-nav a.is-active .fl-ico{stroke-width:1.9}
@media (min-width:1024px){
  .fl-nav{
    left:auto;right:0;width:50%;max-width:var(--col);
    bottom:20px;padding:0;
  }
}
@media (min-width:1280px){
  .fl-nav{width:40%}
}

/* ============================ KONTROL NAV =============================== */
.fl-nav__ctrl{
  flex:0 0 36px;width:36px;height:36px;align-self:center;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(34,75,63,.08);color:var(--green);
  transition:background-color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease),visibility .3s var(--ease);
}
.fl-nav__ctrl:hover{background:rgba(34,75,63,.15)}
.fl-nav__ctrl:active{transform:scale(.92)}
.fl-nav__ctrl .fl-ico{width:19px;height:19px;stroke-width:1.7}
.fl-nav__ctrl.is-playing{background:rgba(34,75,63,.14)}
.fl-nav__ctrl.is-playing .fl-ico{animation:flSpin 5s linear infinite}
.fl-nav__top{opacity:.5}
.fl-nav__top.is-visible{opacity:1}

/* ============================== LIGHTBOX ================================ */
.fl-lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,24,19,.94);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
  padding:20px;
}
.fl-lightbox.is-open{opacity:1;visibility:visible}
.fl-lightbox > img{
  max-width:min(92vw,900px);max-height:86vh;width:auto;height:auto;
  border-radius:6px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.fl-lightbox__video{
  max-width:min(92vw,960px);max-height:86vh;width:auto;height:auto;
  border-radius:6px;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.fl-lightbox__x,.fl-lightbox__nav{
  position:absolute;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.fl-lightbox__x{top:18px;right:18px}
.fl-lightbox__nav{top:50%;transform:translateY(-50%)}
.fl-lightbox__nav--prev{left:14px}
.fl-lightbox__nav--next{right:14px}
.fl-lightbox__x .fl-ico,.fl-lightbox__nav .fl-ico{width:19px;height:19px}

/* ================================ MODAL ================================= */
.fl-modal{
  position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,24,19,.55);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.fl-modal.is-open{opacity:1;visibility:visible}
.fl-modal__box{
  position:relative;width:100%;max-width:380px;
  background:#fff;border-radius:20px;padding:30px 24px 24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5);
  transform:translateY(14px);transition:transform .35s var(--ease);
  text-align:left;
}
.fl-modal.is-open .fl-modal__box{transform:none}
.fl-modal__x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.fl-modal__title{
  font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.2;
  color:var(--green);margin-top:6px;
}
.fl-modal__sub{font-size:13px;line-height:1.7;color:var(--muted);margin-top:8px}
.fl-modal__form{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.fl-field{display:flex;flex-direction:column;gap:5px}
.fl-field > span{font-size:10px;font-weight:600;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.fl-modal__alert{font-size:12px;color:#b23b3b;background:#fdecec;border-radius:8px;padding:8px 10px}
.fl-modal__row{display:flex;gap:8px;margin-top:4px}
.fl-modal__row .fl-btn{flex:1;min-height:42px;font-size:13px}

/* ================================ TOAST ================================= */
.fl-toast{
  position:fixed;left:50%;bottom:96px;z-index:220;
  transform:translate(-50%,14px);
  background:var(--green);color:#fff;
  font-size:12px;font-weight:500;letter-spacing:.2px;
  padding:10px 18px;border-radius:999px;
  box-shadow:0 18px 34px -16px rgba(8,24,19,.65);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s var(--ease);
  max-width:calc(100vw - 40px);text-align:center;
}
.fl-toast.is-show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ============================== ANIMASI ================================= */
@keyframes flRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flSway{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(1.6deg) translateY(-7px)}}
@keyframes flSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* =============================== TABLET ================================= */
@media (max-width:1023px){
  .fl-col{padding:12px 12px 92px}
  .fl-sec{padding:40px 22px;border-radius:20px}
  .fl-open{padding:150px 24px 40px}
  .fl-open__art{width:300px;height:222px;opacity:.4}
  .fl-open__kicker{font-size:14px}
  .fl-open__names{font-size:30px;line-height:38px}
  .fl-couple{padding:48px 20px 64px}
  .fl-acara{padding:48px 22px}
  .fl-events{padding:18px 20px 28px}
  .fl-story-sec{padding-top:48px}
  .fl-story-sec .fl-head{padding:0 22px;margin-bottom:30px}
  .fl-story-card{padding:60px 20px 70px;border-radius:20px}
  .fl-gallery,.fl-wish,.fl-dress{padding:48px 22px}
  .fl-wishes{padding:32px 24px 28px}
  .fl-close-sec{padding:40px 22px}

  /* cover jadi layar penuh yang bergeser ke atas */
  .fl-cover{--media-gap:46px}
  .fl-cover__panel{padding:calc(var(--media-gap) + 50px) 18px 26px}
  .fl-cover__art{width:270px}
}
@media (max-width:479px){
  .fl-h2{font-size:30px}
  .fl-cover{--media:58%;--media-gap:44px}
  .fl-cover__media{border-radius:0 0 44px 44px}
  .fl-cover__panel{padding:calc(var(--media-gap) + 44px) 16px 24px}
  .fl-cover__card{padding:14px 20px;border-radius:12px}
  .fl-cover__kicker{font-size:12px;letter-spacing:1.4px}
  .fl-cover__names{font-size:clamp(33px,9.4vw,44px);line-height:1.06;margin-top:14px}
  .fl-cover__guest{margin-top:20px}
  .fl-cover__to{font-size:12.5px}
  .fl-cover__guestname{font-size:14px}
  .fl-cover__btn{margin-top:20px;min-height:42px;font-size:13px;padding:0 26px}
  .fl-cover__cd{top:calc(var(--media) - 44px);gap:6px}
  .fl-cover__cd .fl-cd__cell{width:66px;height:80px;border-radius:12px}
  .fl-cover__cd .fl-cd__num{font-size:26px}
  .fl-cover__cd .fl-cd__label{font-size:10px;margin-top:5px}
  .fl-cover__art{width:240px}

  .fl-sec{padding:36px 18px;border-radius:20px}
  .fl-open{padding:130px 20px 36px}
  .fl-open__art{width:260px;height:192px;opacity:.38}
  .fl-open__names{font-size:27px;line-height:34px}
  .fl-quote__ar{font-size:19px}
  .fl-save{padding:44px 18px}
  .fl-save__label{font-size:19px;letter-spacing:4px}
  .fl-save .fl-cd{gap:7px}
  .fl-save .fl-cd__cell{min-width:60px}
  .fl-couple{padding:40px 14px 52px}
  .fl-couple__card{max-width:310px}
  .fl-acara{padding:40px 18px}
  .fl-acara__title{font-size:21px}
  .fl-acara__date{gap:13px}
  .fl-acara__num{font-size:38px}
  .fl-acara__side{font-size:12px;letter-spacing:1.4px}
  .fl-confirm{padding:24px 14px 18px}
  .fl-confirm__text{font-size:13px}
  .fl-events{padding:14px 14px 22px}
  .fl-event{padding:22px 18px}
  .fl-story-sec{padding-top:40px}
  .fl-story-sec .fl-head{padding:0 18px;margin-bottom:26px}
  .fl-story-card{padding:48px 18px 56px}
  .fl-story{padding-left:32px;padding-bottom:36px}
  .fl-gallery,.fl-wish,.fl-dress{padding:40px 18px}
  .fl-gal{gap:3px}
  .fl-gal--masonry{column-count:2;column-gap:3px}
  .fl-gal--masonry .fl-gal__item{margin-bottom:3px}
  .fl-gal--slideshow{gap:6px;padding:0 8px 6px}
  .fl-gal--slideshow .fl-gal__item{flex-basis:84%}
  .fl-gal__track{gap:3px}
  .fl-gal__item--move{flex-basis:calc((100% - 6px)/3)}
  .fl-gal__nav{width:30px;height:30px}
  .fl-gal__nav .fl-ico{width:14px;height:14px}
  .fl-wishes{padding:22px 16px}
  .fl-closing__body{padding:24px 20px 32px}
  .fl-closing__names{font-size:30px}
  .fl-closing__art{width:130px}
  .fl-nav{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .fl-nav__inner{height:58px;padding:0 4px}
  .fl-nav a{font-size:8px;letter-spacing:.2px;gap:3px}
  .fl-nav a .fl-ico{width:18px;height:18px}
  .fl-nav__ctrl{flex-basis:32px;width:32px;height:32px}
  .fl-nav__ctrl .fl-ico{width:17px;height:17px}
}
@media (max-width:374px){
  .fl-nav a{font-size:7px;letter-spacing:0}
  .fl-nav a .fl-ico{width:16px;height:16px}
  .fl-nav__ctrl{flex-basis:30px;width:30px;height:30px}
  .fl-nav__ctrl .fl-ico{width:16px;height:16px}
}

/* ============================ PANEL KIRI ================================ */
@media (min-width:1024px){
  .fl-opened .fl-cover{width:calc(100% - min(50%,var(--col)))}
}
@media (min-width:1280px){
  .fl-opened .fl-cover{width:calc(100% - min(40%,var(--col)))}
}
@media (max-width:1023px){
  .fl-opened .fl-cover{
    transform:translateY(-101%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}