/* =========================================================
   IKRAR — Inti undangan (dipakai semua template)
   Template meng-override variabel & dekorasi di assets/tpl/*.css
   ========================================================= */
:root{
  --bg:#f7f1e6;--bg-alt:#efe6d6;--surface:#fffdf8;--text:#3d3328;--muted:#7d6f60;--heading:#2c241b;
  --primary:#b08d57;--accent:#8c6a3d;--line:rgba(120,95,60,.22);
  --btn-bg:var(--primary);--btn-text:#fff;--btn-radius:999px;
  --cover-bg:#f2e9da;--cover-text:var(--heading);--cover-overlay:linear-gradient(transparent,transparent);--cover-pattern:none;--pattern-size:auto;
  --hero-overlay:var(--cover-overlay);
  --f-display:Georgia,serif;--f-script:Georgia,serif;--f-body:system-ui,sans-serif;
  --radius:18px;--shadow:0 22px 50px -24px rgba(60,40,20,.35);
  --sec-pad:96px;--main-w:460px;
  --card-grad:linear-gradient(135deg,var(--accent),var(--primary));
  --fx1:#d9b26f;--fx2:#f3dfb3;--fx3:#ffffff;
  --ease:cubic-bezier(.2,.75,.2,1);--ease-io:cubic-bezier(.7,0,.25,1);
  --cover-img:none;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.is-locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
button{font:inherit;color:inherit}
.ic{flex-shrink:0;vertical-align:middle}
::selection{background:var(--primary);color:#fff}

/* ---------- Layout ---------- */
.inv-main{position:relative;max-width:var(--main-w);margin:0 auto;background:var(--bg);min-height:100vh;overflow:hidden;isolation:isolate}
.aside{display:none}
@media (min-width:1024px){
  .aside{display:block;position:fixed;top:0;bottom:0;left:0;right:var(--main-w);overflow:hidden;color:var(--cover-text)}
  .inv-main{margin:0 0 0 auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.35)}
  .dock{left:calc(100% - var(--main-w)/2)!important}
  .ticker{left:calc(100% - var(--main-w) + 16px)!important}
  .demo-pill{left:calc((100% - var(--main-w))/2)!important}
}
.aside__media{position:absolute;inset:0;background-color:var(--cover-bg);background-image:var(--cover-overlay),var(--cover-img),var(--cover-pattern);background-size:cover,cover,var(--pattern-size);background-position:center;transform:scale(1.08);animation:kenburns 30s ease-in-out infinite alternate}
.aside__content{position:absolute;inset:auto 8% 9% 8%;text-align:left;z-index:2}
.aside__art{position:absolute;right:-4%;bottom:-6%;width:min(40vw,420px);opacity:.25;color:var(--primary);pointer-events:none}
.aside__art .orn{width:100%;height:auto}
.aside__kicker{font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;opacity:.85}
.aside__names{font-family:var(--f-script);font-weight:400;font-size:clamp(4rem,7vw,7.5rem);line-height:1;margin:.15em 0}
.aside__names i{font-style:normal;color:var(--primary)}
.aside__date{font-family:var(--f-display);font-size:1.4rem;letter-spacing:.06em}
.aside__quote{max-width:520px;margin-top:22px;opacity:.8;font-style:italic;font-family:var(--f-display);font-size:1.1rem}
@keyframes kenburns{to{transform:scale(1.18) translate(-1.5%,-1%)}}

/* ---------- Banner & demo ---------- */
.inv-banner{position:fixed;top:0;left:0;right:0;z-index:90;background:#111;color:#fff;font:500 12px/1.4 system-ui,sans-serif;text-align:center;padding:7px 12px}
.inv-banner a{color:#ffd88a}
.demo-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:90;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:99px;background:rgba(17,17,17,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:500 12px/1 system-ui,sans-serif;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .3s}
.demo-pill:hover{transform:translateX(-50%) translateY(-2px)}
.inv-banner~.demo-pill{top:40px}

/* =========================================================
   COVER & TRANSISI PEMBUKA
   ========================================================= */
.cover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;padding:48px 28px calc(48px + env(safe-area-inset-bottom));color:var(--cover-text);overflow:hidden}
.cover__media,.op-face{position:absolute;inset:0;background-color:var(--cover-bg);background-image:var(--cover-overlay),var(--cover-img),var(--cover-pattern);background-size:cover,cover,var(--pattern-size);background-position:center}
.cover__media{animation:coverZoom 14s ease-out both}
@keyframes coverZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.cover__content{position:relative;z-index:5;width:100%;max-width:420px;transition:opacity .45s ease,transform .6s var(--ease)}
.cover__content>*{animation:rise 1s var(--ease) both}
.cover__content>:nth-child(2){animation-delay:.15s}.cover__content>:nth-child(3){animation-delay:.3s}.cover__content>:nth-child(4){animation-delay:.45s}.cover__content>:nth-child(5){animation-delay:.6s}.cover__content>:nth-child(6){animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cover__art{width:min(62vw,240px);margin:0 auto 10px;color:var(--primary)}
.cover__content>.cover__art{animation:artIn 1.8s ease both}
@keyframes artIn{from{opacity:0}}
.cover__art .orn{width:100%;height:auto}
.cover__kicker{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase}
.cover__names{font-family:var(--f-script);font-weight:400;font-size:clamp(3.2rem,15vw,4.8rem);line-height:1.05;margin:.12em 0 .1em;display:flex;flex-direction:column;align-items:center}
.cover__names i{font-style:normal;font-size:.55em;color:var(--primary);line-height:1}
.cover__date{font-family:var(--f-display);letter-spacing:.24em;font-size:1rem}
.cover__guest{margin:30px auto 22px;padding:16px 18px;max-width:320px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cover__guest small{display:block;font-size:.75rem;opacity:.85}
.cover__guest strong{display:block;font-family:var(--f-display);font-size:1.45rem;font-weight:600;margin:4px 0;line-height:1.25}
.cover__note{font-size:.72rem!important;opacity:.6!important;margin-top:4px}
.btn--open{position:relative;padding:14px 28px}
.btn--open::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1px solid var(--btn-bg);opacity:0;animation:ring 2.4s ease-out infinite 1.5s}
@keyframes ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}

.opening{position:absolute;inset:0;z-index:2;pointer-events:none}
.op-half,.op-slat,.op-arch,.op-env,.op-wave{display:none}
.op-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.op-half--l{left:0}.op-half--r{right:0}
.op-half .op-face{width:100vw;inset:0 auto 0 auto}
.op-half--l .op-face{left:0}.op-half--r .op-face{right:0}
.is-opening .cover__content{opacity:0;transform:scale(.94) translateY(-10px)}

/* 1) Tirai (curtain) */
[data-opening=curtain] .op-half,[data-opening=gate] .op-half{display:block}
[data-opening=curtain] .cover__media,[data-opening=gate] .cover__media,[data-opening=blinds] .cover__media{display:none}
.is-opening[data-opening=curtain] .op-half--l{transform:translateX(-102%);transition:transform 1.35s var(--ease-io) .3s}
.is-opening[data-opening=curtain] .op-half--r{transform:translateX(102%);transition:transform 1.35s var(--ease-io) .3s}
.is-opening[data-opening=curtain] .op-half--l::after,.is-opening[data-opening=curtain] .op-half--r::after{content:"";position:absolute;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18));right:0}
.is-opening[data-opening=curtain] .op-half--r::after{left:0;right:auto;transform:scaleX(-1)}

