/* Tema adat-minang — UNDANGAN ADAT MINANG (pintu 3D + Rumah Gadang 3D),
   kiriman user (undangan-minang.zip). Desain: latar marun gelap + emas;
   sampul pintu 3D (dua daun `/minang/pintu-aceh.jpg` berayun rotateY ±105°);
   Rumah Gadang 3D berlapis (`/minang/rumah-gadang.png`); kelopak emas jatuh;
   latar `/minang/latar-1..4.jpg`; sulur `/minang/vine-gold.png`;
   sudut `/minang/corner-gold.png`.
   Seluruh aturan diadaptasi dari template string `CSS` di
   `minang-zip/undangan-minang/src/UndanganMinang.tsx` (`.inv` → `.am`,
   `.cover` → `.am-cover`, `.door` → `.am-door`, `.ctext` → `.am-cover-in`,
   `.h3w`/`.h3` → `.am-house3d`, `.p` → `.am-petal`, `.page` → `.am-page`,
   `.sec` → `.am-sec`, dst.) dan di-scope di bawah `.am` supaya tidak bocor
   ke tema lain; keyframe berawalan `am-`.
   ADAPTASI PENTING: `.main` di zip adalah `position: fixed; overflow-y: auto`
   karena zip me-render undangan dalam viewport tetap; di Merriva konten
   di-scroll oleh halaman (CoverGate) — `.am-stage` di sini wadah NORMAL
   (tanpa `position: fixed`/`overflow`). Satu-satunya `fixed` adalah
   `.am-progress`, `.am-cover`, dan tombol musik `.am-music` (kontrol
   mengambang, pola `.ak-music` tema Aceh).
   CSS ini SUMBER KEBENARAN; `scripts/build-theme-css.mjs` menyalinnya ke
   `public/themes/adat-minang.{hash}.css`. JANGAN di-import dari index.tsx
   (DECISIONS #31) — ia dikirim lewat <ThemeStyles slug="adat-minang" />. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap");

.am {
  --am-acc: #c8932b;
  --am-acc-text: #8a6d1f;
  --am-on-acc: #fff8e7;
  --am-paper: #fbf3e2;
  --am-ink: #4a1a14;
  --am-disp: "Cinzel", serif;
  --am-body: "Cormorant Garamond", Georgia, serif;
  position: relative;
  background: #2a0509;
  color: var(--am-ink);
  font-family: var(--am-body);
}
.am *,
.am-cover * {
  box-sizing: border-box;
  margin: 0;
}
.am .serif {
  font-family: var(--am-disp);
}

/* ---- wadah konten (NORMAL — bukan fixed seperti `.main` di zip) ---- */
.am .am-stage {
  position: relative;
  width: 100%;
  background:
    radial-gradient(circle, rgba(230, 185, 80, 0.25) 2px, transparent 3px) 0 0 /
      26px 26px,
    #3a0710;
}
.am .am-page {
  max-width: 560px;
  margin: auto;
  background: var(--am-paper);
  box-shadow: 0 0 80px #000;
  overflow: hidden;
}

