/* ==========================================================================
   TEMUVA — "Ghibli Meadow" wedding theme
   Langit cat air, awan cumulus, bukit rumput, kertas bertekstur, cahaya sore.
   Nama kelas (ao-*) dipertahankan agar kompatibel dengan rsvp-guestbook.js.
   ========================================================================== */

.theme-ghibli {
  --ao-accent: #5f9158;
  --ao-highlight: #e58f7b;

  --gh-ink: #3a2f2a;
  --gh-ink-soft: #6a5a4e;
  --gh-forest: #2f4a3a;
  --gh-paper: #fbf4e2;
  --gh-card: rgba(255, 252, 242, .82);
  --gh-line: rgba(58, 47, 42, .12);
  --gh-sun: #ffd98a;
  --gh-accent-ink: #3f6a3c;
  --gh-shadow: 0 18px 40px rgba(60, 90, 80, .14);
  --gh-hand: 'Klee One', 'Zen Maru Gothic', cursive;
  --gh-serif: var(--ao-heading, 'Shippori Mincho', serif);
  --gh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 .6 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gh-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M2 6Q17-1 32 6T62 6T92 6T118 6' fill='none' stroke='%237fb069' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red, blue)) {
  .theme-ghibli { --gh-accent-ink: color-mix(in srgb, var(--ao-accent) 66%, #1c2a20); }
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.ao-locked, html.ao-locked body { overflow: hidden; }

.theme-ghibli {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ao-body, 'Zen Maru Gothic', sans-serif);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gh-ink);
  background: var(--gh-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.theme-ghibli::before {            /* serat kertas */
  content: "";
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: .5;
  background-image: var(--gh-grain);
}
.theme-ghibli img { max-width: 100%; }
.theme-ghibli h1, .theme-ghibli h2, .theme-ghibli h3, .theme-ghibli p, .theme-ghibli figure, .theme-ghibli blockquote { margin: 0; }
.ao-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--ao-highlight); outline-offset: 3px; border-radius: .4rem; }

.ao-sakura { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.ao-story-main { position: relative; z-index: 2; }
.ao-audio-frame { position: fixed; width: 1px; height: 1px; left: -9999px; border: 0; opacity: 0; pointer-events: none; }

.ao-wrap   { width: min(100% - 2.5rem, 1120px); margin-inline: auto; position: relative; }
.ao-narrow { width: min(100% - 2.5rem, 780px);  margin-inline: auto; position: relative; }
.ao-section { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; }

/* ---------- Tipografi pendukung ---------- */
.ao-meta {
  font-family: var(--gh-hand);
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--gh-accent-ink);
}
.ao-kicker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem;
  margin-bottom: .7rem;
  font-family: var(--gh-hand);
  font-size: 1rem;
  color: var(--gh-accent-ink);
}
.ao-kicker i {                     /* cap hanko */
  font-style: normal;
  font-family: var(--gh-serif);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  padding: .32rem .55rem;
  color: #fff;
  background: var(--ao-highlight);
  border-radius: .35rem;
  rotate: -4deg;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12), inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.ao-section-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ao-heading {
  font-family: var(--gh-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1.3;
  color: var(--gh-forest);
  text-wrap: balance;
}
.ao-heading::after {
  content: ""; display: block; width: 120px; height: 12px; margin: .8rem auto 0;
  background: var(--gh-wave) center / contain no-repeat;
}
.ao-section-intro { margin-top: 1rem; color: var(--gh-ink-soft); max-width: 34rem; margin-inline: auto; }

.ao-kanji {
  position: absolute;
  font-family: var(--gh-serif); font-weight: 800; line-height: 1;
  pointer-events: none; user-select: none;
  color: rgba(255, 255, 255, .38);
}

/* ---------- Awan, burung, partikel cahaya ---------- */
.ao-cloud {
  position: absolute; left: 0; top: var(--y, 10%);
  width: var(--w, 320px); height: auto; aspect-ratio: 400 / 170;
  opacity: var(--o, .9);
  filter: drop-shadow(0 12px 20px rgba(80, 130, 165, .2));
  animation: gh-drift var(--t, 100s) linear var(--dl, 0s) infinite;
  pointer-events: none;
}
@keyframes gh-drift {
  from { transform: translate3d(-110%, 0, 0); }
  to   { transform: translate3d(calc(100vw + 10%), 0, 0); }
}
.ao-bird {
  position: absolute; left: 0; top: var(--y, 15%);
  width: 24px; height: auto; color: #4a6572; opacity: .8;
  animation: gh-fly var(--t, 50s) linear var(--dl, 0s) infinite;
  pointer-events: none;
}
@keyframes gh-fly {
  0%   { transform: translate3d(-10vw, 0, 0); }
  50%  { transform: translate3d(50vw, -18px, 0); }
  100% { transform: translate3d(110vw, 6px, 0); }
}
.ao-mote {
  position: absolute; bottom: -12px; left: var(--x, 50%);
  width: var(--s, 6px); height: var(--s, 6px);
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0, rgba(255, 244, 200, .9) 40%, transparent 72%);
  animation: gh-rise var(--d, 10s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes gh-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: .95; }
  50%  { transform: translate3d(34px, -45vh, 0); }
  85%  { opacity: .7; }
  100% { transform: translate3d(-22px, -92vh, 0); opacity: 0; }
}
.ao-hills {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  width: 100%; height: clamp(140px, 26vw, 300px);
  pointer-events: none; display: block;
}