/* 2) Gerbang (gate) — pintu berayun 3D */
[data-opening=gate] .opening{perspective:1400px}
[data-opening=gate] .op-half--l{transform-origin:left center}
[data-opening=gate] .op-half--r{transform-origin:right center}
.is-opening[data-opening=gate] .op-half--l{transform:rotateY(-105deg);opacity:0;transition:transform 1.6s var(--ease-io) .3s,opacity .5s ease 1.4s}
.is-opening[data-opening=gate] .op-half--r{transform:rotateY(105deg);opacity:0;transition:transform 1.6s var(--ease-io) .3s,opacity .5s ease 1.4s}

/* 3) Kisi (blinds) */
[data-opening=blinds] .op-slat{display:block;position:absolute;top:0;bottom:0;left:calc(var(--i) * 12.5%);width:12.6%;overflow:hidden;transform-origin:left center}
[data-opening=blinds] .op-slat .op-face{width:100vw;left:calc(var(--i) * -12.5vw);right:auto}
.is-opening[data-opening=blinds] .op-slat{transform:scaleX(0);transition:transform .9s var(--ease-io) calc(.25s + var(--i) * 70ms)}

/* 4) Lengkung (arch) */
[data-opening=arch] .op-arch{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;fill:var(--cover-bg);transform-origin:50% 50%}
.is-opening[data-opening=arch] .cover__media{opacity:0;transition:opacity .5s ease .35s}
.is-opening[data-opening=arch] .op-arch{opacity:1;transform:scale(14);transition:opacity .35s ease .1s,transform 1.5s cubic-bezier(.75,0,.3,1) .55s}

/* 5) Buku (book) — halaman terbalik */
[data-opening=book] .cover{transform-origin:left center;box-shadow:inset -30px 0 40px -30px rgba(0,0,0,.4)}
.is-opening[data-opening=book] .cover{transform:perspective(1800px) rotateY(-108deg);opacity:0;transition:transform 1.4s var(--ease-io) .1s,opacity .45s ease 1.05s}
.is-opening[data-opening=book] .cover__content{opacity:1;transform:none}