/* ---- progress bar scroll (emas, atas, tetap) ---- */
.am .am-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 40;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.am .am-progress div {
  height: 100%;
  background: linear-gradient(90deg, #c8932b, #fff1c9);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---- tombol musik mengambang (muncul setelah sampul dibuka) ---- */
.am .am-music {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #e8b64a;
  background: #4a0a10;
  color: #f1cd6e;
  font-size: 18px;
  cursor: pointer;
  display: none;
  place-items: center;
}
.am.is-open .am-music {
  display: grid;
}

/* ---- kelopak emas jatuh (lapisan efek, bukan konten) ---- */
.am .am-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}
.am .am-petal {
  position: absolute;
  top: -5vh;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle at 30% 30%, #fff3c4, #d9a93f);
  border-radius: 80% 0 80% 0;
  opacity: 0.8;
  animation: am-fall var(--d) linear var(--dl) infinite;
}

/* ---- sampul (slot cover CoverGate) ----
   Pintu ganda: dua daun `/minang/pintu-aceh.jpg` (200% + posisi kiri/kanan)
   supaya menyambung saat tertutup dan terbelah saat terbuka. Saat dibuka,
   isi memudar cepat, kedua pintu berayun terbuka di engsel luar (rotateY),
   lalu wadah memudar dan dibuang CoverGate (wipeMs 2000). */
.am-cover {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: transparent;
  perspective: 1300px;
  display: grid;
  place-items: center;
  transition:
    opacity 0.7s ease 1.2s,
    visibility 0s 1.9s;
}
.am-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #5a0f1a, #1d0306);
  transition: opacity 1.4s ease 0.8s;
}
.am.is-open .am-cover {
  opacity: 0;
  visibility: hidden;
}
.am.is-open .am-cover::before {
  opacity: 0;
}
.am-cover.gone {
  display: none;
}
.am-cover .am-zoom {
  transform-style: preserve-3d;
  transition: transform 2.4s cubic-bezier(0.5, 0, 0.2, 1);
}
.am.is-open .am-cover .am-zoom {
  transform: translateZ(300px);
}
.am-cover .am-scene {
  position: relative;
  width: min(100vw, 560px);
  height: min(100vh, calc(min(100vw, 560px) * 2.05));
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}
.am-cover .am-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: url(/minang/pintu-aceh.jpg);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  transition: transform 2.2s cubic-bezier(0.6, 0, 0.2, 1);
  backface-visibility: hidden;
}
.am-cover .am-door.l {
  left: 0;
  transform-origin: left center;
  background-position: left center;
}
.am-cover .am-door.r {
  right: 0;
  transform-origin: right center;
  background-position: right center;
}
/* Sambungan pintu: garis emas yang memudar di bagian tengah supaya tidak
   menutupi teks sampul — hanya terlihat di ujung atas dan bawah (pola V3). */
.am-cover .am-door::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(200, 147, 43, 0.65) 0%,
    rgba(200, 147, 43, 0.65) 16%,
    transparent 26%,
    transparent 84%,
    rgba(200, 147, 43, 0.65) 92%,
    rgba(200, 147, 43, 0.65) 100%
  );
}
.am-cover .am-door.l::before {
  right: 0;
}
.am-cover .am-door.r::before {
  left: 0;
}
/* Gagang pintu emas di dekat sambungan tengah (pola `.ak-door::after`). */
.am-cover .am-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1cd6e, #c8932b 60%, #8a6d1f);
  box-shadow: 0 0 10px rgba(200, 147, 43, 0.7);
}
.am-cover .am-door.l::after {
  right: 14px;
}
.am-cover .am-door.r::after {
  left: 14px;
}
.am.is-open .am-cover .am-door.l {
  transform: rotateY(-105deg);
}
.am.is-open .am-cover .am-door.r {
  transform: rotateY(105deg);
}
/* Isi sampul: memudar + membesar saat pintu mulai terbuka. */
.am-cover .am-cover-in {
  position: absolute;
  top: 32%;
  bottom: 15%;
  left: 24%;
  right: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--am-ink);
  transform: translateZ(100px);
  transition: all 1s ease;
  /* Bayangan teks supaya huruf terangkat jelas dari garis sambungan pintu. */
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.9);
}
.am.is-open .am-cover .am-cover-in {
  opacity: 0;
  transform: translateZ(500px) scale(1.3);
  pointer-events: none;
}
.am-cover .am-cbk {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.am-cover .am-cover-in .am-nm b {
  font-size: clamp(26px, 8vw, 38px);
}
.am-cover .am-cover-in .am-house3d {
  width: min(66%, 160px);
  margin: 2px auto;
}
.am-cover .am-cover-in .am-btn {
  padding: 11px 20px;
  font-size: 12px;
  margin-top: 14px;
}
.am .am-guest {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.3;
}
.am .am-guest b {
  display: block;
  font-size: 19px;
  color: #7a1220;
}

/* ---- Rumah Gadang 3D (berlapis; translateZ tiap lapisan inline) ---- */
.am .am-house3d {
  perspective: 800px;
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 1;
  margin: 8px auto;
  transform-style: preserve-3d;
  animation: am-sway 7s ease-in-out infinite;
}
.am .am-house3d img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.am .am-house3d .sh,
.am .am-house3d .am-house-sh {
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 80%;
  height: 10%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  transform: translateZ(-30px);
}
.am .am-glass .am-house3d {
  width: min(60%, 200px);
}

/* ---- sulur emas (`.vdiv` zip) ---- */
.am .am-vine {
  display: block;
  width: 64px;
  margin: 0 auto 10px;
  transform-origin: bottom center;
  animation: am-vsway 5s ease-in-out infinite;
}

/* ---- section + latar ---- */
.am .am-sec {
  padding: 70px 22px;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.am .am-sec.am-dark,
.am .am-dark {
  background: linear-gradient(160deg, #7a1220, #3a0710);
  color: #f6e3b0;
}
.am .am-dark .am-h2,
.am .am-sec.am-dark .am-h2 {
  color: #f1cd6e;
}
.am .am-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 22px;
}
.am .am-bg {
  position: absolute;
  inset: -18% 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}
.am .am-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ov, rgba(25, 4, 8, 0.2));
}
.am .am-closing {
  padding-bottom: 90px;
}