/* ---------- Layar pembuka ---------- */
.ao-opening-screen {
  position: fixed; inset: 0;
  width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: var(--gh-ink);
  background: linear-gradient(180deg, #7fc0e6 0%, #a9dcef 38%, #d8f0f0 62%, #fff1cf 82%, #ffe0b0 100%);
}
.ao-opening-screen::backdrop { background: #a9dcef; }
.ao-opening-screen[open] { display: grid; place-items: center; }
.ao-opening-screen.is-leaving { animation: gh-leave .85s ease forwards; }
@keyframes gh-leave { to { opacity: 0; transform: scale(1.05); filter: blur(6px); } }

.ao-opening-sun {
  position: absolute; left: 50%; bottom: 20%; z-index: 0;
  width: min(54vw, 440px); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 26%, rgba(255, 236, 170, .92) 40%, rgba(255, 225, 150, .35) 62%, transparent 72%);
  animation: gh-glow 7s ease-in-out infinite alternate;
}
.ao-opening-sun::after {           /* berkas cahaya */
  content: ""; position: absolute; inset: -60%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .3) 0 5deg, transparent 5deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 62%);
          mask-image: radial-gradient(circle, #000 14%, transparent 62%);
  animation: gh-spin 140s linear infinite;
}
@keyframes gh-glow { from { scale: .94; opacity: .85; } to { scale: 1.05; opacity: 1; } }
@keyframes gh-spin { to { rotate: 360deg; } }

.ao-kanji--open { right: -3%; top: 0; font-size: min(62vw, 27rem); }

.ao-opening-inner {
  position: relative; z-index: 3;
  width: min(92vw, 40rem); max-height: 90dvh; overflow: auto;
  margin-bottom: 7vh;
  padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.2rem, 5vw, 3rem);
  text-align: center;
  border-radius: 2.2rem;
  background: rgba(255, 251, 238, .64);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 70px rgba(52, 100, 130, .26), inset 0 0 0 1.5px rgba(255, 255, 255, .85);
  animation: gh-title-in 1.3s cubic-bezier(.2, .7, .2, 1) both;
}
.ao-opening-inner::before {
  content: ""; position: absolute; inset: .55rem; pointer-events: none;
  border: 1.5px dashed rgba(95, 145, 88, .5); border-radius: 1.7rem;
}
@keyframes gh-title-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

.ao-opening-ep { font-family: var(--gh-hand); font-size: .95rem; color: var(--gh-accent-ink); }
.ao-opening-ep span { font-family: var(--gh-serif); margin-left: .4rem; }
.ao-opening-overline { margin-top: .4rem; font-family: var(--gh-hand); font-size: 1.05rem; color: var(--gh-ink-soft); }
.ao-opening-title {
  margin: .8rem 0 .7rem;
  font-family: var(--gh-serif); font-weight: 800;
  font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1.12;
  color: #25465a;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .75);
  text-wrap: balance; overflow-wrap: anywhere;
}
.ao-opening-title span, .ao-hero-title span {
  display: block;
  font-family: var(--gh-hand); font-weight: 400;
  font-size: .5em; line-height: 1.2;
  color: var(--ao-highlight);
}
#ao-opening-copy { font-size: 1.02rem; color: var(--gh-ink-soft); }
.ao-opening-date { margin-top: .7rem; font-family: var(--gh-serif); font-size: 1.15rem; letter-spacing: .28em; color: var(--gh-forest); }
.ao-opening-guest { margin-top: 1.1rem; font-size: .92rem; color: var(--gh-ink-soft); }
.ao-opening-guest strong {
  display: block; margin-top: .15rem;
  font-family: var(--gh-serif); font-size: 1.45rem; color: var(--gh-forest);
  text-decoration: underline wavy rgba(229, 143, 123, .8); text-underline-offset: .35em;
}