/* 6) Amplop (envelope) */
[data-opening=envelope] .op-env{display:block;position:absolute;left:50%;top:50%;width:min(78vw,330px);aspect-ratio:3/2;transform:translate(-50%,-40%) scale(.85);opacity:0}
.env__back,.env__front,.env__flap{position:absolute;inset:0;border-radius:6px}
.env__back{background:var(--env-back,#c9ad85)}
.env__letter{position:absolute;left:6%;right:6%;top:8%;height:84%;background:var(--env-letter,#fffaf0);border-radius:4px;display:grid;place-items:center;font-family:var(--f-script);font-size:1.7rem;color:var(--primary);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.env__front{background:var(--env-front,#dcc39c);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.env__flap{background:var(--env-flap,#cfb28a);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top center;z-index:3;backface-visibility:hidden}
.env__seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--env-seal,#9a3b2f);color:#fff;display:grid;place-items:center;z-index:4;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.is-opening[data-opening=envelope] .op-env{animation:envIn 2.4s var(--ease) forwards}
.is-opening[data-opening=envelope] .env__flap{animation:flapOpen .7s var(--ease-io) .55s forwards}
.is-opening[data-opening=envelope] .env__seal{animation:sealOff .4s ease .4s forwards}
.is-opening[data-opening=envelope] .env__letter{animation:letterUp .9s var(--ease) 1.05s forwards}
.is-opening[data-opening=envelope] .cover__media{animation:none;opacity:.5;transition:opacity 1s}
@keyframes envIn{0%{opacity:0;transform:translate(-50%,-40%) scale(.85)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes flapOpen{to{transform:rotateX(180deg);z-index:0}}
@keyframes sealOff{to{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes letterUp{to{transform:translateY(-58%)}}
.is-opening[data-opening=envelope] .cover{animation:fadeOut .5s ease 1.95s forwards}

/* 7) Iris / gerhana */
[data-opening=iris] .cover{clip-path:circle(150% at 50% 70%)}
.is-opening[data-opening=iris] .cover{clip-path:circle(0% at 50% 70%);transition:clip-path 1.3s cubic-bezier(.75,0,.25,1) .2s}

/* 8) Ombak (wave) */
[data-opening=wave] .cover{overflow:visible}
[data-opening=wave] .op-wave{display:block;position:absolute;left:0;top:calc(100% - 2px);width:200%;height:90px;fill:var(--cover-bg);animation:waveX 3s linear infinite}
@keyframes waveX{to{transform:translateX(-50%)}}
.is-opening[data-opening=wave] .cover{transform:translateY(calc(-100% - 100px));transition:transform 1.3s var(--ease-io) .25s}

/* 9) Sakura burst */
.is-opening[data-opening=sakura] .cover{opacity:0;transform:scale(1.2);filter:blur(14px);transition:opacity 1s ease .3s,transform 1.2s var(--ease) .2s,filter 1s ease .2s}

/* 10) TV dimatikan (glitch) */
.is-opening[data-opening=tv] .cover{animation:tvOff 1.05s cubic-bezier(.7,0,.3,1) forwards}
.is-opening[data-opening=tv] .cover::after{content:"";position:absolute;inset:0;z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
@keyframes tvOff{0%{transform:none;filter:none}12%{transform:translateX(-10px) skewX(6deg);filter:hue-rotate(90deg) saturate(3)}22%{transform:translateX(12px) skewX(-8deg);filter:invert(1)}32%{transform:none;filter:none}55%{transform:scale(1,.008);filter:brightness(5)}78%{transform:scale(.004,.008);filter:brightness(8)}100%{transform:scale(0);opacity:0}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

.is-open .cover{display:none}

/* =========================================================
   KOMPONEN UMUM
   ========================================================= */
.sec{position:relative;padding:var(--sec-pad) 24px;text-align:center;overflow:hidden}
.sec__head{margin-bottom:34px}
.sec__kicker{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.sec__title{font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,10vw,2.9rem);line-height:1.08;color:var(--heading)}
.sec__divider{color:var(--primary);margin:16px auto 0;display:flex;justify-content:center}
.sec__divider .orn{width:180px;height:auto;max-height:40px}
.sec__lead{max-width:360px;margin:0 auto 30px;color:var(--muted);font-size:.95rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-text);font-family:var(--f-body);font-weight:500;font-size:.88rem;line-height:1.1;letter-spacing:.03em;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px var(--btn-bg)}
.btn:active{transform:translateY(0) scale(.97)}
.btn--ghost{background:transparent;color:var(--primary);border-color:currentColor}
.btn--ghost:hover{box-shadow:none;background:color-mix(in srgb,var(--primary) 10%,transparent)}
.btn--sm{padding:9px 15px;font-size:.78rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* HERO */
.sec--hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:80px 24px 120px;color:var(--cover-text)}
.hero__media{position:absolute;inset:-60px 0;z-index:-1;background-color:var(--cover-bg);background-image:var(--hero-overlay),var(--cover-img),var(--cover-pattern);background-size:cover,cover,var(--pattern-size);background-position:center}
.hero__kicker{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase}
.hero__names{font-family:var(--f-script);font-weight:400;font-size:clamp(3.4rem,16vw,5rem);line-height:1.02;margin:.15em 0;display:flex;flex-direction:column;align-items:center}
.hero__names i{font-style:normal;font-size:.5em;color:var(--primary)}
.hero__date{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.08em}
.mini-cd{display:flex;gap:14px;justify-content:center;margin-top:22px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.mini-cd b{font-family:var(--f-display);font-size:1.4rem;font-weight:500;display:block;letter-spacing:0}
.hero__scroll{position:absolute;bottom:96px;left:50%;width:24px;height:38px;margin-left:-12px;border:1.5px solid currentColor;border-radius:14px;opacity:.7}
.hero__scroll span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* QUOTE */
.quote{max-width:360px;margin:20px auto 0;font-family:var(--f-display);font-size:1.18rem;line-height:1.7;font-style:italic;color:var(--heading)}
.quote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--f-body);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.bismillah{font-family:'Amiri',serif;font-size:1.9rem;color:var(--primary);margin-bottom:18px;direction:rtl}

/* COUPLE */
.couple{display:grid;gap:26px;margin-top:10px}
.person__frame{position:relative;width:min(62vw,210px);aspect-ratio:3/4;margin:0 auto 22px}
.person__photo,.person__mono{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 24px 24px;box-shadow:var(--shadow)}
.person__mono{display:grid;place-items:center;background:var(--bg-alt);color:var(--primary);font-family:var(--f-script);font-size:5.5rem;border:1px solid var(--line)}
.person__orn{position:absolute;width:64px;color:var(--primary);pointer-events:none}
.person__orn .orn{width:100%;height:auto}
.person--groom .person__orn,.person:first-child .person__orn{left:-18px;bottom:-14px;transform:rotate(-90deg)}
.person:last-child .person__orn{right:-18px;top:-14px;transform:rotate(90deg)}
.person__nick{font-family:var(--f-script);font-weight:400;font-size:2.6rem;line-height:1.1;color:var(--primary)}
.person__name{font-family:var(--f-display);font-size:1.22rem;font-weight:600;color:var(--heading);margin-top:4px}
.person__parents{color:var(--muted);font-size:.88rem;max-width:280px;margin:8px auto 0}
.person__ig{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.8rem;text-decoration:none;color:var(--primary);padding:6px 12px;border:1px solid var(--line);border-radius:99px;transition:background .3s}
.person__ig:hover{background:color-mix(in srgb,var(--primary) 12%,transparent)}
.couple__amp{font-family:var(--f-script);font-size:3.6rem;line-height:1;color:var(--primary)}

/* COUNTDOWN */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:360px;margin:0 auto}
.cd{padding:16px 4px;border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);background:var(--surface)}
.cd b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:500;line-height:1;color:var(--heading);font-variant-numeric:tabular-nums}
.cd span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cd b.tick{animation:tick .45s var(--ease)}
@keyframes tick{from{transform:translateY(-35%);opacity:.2}to{transform:none;opacity:1}}
.countdown__done{margin-top:18px;font-family:var(--f-display);font-size:1.2rem;color:var(--primary)}

/* EVENTS */
.events{display:grid;gap:22px}
.event{position:relative;padding:30px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.event__name{font-family:var(--f-script);font-weight:400;font-size:2.4rem;line-height:1.1;color:var(--primary)}
.event__date{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:18px auto;max-width:300px}
.event__day,.event__my{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.event__num{font-family:var(--f-display);font-size:3.2rem;font-weight:500;line-height:1;color:var(--heading)}
.event__time{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500}
.event__venue{font-family:var(--f-display);font-size:1.25rem;font-weight:600;color:var(--heading);margin-top:12px}
.event__addr{color:var(--muted);font-size:.9rem;max-width:300px;margin:4px auto 0}
.event__map{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.event__map.is-open{grid-template-rows:1fr;margin-top:16px}
.event__map>div{overflow:hidden}
.event__map iframe{width:100%;height:240px;border:0;border-radius:12px;display:block}

/* STREAM */
.stream{position:relative}
.stream__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:#e0353a;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.15em}
.stream__badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.stream__platform{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 6px;font-weight:600;font-size:1.05rem}
.stream__note{color:var(--muted);font-size:.9rem;margin-bottom:16px}

/* STORY */
.story{list-style:none;padding:0 0 0 28px;position:relative;text-align:left}
.story::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--primary),var(--line))}
.story__item{position:relative;margin-bottom:30px}
.story__item:last-child{margin-bottom:0}
.story__dot{position:absolute;left:-26px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 15%,transparent)}
.story__photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--radius) - 4px);margin-bottom:14px;box-shadow:var(--shadow)}
.story__label{display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);font-weight:600}
.story__title{font-family:var(--f-display);font-size:1.4rem;font-weight:600;color:var(--heading);margin:2px 0 6px}
.story__body p{color:var(--muted);font-size:.92rem}

/* PREWEDDING / VIDEO */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;margin-bottom:26px;box-shadow:var(--shadow);cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .8s var(--ease)}
.video:hover img{transform:scale(1.05)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 10px rgba(255,255,255,.2);transition:transform .3s}
.video__play .ic{margin-left:4px}
.video:hover .video__play{transform:scale(1.08)}
.film{margin:0 -24px;overflow:hidden}
.film__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.film__track::-webkit-scrollbar{display:none}
.film__frame{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:3/4;border-radius:calc(var(--radius) - 4px);overflow:hidden;box-shadow:var(--shadow);transition:transform .5s var(--ease)}
.film__frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.film__frame:hover img{transform:scale(1.06)}
.film__hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* GALLERY */
.gallery{columns:2;column-gap:10px}
.gallery__item{display:block;break-inside:avoid;margin-bottom:10px;border-radius:calc(var(--radius) - 6px);overflow:hidden;position:relative;background:var(--bg-alt)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.25));opacity:0;transition:opacity .4s}
.gallery__item:hover::after{opacity:1}

/* DRESS & NOTES */
.dress__swatches{display:flex;justify-content:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dress__swatches span{width:46px;height:46px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line),0 8px 18px -6px rgba(0,0,0,.3)}
.dress p{color:var(--muted)}
.dress p .ic{margin-right:4px;vertical-align:-3px}
.notes{margin-top:16px;text-align:left}
.notes h3{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:8px;color:var(--heading)}
.notes p{color:var(--muted);font-size:.92rem}

