/* Tema: Hanami (premium) — taman sakura Jepang: Fuji, pagoda, danau, kelopak berguguran.
   Empat pilihan warna lewat class body .variant-{sakura|fuji|matcha|yoru}. */
:root, .variant-sakura {
  --bg: #fdf3f5;
  --paper: #fffafb;
  --paper-rgb: 255 250 251;
  --blush: #fbe3ea;
  --pink: #f0b9c8;
  --rose: #d97f9b;
  --deep: #8a3c59;
  --on-deep: #fff6f8;
  --ink: #4a2e39;
  --muted: #8d7480;
  --gold: #c07a93;
  --line: rgba(138, 60, 89, .16);
  --shadow: 138 60 89;
  --overlay: 52 20 34;
  --frame: #fffafb;
  --radius: 26px;
  --cover-bg: linear-gradient(170deg, #fbe9ee, #f3cbd7);
  --cover-ink: #8a3c59;
  --dock-bg: rgba(255, 250, 251, .9);
  --script: "Italianno", cursive;
  --serif: "Marcellus", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  /* pemandangan */
  --sky1: #fdeef2; --sky2: #f6d6e0; --sun: #fff7f0; --cloud: #fffafc; --cloud-line: #e9b7c6;
  --far: #e2bfcc; --mtn: #b98699; --mtn2: #edd3dc; --snow: #fffbfd; --ridge: rgba(255, 255, 255, .45); --mist: #fdf0f4;
  --hill: #c996a8; --pagoda: #b76480; --roof: #7e3350; --pg-win: #f6d6e0;
  --water: #f1d2dc; --water2: #e6bccb; --wave: rgba(255, 255, 255, .7);
  --branch: #6e4150; --fl-a: #f6b3c6; --fl-b: #fcd6e0; --fl-c: #e88aa6; --fl-center: #c2456d;
}
.variant-fuji {
  --bg: #f6f3fb; --paper: #fdfcff; --paper-rgb: 253 252 255; --blush: #ebe4f7; --pink: #cdbfe8; --rose: #9b85cc;
  --deep: #4e3d7e; --on-deep: #f8f5ff; --ink: #2f2a42; --muted: #7c7692; --gold: #8a74b8;
  --line: rgba(78, 61, 126, .16); --shadow: 78 61 126; --overlay: 30 22 52; --frame: #fdfcff;
  --cover-bg: linear-gradient(170deg, #efeafa, #d9cff0); --cover-ink: #4e3d7e; --dock-bg: rgba(253, 252, 255, .9);
  --sky1: #f1edfb; --sky2: #ddd3f2; --sun: #fffdf5; --cloud: #fdfcff; --cloud-line: #c7b8e6;
  --far: #c9bee6; --mtn: #8c80b4; --mtn2: #dcd4f0; --snow: #fefdff; --mist: #f3effb;
  --hill: #a596cb; --pagoda: #7c68ab; --roof: #3f3169; --pg-win: #e2daf4;
  --water: #e1daf3; --water2: #cfc3ec; --branch: #4a3f60; --fl-a: #c7b0ec; --fl-b: #e6dbf8; --fl-c: #a688dc; --fl-center: #6d4fa8;
}
.variant-matcha {
  --bg: #f4f6ef; --paper: #fcfdf8; --paper-rgb: 252 253 248; --blush: #e4ebd9; --pink: #c3d2ae; --rose: #7f9c66;
  --deep: #3e5834; --on-deep: #f7faf2; --ink: #2c3527; --muted: #75806c; --gold: #8c9a5c;
  --line: rgba(62, 88, 52, .16); --shadow: 62 88 52; --overlay: 24 34 20; --frame: #fcfdf8;
  --cover-bg: linear-gradient(170deg, #eef3e6, #d7e2c8); --cover-ink: #3e5834; --dock-bg: rgba(252, 253, 248, .9);
  --sky1: #f2f5ea; --sky2: #dfe8d1; --sun: #fffdf2; --cloud: #fdfef9; --cloud-line: #c3d2ae;
  --far: #c0ceb2; --mtn: #8ea283; --mtn2: #d9e3cd; --snow: #fefffb; --mist: #f2f6ec;
  --hill: #93aa85; --pagoda: #a5553f; --roof: #4c3b2c; --pg-win: #eadfc9;
  --water: #dde7d1; --water2: #c9d8b9; --branch: #4c4638; --fl-a: #f4c1cf; --fl-b: #fbe2e9; --fl-c: #e699af; --fl-center: #c2456d;
}
.variant-yoru {
  --bg: #121729; --paper: #1b2139; --paper-rgb: 27 33 57; --blush: rgba(232, 201, 138, .1); --pink: #5d5a7c; --rose: #d9a86e;
  --deep: #ecca8c; --on-deep: #151a2e; --ink: #ece6da; --muted: #a8a6ba; --gold: #d8b574;
  --line: rgba(236, 202, 140, .18); --shadow: 0 0 0; --overlay: 8 10 22; --frame: #1b2139;
  --cover-bg: linear-gradient(170deg, #1d2342, #0d1122); --cover-ink: #ecca8c; --dock-bg: rgba(18, 23, 41, .92);
  --sky1: #0e1328; --sky2: #2b2d57; --sun: #fff3d6; --cloud: #3a3d6b; --cloud-line: #5b5d90;
  --far: #282c55; --mtn: #3c4070; --mtn2: #5e6192; --snow: #e9e6f6; --ridge: rgba(255, 255, 255, .15); --mist: #2b2e58;
  --hill: #1f2448; --pagoda: #6b4a35; --roof: #d9a86e; --pg-win: #ffd88f;
  --water: #1c2246; --water2: #121733; --wave: rgba(255, 243, 214, .35);
  --branch: #2c2336; --fl-a: #f0b6c8; --fl-b: #f9dbe4; --fl-c: #d98aa4; --fl-center: #b8456a;
}

body { background: var(--bg); transition: background .6s; }
.kicker { font-family: var(--serif); font-weight: 400; letter-spacing: .3em; color: var(--rose); }
.sec-title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 1.75rem; color: var(--deep); }
.script { font-size: 1.12em; }
.lead { color: var(--muted); }
.btn { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.btn-open, .btn-main { background: var(--rose); color: #fff; box-shadow: 0 12px 26px -12px rgb(var(--shadow) / .7); }
.variant-yoru .btn-open, .variant-yoru .btn-main { color: #151a2e; }
.btn-soft { background: var(--blush); color: var(--deep); }
.divider-orn { display: none; }

/* ---------- pemandangan (SVG) ---------- */
.hn-scene-svg { display: block; width: 100%; height: 100%; }
.hn-cloud { fill: var(--cloud); opacity: .92; }
.hn-cloud-line { fill: none; stroke: var(--cloud-line); stroke-width: 1.4; stroke-linecap: round; }
.hn-cloud, .hn-cloud-line { transform-box: fill-box; animation: hn-drift 16s ease-in-out infinite alternate; }
.hn-far { fill: var(--far); opacity: .85; }
.hn-snow { fill: var(--snow); }
.hn-ridge { fill: none; stroke: var(--ridge, rgba(255, 255, 255, .45)); stroke-width: 2; stroke-linecap: round; }
.hn-hill { fill: var(--hill); }
.pg-body { fill: var(--pagoda); }
.pg-roof { fill: var(--roof); }
.pg-win { fill: var(--pg-win); }
.hn-wave { fill: none; stroke: var(--wave, rgba(255, 255, 255, .7)); stroke-width: 2; stroke-linecap: round; }
.hn-branch { fill: none; stroke: var(--branch); stroke-linecap: round; }
.fl-a { fill: var(--fl-a); }
.fl-b { fill: var(--fl-b); }
.fl-c { fill: var(--fl-c); }
.fl-bud { fill: var(--fl-c); }
.hn-top { transform-box: fill-box; transform-origin: 50% 0; animation: hn-sway 7s ease-in-out infinite alternate; }
@keyframes hn-drift { to { transform: translateX(18px); } }
@keyframes hn-sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg) translateY(2px); } }

/* ---------- sampul ---------- */
.cover { background: linear-gradient(rgb(var(--overlay) / .12), rgb(var(--overlay) / .35) 45%, rgb(var(--overlay) / .78)), var(--cover-img) center / cover no-repeat; place-items: end center; padding-bottom: max(9vh, 48px); }
.cover-title { font-family: var(--serif); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.2; margin: 12px 0 4px; }
.cover .kicker { letter-spacing: .34em; font-size: .7rem; }
.cover-date { font-family: var(--sans); font-size: .95rem; letter-spacing: .12em; }
.cover-guest, .cover:not([style]) .cover-guest { border-radius: 20px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); }
.cover:not([style]) .cover-guest { background: rgb(var(--paper-rgb) / .7); border-color: var(--line); }
.cover-guest b { font-family: var(--serif); font-weight: 400; }
.deco { color: inherit; opacity: 1; width: 250px; height: 112px; }
.deco-tl { top: -6px; left: -40px; transform: rotate(8deg); }
.deco-br { bottom: auto; top: 90px; right: -60px; transform: scaleX(-1) rotate(-14deg); width: 200px; }
.hn-hanko {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 8px;
  background: #c2334d; color: #fff; font: 700 1.6rem/1 "Shippori Mincho", serif; transform: rotate(-6deg);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(0, 0, 0, .5);
}

/* ---------- beranda: pemandangan penuh di belakang ---------- */
.sec { padding: 76px 26px; }
.sec + .sec { border-top: 0; }
.hero { min-height: 100svh; padding: 54px 26px 36px; background: none; overflow: hidden; }
.hn-hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero > :not(.hn-hero-scene) { position: relative; z-index: 1; }
.arch {
  width: 188px; height: 188px; border-radius: 50%; border: 6px solid var(--frame); background: var(--blush);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 0 70px 20px color-mix(in srgb, var(--sun) 80%, transparent), 0 20px 40px -20px rgb(var(--shadow) / .6);
}
.arch-orn { width: 150px; }
.hero-title { font-size: 4.4rem; text-shadow: 0 2px 16px var(--sky1); margin: 0 0 2px; }
.hero .kicker { text-shadow: 0 1px 10px var(--sky1); }
.hero-date { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .08em; color: var(--deep); text-shadow: 0 1px 10px var(--sky1); }
.countdown { gap: 8px; margin: 22px 0 18px; }
.countdown div { width: 70px; padding: 12px 0 9px; border-radius: 14px; border: 0; background: var(--deep); box-shadow: 0 12px 24px -14px rgb(var(--shadow) / .9); }
.countdown b { color: var(--on-deep); font-family: var(--serif); font-size: 1.75rem; }
.countdown span { color: var(--on-deep); opacity: .8; font-size: .6rem; letter-spacing: .14em; }
.hero .btn-soft { background: var(--rose); color: #fff; }
.variant-yoru .hero .btn-soft { color: #151a2e; }

/* ---------- pembuka: kartu oval ---------- */
.opening { padding: 110px 44px; overflow: hidden; }
.opening::before {
  content: ""; position: absolute; inset: 40px 18px; border-radius: 999px; z-index: 0;
  background: rgb(var(--paper-rgb) / .82); border: 1px solid var(--line); box-shadow: 0 0 0 7px rgb(var(--paper-rgb) / .45), 0 30px 60px -40px rgb(var(--shadow) / .6);
}
.opening > * { position: relative; z-index: 1; }
.opening blockquote p { font-family: var(--serif); font-style: normal; font-size: 1rem; line-height: 1.8; color: var(--ink); }
.opening blockquote cite { font-family: var(--serif); font-size: .95rem; color: var(--rose); letter-spacing: .06em; }
.opening blockquote { margin-top: 30px; }
.hn-spray { position: absolute; z-index: 2 !important; width: 230px; height: 104px; pointer-events: none; }
.hn-spray-tl { top: 8px; left: -46px; transform: rotate(10deg); }
.hn-spray-br { bottom: 8px; right: -46px; transform: rotate(190deg); }
.hn-spray-top { top: -30px; left: 50%; transform: translateX(-50%); width: 260px; }

/* ---------- mempelai ---------- */
.people { background: linear-gradient(transparent, rgb(var(--paper-rgb) / .6) 20%, rgb(var(--paper-rgb) / .6) 80%, transparent); }
.person { padding: 22px 20px 26px; margin: 16px 0; border-radius: 30px; background: rgb(var(--paper-rgb) / .75); border: 1px solid var(--line); }
.person-photo {
  width: 210px; height: 270px; border-radius: 120px 120px 22px 22px; border: 6px solid var(--frame); background: var(--blush);
  box-shadow: 0 0 0 1px var(--rose), 0 24px 40px -26px rgb(var(--shadow) / .8); margin-top: 6px;
}
.person-photo svg { width: 140px; }
.person-name { font-size: 4rem; margin-top: -34px; position: relative; text-shadow: 0 2px 10px var(--paper), 0 0 2px var(--paper); }
.person-full { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.ig { background: var(--blush); }
.amp { font-family: var(--serif); font-size: 2.8rem; color: var(--rose); margin: 6px 0 -6px; }

/* ---------- acara: kartu lengkung dengan pagoda ---------- */
.events { background: radial-gradient(ellipse at 50% 0, var(--blush), transparent 60%); overflow: hidden; }
.hn-vert { position: absolute; right: 16px; top: 40px; writing-mode: vertical-rl; font: 700 1.5rem/1 "Shippori Mincho", serif; letter-spacing: .3em; color: var(--rose); opacity: .45; }
.event {
  position: relative; overflow: hidden; padding: 74px 26px 96px; margin-bottom: 22px;
  border-radius: 999px 999px 28px 28px; background: rgb(var(--paper-rgb) / .8); border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent);
  box-shadow: 0 0 0 6px rgb(var(--paper-rgb) / .5), 0 26px 50px -36px rgb(var(--shadow) / .7);
}
.event::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; opacity: .5; background: var(--pagoda);
  -webkit-mask: url(pagoda.svg) left 14px bottom 0 / 44px auto no-repeat, url(pagoda.svg) right 14px bottom 0 / 44px auto no-repeat;
  mask: url(pagoda.svg) left 14px bottom 0 / 44px auto no-repeat, url(pagoda.svg) right 14px bottom 0 / 44px auto no-repeat;
}
.event::before { content: ""; position: absolute; left: 50%; bottom: -30px; width: 170px; height: 90px; transform: translateX(-50%); background: var(--mtn2); clip-path: polygon(0 100%, 38% 10%, 62% 10%, 100% 100%); opacity: .55; }
.event > * { position: relative; }
.event h3 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: 1.25rem; color: var(--rose); }
.event-date { flex-direction: column; gap: 0; margin: 6px 0 12px; }
.event-date span:first-child { font-family: var(--script); font-size: 3rem; line-height: 1; color: var(--deep); }
.event-date b { border: 0; padding: 0; font-family: var(--serif); font-size: 2rem; color: var(--ink); }
.event-date span:last-child { font-family: var(--serif); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.event-time { font-weight: 600; }
.event-venue { color: var(--deep); }
.event-actions .btn-soft { background: var(--rose); color: #fff; }
.variant-yoru .event-actions .btn-soft { color: #151a2e; }
.dc-title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; color: var(--rose); }
.dc-swatches i { width: 54px; height: 54px; }

/* ---------- cerita ---------- */
.story { background: linear-gradient(transparent, var(--blush) 30%, var(--blush) 70%, transparent); }
.timeline { padding-left: 0; display: grid; gap: 18px; }
.timeline::before, .timeline li::before { display: none; }
.timeline li { padding: 14px 14px 20px; border-radius: 24px; background: rgb(var(--paper-rgb) / .85); border: 1px solid var(--line); box-shadow: 0 20px 40px -32px rgb(var(--shadow) / .7); }
.t-photo { border-radius: 16px; aspect-ratio: 4 / 3; margin: 0 0 12px; }
.timeline h3 { font-family: var(--script); font-size: 2.6rem; line-height: 1; color: var(--deep); font-weight: 400; }
.t-date { color: var(--rose); font-family: var(--serif); letter-spacing: .1em; }
.timeline p { color: var(--ink); opacity: .85; }

/* ---------- galeri ---------- */
.grid { column-gap: 10px; }
.g-item { border-radius: 18px; margin-bottom: 10px; box-shadow: 0 16px 30px -24px rgb(var(--shadow) / .8); }

/* ---------- ucapan ---------- */
.wishes { overflow: hidden; }
.wish-form { border-radius: 28px; background: rgb(var(--paper-rgb) / .88); box-shadow: 0 26px 50px -38px rgb(var(--shadow) / .8); }
.wish-form input[type=text], .wish-form select, .wish-form textarea { background: var(--paper); border-radius: 16px; }
.variant-yoru .wish-form input[type=text], .variant-yoru .wish-form select, .variant-yoru .wish-form textarea { background: #11152a; }
.chips input:checked + span { background: var(--rose); border-color: var(--rose); color: #fff; }
.rsvp-stats div { background: rgb(var(--paper-rgb) / .85); }
.wish { background: var(--deep); border: 0; color: var(--on-deep); border-radius: 20px; }
.wish-head b { color: var(--on-deep); }
.wish time { color: var(--on-deep); opacity: .7; }
.wish .tag { background: rgba(255, 255, 255, .18); color: var(--on-deep); }

/* ---------- hadiah: kartu ATM terang dengan warna merek bank ---------- */
.gift { overflow: hidden; }
.bank {
  color: #3a3437; padding: 22px 22px 20px; border-radius: 22px;
  background:
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, .05) 0 30%, transparent 31%),
    radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(135deg, #ffffff, #efeaed);
  box-shadow: 0 22px 40px -28px rgb(var(--shadow) / .9), inset 0 1px 0 #fff;
}
.bank::after { background: rgba(255, 255, 255, .5); }
.bank-top { flex-direction: row-reverse; }
.bank-brand { font: 800 1.45rem/1 var(--sans); letter-spacing: -.01em; color: var(--deep); font-style: italic; }
.bank[data-bank^="bca"] .bank-brand { color: #005daa; }
.bank[data-bank^="bni"] .bank-brand { color: #f15a23; }
.bank[data-bank^="bri"] .bank-brand { color: #00529c; }
.bank[data-bank^="mandiri"] .bank-brand { color: #003d79; }
.bank[data-bank^="bsi"] .bank-brand, .bank[data-bank*="syariah"] .bank-brand { color: #00a39d; }
.bank[data-bank^="cimb"] .bank-brand { color: #7a0026; }
.bank[data-bank^="btn"] .bank-brand { color: #0d2c6c; }
.bank[data-bank^="dana"] .bank-brand { color: #118eea; }
.bank[data-bank^="ovo"] .bank-brand { color: #4c3494; }
.bank[data-bank^="gopay"] .bank-brand { color: #00aed6; }
.bank[data-bank^="shopee"] .bank-brand { color: #ee4d2d; }
.bank[data-bank^="jago"] .bank-brand { color: #e8a400; }
.bank[data-bank^="seabank"] .bank-brand { color: #ff6c00; }
.chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f7d77a, #d6a93f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.bank-no { color: #2b2629; letter-spacing: .16em; font-weight: 500; font-size: 1.3rem; margin-top: 20px; }
.bank-name { color: #6a6266; }
.bank .btn-copy, .bank .btn-copy.done { color: #fff; background: var(--rose); border: 0; }
.variant-yoru .bank .btn-copy { color: #151a2e; }
.qris, .gift-address { background: rgb(var(--paper-rgb) / .88); }

/* ---------- penutup: pemandangan lagi ---------- */
.closing { padding-bottom: 0; background: none; }
.closing-title { font-size: 4.2rem; }
.hn-closing-scene { position: relative; height: 430px; margin: 26px -26px 0; }
.hn-closing-scene .hn-scene-svg { position: absolute; inset: 0; }
.foot { background: var(--water2); color: var(--deep); padding-top: 14px; }
.foot a { color: var(--deep); }

/* ---------- layar lebar: pemandangan tetap di panel kiri ---------- */
.hn-stage { display: none; }
@media (min-width: 900px) {
  .hn-stage { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: calc(100% - 480px); z-index: 0; pointer-events: none; }
  .layout { position: relative; z-index: 1; }
  .side, .side[style] { background: none; color: var(--deep); place-items: start center; text-align: center; padding-top: 11vh; }
  .side-title { color: var(--deep); font-size: 6.4rem; text-shadow: 0 2px 20px var(--sky1); }
  .side .kicker { color: var(--rose); }
  .side-date { font-family: var(--serif); color: var(--deep); }
  .side-orn { display: none !important; }
  .content { box-shadow: -20px 0 60px -30px rgb(var(--shadow) / .5); }
  .variant-yoru .side-title { text-shadow: 0 2px 24px #000; }
}

/* ---------- kelopak sakura berguguran & berputar ---------- */
.petals i {
  width: 13px; height: 11px; border-radius: 12px 1px 12px 1px; opacity: .9;
  background: linear-gradient(135deg, var(--fl-b), var(--fl-a) 60%, var(--fl-c));
  animation-name: hn-fall; animation-timing-function: linear;
}
@keyframes hn-fall {
  0% { transform: translate(0, -4vh) rotateX(0) rotateZ(0); }
  25% { transform: translate(calc(var(--dx) * .4), 24vh) rotateX(180deg) rotateZ(60deg); }
  50% { transform: translate(calc(var(--dx) * -.2), 52vh) rotateX(360deg) rotateZ(140deg); }
  100% { transform: translate(var(--dx), 106vh) rotateX(720deg) rotateZ(260deg); }
}

.dock a.active { background: var(--blush); color: var(--deep); }
.music-btn { background: var(--rose); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hn-cloud, .hn-cloud-line, .hn-top { animation: none; }
}

/* angka: Marcellus menggambar 0 seperti huruf O — pakai Figtree untuk tanggal & angka */
.hero-date, .side-date, .countdown b, .event-date b, .rsvp-stats b { font-family: var(--sans); }
.countdown b { font-weight: 600; font-size: 1.6rem; }
.event-date b { font-weight: 500; font-size: 1.9rem; letter-spacing: .02em; }
.hero-date { font-weight: 500; letter-spacing: .1em; }
/* ruang untuk danau & pagoda di bawah isi beranda */
.hero { padding-bottom: 250px; }
.hero { min-height: 118svh; }
/* penutup: teks dulu, pemandangan di paling bawah */
.closing { display: flex; flex-direction: column; align-items: center; }
.hn-closing-scene { order: 9; align-self: stretch; }
/* nama bank di atas kilau kartu */
.bank-top, .bank-no, .bank-name { position: relative; z-index: 1; }
.wishes .hn-spray-tl { top: -34px; opacity: .9; }