.ao-open-button, .ao-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 1.5rem; padding: .85rem 1.7rem;
  font: 700 1rem/1.2 var(--ao-body, sans-serif);
  color: #fff; cursor: pointer;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #7db36a, #4f8a4e);
  box-shadow: 0 10px 24px rgba(63, 113, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ao-open-button:hover, .ao-action:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(63, 113, 64, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ao-open-button:active, .ao-action:active { transform: translateY(0); }
.ao-open-button b {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  font-size: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #4f8a4e;
}
.ao-open-button small { font-family: var(--gh-serif); font-weight: 500; font-size: .8rem; opacity: .9; }
.ao-action:disabled { opacity: .6; cursor: wait; transform: none; }

/* ---------- Kontrol musik ---------- */
.ao-music-control {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .5rem;
  font: 500 .72rem/1.2 var(--gh-hand); color: var(--gh-ink-soft); text-align: left;
  background: rgba(255, 251, 238, .94); border: 1.5px solid rgba(95, 145, 88, .4); border-radius: 999px;
  box-shadow: 0 8px 22px rgba(60, 90, 80, .2); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.is-open .ao-music-control { opacity: 1; pointer-events: auto; transform: none; }
.ao-music-control svg { width: 2.2rem; height: 2.2rem; padding: .5rem; color: #fff; background: #5f9158; border-radius: 50%; }
.ao-music-control.is-playing svg { animation: gh-spin-z 6s linear infinite; }
@keyframes gh-spin-z { to { transform: rotate(360deg); } }
.ao-music-state { display: block; font-family: var(--gh-serif); font-size: .9rem; font-weight: 700; color: var(--gh-forest); }

/* ---------- Hero ---------- */
.ao-hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(10rem, 26vw, 18rem);
  background: linear-gradient(180deg, #86c6e8 0%, #b5e0f0 34%, #e1f2ee 62%, #fdf0cc 100%);
}
.ao-kanji--hero { left: 50%; top: 4%; translate: -50% 0; font-size: min(46vw, 22rem); color: rgba(255, 255, 255, .3); white-space: nowrap; }
.ao-sfx {
  position: absolute; z-index: 1; font-family: var(--gh-serif); font-weight: 700;
  color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(70, 130, 170, .3);
  animation: gh-bob 6s ease-in-out infinite;
}
.ao-sfx--a { left: 7%; top: 62%; font-size: 1.15rem; rotate: -8deg; }
.ao-sfx--b { right: 8%; top: 14%; font-size: 1.4rem; rotate: 6deg; animation-delay: -3s; }
@keyframes gh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.ao-hero-layout { z-index: 3; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.ao-hero-layout--solo { grid-template-columns: 1fr; text-align: center; }
.ao-hero-copy { text-align: left; }
.ao-hero-layout--solo .ao-hero-copy { text-align: center; }
.ao-hero-copy .ao-kicker { justify-content: flex-start; }
.ao-hero-layout--solo .ao-kicker { justify-content: center; }
.ao-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
  padding: .3rem .9rem; font: 400 .9rem/1.4 var(--gh-hand); color: var(--gh-forest);
  background: rgba(255, 255, 255, .7); border: 1.5px dashed var(--ao-accent); border-radius: 999px;
}
.ao-badge span { font-family: var(--gh-serif); font-weight: 700; color: var(--ao-highlight); }
.ao-hero-title {
  font-family: var(--gh-serif); font-weight: 800;
  font-size: clamp(2.7rem, 8.2vw, 5.6rem); line-height: 1.08;
  color: #25465a; text-shadow: 0 2px 0 rgba(255, 255, 255, .75);
  text-wrap: balance; overflow-wrap: anywhere;
}
.ao-hero-tagline { margin-top: 1.1rem; max-width: 30rem; font-family: var(--gh-hand); font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: #3b5a4a; }
.ao-hero-layout--solo .ao-hero-tagline { margin-inline: auto; }
.ao-hero-date { margin-top: 1rem; font-family: var(--gh-serif); font-size: 1.15rem; letter-spacing: .28em; color: var(--gh-forest); }

.ao-hero-photo { position: relative; isolation: isolate; justify-self: center; width: min(100%, 360px); rotate: 2deg; }
.ao-hero-photo::before {
  content: ""; position: absolute; inset: -10% -12%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 236, 170, .75), transparent 66%);
}
.ao-hero-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 10px solid #fffaf0; border-radius: 999px 999px 1.4rem 1.4rem;
  box-shadow: 0 26px 50px rgba(50, 90, 110, .3), 0 0 0 1px rgba(58, 47, 42, .08);
}
.ao-hero-photo figcaption {
  width: max-content; max-width: 90%; margin: -1.1rem auto 0; position: relative;
  padding: .3rem 1rem; font: 400 .9rem/1.5 var(--gh-hand); color: var(--gh-ink-soft);
  background: #fffaf0; border-radius: .6rem; rotate: -2deg; box-shadow: 0 6px 14px rgba(60, 90, 80, .18);
}

/* ---------- Mempelai ---------- */
.ao-couple-section { background: linear-gradient(180deg, transparent, rgba(196, 228, 205, .32) 45%, transparent); }
.ao-couple-profiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 920px; margin-inline: auto; }
.ao-profile:nth-child(2) { margin-top: 3rem; }
.ao-profile {
  padding: 2rem 1.6rem 2.2rem; text-align: center;
  background: var(--gh-card); border-radius: 2.2rem 2.2rem 2.2rem 1rem;
  box-shadow: var(--gh-shadow), inset 0 0 0 1.5px rgba(255, 255, 255, .9);
}
.ao-profile:nth-child(2) { border-radius: 2.2rem 2.2rem 1rem 2.2rem; }
.ao-profile-portrait { width: min(70%, 240px); margin: 0 auto 1.4rem; position: relative; }
.ao-profile-portrait::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  border: 1.5px dashed var(--ao-accent); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
}
.ao-profile-portrait img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 6px solid #fffaf0; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
  box-shadow: 0 14px 28px rgba(60, 90, 80, .22);
}
.ao-profile-title h3 { font-family: var(--gh-serif); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.8rem); line-height: 1.3; color: var(--gh-forest); overflow-wrap: anywhere; }
.ao-profile-bio { margin-top: .9rem; color: var(--gh-ink-soft); }