/* FORMS */
.form{display:grid;gap:14px;text-align:left}
.field{display:grid;gap:6px}
.field>span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:flex;align-items:center;justify-content:center;gap:5px;padding:11px 4px;border:1px solid var(--line);border-radius:12px;font-size:.8rem;cursor:pointer;transition:all .3s var(--ease);text-align:center}
.choice input:checked+span{background:var(--primary);border-color:var(--primary);color:var(--btn-text);transform:translateY(-2px);box-shadow:0 10px 20px -12px var(--primary)}
.choice input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* WISHES */
.wishes-wrap{margin-top:var(--sec-pad)}
.sec--wishes>.sec__head:first-child+.rsvp-form{margin-bottom:0}
.wishes__count{margin:26px 0 12px;font-size:.85rem;color:var(--muted)}
.wishes__count b{font-family:var(--f-display);font-size:1.5rem;color:var(--primary);margin-right:4px}
.wishes{display:grid;gap:10px;max-height:520px;overflow-y:auto;padding:4px 4px 4px 0;text-align:left;scrollbar-width:thin;scrollbar-color:var(--primary) transparent;overscroll-behavior:contain}
.wish{display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.wish.is-new{animation:wishIn .8s var(--ease)}
@keyframes wishIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.wish__av{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--btn-text);background:var(--card-grad)}
.wish__body{min-width:0}
.wish h4{font-size:.92rem;font-weight:600;color:var(--heading);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wish p{font-size:.88rem;color:var(--text);margin:3px 0;overflow-wrap:anywhere}
.wish time{font-size:.72rem;color:var(--muted)}
.tag{font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.tag--tidak{background:rgba(200,60,60,.12);color:#b23b3b}
.tag--ragu{background:rgba(200,150,40,.15);color:#9a6b12}
#wishMore{margin-top:14px}

/* GIFT */
.gifts{display:grid;gap:16px}
.bank-card{position:relative;aspect-ratio:1.586;max-width:340px;width:100%;margin:0 auto;padding:20px 22px;border-radius:18px;background:var(--card-grad);color:#fff;text-align:left;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:0 26px 40px -22px rgba(0,0,0,.55)}
.bank-card::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:rgba(255,255,255,.12)}
.bank-card::after{content:"";position:absolute;width:200px;height:200px;left:-70px;bottom:-130px;border-radius:50%;background:rgba(255,255,255,.08)}
.bank-card__top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.bank-card__chip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#f8e3a3,#c99a3c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.bank-card__brand{font-size:1.2rem;letter-spacing:.06em;font-style:italic}
.bank-card__num{position:relative;z-index:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.3rem;letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.bank-card__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;position:relative;z-index:1}
.bank-card__name{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.bank-card__copy{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);color:#fff;border-radius:99px;padding:6px 12px;font-size:.74rem;cursor:pointer;backdrop-filter:blur(4px);transition:background .3s}
.bank-card__copy:hover{background:rgba(255,255,255,.3)}
.qris img{width:220px;margin:12px auto;border-radius:12px;background:#fff;padding:8px}
.qris__title{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600}
.qris__name{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.gift-addr{margin-top:16px}
.gift-addr h3{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-display);font-size:1.3rem;color:var(--heading);margin-bottom:10px}
.gift-addr p{color:var(--muted);font-size:.9rem}
.gift-addr__to{color:var(--text)!important;margin-bottom:4px}
.gift-addr .btn{margin-top:14px}
.gift-confirm{margin-top:16px;padding:0;text-align:left}
.gift-confirm summary{display:flex;align-items:center;gap:8px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:500;font-size:.9rem}
.gift-confirm summary::-webkit-details-marker{display:none}
.gift-confirm summary .ic:last-child{margin-left:auto;transition:transform .3s}
.gift-confirm[open] summary .ic:last-child{transform:rotate(180deg)}
.gift-confirm .form{padding:0 20px 20px}

/* WISHLIST */
.wl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl__item{position:relative;display:flex;flex-direction:column;padding:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);text-align:left;transition:transform .4s var(--ease)}
.wl__item:hover{transform:translateY(-4px)}
.wl__img{aspect-ratio:1;border-radius:12px;background:var(--bg-alt);display:grid;place-items:center;color:var(--primary);overflow:hidden;margin-bottom:10px}
.wl__img img{width:100%;height:100%;object-fit:cover}
.wl__item h4{font-size:.9rem;line-height:1.3;color:var(--heading)}
.wl__price{font-size:.8rem;color:var(--primary);font-weight:600;margin-top:2px}
.wl__note{font-size:.75rem;color:var(--muted)}
.wl__act{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.wl__act .btn{padding:8px 10px;font-size:.7rem;letter-spacing:.02em;flex:1;white-space:nowrap}
.wl__claimed{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;color:var(--muted)}
.wl__item.is-claimed{opacity:.7}
.wl__item.is-claimed .wl__img{filter:grayscale(1)}

/* QR TICKET */
.ticket{position:relative;display:flex;align-items:center;gap:16px;max-width:360px;margin:0 auto 18px;padding:18px;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--primary);text-align:left;box-shadow:var(--shadow)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--bg)}
.ticket::before{left:-12px;border-right:1px dashed var(--primary)}.ticket::after{right:-12px;border-left:1px dashed var(--primary)}
.ticket__qr{flex:0 0 132px;height:132px;padding:8px;background:#fff;border-radius:10px;display:grid;place-items:center}
.ticket__qr img,.ticket__qr canvas{width:116px!important;height:116px!important}
.ticket__info{display:grid;gap:3px;min-width:0}
.ticket__info small{font-size:.72rem;color:var(--muted)}
.ticket__info b{font-family:var(--f-display);font-size:1.2rem;color:var(--heading);line-height:1.2;overflow-wrap:anywhere}
.ticket__info code{font-weight:700;color:var(--primary)}

/* TURUT */
.turut{list-style:none;padding:0;display:grid;gap:10px}
.turut li{padding:12px 16px;border-bottom:1px solid var(--line);font-size:.95rem}
.turut li:last-child{border-bottom:0}

/* CLOSING */
.sec--closing{padding:var(--sec-pad) 24px 140px;color:var(--cover-text);min-height:80vh;display:grid;place-items:center}
.closing__media{position:absolute;inset:-60px 0;z-index:-1;background-color:var(--cover-bg);background-image:var(--hero-overlay),var(--cover-img),var(--cover-pattern);background-size:cover,cover,var(--pattern-size);background-position:center}
.closing__text{max-width:360px;margin:20px auto 0;font-size:.95rem}
.closing__title{font-family:var(--f-script);font-weight:400;font-size:clamp(3rem,13vw,4rem);line-height:1.1;margin:22px 0 10px;color:var(--primary)}
.closing__sub{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.closing__names{font-family:var(--f-display);font-size:1.7rem;margin:6px 0 22px}
.closing__names i{font-style:normal;color:var(--primary)}
.inv-foot{padding:22px 16px 100px;text-align:center;font-size:.75rem;color:var(--muted);background:var(--bg)}
.inv-foot a{text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.inv-foot .ic{color:#e0566a;fill:#e0566a}

/* =========================================================
   UI MELAYANG
   ========================================================= */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;gap:2px;padding:6px;border-radius:99px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(0,0,0,.35);transition:opacity .6s,transform .6s var(--ease)}
.dock a{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--muted);text-decoration:none;transition:color .3s,background .3s}
.dock a span{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:99px;background:var(--heading);color:var(--bg);opacity:0;pointer-events:none;transition:all .3s var(--ease)}
.dock a:hover span{opacity:1;transform:translateX(-50%)}
.dock a.is-active{color:var(--btn-text);background:var(--primary)}
.is-locked .dock,.is-locked .fab{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(30px)}
.is-locked .fab{transform:translateY(30px)}
.fab{position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:50;display:grid;gap:10px;transition:opacity .6s,transform .6s var(--ease)}
.fab__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--primary);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.fab__btn:hover{transform:scale(1.08)}
.fab__btn--music.is-playing .ic{animation:spin 3.5s linear infinite}
.fab__btn--music:not(.is-playing){opacity:.75}
.fab__btn--music:not(.is-playing)::after{content:"";position:absolute;width:26px;height:2px;background:currentColor;transform:rotate(-45deg)}
.fab__btn.is-active{background:var(--primary);color:var(--btn-text)}
@keyframes spin{to{transform:rotate(360deg)}}

.ticker{position:fixed;left:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;max-width:min(250px,calc(100vw - 90px));pointer-events:none}
.ticker__item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 14px 30px -14px rgba(0,0,0,.4);font-size:.76rem;line-height:1.35;animation:tickIn 6s var(--ease) forwards}
.ticker__item b{display:block;color:var(--heading);font-size:.78rem}
.ticker__item .wish__av{flex-basis:30px;height:30px;font-size:.7rem}
@keyframes tickIn{0%{opacity:0;transform:translateY(16px) scale(.9)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

.toast{position:fixed;left:50%;top:18px;z-index:95;transform:translate(-50%,-140%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--heading);color:var(--bg);font-size:.85rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transition:transform .5s var(--ease),opacity .3s,visibility .3s;text-align:center;opacity:0;visibility:hidden}
.toast.is-show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast.is-error{background:#b23b3b;color:#fff}

/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.94);display:grid;place-items:center;animation:fadeIn .35s ease}
.lb[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}
.lb__fig{max-width:94vw;max-height:84vh}
.lb__fig img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:6px;animation:lbIn .45s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}}
.lb__btn{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s}
.lb__btn:hover{background:rgba(255,255,255,.25)}
.lb__close{top:16px;right:16px}.lb__prev{left:12px;top:50%;margin-top:-24px}.lb__next{right:12px;top:50%;margin-top:-24px}
.lb__count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:.8rem;letter-spacing:.2em}

/* DIALOG */
.dlg{border:0;padding:0;border-radius:var(--radius);background:var(--surface);color:var(--text);width:min(92vw,380px);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.dlg::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.dlg .form{padding:24px}
.dlg h3{font-family:var(--f-display);font-size:1.5rem;color:var(--heading)}
.dlg__item{color:var(--primary);font-weight:600;margin-top:-6px}
.dlg__hint{font-size:.75rem;color:var(--muted);margin-top:-6px}
.dlg .btn-row{margin-top:4px;justify-content:flex-end}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
.is-opening #fx{z-index:70}

/* =========================================================
   REVEAL & TEKS TERPECAH
   ========================================================= */
[data-r]{opacity:0;transition:opacity var(--r-dur,1.1s) var(--r-ease,var(--ease)) var(--r-delay,0s),transform var(--r-dur,1.1s) var(--r-ease,var(--ease)) var(--r-delay,0s),filter var(--r-dur,1.1s) var(--r-ease,var(--ease)) var(--r-delay,0s),clip-path var(--r-dur,1.1s) var(--r-ease,var(--ease)) var(--r-delay,0s);will-change:opacity,transform}
[data-r=up]{transform:translateY(var(--r-y,44px))}
[data-r=left]{transform:translateX(calc(var(--r-x,56px) * -1)) rotate(calc(var(--r-rot,0deg) * -1))}
[data-r=right]{transform:translateX(var(--r-x,56px)) rotate(var(--r-rot,0deg))}
[data-r=zoom]{transform:scale(var(--r-scale,.82))}
[data-r=blur]{filter:blur(14px);transform:scale(1.06)}
[data-r=flip]{transform:perspective(900px) rotateX(38deg) translateY(30px);transform-origin:50% 0}
[data-r=fade]{transform:none}
[data-r].in{opacity:1;transform:none;filter:none}
[data-split] .w{display:inline-block;white-space:nowrap}
[data-split] .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(8deg);transition:opacity .7s var(--ease) calc(var(--i) * 38ms + .15s),transform .9s var(--ease) calc(var(--i) * 38ms + .15s)}
.in [data-split] .ch,[data-split].in .ch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-r],[data-split] .ch{opacity:1!important;transform:none!important;filter:none!important}
}