/* ---- glass panel ---- */
.am .am-glass {
  width: 100%;
  padding: 28px 16px;
  border-radius: 22px;
  border: 1.5px solid #d9a93f;
  background: rgba(35, 6, 10, 0.68);
  backdrop-filter: blur(6px);
  color: #f6e3b0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.am .am-glass.lt,
.am .am-glass-lt {
  background: rgba(251, 243, 226, 0.92);
  color: var(--am-ink);
}
.am .am-glass .am-h2 {
  color: #f1cd6e;
}
.am .am-glass.lt .am-h2,
.am .am-glass-lt .am-h2 {
  color: #7a1220;
}
.am .am-glass h2 {
  color: #f1cd6e;
}
.am .am-glass.lt h2,
.am .am-glass-lt h2 {
  color: #7a1220;
}
.am .am-glass .am-nm b {
  color: #fff1c9;
  text-shadow:
    0 2px 0 #7a4a08,
    0 4px 14px rgba(0, 0, 0, 0.8);
}
.am .am-glass .am-nm i {
  color: #f1cd6e;
}

/* ---- tipografi ---- */
.am .am-h2,
.am h2 {
  font-family: var(--am-disp);
  font-size: 26px;
  color: #7a1220;
  margin-bottom: 6px;
}
.am .am-tw {
  font-size: 12px;
  letter-spacing: 0.3em;
  margin-bottom: 4px;
}
.am .am-sub {
  font-size: 19px;
  line-height: 1.5;
  margin: 8px 0 18px;
}
.am .am-line {
  width: 120px;
  height: 2px;
  margin: 14px auto;
  background: linear-gradient(90deg, transparent, #c8932b, transparent);
}
.am .am-nm {
  text-align: center;
  line-height: 1.05;
  padding: 6px 10px;
}
.am .am-nm b {
  display: block;
  font-family: var(--am-disp);
  font-weight: 700;
  font-size: clamp(40px, 12.5vw, 58px);
  color: #7a1220;
  text-shadow:
    0 1px 0 #fff,
    0 3px 8px rgba(120, 70, 10, 0.3);
  letter-spacing: 0.04em;
}
.am .am-nm i {
  display: block;
  font-style: normal;
  font-size: 30px;
  color: #b8892b;
  margin: 2px 0;
}
.am .am-mono {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.am .am-mono .serif {
  display: block;
  font-size: 64px;
  font-weight: 700;
  color: #f1cd6e;
  text-shadow: 0 3px 12px #000;
}
.am .am-mono i {
  font-style: normal;
  font-size: 34px;
  color: #fff1c9;
}
.am .am-date {
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #fff1c9;
  margin-top: 6px;
}
.am .am-icon {
  width: 110px;
  animation: am-float 4s ease-in-out infinite;
  display: block;
  margin: 0 auto 10px;
}

/* ---- reveal saat terlihat + kata-demi-kata ----
   Dua nama kelas didukung: `.am-rv` (kontrak awal) dan `.rv` (yang dipakai
   minang.tsx — pola hitam memakai `rv` telanjang). Keduanya identik. */
.am .am-rv,
.am .rv {
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 1s;
  transition-delay: var(--dl, 0s);
}
.am .am-rv.fx-up,
.am .rv.fx-up {
  transform: translateY(60px);
}
.am .am-rv.fx-down,
.am .rv.fx-down {
  transform: translateY(-60px);
}
.am .am-rv.fx-left,
.am .rv.fx-left {
  transform: translateX(-90px);
}
.am .am-rv.fx-right,
.am .rv.fx-right {
  transform: translateX(90px);
}
.am .am-rv.fx-zoom,
.am .rv.fx-zoom {
  transform: scale(0.55);
}
.am .am-rv.fx-flip,
.am .rv.fx-flip {
  transform: perspective(900px) rotateX(-85deg);
  transform-origin: top;
}
.am .am-rv.fx-blur,
.am .rv.fx-blur {
  filter: blur(14px);
  transform: scale(1.15);
}
.am .am-rv.in,
.am .rv.in {
  opacity: 1;
  transform: none;
  filter: none;
}
.am .am-wd span {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) rotateX(-70deg);
  filter: blur(6px);
  transition: all 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.am .am-wd.in span {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- arch foto mempelai ---- */
.am .am-arch {
  width: 74%;
  aspect-ratio: 3 / 4;
  margin: 0 auto 16px;
  border-radius: 999px 999px 18px 18px;
  border: 3px solid #d9a93f;
  background-repeat: no-repeat;
  background-size: 260% auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/* ---- kartu ---- */
.am .am-card {
  background: #fff9ea;
  border: 1.5px solid #d9a93f;
  border-radius: 18px;
  padding: 26px 20px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(90, 40, 10, 0.18);
  transition: transform 0.5s;
}
.am .am-card:hover {
  transform: perspective(800px) rotateY(-6deg) rotateX(4deg) translateY(-4px);
}

/* ---- countdown ---- */
.am .am-cd {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.am .am-cdb {
  width: 62px;
  padding: 10px 0;
  border: 1.5px solid #c8932b;
  border-radius: 14px;
  background: linear-gradient(160deg, #7a1220, #4a0a10);
  color: #f6e3b0;
}
.am .am-cdb b {
  display: block;
  font-size: 24px;
  font-family: var(--am-disp);
}
.am .am-cdb span {
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* ---- galeri (grid 2 kolom + tilt) ---- */
.am .am-gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  perspective: 900px;
  margin-top: 20px;
}
/* Galeri: tiap foto dibungkus `.am-gal-item` di dalam Reveal (`.rv`).
   Aturan lama `.am-gal div` terlalu luas — ia memberi aspect-ratio +
   latar gradien ke PEMBUNGKUS Reveal juga. Yang ditata hanya item fotonya;
   gambar LightboxThumb mengisi penuh. */
.am .am-gal > :nth-child(even) {
  margin-top: 18px;
}
.am .am-gal .am-gal-item {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 2px solid #e8b64a;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #c8932b, #7a1220);
  animation: am-tilt 6s ease-in-out infinite;
}
.am .am-gal > :nth-child(even) .am-gal-item {
  animation-delay: -3s;
}
.am .am-gal .am-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- timeline love story ---- */
.am .am-tlx {
  position: relative;
  padding-left: 34px;
  text-align: left;
  margin-top: 18px;
}
.am .am-tlx::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(#c8932b, transparent);
}
.am .am-tlx .it,
.am .am-tlx .am-tl-item {
  position: relative;
  margin-bottom: 26px;
}
.am .am-tlx .it::before,
.am .am-tlx .am-tl-item::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c8932b;
  box-shadow: 0 0 0 5px rgba(200, 147, 43, 0.3);
}
.am .am-tlx b {
  font-family: var(--am-disp);
  font-size: 22px;
  color: #f1cd6e;
  display: block;
}
.am .am-tlx p {
  font-size: 17px;
  line-height: 1.45;
}

/* ---- video (pemutar bersama `_shared/video`) ----
   Kelas generik `.video-*` ditata dengan token tema (pola `.ak`):
   emas #c8932b, latar marun gelap. TANPA transform/rotasi pada bingkai.
   `.am-video { width: 100% }` WAJIB — section flex `align-items: center`
   membuat wadah video kolaps ke ~3px tanpa ini (pelajaran bug V1 Aceh). */
.am .am-video {
  width: 100%;
  margin-top: 16px;
}
.am .video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #c8932b;
  background: #000;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.am .video-frame--yt {
  aspect-ratio: 16 / 9;
}
.am .video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.am .video-mute,
.am .video-play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1cd6e;
  color: #4a0a10;
}
.am .video-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #c8932b;
  cursor: pointer;
}
.am .video-lite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
/* Peredup agar tombol putar terbaca di atas poster terang. */
.am .video-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.am .video-play {
  position: relative;
  width: 64px;
  height: 64px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.am .video-play svg {
  margin-left: 3px;
}
.am .video-mute:focus-visible {
  outline: 2px solid #f1cd6e;
  outline-offset: 2px;
}
/* Di dalam bingkai `overflow: hidden` → cincin fokus ke dalam. */
.am .video-lite:focus-visible {
  outline: 2px solid #f1cd6e;
  outline-offset: -5px;
}

/* ---- bingkai video + live streaming (`.vf` zip) ---- */
.am .am-vf {
  position: relative;
  margin: 16px 0;
  padding: 14px 12px 12px;
  border: 2.5px solid #d9a93f;
  border-radius: 16px;
  background: linear-gradient(160deg, #7a1220, #3a0710);
  box-shadow:
    inset 0 0 0 4px rgba(241, 205, 110, 0.18),
    0 14px 40px rgba(0, 0, 0, 0.5);
}
.am .am-vf .am-cn {
  width: 46px;
}
.am .am-vf .am-cn.tl {
  top: -8px;
  left: -8px;
}
.am .am-vf .am-cn.tr {
  top: -8px;
  right: -8px;
}
.am .am-vf .am-cn.bl {
  bottom: -8px;
  left: -8px;
}
.am .am-vf .am-cn.br {
  bottom: -8px;
  right: -8px;
}
.am .am-vcap {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #f1cd6e;
  margin: 2px 0 10px;
}
.am .am-vscreen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle, #2a0509, #000);
  border: 1.5px solid #c8932b;
}
.am .am-vscreen .am-livebadge {
  top: 10px;
}
.am .am-livebadge {
  position: absolute;
  top: 18px;
  left: 10px;
  z-index: 2;
  background: #d00;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  animation: am-pulse 1.5s infinite;
}
.am .am-vph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  padding: 0 14px;
  color: #f6e3b0;
}
.am .am-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #f1cd6e;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #f1cd6e;
  padding-left: 4px;
  animation: am-pulse 2s infinite;
}

/* ---- tombol + tautan ---- */
.am .am-btn {
  margin-top: 26px;
  pointer-events: auto;
  cursor: pointer;
  border: 1.5px solid #e8b64a;
  background: linear-gradient(135deg, #c8932b, #f1cd6e, #c8932b);
  color: #4a0a10;
  padding: 13px 30px;
  border-radius: 40px;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 14px;
  font-family: var(--am-disp);
  animation: am-pulse 2s infinite;
}
.am .am-link {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, #c8932b, #f1cd6e);
  color: #4a0a10;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

/* ---- ornamen sudut emas ---- */
.am .am-cn {
  position: absolute;
  width: 88px;
  pointer-events: none;
}
.am .am-cn.tl {
  top: 10px;
  left: var(--cx, 10px);
  transform: rotate(180deg);
}
.am .am-cn.tr {
  top: 10px;
  right: var(--cx, 10px);
  transform: scaleY(-1);
}
.am .am-cn.bl {
  bottom: 10px;
  left: var(--cx, 10px);
  transform: scaleX(-1);
}
.am .am-cn.br {
  bottom: 10px;
  right: var(--cx, 10px);
}

/* ---- scroll hint ---- */
.am .am-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 2px solid #b8892b;
  border-radius: 12px;
}
.am .am-scroll::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: #b8892b;
  animation: am-dot 1.6s infinite;
}

/* ---- form ucapan (GuestbookSection) ----
   Radio/checkbox DIKECUALIKAN: aturan lebar-100% di bawah membuat tombol
   radio kehadiran melebar 238px dan menekan labelnya hingga terpotong
   ("Ya, saya / hadir"). Radio memakai ukuran aslinya. */
.am input:not([type="radio"]):not([type="checkbox"]),
.am select,
.am textarea {
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 10px;
  border: 1.5px solid #d9a93f;
  background: #fffdf6;
  font: inherit;
  font-size: 17px;
  color: var(--am-ink);
}

/* ---- RSVP: kartu tidak boleh meluber + radio kehadiran utuh ----
   Scope `.am` saja (guestbook.css bersama tidak disentuh). */
.am .am-glass .gb,
.am .am-glass .gb-form,
.am .am-glass .gb-field,
.am .am-glass .gb-attend,
.am .am-glass .gb-wall,
.am .am-glass .gb-note {
  min-width: 0;
  max-width: 100%;
}
.am .am-glass .gb-radio input {
  width: auto;
  flex: none;
  padding: 0;
  margin: 0;
}
.am .am-glass .gb-radio span {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  overflow-wrap: break-word;
}
.am .am-glass .gb-note__msg,
.am .am-glass .gb-note__name {
  overflow-wrap: break-word;
}
.am .am-cnt {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}
.am .am-cnt div {
  flex: 1;
  padding: 10px;
  border: 1.5px solid #d9a93f;
  border-radius: 12px;
}
.am .am-cnt b {
  display: block;
  font-size: 24px;
  font-family: var(--am-disp);
  color: #7a1220;
}
.am .am-wl {
  max-height: 250px;
  overflow: auto;
  text-align: left;
  margin-top: 14px;
}
.am .am-wl div {
  padding: 10px 12px;
  border-bottom: 1px solid #e3cf9c;
}
.am .am-wl b {
  display: block;
  color: #7a1220;
}
.am .am-wl small {
  opacity: 0.7;
}

/* ---- keyframes ---- */
@keyframes am-float {
  50% {
    transform: translateY(-10px);
  }
}
@keyframes am-pulse {
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 28px #f1cd6e;
  }
}
@keyframes am-fall {
  to {
    transform: translate3d(var(--dx), 110vh, 0);
  }
}
@keyframes am-tilt {
  50% {
    transform: rotateY(10deg) translateY(-8px);
  }
}
@keyframes am-dot {
  to {
    transform: translateY(14px);
    opacity: 0;
  }
}
@keyframes am-sway {
  0%,
  100% {
    transform: rotateY(-14deg) rotateX(5deg);
  }
  50% {
    transform: rotateY(14deg) rotateX(5deg);
  }
}
@keyframes am-vsway {
  50% {
    transform: rotate(4deg);
  }
}

/* Hormati prefers-reduced-motion: konten tetap lengkap tanpa animasi. */
@media (prefers-reduced-motion: reduce) {
  .am *,
  .am-cover * {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   BRIDGE — kelas yang dipakai minang.tsx tapi belum ada di atas.
   Dua worker (komponen + CSS) dikerjakan paralel dengan daftar kelas
   yang sedikit berbeda; bagian ini menyambungkannya supaya tidak ada
   elemen yang tampil tanpa gaya. Bila komponen berubah nama kelas,
   perbarui bagian ini (bukan menimpa aturan di atas). */

/* Wadah halaman + wadah kelopak (komponen: .am-wrap > .am-page,
   .am-petals berisi .am-petal). */
.am .am-wrap {
  position: relative;
}
.am .am-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

/* Isi sampul: kicker + tamu (komponen memakai nama sendiri). */
.am-cover .am-cover-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.am-cover .am-cover-kicker {
  letter-spacing: 0.3em;
  font-size: 12px;
  font-family: var(--am-disp);
}
.am-cover .am-cover-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.3;
}
.am-cover .am-cover-to {
  font-size: 13px;
}
.am-cover .am-cover-name {
  display: block;
  font-size: 19px;
  color: #7a1220;
  font-family: var(--am-disp);
  margin: 2px 0 12px;
}

/* Eyebrow RSVP (sama seperti .am-tw). */
.am .am-eb {
  font-size: 12px;
  letter-spacing: 0.3em;
  margin-bottom: 4px;
  color: #7a1220;
  font-family: var(--am-disp);
}

/* Monogram hero: inisial besar (sama seperti .am-mono .serif). */
.am .am-mono .am-initial {
  display: block;
  font-size: 64px;
  font-weight: 700;
  font-family: var(--am-disp);
  color: #f1cd6e;
  text-shadow: 0 3px 12px #000;
}

/* Petunjuk scroll hero (lingkaran + titik, pola zip .scroll). */
.am .am-scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 2px solid #b8892b;
  border-radius: 12px;
}
.am .am-scroll-hint::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: #b8892b;
  animation: am-dot 1.6s infinite;
}