/* ---------- Keluarga ---------- */
.ao-family-section { background: linear-gradient(180deg, transparent, rgba(190, 222, 240, .3) 50%, transparent); }
.ao-family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ao-family-copy { text-align: left; }
.ao-family-copy .ao-kicker { justify-content: flex-start; }
.ao-family-copy .ao-heading::after { margin-left: 0; }
.ao-family-copy .ao-section-intro { margin-left: 0; }
.ao-family-list { display: grid; gap: 1.2rem; }
.ao-family-entry {
  padding: 1.2rem 1.5rem; background: var(--gh-card); border-radius: 1.2rem;
  border-left: 4px dashed var(--ao-accent); box-shadow: 0 10px 24px rgba(60, 90, 80, .1);
}
.ao-family-entry .ao-kicker { justify-content: flex-start; margin-bottom: .3rem; font-size: .9rem; }
.ao-family-name { font-family: var(--gh-serif); font-weight: 700; font-size: 1.2rem; color: var(--gh-forest); }
.ao-inviting-parties { grid-column: 1 / -1; text-align: center; font-family: var(--gh-serif); color: var(--gh-forest); }

/* ---------- Acara (tiket kereta) ---------- */
.ao-events-section { background: linear-gradient(180deg, transparent, rgba(255, 224, 180, .3) 50%, transparent); }
.ao-event-list { display: grid; gap: 1.5rem; filter: drop-shadow(0 12px 16px rgba(80, 90, 60, .18)); }
.ao-event {
  --stub: 9.5rem;
  display: grid; grid-template-columns: var(--stub) 1fr;
  background: #fffaf0; border-radius: 1.2rem; overflow: hidden;
  -webkit-mask: radial-gradient(circle 12px at var(--stub) 0, transparent 97%, #000) top left / 100% 51% no-repeat,
                radial-gradient(circle 12px at var(--stub) 100%, transparent 97%, #000) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at var(--stub) 0, transparent 97%, #000) top left / 100% 51% no-repeat,
                radial-gradient(circle 12px at var(--stub) 100%, transparent 97%, #000) bottom left / 100% 51% no-repeat;
}
.ao-event > div:first-child {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem;
  padding: 1.5rem 1rem; text-align: center;
  background: linear-gradient(160deg, #d3eabb, #a2cb8f);
  border-right: 2px dashed rgba(63, 106, 60, .45);
}
.ao-event-episode { font-family: var(--gh-serif); font-weight: 800; font-size: 1.35rem; color: var(--gh-forest); }
.ao-event > div:first-child .ao-meta { color: #3a5a3a; }
.ao-event > div:last-child { padding: 1.6rem 1.9rem; }
.ao-event-title { font-family: var(--gh-serif); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.35; color: var(--gh-forest); margin-bottom: .5rem; }
.ao-event-detail { color: var(--gh-ink-soft); }
.ao-map-link {
  display: inline-block; margin-top: .9rem; padding: .4rem 1.1rem;
  font: 700 .9rem/1.4 var(--ao-body, sans-serif); color: var(--gh-accent-ink); text-decoration: none;
  border: 1.5px solid var(--ao-accent); border-radius: 999px; transition: background .25s, color .25s;
}
.ao-map-link:hover { background: var(--ao-accent); color: #fff; }

/* ---------- Hitung mundur ---------- */
.ao-countdown-section { text-align: center; }
.ao-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 2vw, 1.4rem); max-width: 760px; margin: 0 auto; }
.ao-countdown-unit {
  display: grid; place-content: center; aspect-ratio: 1 / 1.05; padding: .5rem;
  border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%;
  box-shadow: 0 14px 28px rgba(60, 90, 80, .16), inset 0 0 0 2px rgba(255, 255, 255, .8);
  animation: gh-bob 5.5s ease-in-out infinite;
}
.ao-countdown-unit:nth-child(1) { background: radial-gradient(circle at 35% 30%, #fff, #c9e6f3); }
.ao-countdown-unit:nth-child(2) { background: radial-gradient(circle at 35% 30%, #fff, #cfe8bd); animation-delay: -1.4s; border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%; }
.ao-countdown-unit:nth-child(3) { background: radial-gradient(circle at 35% 30%, #fff, #f9d3c6); animation-delay: -2.8s; }
.ao-countdown-unit:nth-child(4) { background: radial-gradient(circle at 35% 30%, #fff, #fbe7a9); animation-delay: -4.1s; border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; }
.ao-countdown-unit strong { font-family: var(--gh-serif); font-weight: 800; font-size: clamp(1.7rem, 6vw, 3.3rem); line-height: 1.1; color: var(--gh-forest); font-variant-numeric: tabular-nums; }
.ao-countdown-unit span { font-family: var(--gh-hand); font-size: clamp(.7rem, 2vw, .95rem); color: var(--gh-ink-soft); }

/* ---------- Kisah cinta ---------- */
.ao-story-section { background: linear-gradient(180deg, transparent, rgba(196, 228, 205, .3) 50%, transparent); }
.ao-chapters { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.ao-chapters::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 2px dashed rgba(95, 145, 88, .4); pointer-events: none;
}
.ao-chapter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.ao-chapter:nth-child(even) .ao-chapter-art { order: 2; }
.ao-chapter--text { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; text-align: center; }
.ao-chapter-art { rotate: -1.5deg; }
.ao-chapter:nth-child(even) .ao-chapter-art { rotate: 1.5deg; }
.ao-chapter-art img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 10px solid #fffaf0; border-radius: 1.2rem; box-shadow: 0 20px 40px rgba(60, 90, 80, .22);
}
.ao-chapter-copy { padding: 1.4rem 1.6rem; background: var(--gh-card); border-radius: 1.5rem; box-shadow: 0 10px 26px rgba(60, 90, 80, .1); }
.ao-chapter-number {
  display: inline-block; padding: .2rem .8rem; margin-bottom: .6rem;
  font: 400 .9rem/1.5 var(--gh-hand); color: #fff; background: var(--ao-accent); border-radius: 999px;
}
.ao-chapter-title { font-family: var(--gh-serif); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.35; color: var(--gh-forest); }
.ao-chapter-date { display: block; margin-top: .2rem; font-family: var(--gh-hand); color: var(--ao-highlight); }
.ao-chapter-description { margin-top: .8rem; color: var(--gh-ink-soft); }

/* ---------- Galeri (foto tertempel) ---------- */
.ao-gallery-grid { columns: 3 230px; column-gap: 1.3rem; }
.ao-gallery-item {
  position: relative; break-inside: avoid; margin: 0 0 1.5rem;
  padding: .6rem .6rem .7rem; background: #fffaf0; border-radius: .9rem;
  box-shadow: 0 12px 26px rgba(60, 90, 80, .2);
}
.ao-gallery-item:nth-child(3n+1) { rotate: -1.3deg; }
.ao-gallery-item:nth-child(3n+2) { rotate: 1deg; }
.ao-gallery-item:nth-child(3n)   { rotate: -.4deg; }
.ao-gallery-item::before {         /* selotip */
  content: ""; position: absolute; top: -.65rem; left: 50%; z-index: 2;
  width: 4.2rem; height: 1.4rem; translate: -50% 0; rotate: -3deg;
  background: rgba(246, 200, 150, .72); box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.ao-gallery-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: .5rem; overflow: hidden; }
.ao-gallery-open img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.ao-gallery-open:hover img { transform: scale(1.04); }
.ao-gallery-caption { padding-top: .55rem; text-align: center; font-family: var(--gh-hand); font-size: .95rem; color: var(--gh-ink-soft); }

/* ---------- Kutipan ---------- */
.ao-quote-section { text-align: center; overflow: hidden; }
.ao-quote-section::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, .22) 0 4deg, transparent 4deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 46%);
          mask-image: radial-gradient(circle, #000 5%, transparent 46%);
}
.ao-quote-panel {
  position: relative; max-width: 700px; margin: 0 auto; padding: clamp(2rem, 6vw, 3.4rem) clamp(1.4rem, 5vw, 3rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(226, 241, 248, .88));
  border-radius: 3rem 3rem 3rem 1rem; box-shadow: 0 22px 46px rgba(80, 130, 165, .22), inset 0 0 0 2px #fff;
}
.ao-quote-panel blockquote { font-family: var(--gh-hand); font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.9; color: #34505f; }

/* ---------- Hadiah ---------- */
.ao-gift-list { display: grid; gap: 1.2rem; }
.ao-gift-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.6rem; background: #fffaf0; border-radius: 1.2rem 1.2rem 1.2rem .5rem;
  border-left: 7px solid var(--ao-highlight); box-shadow: 0 12px 26px rgba(60, 90, 80, .14);
}
.ao-gift-bank { font-family: var(--gh-hand); color: var(--ao-highlight); font-size: .95rem; }
.ao-gift-name { font-family: var(--gh-serif); font-weight: 700; font-size: 1.3rem; color: var(--gh-forest); }
.ao-gift-account { font-family: var(--gh-serif); font-size: 1.35rem; letter-spacing: .12em; color: var(--gh-ink); font-variant-numeric: tabular-nums; }
.ao-gift-qr { display: block; width: 140px; margin-top: .8rem; border: 6px solid #fff; border-radius: .8rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .1); }
.ao-copy-button {
  padding: .55rem 1.3rem; font: 700 .9rem/1.2 var(--ao-body, sans-serif); color: var(--gh-accent-ink); cursor: pointer;
  background: transparent; border: 1.5px solid var(--ao-accent); border-radius: 999px; transition: background .25s, color .25s;
}
.ao-copy-button:hover, .ao-copy-button.is-copied { background: var(--ao-accent); color: #fff; }

/* ---------- RSVP ---------- */
.ao-rsvp-section { background: linear-gradient(180deg, transparent, rgba(190, 222, 240, .32) 40%, transparent); }
.ao-rsvp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8rem; margin-bottom: 2rem; }
.ao-summary-item {
  display: grid; justify-items: center; padding: .9rem .5rem;
  background: var(--gh-card); border-radius: 1.4rem 1.4rem 1.4rem .4rem; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 8px 18px rgba(60, 90, 80, .1);
}
.ao-summary-item strong { font-family: var(--gh-serif); font-weight: 800; font-size: 1.7rem; line-height: 1.2; color: var(--gh-forest); }
.ao-summary-item span { font-family: var(--gh-hand); font-size: .82rem; color: var(--gh-ink-soft); }

.ao-rsvp-form {
  display: grid; gap: 1.1rem; padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--gh-card); border-radius: 2rem; box-shadow: var(--gh-shadow), inset 0 0 0 1.5px rgba(255, 255, 255, .9);
}
.ao-rsvp-form label { display: grid; gap: .35rem; font-family: var(--gh-hand); font-size: .98rem; color: var(--gh-ink-soft); }
.ao-rsvp-form input, .ao-rsvp-form select, .ao-rsvp-form textarea {
  width: 100%; padding: .8rem 1rem; font: 500 1rem/1.5 var(--ao-body, sans-serif); color: var(--gh-ink);
  background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(95, 145, 88, .35); border-radius: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.ao-rsvp-form textarea { resize: vertical; min-height: 7rem; }
.ao-rsvp-form input:focus, .ao-rsvp-form select:focus, .ao-rsvp-form textarea:focus {
  outline: none; border-color: var(--ao-accent); box-shadow: 0 0 0 4px rgba(95, 145, 88, .2);
}
.ao-submit { justify-self: center; margin-top: .4rem; }
.ao-rsvp-feedback { min-height: 1.4em; text-align: center; font-family: var(--gh-hand); color: var(--gh-accent-ink); }
.ao-rsvp-feedback.is-error, .ao-rsvp-feedback[data-state="error"] { color: #b4493b; }

.ao-guestbook { margin-top: clamp(3rem, 7vw, 5rem); }
.ao-comment-list { display: grid; gap: 1.3rem; }
.ao-comment-item {
  position: relative; padding: 1.1rem 1.4rem; margin-bottom: .4rem;
  background: #fffdf4; border-radius: 1.4rem 1.4rem 1.4rem .3rem; box-shadow: 0 10px 22px rgba(60, 90, 80, .12);
  overflow-wrap: anywhere;
}
.ao-comment-item::after {          /* ekor gelembung */
  content: ""; position: absolute; left: 1.2rem; bottom: -.7rem; width: 1.2rem; height: .8rem;
  background: #fffdf4; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ao-comment-item strong { font-family: var(--gh-serif); font-size: 1.05rem; color: var(--gh-forest); margin-right: .5rem; }
.ao-comment-item .ao-meta { font-size: .78rem; padding: .1rem .6rem; background: rgba(95, 145, 88, .14); border-radius: 999px; }
.ao-comment-item > div { margin-top: .4rem; color: var(--gh-ink-soft); }

/* ---------- Sosial ---------- */
.ao-social-section { padding: 1rem 0 3rem; }
.ao-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ao-social-link {
  padding: .5rem 1.2rem; font: 700 .9rem/1.4 var(--ao-body, sans-serif); color: var(--gh-accent-ink); text-decoration: none;
  background: var(--gh-card); border: 1.5px solid rgba(95, 145, 88, .4); border-radius: 999px; transition: background .25s, color .25s;
}
.ao-social-link:hover { background: var(--ao-accent); color: #fff; }

/* ---------- Penutup (senja) ---------- */
.ao-closing {
  position: relative; overflow: hidden; text-align: center; color: #43263a;
  padding: clamp(5rem, 13vw, 9rem) 0 clamp(13rem, 30vw, 21rem);
  background: linear-gradient(180deg, var(--gh-paper) 0%, #fbe0c8 16%, #f4b8a4 40%, #e7a5b5 66%, #b9a2d0 100%);
}
.ao-closing .ao-cloud { filter: sepia(.35) saturate(1.7) hue-rotate(-18deg) drop-shadow(0 10px 18px rgba(150, 80, 100, .2)); }
.ao-closing-sun {
  position: absolute; left: 50%; bottom: 12%; width: min(62vw, 460px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6d8 0 30%, #ffd9a0 48%, rgba(255, 200, 150, .4) 66%, transparent 74%);
  animation: gh-glow 8s ease-in-out infinite alternate;
}
.ao-kanji--end { left: 50%; top: 8%; translate: -50% 0; font-size: min(60vw, 24rem); color: rgba(255, 255, 255, .26); }
.ao-closing .ao-mote { background: radial-gradient(circle, #fffbd0, rgba(255, 232, 130, .85) 40%, transparent 72%); }
.ao-closing-inner { z-index: 3; }
.ao-closing .ao-kicker, .ao-closing .ao-meta { color: #6a3d55; }
.ao-closing-title { font-family: var(--gh-serif); font-weight: 800; font-size: clamp(2.3rem, 8vw, 4.4rem); line-height: 1.2; color: #43263a; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.ao-closing-names { margin: .8rem 0 .3rem; font-family: var(--gh-serif); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem); overflow-wrap: anywhere; }
.ao-closing-copy { margin-top: 1.2rem; font-family: var(--gh-hand); font-size: 1.05rem; color: #5a3548; }
.ao-closing-jp { margin-top: 1.4rem; font-family: var(--gh-serif); font-size: 1.1rem; letter-spacing: .2em; color: #6a3d55; }
.ao-footer { padding: 1.3rem 1rem 1.6rem; text-align: center; font-size: .85rem; color: #dbe8cf; background: #2f4a3a; position: relative; z-index: 2; }
.ao-footer strong { color: #fff; }

/* ---------- Lightbox ---------- */
.ao-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(30, 45, 38, .94);
}
.ao-lightbox[open] { display: grid; place-items: center; }
.ao-lightbox::backdrop { background: rgba(30, 45, 38, .94); }
.ao-lightbox-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: min(96vw, 1000px); }
.ao-lightbox-image {
  grid-column: 2; justify-self: center; max-width: 100%; max-height: 78vh; max-height: 78dvh; object-fit: contain;
  border: 8px solid #fffaf0; border-radius: .8rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.ao-lightbox-caption { grid-column: 1 / -1; text-align: center; font-family: var(--gh-hand); font-size: 1.05rem; color: #f3ecd6; }
.ao-lightbox-caption[hidden] { display: none; }
.ao-lightbox-nav, .ao-lightbox-close {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; font-size: 1.7rem; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; transition: background .2s;
}
.ao-lightbox-nav:hover, .ao-lightbox-close:hover { background: rgba(255, 255, 255, .3); }
.ao-lightbox-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }

/* ---------- Animasi masuk saat scroll (halus) ---------- */
.js-on .ao-reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js-on .ao-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsif ---------- */
@media (max-width: 860px) {
  .ao-hero-layout { grid-template-columns: 1fr; text-align: center; }
  .ao-hero-copy, .ao-family-copy { text-align: center; }
  .ao-hero-copy .ao-kicker, .ao-family-copy .ao-kicker { justify-content: center; }
  .ao-hero-tagline { margin-inline: auto; }
  .ao-family-copy .ao-heading::after { margin-left: auto; }
  .ao-family-grid { grid-template-columns: 1fr; }
  .ao-chapter { grid-template-columns: 1fr; }
  .ao-chapter:nth-child(even) .ao-chapter-art { order: 0; }
  .ao-chapters::before { display: none; }
  .ao-sfx { display: none; }
}
@media (max-width: 640px) {
  .ao-couple-profiles { grid-template-columns: 1fr; }
  .ao-profile:nth-child(2) { margin-top: 0; }
  .ao-event { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ao-event > div:first-child { border-right: 0; border-bottom: 2px dashed rgba(63, 106, 60, .45); flex-direction: row; gap: .8rem; padding: 1rem; }
  .ao-event > div:last-child { padding: 1.3rem 1.3rem 1.5rem; }
  .ao-music-label { display: none; }
  .ao-music-control { padding: .35rem; }
  .ao-lightbox-inner { grid-template-columns: 1fr; }
  .ao-lightbox-image { grid-column: 1; }
  .ao-lightbox-nav { position: absolute; top: 40%; z-index: 2; }
  .ao-lightbox-nav[data-lightbox-prev] { left: .2rem; }
  .ao-lightbox-nav[data-lightbox-next] { right: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-on .ao-reveal { opacity: 1; transform: none; }
  .ao-cloud { left: auto; right: 6%; }
}