/* =========================================================
   ILUSTRASI MEMPELAI (berhijab / bercadar) & NUANSA ISLAMI
   ========================================================= */
:root{
  --ill-skin:#f1cdab;--ill-skin-2:#e2b28c;--ill-hair:#2e241d;--ill-peci:#1f1d1d;--ill-band:#c9a24f;
  --ill-groom:#f6f1e6;--ill-groom-2:#e5dac6;--ill-pants:#40584d;--ill-shoe:#2a2522;
  --ill-bride:#fbf7ef;--ill-bride-3:#e9d9bf;--ill-hijab:#f4ede1;--ill-hijab-2:#e6d9c4;--ill-niqab:#efe6d6;
  --ill-flower:#d88b98;--ill-flower-2:#f3c7cd;--ill-leaf:#6f8f6a;
}
.ill{display:block;width:100%;height:100%;overflow:visible}
.ill-heart{transform-box:fill-box;transform-origin:center;animation:illHeart 2.4s ease-in-out infinite}
@keyframes illHeart{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}36%{transform:scale(1.15)}}
.ill--chibi.ill--groom,.ill--chibi.ill--bride{transform:translateY(4%)}
.cover__couple{width:auto;height:min(30vh,240px);margin:0 auto 8px;animation:rise 1.1s var(--ease) both}
.cover__couple .ill{width:auto;margin:0 auto}
.has-ill .cover__names{font-size:clamp(2.6rem,12vw,3.8rem)}
.has-ill .cover__guest{margin:18px auto 16px;padding:12px 16px}
.has-ill .cover__content{padding-top:24px}
.ill-couple-float,.cover__couple .ill,.hero__couple .ill{animation:illFloat 6s ease-in-out infinite}
@keyframes illFloat{50%{transform:translateY(-5px)}}
.hero__couple{width:min(64vw,250px);height:min(38vh,300px);margin:0 auto 10px}
.closing__couple{width:min(58vw,220px);height:min(34vh,260px);margin:0 auto 12px}
.aside__couple{position:absolute;right:0;bottom:-2vh;width:min(30vw,400px);height:72vh;pointer-events:none}
.has-ill .aside__content>:not(.aside__couple):not(.aside__art){max-width:56%}
.person__ill{width:100%;height:100%;overflow:hidden;border-radius:999px 999px 24px 24px;background:var(--ill-bg,var(--bg-alt));box-shadow:var(--shadow);display:flex;align-items:flex-end;justify-content:center}
.person__ill .ill{height:100%;width:auto}
@media (max-height:680px){.cover__couple{height:24vh}.has-ill .cover__names{font-size:clamp(2.2rem,10vw,3rem)}}