/* Mempelai: pemisah "&", nama panggilan + nama lengkap. */
.am .am-amp {
  font-family: var(--am-disp);
  font-size: 40px;
  color: #7a1220;
  text-align: center;
}
.am .am-couple-nick {
  font-family: var(--am-disp);
  font-size: 34px;
  color: #7a1220;
  margin-bottom: 2px;
}
.am .am-couple-full {
  font-family: var(--am-disp);
  color: #b8892b;
  font-size: 19px;
}
.am .am-arch-fallback {
  background-repeat: no-repeat;
  background-size: cover;
}

/* Ayat + salam pembuka. */
.am .am-ayat-src {
  color: #f1cd6e;
  font-family: var(--am-disp);
  font-size: 17px;
}
.am .am-greeting {
  font-size: 19px;
  line-height: 1.5;
  margin: 8px 0 0;
  color: #f6e3b0;
}

/* Kartu acara gelap + nama acara. */
.am .am-card-dark {
  background: rgba(255, 245, 215, 0.08);
  color: #f6e3b0;
}
.am .am-card-dark .am-sub {
  color: #f6e3b0;
}
.am .am-event-name {
  font-family: var(--am-disp);
  font-size: 26px;
  color: #f1cd6e;
  margin-bottom: 6px;
}

/* Live streaming: wadah + iframe 16/9 (badge .am-livebadge sudah ada). */
.am .am-live {
  position: relative;
  margin: 16px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #e8b64a;
  background: #000;
}
.am .am-liveframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Love story: judul tiap babak. */
.am .am-tlx .am-tl-title {
  font-family: var(--am-disp);
  font-size: 19px;
  color: #f1cd6e;
  margin-bottom: 2px;
}

/* Love gift: nama bank. */
.am .am-bank-name {
  font-family: var(--am-disp);
  font-size: 26px;
  color: #7a1220;
  margin-bottom: 6px;
}

/* Penutup: salam "Kami Yang Berbahagia,". */
.am .am-closing {
  font-family: var(--am-disp);
  margin-top: 14px;
  color: #f1cd6e;
  font-size: 19px;
}

/* Rumah Gadang: pembungkus (ukuran ikut .am-house3d di dalamnya). */
.am .am-house3d-wrap {
  width: min(100%, 250px);
  margin: 8px auto;
}
.am .am-house3d-wrap .am-house3d {
  margin: 0 auto;
}