.quote__ar{font-family:var(--f-arabic,'Amiri'),'Amiri','Scheherazade New',serif;font-style:normal;font-size:1.7rem;line-height:2.15;color:var(--heading);margin-bottom:16px;direction:rtl}
.doa{max-width:360px;margin:22px auto 6px;padding:18px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.doa__ar{font-family:var(--f-arabic,'Amiri'),'Amiri',serif;font-size:1.55rem;line-height:2;direction:rtl}
.doa__latin{font-style:italic;font-size:.82rem;margin-top:6px;opacity:.85}
.doa__id{font-size:.8rem;margin-top:6px;opacity:.75}
.doa__id small{display:block;margin-top:4px;letter-spacing:.08em}

/* 11) Pelita (lantern) — cahaya hangat membanjiri layar */
.op-glow,.op-rod{display:none}
[data-opening=lantern] .op-glow{display:block;position:absolute;left:50%;top:70%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle,#fffaf0 0%,rgba(255,236,190,.95) 32%,rgba(255,210,140,0) 70%);opacity:0}
.is-opening[data-opening=lantern] .op-glow{animation:glowUp 1.9s cubic-bezier(.6,0,.3,1) forwards}
.is-opening[data-opening=lantern] .cover{animation:fadeOut .65s ease 1.4s forwards}
@keyframes glowUp{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(2.4)}100%{opacity:1;transform:scale(70)}}

/* 12) Gulungan (scroll) — sampul tergulung ke atas */
[data-opening=scroll] .cover{clip-path:inset(0 0 0 0)}
[data-opening=scroll] .op-rod{display:block;position:absolute;left:-1%;right:-1%;bottom:0;height:20px;border-radius:10px;background:linear-gradient(#7a4b1f,#e2bb72 45%,#8a5a2b 80%,#5e3814);box-shadow:0 8px 18px rgba(0,0,0,.35)}
[data-opening=scroll] .op-rod::before,[data-opening=scroll] .op-rod::after{content:"";position:absolute;top:-5px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4d48e,#9b6a2c 70%)}
[data-opening=scroll] .op-rod::before{left:-6px}[data-opening=scroll] .op-rod::after{right:-6px}
.is-opening[data-opening=scroll] .cover{clip-path:inset(0 0 100% 0);transition:clip-path 1.45s cubic-bezier(.7,0,.25,1) .3s}
.is-opening[data-opening=scroll] .op-rod{bottom:100%;transition:bottom 1.45s cubic-bezier(.7,0,.25,1) .3s}

/* 13) Hati (heart) — lubang berbentuk hati membesar */
:root{--heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29C6 21 1 15.5 1 9.6A7.6 7.6 0 0 1 16 6a7.6 7.6 0 0 1 15 3.6C31 15.5 26 21 16 29Z'/%3E%3C/svg%3E")}
.op-heart,.op-ribbon{display:none}
[data-opening=heart] .op-heart{display:block;position:absolute;left:50%;top:52%;width:70px;height:66px;margin:-33px 0 0 -35px;color:var(--primary);opacity:0;z-index:7}
[data-opening=heart] .op-heart svg{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.is-opening[data-opening=heart] .op-heart{animation:opHeart 1s ease forwards}
.is-opening[data-opening=heart] .cover{-webkit-mask:var(--heart-mask) 50% 52%/0 0 no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:var(--heart-mask) 50% 52%/0 0 no-repeat,linear-gradient(#000 0 0);mask-composite:exclude;animation:heartHole 1.15s cubic-bezier(.75,0,.3,1) .7s forwards}
@keyframes opHeart{0%{opacity:0;transform:scale(.3)}28%{opacity:1;transform:scale(1.15)}45%{transform:scale(.92)}62%{opacity:1;transform:scale(1.22)}100%{opacity:0;transform:scale(2.6)}}
@keyframes heartHole{from{-webkit-mask-size:0 0,100% 100%;mask-size:0 0,100% 100%}to{-webkit-mask-size:520vmax 520vmax,100% 100%;mask-size:520vmax 520vmax,100% 100%}}

/* 14) Pita (ribbon) — pita silang dengan simpul yang terurai */
[data-opening=ribbon] .op-ribbon{display:block;position:absolute;inset:0;z-index:7;color:var(--rb,var(--primary))}
.rb{position:absolute;background:currentColor;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.rb--l,.rb--r{top:calc(52% - 13px);height:26px;width:50%}
.rb--l{left:0;transform-origin:right center;transform:scaleX(0)}.rb--r{right:0;transform-origin:left center;transform:scaleX(0)}
.rb--t,.rb--b{left:calc(50% - 13px);width:26px;height:52%}
.rb--t{top:0;transform-origin:center bottom;transform:scaleY(0)}.rb--b{top:52%;height:48%;transform-origin:center top;transform:scaleY(0)}
.rb-bow{position:absolute;left:50%;top:52%;width:132px;margin:-46px 0 0 -66px;opacity:0;transform:scale(0);filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.is-opening[data-opening=ribbon] .rb--l{animation:rbL 1.7s var(--ease-io) forwards}
.is-opening[data-opening=ribbon] .rb--r{animation:rbR 1.7s var(--ease-io) forwards}
.is-opening[data-opening=ribbon] .rb--t{animation:rbT 1.7s var(--ease-io) forwards}
.is-opening[data-opening=ribbon] .rb--b{animation:rbB 1.7s var(--ease-io) forwards}
.is-opening[data-opening=ribbon] .rb-bow{animation:rbBow 1.7s var(--ease) forwards}
.is-opening[data-opening=ribbon] .cover__media{animation:none;transition:opacity .6s ease 1.15s;opacity:0}
.is-opening[data-opening=ribbon] .cover{animation:fadeOut .45s ease 1.45s forwards}
@keyframes rbL{0%{transform:scaleX(0)}24%,52%{transform:scaleX(1)}100%{transform:translateX(-105%) scaleX(1)}}
@keyframes rbR{0%{transform:scaleX(0)}24%,52%{transform:scaleX(1)}100%{transform:translateX(105%) scaleX(1)}}
@keyframes rbT{0%,6%{transform:scaleY(0)}30%,52%{transform:scaleY(1)}100%{transform:translateY(-105%) scaleY(1)}}
@keyframes rbB{0%,6%{transform:scaleY(0)}30%,52%{transform:scaleY(1)}100%{transform:translateY(105%) scaleY(1)}}
@keyframes rbBow{0%,18%{opacity:0;transform:scale(0) rotate(-30deg)}34%{opacity:1;transform:scale(1.12) rotate(4deg)}44%,52%{opacity:1;transform:scale(1) rotate(0)}72%{opacity:1;transform:scale(1.35) rotate(12deg)}100%{opacity:0;transform:scale(2.4) rotate(40deg)}}

/* 15) Konfeti — sampul terangkat diiringi hujan konfeti */
.is-opening[data-opening=confetti] .cover{animation:confOut 1.15s cubic-bezier(.7,0,.3,1) .3s forwards}
@keyframes confOut{0%{transform:none}25%{transform:translateY(14px) scale(.98)}100%{transform:translateY(-108%) rotate(-3deg);opacity:.6}}

/* =========================================================
   TEMPLATE ILUSTRASI: judul, panggung, pita nama, huruf samping
   ========================================================= */
.cover__headline,.hero__headline{font-family:var(--f-script);font-weight:400;font-size:clamp(2.7rem,13vw,3.9rem);line-height:1.05;color:var(--primary);margin:.05em 0 .1em}
.cover__headline{animation:inkIn 1.6s var(--ease) .25s both!important}
@keyframes inkIn{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 -10% 0 -10%);opacity:1}}
.cover__couple,.hero__couple{position:relative}
.cover__couple .stage,.hero__couple .stage,.aside__couple .stage{position:absolute;left:50%;bottom:0;height:104%;width:auto;max-width:none;transform:translateX(-50%);z-index:0;overflow:visible;pointer-events:none}
.cover__couple .ill,.hero__couple .ill,.aside__couple .ill{position:relative;z-index:1;max-width:100%}
.aside__couple .stage{-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.cover__couple .fc,.hero__couple .fc{animation:none}
.has-headline .cover__couple,.names-top .cover__couple{height:min(40vh,330px);margin:6px auto 0}
.has-headline .hero__couple,.names-top .hero__couple{height:min(46vh,360px);width:min(86vw,360px)}
.ill-flat .closing__couple{height:min(36vh,280px);width:min(76vw,300px)}
.ill-flat .person__ill{align-items:flex-end}
.ill-flat .person__ill .ill{height:96%}

/* Pita nama */
.has-ribbon .cover__names,.has-ribbon .hero__names{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .28em;position:relative;z-index:2;width:min(100%,380px);margin:-30px auto 8px;padding:.3em 1.25em .62em;background:var(--ribbon) center/100% 100% no-repeat;color:var(--ribbon-text,#fff);font-size:clamp(1.7rem,8vw,2.3rem);line-height:1.15;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.has-ribbon .cover__names i,.has-ribbon .hero__names i{font-size:.8em;color:inherit;opacity:.85}
.has-ribbon .cover__names{animation:ribbonIn 1.3s var(--ease) .75s both!important}
.has-ribbon .hero__names.in{animation:ribbonIn 1.3s var(--ease) both}
@keyframes ribbonIn{from{clip-path:inset(0 50% 0 50%);opacity:0;transform:scale(.9)}to{clip-path:inset(-20% 0 -20% 0);opacity:1;transform:none}}
.has-ribbon.has-ill .cover__guest{margin-top:12px}

/* Nama di atas ilustrasi */
.names-top .cover__content{display:flex;flex-direction:column;align-items:center}
.names-top .cover__kicker{order:-2}
.names-top .cover__names{order:-1;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 .25em;font-size:clamp(2.7rem,13vw,3.8rem);margin:.05em 0 0;transform:rotate(-4deg)}
.names-top .cover__names i{font-size:.75em}
.names-top .cover__date{margin-top:8px;font-family:var(--f-display);letter-spacing:.32em;font-size:1.05rem}

/* Huruf vertikal di sisi sampul */
.cover__side{position:absolute;top:50%;z-index:4;margin:0;display:flex;flex-direction:column;align-items:center;gap:.5em;transform:translateY(-58%);font-family:var(--f-display);font-size:clamp(.9rem,3.8vw,1.2rem);font-weight:600;line-height:1;color:var(--heading);transition:opacity .4s}
.cover__side--l{left:max(12px,calc(50% - 250px))}.cover__side--r{right:max(12px,calc(50% - 250px))}
.cover__side span{display:block;animation:sideIn .8s var(--ease) calc(.5s + var(--i) * 55ms) both}
@keyframes sideIn{from{opacity:0;transform:translateY(-14px)}}
.is-opening .cover__side{opacity:0}
@media (max-width:420px){.has-side .cover__couple{width:calc(100% - 40px);margin-inline:auto}.cover__side{font-size:.85rem;gap:.42em}}

/* Animasi panggung latar */
.stage .st-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:stDraw 2.4s var(--ease) .35s forwards}
.stage .st-draw--2{animation-delay:.7s}
@keyframes stDraw{to{stroke-dashoffset:0}}
.stage .st-sway,.stage .st-swing,.stage .st-beat,.stage .st-rise,.stage .st-spark{transform-box:fill-box}
.stage .st-sway{transform-origin:50% 100%;animation:stSway 5s ease-in-out infinite}
.stage .st-sway--r{animation-delay:-2.5s}
.stage .st-swing{transform-origin:50% 0;animation:stSwing 3.2s ease-in-out infinite}
.stage .st-beat{transform-origin:50% 50%;animation:stBeat 2.8s ease-in-out infinite}
.stage .st-rise{transform-origin:50% 50%;animation:stRise 1.4s var(--ease) both}
.stage .st-spark{transform-origin:50% 50%;animation:stTwinkle 2.8s ease-in-out infinite}
.stage .st-cloud{animation:stCloud 16s ease-in-out infinite alternate}
.stage .st-cloud--2{animation-duration:22s;animation-direction:alternate-reverse}
@keyframes stSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes stSwing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes stBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.05)}28%{transform:scale(1)}42%{transform:scale(1.035)}}
@keyframes stRise{from{opacity:0;transform:scale(.6)}}
@keyframes stTwinkle{0%,100%{transform:scale(.35);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes stCloud{from{transform:translateX(-26px)}to{transform:translateX(30px)}}
[data-r]:not(.in) .stage *,[data-r]:not(.in) .fc *{animation-play-state:paused!important}

/* Ketuk ilustrasi: hati beterbangan */
.tap-heart{position:fixed;z-index:95;pointer-events:none;width:22px;height:20px;margin:-10px 0 0 -11px;color:var(--primary);animation:tapHeart 1.3s cubic-bezier(.2,.7,.3,1) forwards}
.tap-heart svg{width:100%;height:100%;display:block}
@keyframes tapHeart{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1;transform:translate(calc(var(--dx) * .2),-14px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),-130px) scale(.7) rotate(var(--rot))}}
.ill-flat .cover__couple,.ill-flat .hero__couple{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.stage *{animation:none!important;stroke-dashoffset:0!important}}

/* Gaya bersama template Ilustrasi (latar terang, judul skrip, bingkai lengkung) */
.is-ilu .cover__media{animation:none}
.is-ilu .cover__kicker{letter-spacing:.42em;font-size:.74rem;font-weight:500;color:var(--muted)}
.is-ilu .cover__guest{border:0;border-radius:18px;background:var(--surface);box-shadow:0 14px 34px -24px rgba(0,0,0,.35);padding:12px 16px}
.is-ilu .cover__date{color:var(--heading)}
.is-ilu .sec__kicker{letter-spacing:.34em;color:var(--muted)}
.is-ilu .sec__title{font-family:var(--f-script);font-weight:400;font-size:clamp(2.5rem,11vw,3.3rem);line-height:1.1;color:var(--primary)}
.is-ilu .sec--quote,.is-ilu .sec--countdown,.is-ilu .sec--story,.is-ilu .sec--wishes,.is-ilu .sec--turut{background:var(--bg-alt)}
.is-ilu .person__ill,.is-ilu .person__photo,.is-ilu .person__mono{border-radius:999px 999px 28px 28px;background:var(--ill-bg,var(--bg-alt));box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--line),var(--shadow)}
.is-ilu .person__nick{font-family:var(--f-script);font-weight:400;color:var(--primary)}
.is-ilu .couple__amp{font-family:var(--f-script)}
.is-ilu .event,.is-ilu .card{border:0;box-shadow:0 18px 40px -28px rgba(0,0,0,.35)}
.is-ilu .hero__names{color:var(--heading)}
.is-ilu.has-ribbon .hero__names{color:var(--ribbon-text,#fff)}
.is-ilu .hero__scroll{display:none}
.is-ilu .sec--hero{padding-top:64px}
.is-ilu .closing__title{font-family:var(--f-script);font-weight:400;color:var(--primary)}
.is-ilu .closing__names{font-family:var(--f-script)}
.is-ilu .hero__kicker{letter-spacing:.42em;font-size:.74rem;color:var(--muted)}
/* Hiasan gantung (lampu) di atas sampul & hero */
.top-art{position:absolute;top:0;left:50%;width:min(100%,520px);transform:translateX(-50%);z-index:3;pointer-events:none;animation:artIn 1.6s ease both}
.top-art .orn-hang{height:auto}
.is-opening .cover .top-art{opacity:0;transition:opacity .4s}
.orn-hang{display:block;width:100%;height:100%}
.orn-hang .st-swing{transform-box:fill-box;transform-origin:50% 0;animation:stSwing 3.4s ease-in-out infinite}
.orn-hang .st-swing--r{animation-delay:-1.7s}
@media (prefers-reduced-motion:reduce){.orn-hang .st-swing{animation:none}}

/* ---------- Tipografi: huruf beranimasi, monogram, kop & teks berjalan ---------- */
.is-typo .cover__names .w,.is-typo .hero__names .w{display:inline-block;white-space:nowrap}
.is-typo .cover__names .ch,.is-typo .hero__names .ch{display:inline-block}
.is-typo .cover__names .ch{animation:typoCh 1.1s var(--ease) both;animation-delay:calc(.45s + var(--i) * 55ms)}
@keyframes typoCh{from{opacity:0;transform:translateY(.42em) rotate(5deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.is-typo .hero__names .ch{opacity:0;transform:translateY(.42em);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(.15s + var(--i) * 50ms)}
.is-typo .hero__names.in .ch{opacity:1;transform:none;filter:none}
.mono{--ms:var(--mono-size,128px);position:relative;width:var(--ms);height:var(--ms);margin:0 auto;color:var(--primary)}
.mono__ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-dasharray:620;stroke-dashoffset:620;animation:monoRing 2.6s var(--ease) .2s forwards}
.mono__ring circle+circle{stroke-width:.6;opacity:.55}
@keyframes monoRing{to{stroke-dashoffset:0}}
.mono span{position:absolute;font-family:var(--f-mono,var(--f-display));font-size:calc(var(--ms) * .4);line-height:1;color:var(--heading);animation:rise 1.2s var(--ease) both}
.mono__a{left:21%;top:17%;animation-delay:.5s!important}
.mono__b{right:21%;bottom:15%;animation-delay:.75s!important}
.mono__sep{position:absolute;left:50%;top:20%;height:60%;width:1px;background:currentColor;transform:rotate(38deg);transform-origin:50% 50%;animation:monoSep 1.2s var(--ease) .35s both}
@keyframes monoSep{from{transform:rotate(38deg) scaleY(0)}}
[data-r]:not(.in) .mono__ring,[data-r]:not(.in) .mono span,[data-r]:not(.in) .mono__sep{animation-play-state:paused}
.cover__mono{margin:0 auto 16px}
.hero__mono{margin:0 auto 18px}
.closing__mono{--mono-size:92px;margin:4px auto 24px}
.aside__mono{--mono-size:104px;margin-bottom:22px}
.aside__mono .mono{margin:0}
.aside__date small{display:block;margin-top:6px;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;opacity:.7}
.hero__date2{margin-top:6px;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;opacity:.72}
.masthead{position:absolute;top:0;left:0;right:0;z-index:6;width:min(100% - 32px,520px);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;white-space:nowrap;text-align:center;align-items:center;gap:10px;padding:20px 2px 12px;border-bottom:3px double currentColor;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;animation:rise 1s var(--ease) both}
.masthead span:first-child{text-align:left}.masthead span:last-child{text-align:right}
.masthead b{font-family:var(--f-display);font-size:.95rem;letter-spacing:.14em}
.has-masthead .cover{padding-top:86px}
.marquee{position:absolute;left:0;right:0;bottom:0;z-index:6;overflow:hidden;padding:11px 0;border-top:1px solid currentColor;font-family:var(--f-marquee,var(--f-display));font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.marquee__track{display:flex;width:max-content;animation:marq 32s linear infinite}
.marquee__track>div{display:flex;align-items:center;gap:1.1em;padding-right:1.1em}
.marquee i{font-style:normal;font-size:.62em;color:var(--primary)}
@keyframes marq{to{transform:translateX(-50%)}}
.has-marquee .cover{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.has-marquee .cover .marquee{bottom:env(safe-area-inset-bottom)}
.has-marquee .sec--hero{padding-bottom:150px}
.has-marquee .hero__scroll{bottom:76px}
.is-opening .cover .masthead,.is-opening .cover .marquee{opacity:0;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.mono__ring{stroke-dashoffset:0}.is-typo .hero__names .ch{opacity:1;transform:none;filter:none}}
@media (min-width:1024px){
  .is-typo .aside__content{inset:0 9% 0 8%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .is-typo .aside__names{font-size:clamp(4.4rem,7.2vw,8.6rem);line-height:.95;margin:.18em 0 .28em}
  .is-typo .aside__names i{display:block;font-size:.5em;line-height:1.2}
  .is-typo .aside__quote{max-width:460px}
}
.is-typo.has-cover{--cover-overlay:linear-gradient(180deg,color-mix(in srgb,var(--cover-bg) 50%,transparent),color-mix(in srgb,var(--cover-bg) 84%,transparent) 42%,color-mix(in srgb,var(--cover-bg) 96%,transparent));--hero-overlay:var(--cover-overlay)}

/* Ponsel: tombol kecil tetap nyaman diketuk */
@media (max-width:600px){
  .btn--sm{min-height:38px}
  .bank-card__copy{min-height:36px}
  .demo-pill{min-height:36px}
  .btn-row .btn--sm{flex:1 1 auto}
}