@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

/* UA MASTER TEMPLATE v1.0 — UNIVERSAL VISUAL TOKEN DEFAULTS
   Semua visual utama membaca token --ua-* di bawah ini. Alias lama tetap
   dipertahankan hanya untuk compatibility selector/runtime existing. */
:root{
  /* UNIVERSAL VISUAL TOKEN — color */
  --ua-color-primary-deep:#4A0812;
  --ua-color-primary:#7A0F1F;
  --ua-color-primary-strong:#7A1326;
  --ua-color-primary-hover:#5C0C18;
  --ua-color-primary-copied:#3A0A12;
  --ua-color-secondary:#D4AF6A;
  --ua-color-secondary-deep:#A9802F;
  --ua-color-secondary-pale:#E9D7A8;
  --ua-color-accent-warm:#8A5A1E;
  --ua-color-accent-rule:#9A6B2F;
  --ua-color-accent-muted:#C9A24A;
  --ua-color-success:#3C7A3A;
  --ua-color-success-soft:#E7F3E3;
  --ua-color-danger:#A14444;
  --ua-color-danger-soft:#F5E6E6;
  --ua-color-info:#234D63;
  --ua-color-black:#000000;
  --ua-color-ink-strong:#111111;
  --ua-color-video-dark:#2C060D;
  --ua-color-monogram-secondary:#B5883B;
  --ua-color-bank-bca:#0A4EA2;
  --ua-color-bank-mandiri:#FFD24D;

  /* UNIVERSAL VISUAL TOKEN — background/text/border */
  --ua-background-page:var(--ua-color-primary-deep);
  --ua-background-app:#F8F1E7;
  --ua-background-section:#F8F1E7;
  --ua-background-section-soft:#F0E6D3;
  --ua-background-section-dark:#5A0818;
  --ua-background-surface:#FFFFFF;
  --ua-background-cream-bright:#FFFDF8;
  --ua-background-ayat-surface:#F9F5EE;
  --ua-background-card-soft:#FAF8F4;
  --ua-background-card-end:#F1ECE3;
  --ua-text-title:var(--ua-color-primary);
  --ua-text-title-strong:var(--ua-color-primary-strong);
  --ua-text-body:#2B1A14;
  --ua-text-muted:#7A6A5C;
  --ua-text-description:#5A4438;
  --ua-text-subtle:#9A8A7C;
  --ua-text-soft:#A89A88;
  --ua-text-card:#4C4C4C;
  --ua-text-label:#6B5138;
  --ua-border-default:#DDCCAE;
  --ua-border-card:var(--ua-color-secondary-pale);
  --ua-theme-solid-background:#8B6239;
  --ua-theme-solid-foreground:var(--ua-background-section);
  --ua-theme-solid-muted:var(--ua-background-section-soft);

  /* UNIVERSAL VISUAL TOKEN — buttons/icons/accent */
  --ua-button-primary-background:var(--ua-color-primary);
  --ua-button-primary-hover-background:var(--ua-color-primary-hover);
  --ua-button-cover-background:var(--ua-color-primary-deep);
  --ua-button-primary-text:var(--ua-background-section);
  --ua-button-cover-text:var(--ua-color-secondary-pale);
  --ua-button-border:var(--ua-color-secondary);
  --ua-icon-primary:var(--ua-color-secondary-pale);
  --ua-icon-gift:var(--ua-background-surface);
  --ua-accent-ornament:var(--ua-color-secondary);
  --ua-accent-highlight:var(--ua-color-secondary-deep);
  --ua-accent-badge:var(--ua-color-secondary-pale);
  --ua-accent-chip:var(--ua-color-secondary-pale);

  /* TIPOGRAFI — AMAN DIUBAH BERSAMA URL @import DI ATAS */
  --font-script:'Playfair Display', serif;
  --font-display:'Cormorant Garamond', serif;
  --font-body:'EB Garamond', serif;

  /* GEOMETRI & GERAK — AMAN, UBAH BERTAHAP */
  --radius-card:18px;
  --radius-pill:999px;
  --space-section:70px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* UNIVERSAL VISUAL TOKEN — rgb helpers */
  --ua-overlay-cream-rgb:255,250,242;
  --ua-background-surface-rgb:255,255,255;
  --ua-color-primary-deep-rgb:74,8,18;
  --ua-color-primary-shadow-rgb:45,10,16;
  --ua-color-secondary-rgb:212,175,106;
  --ua-background-section-rgb:248,241,231;
  --ua-shadow-rgb:0,0,0;
  --ua-border-card-rgb:132,102,67;
  --ua-shadow-warm-rgb:56,38,20;
  --ua-background-ayat-rgb:249,245,238;
  --color-cream-overlay:var(--ua-overlay-cream-rgb);
  --color-white-rgb:var(--ua-background-surface-rgb);
  --color-primary-deep-rgb:var(--ua-color-primary-deep-rgb);
  --color-primary-shadow-rgb:var(--ua-color-primary-shadow-rgb);
  --color-secondary-rgb:var(--ua-color-secondary-rgb);
  --color-background-rgb:var(--ua-background-section-rgb);
  --color-shadow-rgb:var(--ua-shadow-rgb);

  /* UNIVERSAL VISUAL TOKEN — gradients, overlays, shadows */
  --ua-background-ayat-stage-start:#FBF6EC;
  --ua-background-ayat-stage-middle:#F2E9D8;
  --ua-background-ayat-stage-end:#ECE2CF;
  --color-ayat-stage-start:var(--ua-background-ayat-stage-start);
  --color-ayat-stage-middle:var(--ua-background-ayat-stage-middle);
  --color-ayat-stage-end:var(--ua-background-ayat-stage-end);
  --ua-shadow-app:0 0 60px rgba(var(--ua-shadow-rgb),.5);
  --ua-shadow-card:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-shadow-card-deep:0 20px 50px rgba(var(--ua-shadow-rgb),.28);
  --ua-shadow-card-soft:0 6px 16px rgba(var(--ua-color-primary-deep-rgb),.06);
  --ua-shadow-card-warm:0 15px 40px rgba(var(--ua-shadow-rgb),.18);
  --ua-shadow-image:0 10px 26px rgba(var(--ua-color-primary-deep-rgb),.28);
  --ua-shadow-image-ring:0 0 0 4px var(--ua-background-section), 0 0 0 6px var(--ua-color-secondary-pale), 0 10px 22px rgba(var(--ua-color-primary-deep-rgb),.18);
  --ua-shadow-button:0 6px 20px rgba(var(--ua-color-primary-deep-rgb),.28);
  --ua-shadow-button-hover:0 4px 24px rgba(var(--ua-color-secondary-rgb),.4);
  --ua-shadow-button-subtle:0 4px 12px rgba(var(--ua-shadow-rgb),.08);
  --ua-shadow-live-card:0 16px 36px rgba(var(--ua-color-primary-deep-rgb),.14);
  --ua-shadow-video:0 16px 36px rgba(var(--ua-color-primary-deep-rgb),.16);
  --ua-shadow-music:0 6px 18px rgba(var(--ua-shadow-rgb),.35);
  --ua-shadow-timeline-item:0 10px 24px rgba(var(--ua-color-primary-deep-rgb),.10);
  --ua-shadow-timeline-dot:0 0 0 3px var(--ua-background-section), 0 0 0 4px var(--ua-color-secondary);
  --ua-shadow-bank-card:0 8px 20px rgba(var(--ua-shadow-warm-rgb),.08), 0 20px 44px rgba(var(--ua-shadow-warm-rgb),.12), inset 0 1px 0 rgba(var(--ua-background-surface-rgb),.7);
  --ua-shadow-frame-border:inset 0 0 0 4px var(--ua-background-section), inset 0 0 0 5.5px var(--ua-color-secondary-pale);
  --ua-shadow-text:0 1px 12px rgba(var(--ua-overlay-cream-rgb),.95);
  --ua-shadow-text-soft:0 1px 10px rgba(var(--ua-overlay-cream-rgb),.9);
  --ua-shadow-text-strong:0 1px 10px rgba(var(--ua-overlay-cream-rgb),.95), 0 1px 2px rgba(var(--ua-overlay-cream-rgb),.9);
  --ua-overlay-wide-cover:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.6), rgba(var(--ua-color-primary-deep-rgb),.6));
  --ua-overlay-wide-page:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-overlay-cover:radial-gradient(140% 78% at 50% 34%, rgba(var(--ua-overlay-cream-rgb),.68) 0%, rgba(var(--ua-overlay-cream-rgb),.4) 42%, rgba(var(--ua-overlay-cream-rgb),.16) 68%, transparent 88%), linear-gradient(180deg, rgba(var(--ua-overlay-cream-rgb),.34) 0%, rgba(var(--ua-overlay-cream-rgb),.18) 40%, rgba(var(--ua-overlay-cream-rgb),.06) 62%, transparent 78%, rgba(var(--ua-color-primary-deep-rgb),.14) 100%);
  --ua-overlay-section-dark:linear-gradient(180deg, rgba(var(--ua-color-primary-deep-rgb),.45), rgba(var(--ua-color-primary-deep-rgb),.75));
  --ua-overlay-gallery:rgba(var(--ua-background-section-rgb),.4);
  --ua-gradient-floral-strip:linear-gradient(180deg, rgba(var(--ua-color-secondary-rgb),.35), transparent), repeating-linear-gradient(90deg, var(--ua-color-secondary) 0 2px, transparent 2px 14px);
  --ua-gradient-divider:linear-gradient(180deg, transparent, var(--ua-color-accent-rule), transparent);
  --ua-gradient-solid-section:linear-gradient(180deg, var(--ua-theme-solid-background) 0%, color-mix(in srgb, var(--ua-theme-solid-background), var(--ua-color-black) 34%) 100%);
  --ua-gradient-ayat-stage:radial-gradient(120% 60% at 50% 18%, var(--ua-background-ayat-stage-start) 0%, var(--ua-background-ayat-stage-middle) 48%, var(--ua-background-ayat-stage-end) 100%);
  --ua-gradient-ayat-content:linear-gradient(rgba(var(--ua-background-ayat-rgb),.88), rgba(var(--ua-background-ayat-rgb),.88));
  --ua-gradient-couple-background-wash:linear-gradient(rgba(var(--ua-background-section-rgb),.62), rgba(var(--ua-background-section-rgb),.62));
  --ua-gradient-card:linear-gradient(180deg,var(--ua-background-surface),var(--ua-background-section));
  --ua-gradient-card-bank:linear-gradient(145deg, var(--ua-background-surface) 0%, var(--ua-background-surface) 62%, var(--ua-background-card-soft) 100%);
  --ua-gradient-bank-highlight:radial-gradient(120% 80% at 100% 0%, rgba(var(--ua-color-secondary-rgb),.22), transparent 55%);
  --ua-gradient-rule-horizontal:linear-gradient(90deg,transparent,var(--ua-color-secondary),transparent);
  --ua-gradient-timeline-line:linear-gradient(180deg,var(--ua-color-secondary),var(--ua-color-secondary-pale));
  --ua-gradient-video-empty:linear-gradient(135deg,var(--ua-color-primary-deep),var(--ua-color-video-dark));
  /* Closing theme composition (Universal Closing Photo -> Theme Color
     Blend + Footer Color). Default value chain is IDENTICAL to what
     --ua-gradient-closing/--ua-color-primary-deep already resolved to
     before these tokens existed -- zero default-visual change. Studio
     overrides these three (root-scoped, so the sibling footer below can
     read the same value) instead of touching background-image, so the
     photo/gradient blend is never destroyed by a color change. */
  --ua-closing-theme-rgb:var(--ua-color-primary-deep-rgb);
  --ua-closing-theme-shadow-rgb:var(--ua-color-primary-shadow-rgb);
  --ua-closing-theme-color:var(--ua-color-primary-deep);
  --ua-gradient-closing:linear-gradient(180deg, rgba(var(--ua-closing-theme-rgb),.1) 0%, rgba(var(--ua-closing-theme-shadow-rgb),.92) 80%);
  --ua-gradient-closing-base:linear-gradient(180deg, rgba(var(--ua-closing-theme-rgb),.1) 0%, rgba(var(--ua-closing-theme-rgb),.92) 80%);
  --ua-background-panel-glass:rgba(var(--ua-background-surface-rgb),.82);
  --ua-border-panel-glass:rgba(var(--ua-background-surface-rgb),.4);
  --ua-border-bank-card:rgba(var(--ua-border-card-rgb),.16);
  --ua-mask-landscape:linear-gradient(to top,var(--ua-color-black) 52%,transparent 90%);

  /* KOMPATIBILITAS RUNTIME — JANGAN DIUBAH */
  --primary-deep:var(--ua-color-primary-deep);
  --primary:var(--ua-color-primary);
  --primary-strong:var(--ua-color-primary-strong);
  --primary-hover:var(--ua-color-primary-hover);
  --secondary:var(--ua-color-secondary);
  --secondary-deep:var(--ua-color-secondary-deep);
  --secondary-pale:var(--ua-color-secondary-pale);
  --background:var(--ua-background-section);
  --background-soft:var(--ua-background-section-soft);
  --surface:var(--ua-background-surface);
  --text:var(--ua-text-body);
  --text-muted:var(--ua-text-muted);
  --border:var(--ua-border-default);
  --button-primary:var(--ua-button-primary-background);
  --button-primary-hover:var(--ua-button-primary-hover-background);
  --button-cover:var(--ua-button-cover-background);
  --card-background:var(--ua-background-surface);
  --card-border:var(--ua-border-card);
  --shadow-color:var(--ua-color-primary-deep-rgb);
  --color-primary-deep:var(--ua-color-primary-deep);
  --color-primary:var(--ua-color-primary);
  --color-primary-strong:var(--ua-color-primary-strong);
  --color-primary-hover:var(--ua-color-primary-hover);
  --color-secondary:var(--ua-color-secondary);
  --color-secondary-deep:var(--ua-color-secondary-deep);
  --color-secondary-pale:var(--ua-color-secondary-pale);
  --color-background:var(--ua-background-section);
  --color-background-soft:var(--ua-background-section-soft);
  --color-surface:var(--ua-background-surface);
  --color-text:var(--ua-text-body);
  --color-text-muted:var(--ua-text-muted);
  --color-border:var(--ua-border-default);
  --color-black:var(--ua-color-black);
  --color-cream-bright:var(--ua-background-cream-bright);
  --color-success:var(--ua-color-success);
  --color-success-soft:var(--ua-color-success-soft);
  --color-danger:var(--ua-color-danger);
  --color-danger-soft:var(--ua-color-danger-soft);
  --color-info:var(--ua-color-info);
  --color-accent-warm:var(--ua-color-accent-warm);
  --color-accent-rule:var(--ua-color-accent-rule);
  --color-accent-muted:var(--ua-color-accent-muted);
  --color-text-body:var(--ua-text-description);
  --color-text-subtle:var(--ua-text-subtle);
  --color-text-soft:var(--ua-text-soft);
  --color-text-card:var(--ua-text-card);
  --color-text-label:var(--ua-text-label);
  --color-section-dark:var(--ua-background-section-dark);
  --color-video-dark:var(--ua-color-video-dark);
  --color-ayat-surface:var(--ua-background-ayat-surface);
  --color-card-soft:var(--ua-background-card-soft);
  --color-card-end:var(--ua-background-card-end);
  --color-primary-copied:var(--ua-color-primary-copied);
  --color-monogram-secondary:var(--ua-color-monogram-secondary);
  --color-ink-strong:var(--ua-color-ink-strong);
  --color-card-border-rgb:var(--ua-border-card-rgb);
  --color-warm-shadow-rgb:var(--ua-shadow-warm-rgb);
  --color-ayat-rgb:var(--ua-background-ayat-rgb);
  --color-bank-bca:var(--ua-color-bank-bca);
  --color-bank-mandiri:var(--ua-color-bank-mandiri);
  --maroon-deep:var(--ua-color-primary-deep);
  --maroon:var(--ua-color-primary);
  --cream:var(--ua-background-section);
  --cream-2:var(--ua-background-section-soft);
  --gold:var(--ua-color-secondary);
  --gold-deep:var(--ua-color-secondary-deep);
  --gold-pale:var(--ua-color-secondary-pale);
  --white:var(--ua-background-surface);
  --ink:var(--ua-text-body);
  --brown-panel:var(--ua-theme-solid-background);
  --theme-solid-background:var(--ua-theme-solid-background);
  --theme-solid-foreground:var(--ua-theme-solid-foreground);
  --theme-solid-muted:var(--ua-theme-solid-muted);

  /* Sprint UA-MASTER-INDEP-01: per-section semantic tokens (additive).
     Universal contract requires --ua-{section}-{property} identifiers so
     editing one section can never change another (see Bali01VisualTokenCatalog
     for the proven, already-shipped counterpart). Defaults below are copied
     byte-identical from the pre-existing shared --ua-* tokens above, so visual
     output is unchanged until each selector is repointed to its own section
     token (separate follow-up; see report). */
  --ua-cover-background:#F8F1E7;
  --ua-cover-text-title:var(--ua-color-primary);
  --ua-cover-text-body:#5A4438;
  --ua-cover-text-secondary:#A9802F;
  --ua-cover-card-background:#FFFFFF;
  --ua-cover-border:var(--ua-color-secondary-pale);
  --ua-cover-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-cover-button-background:var(--ua-color-primary);
  --ua-cover-button-hover-background:var(--ua-color-primary-hover);
  --ua-cover-button-text:var(--ua-background-section);
  --ua-cover-accent:var(--ua-color-secondary);
  --ua-cover-icon:var(--ua-color-secondary-pale);
  --ua-cover-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-hero-background:#F8F1E7;
  --ua-hero-text-title:var(--ua-color-primary);
  --ua-hero-text-body:#5A4438;
  --ua-hero-text-secondary:#A9802F;
  --ua-hero-card-background:#FFFFFF;
  --ua-hero-border:var(--ua-color-secondary-pale);
  --ua-hero-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-hero-button-background:var(--ua-color-primary);
  --ua-hero-button-hover-background:var(--ua-color-primary-hover);
  --ua-hero-button-text:var(--ua-background-section);
  --ua-hero-accent:var(--ua-color-secondary);
  --ua-hero-icon:var(--ua-color-secondary-pale);
  --ua-hero-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-ayat-background:#F8F1E7;
  --ua-ayat-text-title:var(--ua-color-primary);
  --ua-ayat-text-body:#5A4438;
  --ua-ayat-text-secondary:#A9802F;
  --ua-ayat-card-background:#FFFFFF;
  --ua-ayat-border:var(--ua-color-secondary-pale);
  --ua-ayat-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-ayat-button-background:var(--ua-color-primary);
  --ua-ayat-button-hover-background:var(--ua-color-primary-hover);
  --ua-ayat-button-text:var(--ua-background-section);
  --ua-ayat-accent:var(--ua-color-secondary);
  --ua-ayat-icon:var(--ua-color-secondary-pale);
  --ua-ayat-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-couple-background:#F8F1E7;
  --ua-couple-text-title:var(--ua-color-primary);
  --ua-couple-text-body:#5A4438;
  --ua-couple-text-secondary:#A9802F;
  --ua-couple-card-background:#FFFFFF;
  --ua-couple-border:var(--ua-color-secondary-pale);
  --ua-couple-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-couple-button-background:var(--ua-color-primary);
  --ua-couple-button-hover-background:var(--ua-color-primary-hover);
  --ua-couple-button-text:var(--ua-background-section);
  --ua-couple-accent:var(--ua-color-secondary);
  --ua-couple-icon:var(--ua-color-secondary-pale);
  --ua-couple-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-event-background:#F8F1E7;
  --ua-event-text-title:var(--ua-color-primary);
  --ua-event-text-body:#5A4438;
  --ua-event-text-secondary:#A9802F;
  --ua-event-card-background:#FFFFFF;
  --ua-event-border:var(--ua-color-secondary-pale);
  --ua-event-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-event-button-background:var(--ua-color-primary);
  --ua-event-button-hover-background:var(--ua-color-primary-hover);
  --ua-event-button-text:var(--ua-background-section);
  --ua-event-accent:var(--ua-color-secondary);
  --ua-event-icon:var(--ua-color-secondary-pale);
  --ua-event-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-countdown-background:#F8F1E7;
  --ua-countdown-text-title:var(--ua-color-primary);
  --ua-countdown-text-body:#5A4438;
  --ua-countdown-text-secondary:#A9802F;
  --ua-countdown-card-background:#FFFFFF;
  --ua-countdown-border:var(--ua-color-secondary-pale);
  --ua-countdown-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-countdown-button-background:var(--ua-color-primary);
  --ua-countdown-button-hover-background:var(--ua-color-primary-hover);
  --ua-countdown-button-text:var(--ua-background-section);
  --ua-countdown-accent:var(--ua-color-secondary);
  --ua-countdown-icon:var(--ua-color-secondary-pale);
  --ua-countdown-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-live-background:#F8F1E7;
  --ua-live-text-title:var(--ua-color-primary);
  --ua-live-text-body:#5A4438;
  --ua-live-text-secondary:#A9802F;
  --ua-live-card-background:#FFFFFF;
  --ua-live-border:var(--ua-color-secondary-pale);
  --ua-live-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-live-button-background:var(--ua-color-primary);
  --ua-live-button-hover-background:var(--ua-color-primary-hover);
  --ua-live-button-text:var(--ua-background-section);
  --ua-live-accent:var(--ua-color-secondary);
  --ua-live-icon:var(--ua-color-secondary-pale);
  --ua-live-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-gallery-background:#F8F1E7;
  --ua-gallery-text-title:var(--ua-color-primary);
  --ua-gallery-text-body:#5A4438;
  --ua-gallery-text-secondary:#A9802F;
  --ua-gallery-card-background:#FFFFFF;
  --ua-gallery-border:var(--ua-color-secondary-pale);
  --ua-gallery-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-gallery-button-background:var(--ua-color-primary);
  --ua-gallery-button-hover-background:var(--ua-color-primary-hover);
  --ua-gallery-button-text:var(--ua-background-section);
  --ua-gallery-accent:var(--ua-color-secondary);
  --ua-gallery-icon:var(--ua-color-secondary-pale);
  --ua-gallery-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-video-background:#F8F1E7;
  --ua-video-text-title:var(--ua-color-primary);
  --ua-video-text-body:#5A4438;
  --ua-video-text-secondary:#A9802F;
  --ua-video-card-background:#FFFFFF;
  --ua-video-border:var(--ua-color-secondary-pale);
  --ua-video-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-video-button-background:var(--ua-color-primary);
  --ua-video-button-hover-background:var(--ua-color-primary-hover);
  --ua-video-button-text:var(--ua-background-section);
  --ua-video-accent:var(--ua-color-secondary);
  --ua-video-icon:var(--ua-color-secondary-pale);
  --ua-video-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-story-background:#F8F1E7;
  --ua-story-text-title:var(--ua-color-primary);
  --ua-story-text-body:#5A4438;
  --ua-story-text-secondary:#A9802F;
  --ua-story-card-background:#FFFFFF;
  --ua-story-border:var(--ua-color-secondary-pale);
  --ua-story-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-story-button-background:var(--ua-color-primary);
  --ua-story-button-hover-background:var(--ua-color-primary-hover);
  --ua-story-button-text:var(--ua-background-section);
  --ua-story-accent:var(--ua-color-secondary);
  --ua-story-icon:var(--ua-color-secondary-pale);
  --ua-story-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-rsvp-background:#F8F1E7;
  --ua-rsvp-text-title:var(--ua-color-primary);
  --ua-rsvp-text-body:#5A4438;
  --ua-rsvp-text-secondary:#A9802F;
  --ua-rsvp-card-background:#FFFFFF;
  --ua-rsvp-border:var(--ua-color-secondary-pale);
  --ua-rsvp-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-rsvp-button-background:var(--ua-color-primary);
  --ua-rsvp-button-hover-background:var(--ua-color-primary-hover);
  --ua-rsvp-button-text:var(--ua-background-section);
  --ua-rsvp-accent:var(--ua-color-secondary);
  --ua-rsvp-icon:var(--ua-color-secondary-pale);
  --ua-rsvp-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-gift-background:#F8F1E7;
  --ua-gift-text-title:var(--ua-color-primary);
  --ua-gift-text-body:#5A4438;
  --ua-gift-text-secondary:#A9802F;
  --ua-gift-card-background:#FFFFFF;
  --ua-gift-border:var(--ua-color-secondary-pale);
  --ua-gift-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-gift-button-background:var(--ua-color-primary);
  --ua-gift-button-hover-background:var(--ua-color-primary-hover);
  --ua-gift-button-text:var(--ua-background-section);
  --ua-gift-accent:var(--ua-color-secondary);
  --ua-gift-icon:var(--ua-color-secondary-pale);
  --ua-gift-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
  --ua-closing-background:#F8F1E7;
  --ua-closing-text-title:var(--ua-color-primary);
  --ua-closing-text-body:#5A4438;
  --ua-closing-text-secondary:#A9802F;
  --ua-closing-card-background:#FFFFFF;
  --ua-closing-border:var(--ua-color-secondary-pale);
  --ua-closing-shadow:0 10px 30px rgba(var(--ua-shadow-rgb),.18);
  --ua-closing-button-background:var(--ua-color-primary);
  --ua-closing-button-hover-background:var(--ua-color-primary-hover);
  --ua-closing-button-text:var(--ua-background-section);
  --ua-closing-accent:var(--ua-color-secondary);
  --ua-closing-icon:var(--ua-color-secondary-pale);
  --ua-closing-overlay:linear-gradient(rgba(var(--ua-color-primary-deep-rgb),.55), rgba(var(--ua-color-primary-deep-rgb),.55));
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--ua-button-cover-background);
  color:var(--ua-text-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:480px;
  margin:0 auto;
  background:var(--ua-background-section);
  position:relative;
  min-height:100vh;
  box-shadow:var(--ua-shadow-app);
  overflow:hidden;
}

img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
#coverPhotoMain .cover-photo-fallback text{font-family:var(--font-script);}
#coverPhotoMain .cover-photo-fallback text:first-of-type{fill:var(--ua-color-primary-strong);}
#coverPhotoMain .cover-photo-fallback text:last-of-type{fill:var(--ua-color-monogram-secondary);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{transform:translateY(20px) scale(.94);}
.reveal-scale.in{transform:translateY(0) scale(1);}

.stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.stagger.in > *{opacity:1;transform:translateY(0);}
.stagger.in > *:nth-child(1){transition-delay:.05s;}
.stagger.in > *:nth-child(2){transition-delay:.15s;}
.stagger.in > *:nth-child(3){transition-delay:.25s;}
.stagger.in > *:nth-child(4){transition-delay:.35s;}
.stagger.in > *:nth-child(5){transition-delay:.45s;}

/* ============================================
   FLORAL BORDER STRIPS (signature element)
   ============================================ */
.floral-strip{
  width:100%;
  height:54px;
  background-repeat:repeat-x;
  background-size:auto 100%;
  position:relative;
  z-index:2;
}
.floral-strip.top{
  background-image:var(--ua-gradient-floral-strip);
  border-bottom:2px solid var(--ua-color-secondary);
}
.floral-top-svg{display:block;width:100%;height:auto;}
.floral-bottom-svg{display:block;width:100%;height:auto;transform:scaleY(-1);}

/* ============================================
   COVER / GATE — Jawa
   Scene & posisi mengikuti cover.psd (kanvas 1080x1920),
   dikonversi ke lebar desain 480px (skala 0.44444).
   Urutan DOM & z-index = urutan layer pada PSD (bawah -> atas).
   ============================================ */
.cover{
  position:fixed;
  inset:0;
  z-index:1000;
  max-width:480px;
  margin:0 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:36px 30px;
  transition:transform 1.1s var(--ease), opacity .9s var(--ease);
  color:var(--ua-background-section);
}
.cover.hide{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}

/* ---- Latar desktop/tablet lebar: mengisi area kosong kiri-kanan di luar Cover ----
   ::before (bukan elemen HTML baru) + position:fixed lolos dari overflow:hidden
   .cover (karena .cover tidak punya transform aktif selain saat .hide), sehingga
   otomatis memenuhi viewport penuh tanpa mengubah ukuran/posisi Cover itu sendiri.
   Saat .cover.hide aktif, transform pada .cover ikut menyeret elemen ini (fade+slide
   bersama), jadi tidak perlu logika tambahan. Tidak aktif di mobile (<=767px). */
@media (min-width:768px){
  .cover::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      var(--ua-overlay-wide-cover),
      url("assets/background/surface.png") center 75% / cover no-repeat;
  }
}

/* ---- Latar desktop/tablet lebar UNTUK SELURUH HALAMAN (bukan cuma Cover) ----
   body::before, position:fixed, z-index paling belakang (-2, di bawah latar Cover
   yang -1) — supaya tetap terlihat di SEMUA section sepanjang scroll, tidak ikut
   hilang saat Cover ditutup seperti .cover::before. Tidak mengubah .cover::before
   yang sudah ada (tetap FINAL/LOCK), ini cuma nambah layer baru di belakangnya
   yang persisten. Tidak aktif di mobile (<=767px). */
@media (min-width:768px){
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
      var(--ua-overlay-wide-page),
      url("assets/background/surface.png") center 75% / cover no-repeat;
  }
}

/* ---- lapisan scene (background + ornamen), di belakang overlay & teks ---- */
.cs-scene{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.cs-scene img{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}

@media (max-width:479px){
  .cs-scene{
    width:480px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

.cs-scene img.cs-bg{
  left:0; top:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:1;
  transform-origin:center center;
  animation:csBgZoom 26s ease-in-out infinite alternate;
}
@keyframes csBgZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

/* posisi absolut tiap ornamen (hasil konversi presisi dari cover.psd) */
.cs-jaw14-r     { right:10.2px;  bottom:100.9px; width:229.8px; height:260.9px; z-index:18; }
.cs-jaw14-l     { left:0;        bottom:111.6px; width:240.0px; height:279.6px; z-index:2; }
.cs-kelapa-l    { left:0;        bottom:118.2px; width:256.9px; height:444.9px; z-index:3; }
.cs-kelapa-r    { right:83.1px;  bottom:156.4px; width:145.8px; height:325.3px; z-index:4; }
.cs-rumah       { left:-10.2px;  bottom:-23.1px; width:519.1px; height:429.6px; z-index:5; }
.cs-bunga-r     { right:-33.8px; bottom:110.7px; width:138.7px; height:296.9px; z-index:6; }
.cs-bunga-l     { left:-36.4px;  bottom:101.8px; width:144.7px; height:324.9px; z-index:7; }
.cs-buput-l     { left:0;        bottom:-11.1px; width:163.6px; height:235.6px; z-index:8; }
.cs-buput-r     { right:-9.8px;  bottom:-11.1px; width:159.1px; height:237.8px; z-index:9; }
.cs-bungacenter { left:130.7px;  bottom:0;       width:220.4px; height:117.3px; z-index:10; }
.cs-janur-l     { left:0;        bottom:124.9px; width:138.7px; height:268.4px; z-index:11; }
.cs-janur-r     { right:0;       bottom:142.7px; width:148.9px; height:249.3px; z-index:12; }
.cs-wayang-r    { right:73.3px;  bottom:24.9px;  width:99.1px;  height:161.8px; z-index:13; }
.cs-wayang-l    { left:65.8px;   bottom:28.9px;  width:99.1px;  height:161.8px; z-index:14; }
.cs-bunga-bawah { left:-10.7px;  bottom:0;       width:506.7px; height:189.3px; z-index:15; }
.cs-batik       { left:-4.0px;   top:0;          width:149.3px; height:132.4px; z-index:16; }

/* ---- entrance (sekali jalan saat cover terbuka) + idle sway (elemen organik) ----
   translate/scale/opacity dipakai untuk entrance (forwards, sekali jalan);
   rotate dipakai untuk idle (infinite) — properti independen, tidak saling menimpa. */
.cs-jaw14-l, .cs-jaw14-r, .cs-kelapa-l, .cs-kelapa-r,
.cs-bunga-l, .cs-bunga-r, .cs-buput-l, .cs-buput-r,
.cs-bungacenter, .cs-bunga-bawah, .cs-janur-l, .cs-janur-r{
  transform-origin:bottom center;
}

/* Urutan entrance (revisi): Background -> Rumah -> Pohon belakang (jaw14) -> Kelapa
   -> Buput -> Bunga-bawah -> Bungacenter -> bebas (Wayang/Janur/Bunga/batik).
   Hanya nilai delay yang diubah; animasi/durasi/easing/goyangan tetap sama. */
/* Timing dipercepat ~50% (revisi): delay & durasi entrance dibagi 2 dari versi
   sebelumnya. Urutan kemunculan, easing, karakter animasi, dan durasi goyangan
   idle (csSwayA/B/C) TIDAK diubah -- hanya kapan & seberapa cepat entrance-nya. */
.cs-rumah       { animation:csRise .5s  var(--ease) .025s forwards; }
.cs-jaw14-l     { animation:csGrow .5s  var(--ease) .175s forwards, csSwayA 8s   ease-in-out .175s infinite; }
.cs-jaw14-r     { animation:csGrow .5s  var(--ease) .225s forwards, csSwayB 8.6s ease-in-out .225s infinite; }
.cs-kelapa-l    { animation:csRise .5s  var(--ease) .375s forwards, csSwayB 7s   ease-in-out .375s infinite; }
.cs-kelapa-r    { animation:csRise .5s  var(--ease) .425s forwards, csSwayA 7.6s ease-in-out .425s infinite; }
.cs-buput-l     { animation:csGrow .4s  var(--ease) .55s  forwards, csSwayC 6.8s ease-in-out .55s  infinite; }
.cs-buput-r     { animation:csGrow .4s  var(--ease) .6s   forwards, csSwayC 7.4s ease-in-out .6s   infinite; }
.cs-bunga-bawah { animation:csGrow .4s  var(--ease) .725s forwards, csSwayB 7.8s ease-in-out .725s infinite; }
.cs-bungacenter { animation:csGrow .4s  var(--ease) .825s forwards, csSwayA 7s   ease-in-out .825s infinite; }
.cs-wayang-l    { animation:csPop  .35s var(--ease) .875s forwards; }
.cs-wayang-r    { animation:csPop  .35s var(--ease) .915s forwards; }
.cs-bunga-l     { animation:csGrow .4s  var(--ease) .925s forwards, csSwayA 6s   ease-in-out .925s infinite; }
.cs-janur-l     { animation:csDrop .4s  var(--ease) .955s forwards, csSwayC 6.5s ease-in-out .955s infinite; }
.cs-bunga-r     { animation:csGrow .4s  var(--ease) .965s forwards, csSwayB 6.6s ease-in-out .965s infinite; }
.cs-janur-r     { animation:csDrop .4s  var(--ease) .995s forwards, csSwayC 7.2s ease-in-out .995s infinite; }
.cs-batik       { animation:csFade .3s  var(--ease) 1.025s forwards; }

@keyframes csFade{ from{opacity:0;} to{opacity:1;} }
@keyframes csRise{ from{opacity:0; translate:0 70px;} to{opacity:1; translate:0 0;} }
@keyframes csGrow{ from{opacity:0; translate:0 50px; scale:.85;} to{opacity:1; translate:0 0; scale:1;} }
@keyframes csPop { from{opacity:0; scale:.55;} 70%{opacity:1; scale:1.06;} to{opacity:1; scale:1;} }
@keyframes csDrop{ from{opacity:0; translate:0 -46px;} to{opacity:1; translate:0 0;} }
@keyframes csSwayA{ 0%,100%{ rotate:-1.6deg; } 50%{ rotate:1.6deg; } }
@keyframes csSwayB{ 0%,100%{ rotate:-2.2deg; } 50%{ rotate:2.2deg; } }
@keyframes csSwayC{ 0%,100%{ rotate:-1.1deg; } 50%{ rotate:1.1deg; } }

@media (prefers-reduced-motion: reduce){
  .cs-bg{ animation:none; }
  .cs-scene img{ animation:none !important; opacity:1 !important; translate:none !important; rotate:none !important; scale:none !important; }
}

/* ---- overlay krem lembut (keterbacaan teks) + konten teks ---- */
.cover-overlay{
  position:absolute; inset:0; z-index:18;
  /* Overlay diperkuat & diperluas (bukan panel/kotak/glass) supaya area di
     belakang teks & foto (eyebrow, foto cover, tombol, "Kepada..", nama tamu)
     sedikit lebih terang -- gradasi lembut yang menyatu dgn background,
     tanpa tepi tegas, tanpa backdrop-filter. Layout/font/posisi/animasi
     TIDAK berubah -- hanya resep warna gradient di properti ini. */
  background:var(--ua-overlay-cover);
  opacity:0;
  animation:csFade .35s ease 1.25s forwards;
}
.cover-inner{
  position:relative; z-index:2;
  margin-top:calc(13vh - 95px); /* dinaikkan ~95px agar nama tamu lebih terbaca */
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  animation:csTextIn .4s var(--ease) 1.3s forwards;
}
@keyframes csTextIn{ from{opacity:0; translate:0 20px;} to{opacity:1; translate:0 0;} }
@media (prefers-reduced-motion: reduce){
  .cover-overlay, .cover-inner{ animation:none !important; opacity:1 !important; translate:none !important; }
}
@media (max-height: 720px){ .cover-inner { margin-top: calc(9vh - 95px); } }

.cover-eyebrow{
  font-family:var(--font-display);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ua-color-accent-warm);
  margin-bottom:30px;
}

/* ---- Foto Cover — arsitektur identik Template Palembang (#coverPhotoMain /
   #coverPhotoImg / .cover-photo-fallback / .is-empty), hanya ukuran & gaya
   visual disesuaikan Jawa01 (mask oval/pill sesuai storyboard, bukan
   lingkaran). Foto diisi via script.js (fetch API), BUKAN placeholder
   server-side. Jika img gagal dimuat, script.js menambah class "is-empty"
   pada #coverPhotoMain dan monogram inisial tampil sebagai fallback. ---- */
.cover-photo-main{
  position:relative;
  width:170px;
  height:230px;
  margin:0 auto 26px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  border:5px solid var(--ua-background-cream-bright);
  box-shadow:var(--ua-shadow-image);
  background:var(--ua-background-section);
}
.cover-photo-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.cover-photo-main .cover-photo-fallback{
  display:none;
  position:absolute; inset:0;
  width:auto; height:auto; margin:0;
  align-items:center; justify-content:center;
}
.cover-photo-main.is-empty img{ visibility:hidden; }
.cover-photo-main.is-empty .cover-photo-fallback{ display:flex; }
.cover-photo-main .cover-photo-fallback svg{ width:96px; height:96px; }

.cover-divider{
  width:1px;height:46px;
  background:var(--ua-gradient-divider);
  margin:14px auto 16px;
}

.cover-couple{
  max-width:min(100%, 420px);
  margin:0;
  color:var(--ua-color-primary-deep);
  font-family:var(--font-display);
  font-size:clamp(28px, 8vw, 40px);
  font-weight:700;
  line-height:.98;
  letter-spacing:.025em;
  overflow-wrap:anywhere;
  text-wrap:balance;
  text-shadow:var(--ua-shadow-text);
}
.cover-couple span{ color:var(--ua-color-accent-warm); }

@media (max-height: 720px){
  .cover-photo-main{ width:145px; height:194px; margin-bottom:18px; }
  .cover-couple{ font-size:clamp(26px, 7.5vw, 34px); }
  .cover-divider{ height:30px; margin:10px auto 10px; }
}

.btn-open{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 36px;
  background:var(--ua-button-cover-background);
  border:1px solid var(--ua-color-secondary);
  border-radius:var(--radius-pill);
  color:var(--ua-color-secondary-pale);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), transform .2s, box-shadow .35s;
  box-shadow:var(--ua-shadow-button);
}
.btn-open:hover{background:var(--ua-color-secondary);color:var(--ua-color-primary-deep);box-shadow:var(--ua-shadow-button-hover);}
.btn-open:active{transform:scale(.96);}

.cover-to{
  margin-top:0;
  font-size:clamp(15px, 4vw, 18px);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ua-color-primary-deep);
  opacity:.95;
}
.cover-guest{
  font-family:var(--font-display);
  font-size:clamp(27px, 7vw, 36px);
  font-weight:700;
  line-height:1;
  color:var(--ua-color-primary-deep);
  margin:8px 0 22px;
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
  text-shadow:var(--ua-shadow-text-strong);
}

/* ============================================
   HERO — Jawa (implementasi MANDIRI, namespace .hero-*)
   Scene & posisi mengikuti hero.psd. TIDAK memanggil/bergantung pada
   Cover (namespace cs) maupun Hero Palembang (oa-scene, frame, fc) — lihat audit.
   ============================================ */
.hero-jawa{
  position:relative;
  overflow:hidden;
  min-height:100vh;
}

.hero-scene{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-scene img{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}

/* HERO OVERLAY -- Studio-editable fade/tint layer (contract layer
   hero.overlay, binds .hero-overlay), sibling of .hero-scene, sits between
   scene/ornaments (z-index 1-16) and .hero-caption (z-index 20). Transparent
   and inert by default -- an owner turns it on and picks color/opacity from
   UA Template Studio; zero visual change until they do. Mirrors Cover's own
   .cover-overlay (position:absolute;inset:0) pattern. */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:18;
  background:transparent;
  pointer-events:none;
}

@media (max-width:479px){
  .hero-scene{
    width:480px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}
.hero-scene img.hero-bg{
  left:0; top:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:1;
  transform-origin:center center;
  animation:heroBgZoom 26s ease-in-out infinite alternate;
}
@keyframes heroBgZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

/* posisi absolut tiap ornamen (hasil konversi presisi dari hero.psd) */
.hero-jaw14-r      { right:10.2px;  bottom:100.9px; width:229.8px; height:260.9px; z-index:18; }
.hero-jaw14-l       { left:0;        bottom:111.6px; width:240.0px; height:279.6px; z-index:2; }
.hero-kelapa-l      { left:0;        bottom:118.2px; width:256.9px; height:444.9px; z-index:3; }
.hero-kelapa-r      { right:83.1px;  bottom:156.4px; width:145.8px; height:325.3px; z-index:4; }
.hero-rumah         { left:-10.2px;  bottom:-23.1px; width:519.1px; height:429.6px; z-index:5; }
.hero-bunga-r       { right:-33.8px; bottom:110.7px; width:138.7px; height:296.9px; z-index:6; }
.hero-bunga-l       { left:-36.4px;  bottom:101.8px; width:144.7px; height:324.9px; z-index:7; }
.hero-buput-l       { left:0;        bottom:-11.1px; width:163.6px; height:235.6px; z-index:8; }
.hero-buput-r       { right:-9.8px;  bottom:-11.1px; width:159.1px; height:237.8px; z-index:9; }
.hero-bungacenter   { left:130.7px;  bottom:0;       width:220.4px; height:117.3px; z-index:10; }
.hero-latar-bingkai { left:41.8px;   top:80.9px;     width:399.1px; height:529.8px; z-index:10; }
.hero-bingkai       { left:40.0px;   top:76.0px;     width:399.1px; height:529.8px; z-index:10; }
.hero-janur-l       { left:0;        bottom:124.9px; width:138.7px; height:268.4px; z-index:11; }
.hero-janur-r       { right:0;       bottom:142.7px; width:148.9px; height:249.3px; z-index:12; }
.hero-wayang-r      { right:73.3px;  bottom:24.9px;  width:99.1px;  height:161.8px; z-index:13; }
.hero-wayang-l      { left:65.8px;   bottom:28.9px;  width:99.1px;  height:161.8px; z-index:14; }
.hero-bunga-bawah   { left:-10.7px;  bottom:0;       width:506.7px; height:189.3px; z-index:15; }
.hero-batik         { left:-4.0px;   top:0;          width:149.3px; height:132.4px; z-index:16; }

/* entrance + idle sway — timing IDENTIK dengan Cover untuk sementara (poin 5),
   tapi memakai keyframe & namespace milik Hero sendiri (hero*), bukan cs*. */
.hero-jaw14-l, .hero-jaw14-r, .hero-kelapa-l, .hero-kelapa-r,
.hero-bunga-l, .hero-bunga-r, .hero-buput-l, .hero-buput-r,
.hero-bungacenter, .hero-bunga-bawah, .hero-janur-l, .hero-janur-r{
  transform-origin:bottom center;
}

/* Entrance HANYA berjalan setelah .hero-play disematkan ke .hero-jawa (dipicu saat
   Cover ditutup, lihat <script> baru di bawah script.js) -- inilah "transisi adat
   Jawa01": begitu Cover slide away, scene Hero baru mulai membangun dirinya di
   depan mata pengguna, bukan sudah selesai diam-diam sejak page load. */
.hero-jawa.hero-play .hero-rumah         { animation:heroRise 1s  var(--ease) .05s forwards; }
.hero-jawa.hero-play .hero-jaw14-l       { animation:heroGrow 1s  var(--ease) .35s forwards, heroSwayA 8s   ease-in-out .35s infinite; }
.hero-jawa.hero-play .hero-jaw14-r       { animation:heroGrow 1s  var(--ease) .45s forwards, heroSwayB 8.6s ease-in-out .45s infinite; }
.hero-jawa.hero-play .hero-kelapa-l      { animation:heroRise 1s  var(--ease) .75s forwards, heroSwayB 7s   ease-in-out .75s infinite; }
.hero-jawa.hero-play .hero-kelapa-r      { animation:heroRise 1s  var(--ease) .85s forwards, heroSwayA 7.6s ease-in-out .85s infinite; }
.hero-jawa.hero-play .hero-buput-l       { animation:heroGrow .8s var(--ease) 1.1s  forwards, heroSwayC 6.8s ease-in-out 1.1s  infinite; }
.hero-jawa.hero-play .hero-buput-r       { animation:heroGrow .8s var(--ease) 1.2s  forwards, heroSwayC 7.4s ease-in-out 1.2s  infinite; }
.hero-jawa.hero-play .hero-bunga-bawah   { animation:heroGrow .8s var(--ease) 1.45s forwards, heroSwayB 7.8s ease-in-out 1.45s infinite; }
.hero-jawa.hero-play .hero-bungacenter   { animation:heroGrow .8s var(--ease) 1.65s forwards, heroSwayA 7s   ease-in-out 1.65s infinite; }
.hero-jawa.hero-play .hero-latar-bingkai { animation:heroGrow .8s var(--ease) 2.1s  forwards; }
.hero-jawa.hero-play .hero-bingkai       { animation:heroGrow .8s var(--ease) 2.2s  forwards; }
.hero-jawa.hero-play .hero-wayang-l      { animation:heroPop  .7s var(--ease) 1.75s forwards; }
.hero-jawa.hero-play .hero-wayang-r      { animation:heroPop  .7s var(--ease) 1.83s forwards; }
.hero-jawa.hero-play .hero-bunga-l       { animation:heroGrow .8s var(--ease) 1.85s forwards, heroSwayA 6s   ease-in-out 1.85s infinite; }
.hero-jawa.hero-play .hero-janur-l       { animation:heroDrop .8s var(--ease) 1.91s forwards, heroSwayC 6.5s ease-in-out 1.91s infinite; }
.hero-jawa.hero-play .hero-bunga-r       { animation:heroGrow .8s var(--ease) 1.93s forwards, heroSwayB 6.6s ease-in-out 1.93s infinite; }
.hero-jawa.hero-play .hero-janur-r       { animation:heroDrop .8s var(--ease) 1.99s forwards, heroSwayC 7.2s ease-in-out 1.99s infinite; }
.hero-jawa.hero-play .hero-batik         { animation:heroFade .6s var(--ease) 2.05s forwards; }

@keyframes heroFade{ from{opacity:0;} to{opacity:1;} }
@keyframes heroRise{ from{opacity:0; translate:0 70px;} to{opacity:1; translate:0 0;} }
@keyframes heroGrow{ from{opacity:0; translate:0 50px; scale:.85;} to{opacity:1; translate:0 0; scale:1;} }
@keyframes heroPop { from{opacity:0; scale:.55;} 70%{opacity:1; scale:1.06;} to{opacity:1; scale:1;} }
@keyframes heroDrop{ from{opacity:0; translate:0 -46px;} to{opacity:1; translate:0 0;} }
@keyframes heroSwayA{ 0%,100%{ rotate:-1.6deg; } 50%{ rotate:1.6deg; } }
@keyframes heroSwayB{ 0%,100%{ rotate:-2.2deg; } 50%{ rotate:2.2deg; } }
@keyframes heroSwayC{ 0%,100%{ rotate:-1.1deg; } 50%{ rotate:1.1deg; } }

@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; }
  .hero-scene img{ animation:none !important; opacity:1 !important; translate:none !important; rotate:none !important; scale:none !important; }
}

/* ---- Teks di dalam bingkai — namespace hero-*, placeholder Dashboard yang sudah
   ada: {{ nama_pria }}, {{ nama_wanita }}, {{ tanggal_singkat }}. ---- */
.hero-caption{
  position:absolute;
  left:40.0px; top:76.0px; width:399.1px; height:529.8px;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  pointer-events:none;
}
@media (max-width:479px){
  .hero-caption{
    left:50%;
    transform:translateX(-50%);
  }
}
.hero-jawa.hero-play .hero-caption{ animation:heroFade .6s ease 2.7s forwards; }
.hero-caption-eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color:var(--ua-color-secondary-deep);
  margin:0;
}
.hero-caption-names{
  font-family:var(--font-script);
  font-style:italic;
  font-weight:700;
  font-size:30px;
  line-height:1.1;
  color:var(--ua-color-primary-strong);
  margin:8px 0 6px;
}
.hero-caption-rule{
  display:block;
  width:54px;
  height:1px;
  margin:8px auto;
  background:var(--ua-color-accent-muted);
}
.hero-caption-date{
  font-family:var(--font-display);
  letter-spacing:.20em;
  font-size:13px;
  color:var(--ua-color-primary-strong);
  margin:0;
}
@media (prefers-reduced-motion: reduce){
  .hero-latar-bingkai, .hero-bingkai, .hero-caption{ animation:none !important; opacity:1 !important; translate:none !important; scale:none !important; }
}

/* ============================================
   GENERIC SECTION
   ============================================ */
.section{
  position:relative;
  padding:10px 28px var(--space-section);
  text-align:center;
  background:var(--ua-background-section);
}
.section.tight{
  padding-top:36px; 
  padding-bottom:5px;
}
.eyebrow{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ua-color-secondary-deep);
  margin-bottom:8px;
}
.heading{
  font-family:var(--font-display);
  font-style:italic;
  font-size:30px;
  font-weight:600;
  color:var(--ua-color-primary);
  margin-bottom:120px;
}
.body-text{
  font-size:18px;
  line-height:1.75;
  color:var(--ua-text-description);
  max-width:330px;
  margin:0 auto;
}

/* ============================================
   COUPLE PROFILES
   ============================================ */
.couple-block{margin-top:38px;}
.couple-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:0px;
}
.couple-photo{
    width:160px;
    height:270px;
    margin:0 auto;
    overflow:hidden;
    border-radius:90px 90px 90px 90px;
}

.couple-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:.5s;
}

.couple-role{
  max-width:330px;
  margin:13px auto 7px;
  font-size:clamp(15px, 3.8vw, 18px);
  font-weight:700;
  line-height:1.25;
  color:var(--ua-color-primary-deep);
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.couple-parents{
  max-width:340px;
  margin:0 auto;
  font-size:clamp(17px, 4.2vw, 20px);
  font-weight:600;
  line-height:1.42;
  color:var(--ua-text-body);
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.couple-jawa .couple-name{
  max-width:340px;
  margin:27px auto 0;
  font-family:var(--font-display);
  font-size:clamp(28px, 7.1vw, 36px);
  font-weight:700;
  line-height:.98;
  letter-spacing:.015em;
  color:var(--ua-color-primary-deep);
  overflow-wrap:anywhere;
  text-wrap:balance;
  text-shadow:var(--ua-shadow-text-soft);
}
.couple-amp{
  font-family:var(--font-script);
  font-style:italic;
  font-size:26px;
  color:var(--ua-color-secondary-deep);
  text-align:center;
  margin:6px 0 18px;
}

/* ============================================
   UNIVERSAL BACKGROUND OPACITY COMPOSITION LAYER
   (resources/js/template-studio/background-opacity.js)

   Generic, opt-in only: these selectors never match any element by
   default. A render adapter writes `data-ua-bg-opacity-host` /
   `data-ua-bg-opacity-layer` onto a specific element only after an owner
   sets that layer's Background Opacity, so every container's default
   rendering — event.card and every other card/container layer alike, on
   every UA Master duplicate, present or future — is completely unaffected
   until then. Not scoped to any section/layer/template.

   REOPEN — Live Streaming Regression. The original version of this block
   also forced `position:relative` on every DIRECT CHILD of the host (to
   guarantee they paint above the injected background layer). That is
   fine for a host whose children are all position:static by default
   (e.g. event.card's title/date/button text) but DESTRUCTIVE for a host
   whose children are ALREADY explicitly positioned — the child rule's two
   attribute selectors outrank a single-class rule like
   `.live-jawa-deco{position:absolute}` by CSS specificity, so it silently
   downgraded every Live Streaming decoration (flowers/butterflies/wayang,
   all deliberately position:absolute so they overlay the section instead
   of flowing in the document) to position:relative, collapsing them all
   into stacked, single-column in-flow boxes. Fix: give the injected
   background layer a NEGATIVE z-index instead, and make the host an
   isolated stacking context (`isolation:isolate`) so that negative
   z-index is contained to this host rather than escaping to paint behind
   unrelated page content. A negative-z-index descendant paints before
   ANY in-flow or positioned content in its stacking context by spec, so
   every child — static or already explicitly positioned, with whatever
   z-index the template itself already gives it — naturally paints above
   the background layer with ZERO changes to its own `position`/`z-index`.
   ============================================ */
[data-ua-bg-opacity-host]{
  position:relative;
  isolation:isolate;
}
/* TICKET — Video Background Disappears After Opacity Change (generic
   Background Opacity fix, not scoped to Video/Aceh — see
   background-opacity.js's own module docblock for the base mechanism).
   Root cause: this rule used to rely on plain cascade order/specificity to
   win, but `.section.has-moza > :not(.moza-deco){position:relative;
   z-index:1}` (further below — the rule that lifts a "has-moza" section's
   real content above its `.moza-deco` decorative overlay, e.g. Video,
   Live Streaming, Couple, Event) has HIGHER specificity (three classes via
   its `:not(.moza-deco)` argument vs this rule's one attribute selector)
   and ALSO matches the freshly-inserted `[data-ua-bg-opacity-layer]` div
   the moment Background Opacity's split-layer mechanism creates it as a
   plain (non-`.moza-deco`) first child of a `.has-moza` section — which
   `video.background` (bound to `#videoSection`, itself `.section.has-
   moza`) is. That rule silently overwrote this one's `position:absolute`
   with `position:relative` and `z-index:-1` with `z-index:1`, collapsing
   the injected layer to a contentless, un-positioned, zero-height box
   (`inset` only affects absolutely/fixed-positioned boxes) — invisible
   regardless of what background-image it holds, and regardless of its own
   `opacity` value (100% or 40% alike), because there is no longer a
   correctly-sized/positioned box left to paint anything onto. `!important`
   here is the generic, correct fix: this selector is infrastructure this
   module owns exclusively (it only ever matches an element THIS module
   itself creates and attributes, never anything template-authored), so it
   must always win regardless of which template/section's own native CSS
   happens to also match a `:not()`-based "lift real content" rule — no
   `.section.has-moza`/`.video-section`/slug knowledge added here or
   anywhere else; every current and future container using Background
   Opacity is fixed by this one shared rule. */
[data-ua-bg-opacity-layer]{
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

/* ============================================
   EVENT (arch card over photo)
   ============================================ */
.event-section{
  position:relative;
  background:
    var(--ua-overlay-section-dark),
    url('https://images.unsplash.com/photo-1606216794074-735e91aa2c92?q=80&w=1000&auto=format&fit=crop') center/cover no-repeat;
  padding:64px 24px 70px;
}
.arch-card{
  width:90%;
  max-width:420px;
  margin:0 auto 30px;

  background:var(--ua-background-panel-glass);
  backdrop-filter:blur(10px);

  border:1px solid var(--ua-border-panel-glass);

  border-radius:180px 180px 180px 180px;

  padding:120px 30px 70px;

  text-align:center;

  box-shadow:var(--ua-shadow-card);
}
.arch-card:last-child{margin-bottom:0;}
.event-date{
  font-size:14.5px;
  letter-spacing:.06em;
  color:var(--ua-text-muted);
  margin-bottom:2px;
  text-align:center;
}
.event-time{
  font-size:14.5px;
  letter-spacing:.06em;
  color:var(--ua-text-muted);
  text-align:center; 
  margin-bottom:30px;
}
.event-rule{
  width:90px;height:1px;
  background:var(--ua-color-secondary-deep);
  margin:0 auto 14px;
  opacity:.6;
}
.event-title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:25px;
  color:var(--ua-color-primary);
  margin-bottom:14px;
}
.event-venue{
  font-size:16px;
  font-weight:600;
  color:var(--ua-text-body);
  margin-bottom:6px;
}
.event-address{
  font-size:14.5px;
  color:var(--ua-text-muted);
  line-height:1.55;
  margin-bottom:18px;
}
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 24px;
  background:var(--ua-background-surface);
  border:1px solid var(--ua-color-secondary-deep);
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--ua-color-primary);
  box-shadow:var(--ua-shadow-button-subtle);
  transition:.3s var(--ease);

  margin-bottom:50px;
}
.btn-pill:hover{background:var(--ua-color-primary);color:var(--ua-background-section);}
.btn-pill:active{
  filter:brightness(.92) saturate(1.04);
  transform:translateY(1px) scale(.98);
}
.btn-pill svg{width:15px;height:15px;}

/* ============================================
   COUNTDOWN
   ============================================ */
.countdown-wrap{margin-top:30px;}
.countdown-label{
  font-family:var(--font-display);
  font-style:italic;
  font-size:19px;
  color:var(--ua-color-primary);
  margin-bottom:18px;
}
.countdown-label b{font-weight:700;}
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:9px;
  width:100%;
  max-width:340px;
  margin:0 auto 22px;
}
.cd-box{
  background:var(--ua-background-surface);
  border:1px solid var(--ua-color-secondary-pale);
  border-radius:12px;
  padding:14px 2px;
  box-shadow:var(--ua-shadow-card-soft);
}
/* [QA UI FIX — Bug: angka countdown tampil italic] RCA: font-weight:700
   SEBELUMNYA diminta di sini untuk 'Cormorant Garamond' (var(--font-display))
   -- tapi @import Google Fonts template ini (index.html baris 11) HANYA
   memuat wght 400/500/600 (baik normal ital=0 MAUPUN italic ital=1;
   lihat "family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600")
   -- weight 700 TIDAK PERNAH dimuat di style mana pun. Saat browser diminta
   merender kombinasi weight yang tidak ada dalam font yang dimuat, ia
   melakukan font-matching/sintesis ke wajah terdekat yang tersedia --
   perilaku ini tidak konsisten antar browser/OS dan bisa "salah pilih"
   wajah italic yang kebetulan ada di weight 600. font-weight diturunkan ke
   600 (weight non-italic TERBERAT yang benar-benar dimuat) supaya browser
   tidak perlu menyintesis sama sekali, DITAMBAH font-style:normal eksplisit
   sebagai jaminan mutlak terlepas dari mekanisme font-matching browser. */
.cd-num{
  font-family:var(--font-display);
  font-size:25px;
  font-weight:600;
  font-style:normal;
  color:var(--ua-color-primary);
}
.cd-label{
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ua-text-subtle);
  margin-top:3px;
}

@media (max-width: 479px) {
  .countdown-grid {
    max-width:calc(100vw - 48px);
    gap:clamp(5px, 1.6vw, 8px);
  }

  .cd-box {
    min-width:0;
    padding:12px 1px;
  }

  .cd-num {
    font-size:clamp(21px, 6vw, 24px);
    line-height:1;
  }

  .cd-label {
    font-size:clamp(8px, 2.25vw, 9.5px);
    letter-spacing:.035em;
    line-height:1.1;
    overflow-wrap:normal;
    white-space:nowrap;
  }
}

/* ============================================
   GALLERY CAROUSEL
   ============================================ */
.carousel{
  margin-top:34px;
  position:relative;
}
.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:8px;
  padding-bottom:4px;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track > div{
  flex:0 0 calc(50% - 4px);
  scroll-snap-align:start;
  aspect-ratio:3/4;
  border-radius:4px;
  overflow:hidden;
}
.carousel-track img{width:100%;height:100%;object-fit:cover;}
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:12px;
}
.carousel-dots span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ua-color-secondary-pale);
  transition:.3s;
}
.carousel-dots span.active{background:var(--ua-color-primary);width:18px;border-radius:3px;}

/* ============================================
   RSVP BACKGROUND — lihat blok lengkap ".rsvp-jawa" di bawah
   (namespace visual Jawa01) untuk styling final.
   ============================================ */


/* ============================================
   RSVP
   ============================================ */

.rsvp-form{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}
.field label{
  display:block;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ua-color-primary);
  font-weight:600;
  margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--ua-border-default);
  border-radius:8px;
  background:var(--ua-background-surface);
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ua-text-body);
  transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--ua-color-secondary-deep);
}
.field textarea{resize:vertical;min-height:84px;}
.btn-submit{
  margin-top:4px;
  padding:15px;
  background:var(--ua-color-primary);
  color:var(--ua-background-section);
  border-radius:8px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .3s;
}
.btn-submit:hover{background:var(--ua-color-primary-deep);}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;}

.rsvp-list{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:320px;
  overflow-y:auto;
  text-align:left;
  padding-right:4px;
}
.rsvp-item{
  background:var(--ua-background-surface);
  border:1px solid var(--ua-color-secondary-pale);
  border-radius:10px;
  padding:15px 17px;
}
.rsvp-item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5px;
  gap:8px;
}
.rsvp-item-name{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--ua-color-primary);font-weight:600;}
.rsvp-item-status{
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.rsvp-item-status.hadir{background:var(--ua-color-success-soft);color:var(--ua-color-success);}
.rsvp-item-status.tidak{background:var(--ua-color-danger-soft);color:var(--ua-color-danger);}
.rsvp-item-msg{font-size:14.5px;color:var(--ua-text-description);line-height:1.5;}
.rsvp-empty{text-align:center;font-size:14px;color:var(--ua-text-soft);padding:18px 0;}

/* ============================================
   GIFT
   ============================================ */
.gift-cards{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.gift-card{
  background:var(--ua-background-surface);
  border:1px solid var(--ua-color-secondary-pale);
  border-radius:12px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.gift-bank{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ua-color-secondary-deep);margin-bottom:3px;}
.gift-num{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ua-text-body);}
.gift-name{font-size:13px;color:var(--ua-text-muted);margin-top:2px;}
.btn-copy{
  flex-shrink:0;
  padding:9px 16px;
  border:1px solid var(--ua-color-primary);
  border-radius:999px;
  font-size:12px;
  color:var(--ua-color-primary);
  transition:.3s;
  white-space:nowrap;
}
.btn-copy:hover{background:var(--ua-color-primary);color:var(--ua-background-section);}
.btn-copy.copied{background:var(--ua-color-success);border-color:var(--ua-color-success);color:var(--ua-background-surface);}

/* ============================================
   CLOSING
   ============================================ */
.closing{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:flex-end;
  background:
    var(--ua-gradient-closing-base),
    url('https://images.unsplash.com/photo-1583939003579-730e3918a45a?q=80&w=1000&auto=format&fit=crop') center/cover no-repeat;
}
.closing-inner{
  width:100%;
  padding:50px 28px 40px;
  text-align:center;
  color:var(--ua-background-section);
}
.closing-text{
  font-size:15.5px;
  line-height:1.8;
  color:var(--ua-background-section-soft);
  max-width:300px;
  margin:0 auto 20px;
}
.closing-blessed{
  font-size:14px;
  letter-spacing:.1em;
  color:var(--ua-color-secondary-pale);
  margin-bottom:6px;
}
.closing-names{
  font-family:var(--font-script);
  font-style:italic;
  font-size:34px;
  color:var(--ua-background-section);
}
.closing-foot{
  margin-top:0;
  /* Footer inheritance (Universal Closing Photo -> Theme Color Blend +
     Footer Color): no explicit footer override -> --ua-closing-footer-color
     is never set -> falls through to --ua-closing-theme-color (Closing's
     own theme value, itself defaulting to the original
     --ua-color-primary-deep) -- pure CSS var() fallback, no JS "compute
     inherited value" logic needed. An explicit footer override sets
     --ua-closing-footer-color directly and wins; resetting it removes the
     property and inheritance resumes automatically. */
  background:var(--ua-closing-footer-color, var(--ua-closing-theme-color));
  padding:22px 28px 28px;
  text-align:center;
  position:relative;
}
.closing-foot-label{font-size:11px;letter-spacing:.1em;color:var(--ua-color-secondary-pale);opacity:.8;}
.closing-foot-brand{
  font-family:var(--font-script);
  font-style:italic;
  font-size:18px;
  color:var(--ua-color-secondary-pale);
  margin:4px 0 2px;
  display:none;
}
.closing-foot-logo-link{display:inline-block;line-height:0;margin:4px 0 2px;}
.closing-foot-logo-link img{height:52px;width:auto;display:inline-block;vertical-align:middle;}
.closing-foot-socials{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:14px;}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--ua-color-secondary-pale);border-radius:999px;color:var(--ua-color-secondary-pale);transition:background .3s,color .3s;}
.foot-social svg{width:17px;height:17px;}
.foot-social:hover{background:var(--ua-color-secondary-pale);color:var(--ua-color-primary-deep);}

/* ============================================
   MUSIC TOGGLE
   ============================================ */
.music-toggle{
  position:fixed;
  bottom:22px;
  right:calc(50% - 240px + 22px);
  z-index:500;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--ua-color-primary-deep);
  border:1px solid var(--ua-color-secondary);
  display:flex;align-items:center;justify-content:center;
  color:var(--ua-color-secondary-pale);
  box-shadow:var(--ua-shadow-music);
}
.music-toggle svg{width:19px;height:19px;}
.music-toggle.spin svg{animation:spin 3.5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (max-width:480px){
  .music-toggle{right:22px;}
}



/* ============================================
   FLORAL LAYER (fixed, clipped to 480px)
   ============================================ */
#floralLayer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: clip;
  pointer-events: none;
  z-index: 1;
}

.fl-img {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.05s linear;
  opacity: 0.25;
}

@media (max-width: 767px) {
  /* REGRESSION FIX (mobile geometry follow-up) — root cause, proven via
     git history + live computed-style check: before the shared mobile
     geometry fix, #floralLayer had NO explicit `position` rule at all
     (browser default `static`), so its `position:absolute` children
     resolved against the initial containing block and scrolled away with
     the page like ordinary content after the first screen. The geometry
     fix added `position:fixed` here specifically so `.fl-pl`/`.fl-pr`
     (desktop-only side floral, hidden below 768px above) sit correctly
     flanking the centered 480px card on desktop. That same `position:fixed`
     also pins EVERY OTHER child (.fl-bl, .fl-bl2, .fl-bl3, .fl-br, .fl-br2,
     .fl-br3, .fl-bb, .fl-bbl, .fl-bbr, .fl-ol, .fl-or) to the viewport on
     mobile too — they never scroll away,
     which is the "bunga transparan mengganggu saat scroll" regression.
     `.fl-pl`/`.fl-pr` being hidden above never addressed this: the other
     11 children were never hidden and were always the actual on-screen
     offenders.
     Fix: on mobile only, put `#floralLayer` back in normal flow scroll
     behavior (`position:absolute` against the initial containing block —
     NOT `static`, which combined with `overflow:clip` and no in-flow
     content would collapse this element to zero height and clip every
     child entirely). This restores the pre-fix "visible near the top,
     scrolls away like the rest of the page" behavior without touching a
     single child selector, the desktop-only `.fl-pl`/`.fl-pr` hide above,
     or anything under `min-width:768px` (desktop's fixed, side-flanking,
     parallaxed composition is completely unaffected). */
  #floralLayer .fl-pl,
  #floralLayer .fl-pr {
    display: none;
  }

  #floralLayer {
    position: absolute;
  }
}

/* Bunga kiri */
.fl-bl  { left:-12px; top:2vh;  width:130px; transform-origin: bottom left; }
.fl-bl2 { left:-5px;  top:32vh; width:85px;  transform-origin: bottom left; }
.fl-bl3 { left:0px;   top:60vh; width:95px;  transform-origin: bottom left; }
.fl-pl  { left:-18px; bottom:0; width:155px; transform-origin: bottom left; }

/* Bunga kanan */
.fl-br  { right:-12px; top:2vh;  width:130px; transform-origin: bottom right; }
.fl-br2 { right:-5px;  top:32vh; width:85px;  transform-origin: bottom right; }
.fl-br3 { right:0px;   top:60vh; width:95px;  transform-origin: bottom right; }
.fl-pr  { right:-18px; bottom:0; width:155px; transform-origin: bottom right; }

/* Bunga bawah tengah */
.fl-bb  { left:50%; transform:translateX(-50%); bottom:-8px; width:210px; transform-origin: bottom center; }

/* Ornamen kecil */
.fl-ol  { left:0;  top:48%; width:38px; }
.fl-or  { right:0; top:48%; width:38px; }

/* BL/BR corner bunga */
.fl-bbl { left:0;   bottom:80px; width:80px; transform-origin: bottom left; }
.fl-bbr { right:0;  bottom:80px; width:80px; transform-origin: bottom right; }

/* Bunga tengah bawah harus tetap hidup meski halaman tidak sedang discroll.
   Parallax lama menulis `transform` via JS, jadi motion ini memakai channel
   individual `translate`/`rotate` agar tidak saling menimpa. */
.fl-bb,
.fl-bbl,
.fl-bbr {
  will-change: transform, translate, rotate;
}
.fl-bb  { animation: flBottomCenterLiving 5.6s ease-in-out .35s infinite; }
.fl-bbl { animation: flBottomSideLiving 6.2s ease-in-out .75s infinite; }
.fl-bbr { animation: flBottomSideLiving 5.8s ease-in-out .55s infinite reverse; }

@keyframes flBottomCenterLiving {
  0%,100% { translate:0 0; rotate:-1.2deg; }
  50%     { translate:0 -9px; rotate:1.2deg; }
}
@keyframes flBottomSideLiving {
  0%,100% { translate:0 0; rotate:-1.6deg; }
  50%     { translate:0 -7px; rotate:1.6deg; }
}

/* Official outer desktop adat visual slot.
   Hidden by default so the historical outer decoration remains the master
   fallback until Template Studio provides a canonical desktop.adat-visual
   asset override. */
.desktop-adat-visual-layer {
  display: none;
}

@media (min-width: 768px) {
  html.ua-desktop-adat-visual-active body::before {
    display: none;
  }

  html.ua-desktop-adat-visual-active .cover::before {
    display: none;
  }

  html.ua-desktop-adat-visual-active #floralLayer {
    display: none;
  }

  html.ua-desktop-adat-visual-active .desktop-adat-visual-layer {
    position: fixed;
    inset: 0;
    display: block;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  html.ua-desktop-adat-visual-active .desktop-adat-visual {
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - min(100vw, 480px)) / 2);
    min-width: 0;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }

  html.ua-desktop-adat-visual-active .desktop-adat-visual-left {
    left: 0;
  }

  html.ua-desktop-adat-visual-active .desktop-adat-visual-right {
    right: 0;
  }
}

/* ============================================
   ANIMATED ELEMENTS (kupu, burung, kain)
   ============================================ */
/* Kain di atas - DIKURANGI tinggi supaya tidak nutup teks */
.fl-kain {
  position: fixed;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-width: 100vw;
  pointer-events: none;
  z-index: 11;
  opacity: 0.85;
  max-height: 160px;
  object-fit: cover;
  object-position: top;
}

/* Kupu kupu */
.fl-kupu {
  position: fixed;
  pointer-events: none;
  z-index: 312;
  width: 72px;
  opacity: 0;
  animation: kupuFly 15s ease-in-out infinite;
}
.fl-kupu:nth-child(2) { animation-delay: -7s; width: 55px; }
@keyframes kupuFly {
  0%   { left: -120px; top: 55%;  opacity: 0; }
  8%   { opacity: 0.9; }
  45%  { top: 40%; }
  65%  { top: 50%; }
  92%  { opacity: 0.9; }
  100% { left: calc(min(100vw,480px) + 120px); top: 45%; opacity: 0; }
}

/* Burung */
.fl-burungL {
  position: fixed;
  pointer-events: none;
  z-index: 311;
  width: 65px;
  opacity: 0;
  animation: burungLeft 20s linear infinite;
}
.fl-burungR {
  position: fixed;
  pointer-events: none;
  z-index: 311;
  width: 65px;
  opacity: 0;
  animation: burungRight 24s linear infinite;
  animation-delay: -11s;
}
@keyframes burungLeft {
  0%   { right:-100px; top:12%; opacity:0; }
  7%   { opacity:1; }
  93%  { opacity:1; }
  100% { right:calc(min(100vw,480px)+100px); top:8%; opacity:0; }
}
@keyframes burungRight {
  0%   { left:-100px; top:20%; opacity:0; }
  7%   { opacity:1; }
  93%  { opacity:1; }
  100% { left:calc(min(100vw,480px)+100px); top:16%; opacity:0; }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
/* Repeat on BOTH scroll in and scroll out */
.rv        { opacity:0; transform:translateY(32px);    transition:opacity .85s var(--ease),transform .85s var(--ease); }
.rv.in     { opacity:1; transform:translateY(0); }
.rv.out    { opacity:0; transform:translateY(-24px); }

.rv-l      { opacity:0; transform:translateX(-44px);   transition:opacity .85s var(--ease),transform .85s var(--ease); }
.rv-l.in   { opacity:1; transform:translateX(0); }
.rv-l.out  { opacity:0; transform:translateX(20px); }

.rv-r      { opacity:0; transform:translateX(44px);    transition:opacity .85s var(--ease),transform .85s var(--ease); }
.rv-r.in   { opacity:1; transform:translateX(0); }
.rv-r.out  { opacity:0; transform:translateX(-20px); }

.rv-z      { opacity:0; transform:scale(.86);           transition:opacity .95s var(--ease),transform .95s var(--ease); }
.rv-z.in   { opacity:1; transform:scale(1); }
.rv-z.out  { opacity:0; transform:scale(.92); }

/* stagger children */
.rv-stag > * { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rv-stag.in > * { opacity:1; transform:translateY(0); }
.rv-stag.in > *:nth-child(1){ transition-delay:.05s; }
.rv-stag.in > *:nth-child(2){ transition-delay:.18s; }
.rv-stag.in > *:nth-child(3){ transition-delay:.30s; }
.rv-stag.in > *:nth-child(4){ transition-delay:.42s; }


/* ============================================
   ORNAMEN DEKORATIF MOZA — restorasi RSVP & Wedding Gift
   Aset asli project di-reuse (background-image, base64 sekali).
   Semua pointer-events:none, di bingkai section, TIDAK menutupi
   form / input / dropdown / textarea / tombol / rekening.
   ============================================ */
.section.has-moza{ padding-top:104px; }
.moza-deco{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.section.has-moza > :not(.moza-deco){ position:relative; z-index:18; }
.moza-deco .mz{
  position:absolute; display:block;
  background-repeat:no-repeat; background-position:center;
  background-size:contain;
}

/* Pita songket atas */
.mz-songket-a{ top:0;    left:0; right:0; width:100%; aspect-ratio:4.2975; opacity:.95; background-image:url(assets/decor/moza-songket-top.png); }
.mz-songket-b{ top:30px; left:0; right:0; width:100%; aspect-ratio:3.0233; opacity:.9;  background-image:url(assets/decor/moza-songket-secondary.png); background-position:top center; }

/* Motif silang merah sudut atas */
.mz-orn-l{ top:72px; left:4px;  width:40px; aspect-ratio:0.6103; opacity:.85; background-image:url(assets/decor/moza-ornament-left.png); }
.mz-orn-r{ top:72px; right:4px; width:40px; aspect-ratio:0.6103; opacity:.85; background-image:url(assets/decor/moza-ornament-right.png); }

/* Merpati animasi (mengapung di sisi, di belakang konten) */
.mz-burung-l{ top:120px; left:6px;  width:58px; aspect-ratio:1; opacity:.95; background-image:url(assets/decor/moza-bird-left.gif); animation:mzFloatL 9s ease-in-out infinite; }
.mz-burung-r{ top:118px; right:6px; width:58px; aspect-ratio:1; opacity:.95; background-image:url(assets/decor/moza-bird-right.gif); animation:mzFloatR 10s ease-in-out infinite; }
@keyframes mzFloatL{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes mzFloatR{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Kupu-kupu animasi */
.mz-kupu{ top:330px; right:20%; width:80px; aspect-ratio:1.7544; opacity:.95; background-image:url(assets/decor/moza-butterfly.gif); animation:mzKupu 11s ease-in-out infinite; }
@keyframes mzKupu{
  0%{transform:translate(0,0) rotate(0)}
  35%{transform:translate(-24px,16px) rotate(-6deg)}
  70%{transform:translate(14px,28px) rotate(5deg)}
  100%{transform:translate(0,0) rotate(0)}
}

/* Lanskap sepia sebagai latar bawah (fade halus, tidak menutupi teks) */
.mz-land{ bottom:0; opacity:.28;
  -webkit-mask-image:var(--ua-mask-landscape);
          mask-image:var(--ua-mask-landscape); }
.mz-land-b{  left:0;  width:62%; aspect-ratio:0.8187; background-image:url(assets/decor/moza-landscape-left.png); background-position:bottom left; }
.mz-land-b2{ right:0; width:46%; aspect-ratio:0.4783; background-image:url(assets/decor/moza-landscape-right.png); background-position:bottom right; }

/* Pohon di sudut bawah (membingkai, menjorok keluar tepi) */
.mz-pohon-l{ bottom:0; left:-46px;  width:150px; aspect-ratio:0.6264; opacity:.9; background-image:url(assets/decor/moza-tree-left.png); background-position:bottom left; }
.mz-pohon-r{ bottom:0; right:-46px; width:150px; aspect-ratio:0.6635; opacity:.9; background-image:url(assets/decor/moza-tree-right.png); background-position:bottom right; }

/* Bunga lili di sudut bawah */
.mz-bunga-l{ bottom:8px; left:-22px;  width:92px; aspect-ratio:0.5607; opacity:.95; background-image:url(assets/decor/moza-flower-left.png); background-position:bottom left; }
.mz-bunga-r{ bottom:8px; right:-22px; width:92px; aspect-ratio:0.5607; opacity:.95; background-image:url(assets/decor/moza-flower-right.png); background-position:bottom right; }

/* ============================================
   ORNAMEN BUNGA — LIVING ANIMATION (v2)
   Floating (translate) + Swing (rotate) + Parallax (transform via JS)
   3 channel transform terpisah supaya tidak konflik
   dengan animasi lama (burung/kupu yang memakai `transform`).
   ============================================ */

/* --- FLOATING: gerak naik–turun, pakai properti `translate` --- */
@keyframes mzFloatA{ 0%,100%{ translate:0 0; } 50%{ translate:0 -16px; } }
@keyframes mzFloatB{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
@keyframes mzFloatC{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }

/* --- SWING: goyang kiri–kanan, pakai properti `rotate`, infinite alternate --- */
@keyframes mzSwingA{ from{ rotate:-6deg; } to{ rotate:6deg; } }
@keyframes mzSwingB{ from{ rotate:-4.5deg; } to{ rotate:4.5deg; } }
@keyframes mzSwingC{ from{ rotate:-3.5deg; } to{ rotate:3.5deg; } }

/* Bunga (anchored bawah) — bergoyang dari pangkalnya */
.mz-bunga-l{
  transform-origin:bottom center; will-change:translate,rotate,transform;
  animation:mzFloatA 7s ease-in-out 0s infinite,
            mzSwingA 5s ease-in-out -1.2s infinite alternate;
}
.mz-bunga-r{
  transform-origin:bottom center; will-change:translate,rotate,transform;
  animation:mzFloatB 8.5s ease-in-out -2s infinite,
            mzSwingB 6.2s ease-in-out -3s infinite alternate;
}

/* Pohon (besar, gerak lebih halus) — bergoyang dari pangkalnya */
.mz-pohon-l{
  transform-origin:bottom center; will-change:translate,rotate,transform;
  animation:mzFloatC 9.5s ease-in-out -1s infinite,
            mzSwingC 7s ease-in-out -0.5s infinite alternate;
}
.mz-pohon-r{
  transform-origin:bottom center; will-change:translate,rotate,transform;
  animation:mzFloatC 10s ease-in-out -3.5s infinite,
            mzSwingC 7.8s ease-in-out -2.2s infinite alternate;
}

/* Ornamen samping atas — ayunan pendulum dari atas */
.mz-orn-l{
  transform-origin:top center; will-change:translate,rotate,transform;
  animation:mzFloatB 6.5s ease-in-out 0s infinite,
            mzSwingB 4.5s ease-in-out -0.8s infinite alternate;
}
.mz-orn-r{
  transform-origin:top center; will-change:translate,rotate,transform;
  animation:mzFloatA 7.2s ease-in-out -1.5s infinite,
            mzSwingA 5.4s ease-in-out -2.5s infinite alternate;
}

@media (prefers-reduced-motion: reduce){
  .mz-burung-l,.mz-burung-r,.mz-kupu,
  .mz-bunga-l,.mz-bunga-r,.mz-pohon-l,.mz-pohon-r,.mz-orn-l,.mz-orn-r{
    animation:none !important;
    translate:none !important;
    rotate:none !important;
    transform:none !important;
  }
}

/* ===== PROJECT B : OPENING SCENE STYLES (#scene-styles, verbatim) ===== */
/* ================= OPENING SCENE (build-up -> identik cover) ================= */
.sc-wrap{
  position:fixed; inset:0; z-index:900;
  max-width:480px; margin:0 auto;
  background:var(--ua-background-section);
  display:none; opacity:0;
  transition:opacity .6s ease;
  overflow:hidden;
}
.sc-wrap.sc-show{opacity:1;}
.sc-wrap.sc-hide{opacity:0; pointer-events:none;}

/* stage terkunci ke rasio komposit cover (768:1622), anchored top -> persis cover */
.sc-stage{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100%; aspect-ratio:768 / 1622; min-height:100%;
  background:
    var(--ua-gradient-ayat-stage);
  overflow:hidden;
}
/* lapisan komposit penuh = jaminan tampilan akhir identik dengan cover */
#sc-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; z-index:18;
}

/* slot = wrapper untuk animasi MASUK (transform); anak = aset (background) + goyangan hidup */
.sc-slot{ position:absolute; opacity:0; will-change:transform,opacity; }
.sc-slot > *{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; margin:0 !important;
  background-repeat:no-repeat; background-size:contain;
}
/* aset baru dari ZIP (bridge & bunga sudut bawah) */
.sc-img-bridge{ background-image:url(assets/decor/scene-bridge.png); background-position:bottom center;
  transform-origin:bottom center; animation:scBob 6s ease-in-out infinite; }
.sc-img-bl{ background-image:url(assets/decor/scene-flower-left.png); background-position:bottom left;
  transform-origin:bottom center; animation:scSwayB 6.5s ease-in-out infinite alternate; }
.sc-img-br{ background-image:url(assets/decor/scene-flower-right.png); background-position:bottom right;
  transform-origin:bottom center; animation:scSwayB 7.2s ease-in-out -1.5s infinite alternate; }

/* posisi & ukuran akhir (relatif stage = relatif komposit) */
.sc-pohon-l { bottom:0;   left:-3%;  width:34%; aspect-ratio:280/447; z-index:2; }
.sc-pohon-r { bottom:0;   right:-3%; width:34%; aspect-ratio:280/422; z-index:2; }
.sc-bunga-l { bottom:3%;  left:-3%;  width:27%; aspect-ratio:180/321; z-index:3; }
.sc-bunga-r { bottom:3%;  right:-3%; width:27%; aspect-ratio:180/321; z-index:3; }
.sc-bridge  { bottom:9%;  left:50%;  width:58%; aspect-ratio:700/505; z-index:4; }
.sc-bunga-bl{ bottom:0;   left:-2%;  width:31%; aspect-ratio:200/239; z-index:5; }
.sc-bunga-br{ bottom:0;   right:-2%; width:31%; aspect-ratio:200/239; z-index:5; }
.sc-songket { top:0;      left:0;    width:100%;aspect-ratio:520/121; z-index:6; }
.sc-orn-l   { top:9%;     left:3%;   width:13%; aspect-ratio:130/213; z-index:6; }
.sc-orn-r   { top:9%;     right:3%;  width:13%; aspect-ratio:130/213; z-index:6; }
.sc-bird-l  { top:30%;    left:11%;  width:16%; aspect-ratio:1;       z-index:7; }
.sc-bird-r  { top:32%;    right:11%; width:16%; aspect-ratio:1;       z-index:7; }
.sc-kupu    { top:52%;    left:34%;  width:22%; aspect-ratio:200/114; z-index:7; }

/* ---- keyframes MASUK (sekali jalan) ---- */
@keyframes scInL  { from{transform:translateX(-130%);opacity:0} 60%{opacity:1} to{transform:translateX(0);opacity:1} }
@keyframes scInR  { from{transform:translateX(130%); opacity:0} 60%{opacity:1} to{transform:translateX(0);opacity:1} }
@keyframes scDown { from{transform:translateY(-130%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes scPop  { from{transform:translateY(42%) scale(.84);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
@keyframes scFade { from{opacity:0} to{opacity:1} }
@keyframes scBgIn { from{opacity:0} to{opacity:1} }
@keyframes scBridgeUp{ from{transform:translate(-50%,150%);opacity:0} 82%{transform:translate(-50%,-4%);opacity:1} to{transform:translate(-50%,0);opacity:1} }
/* hidup terus (setelah scene jadi) */
@keyframes scBob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes scSwayB { from{transform:rotate(-1.6deg)} to{transform:rotate(1.6deg)} }

/* base transform bridge wrapper (rest) supaya tetap center */
.sc-bridge{ transform:translate(-50%,0); }

/* ---- jalankan timeline saat .sc-play ditambahkan ---- */
.sc-wrap.sc-play #sc-bg        { animation:scBgIn 1.2s ease .9s both; }
.sc-wrap.sc-play .sc-pohon-l   { animation:scInL  .85s var(--ease) .15s both; }
.sc-wrap.sc-play .sc-pohon-r   { animation:scInR  .85s var(--ease) .15s both; }
.sc-wrap.sc-play .sc-songket   { animation:scDown .8s  var(--ease) .50s both; }
.sc-wrap.sc-play .sc-bridge    { animation:scBridgeUp 1.1s var(--ease) 1.6s both; }
.sc-wrap.sc-play .sc-bunga-bl  { animation:scPop  .7s  var(--ease) 2.30s both; }
.sc-wrap.sc-play .sc-bunga-br  { animation:scPop  .7s  var(--ease) 2.50s both; }
.sc-wrap.sc-play .sc-bunga-l   { animation:scPop  .7s  var(--ease) 2.70s both; }
.sc-wrap.sc-play .sc-bunga-r   { animation:scPop  .7s  var(--ease) 2.90s both; }
.sc-wrap.sc-play .sc-bird-l    { animation:scFade .8s  ease 3.00s both; }
.sc-wrap.sc-play .sc-bird-r    { animation:scFade .8s  ease 3.20s both; }
.sc-wrap.sc-play .sc-orn-l     { animation:scDown .6s  var(--ease) 3.20s both; }
.sc-wrap.sc-play .sc-orn-r     { animation:scDown .6s  var(--ease) 3.45s both; }
.sc-wrap.sc-play .sc-kupu      { animation:scFade .8s  ease 3.40s both; }

/* mode hemat-gerak: tampilkan langsung tanpa timeline */
.sc-wrap.sc-instant #sc-bg{ opacity:1 !important; }
.sc-wrap.sc-instant .sc-slot{ opacity:1 !important; }
.sc-wrap.sc-instant .sc-bridge{ transform:translate(-50%,0) !important; }

@media (prefers-reduced-motion: reduce){
  .sc-wrap.sc-play #sc-bg,.sc-wrap.sc-play .sc-slot{ animation:none !important; }
  .sc-img-bridge,.sc-img-bl,.sc-img-br{ animation:none !important; }
}


/* ============================================================
   PROJECT A : OPENING ANIMATION  (scoped under .oa-scene)
   ============================================================ */
/* ===== OPENING ANIMATION OVERLAY (Project A, full-screen) ===== */
#openingAnim{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  opacity:0;
  background:var(--ua-color-primary-deep);
  transition:opacity .8s ease;
  overflow:hidden;
}
#openingAnim.oa-show{ opacity:1; }
#openingAnim.oa-hide{ opacity:0; pointer-events:none; }

#openingAnim .oa-scene{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    position:relative;
    overflow:hidden;

    animation:sceneMove 8s ease-out forwards;
    transform-origin:center center;
}

.oa-scene .bg {
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  display:block;

  transform:scale(1.35);

  animation:bgZoomOut 8s ease-out forwards;
}

.oa-scene .tree-left {
    position:absolute;

    left:-120px;
    top:0;

    width:380px;
    height:100%;

    z-index:50;

    animation:openLeft 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

.oa-scene .tree-right {
    position:absolute;

    right:-120px;
    top:0;

    width:380px;
    height:100%;

    z-index:50;

    animation:openRight 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes openLeft{

    0%{
        transform:
            translateX(0)
            scale(1);
    }

    100%{
        transform:
            translateX(-350px)
            scale(1.1);
    }
}

@keyframes openRight{

    0%{
        transform:
            translateX(0)
            scale(1);
    }

    100%{
        transform:
            translateX(350px)
            scale(1.1);
    }
}

@keyframes bgZoomOut{

  0%{
    transform:scale(1.35);
  }

  30%{
    transform:scale(1.15);
  }

  100%{
    transform:scale(1);
  }

}

.oa-scene .river {
    position:absolute;

    left:0;
    bottom:-80px;

    width:100%;

    z-index:10;

    opacity:0;

    animation:riverUp 2s ease forwards;
    animation-delay:.4s;
}

.oa-scene .bridge {
    position:absolute;

    left:50%;
    bottom:-120px;

    width:95%;

    transform:translateX(-50%);

    z-index:40;

    opacity:0;

    animation:bridgeUp 2s ease forwards;
    animation-delay:.8s;
}

@keyframes riverUp{

    from{
        bottom:-80px;
        opacity:0;
    }

    to{
        bottom:0;
        opacity:1;
    }

}

@keyframes bridgeUp{

    from{
        bottom:-120px;
        opacity:0;
        transform:translateX(-50%) scale(.9);
    }

    to{
        bottom:40px;
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

.oa-scene .flower-left {
    position:absolute;

    left:-20px;
    bottom:-120px;

    width:230px;

    z-index:30;

    opacity:0;

    transform-origin:bottom center;

    animation:
        flowerGrowLeft 2.5s ease-out forwards,
        flowerSwingLeft 4s ease-in-out infinite;

    animation-delay:
    .5s,
    2s;
}

.oa-scene .flower-right {
    position:absolute;

    right:-20px;
    bottom:-120px;

    width:230px;

    z-index:30;

    opacity:0;

    transform-origin:bottom center;

    animation:
        flowerGrowRight 2.5s ease-out forwards,
        flowerSwingRight 4s ease-in-out infinite;

    animation-delay:
    .5s,
    2s;
}

@keyframes flowerGrowLeft{

    from{
        opacity:0;
        transform:translateY(180px) scale(.5);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes flowerGrowRight{

    from{
        opacity:0;
        transform:translateY(180px) scale(.5);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes flowerSwingLeft{

    0%{
        transform:rotate(-2deg);
    }

    50%{
        transform:rotate(2deg);
    }

    100%{
        transform:rotate(-2deg);
    }

}

@keyframes flowerSwingRight{

    0%{
        transform:rotate(2deg);
    }

    50%{
        transform:rotate(-2deg);
    }

    100%{
        transform:rotate(2deg);
    }

}

.oa-scene .flower-center {
    position:absolute;

    left:50%;
    bottom:-40px;

    width:420px;

    transform:translateX(-50%);

    z-index:35;

    opacity:0;

    animation:
        flowerCenterGrow 2s ease-out forwards,
        flowerCenterSwing 5s ease-in-out infinite;

    animation-delay:
        1.5s,
        3.5s;
}

@keyframes flowerCenterGrow{

    from{
        opacity:0;
        transform:translateX(-50%) translateY(200px) scale(.5);
    }

    to{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }

}

@keyframes flowerCenterSwing{

    0%{
        transform:translateX(-50%) rotate(-1deg);
    }

    50%{
        transform:translateX(-50%) rotate(1deg);
    }

    100%{
        transform:translateX(-50%) rotate(-1deg);
    }

}

.oa-scene .tree-grow-left {
    position:absolute;

    left:-40px;
    bottom:120px;

    width:220px;

    z-index:15;

    opacity:0;

    transform-origin:bottom left;

    animation:
        treeGrowLeft 1.2s ease-out forwards,
        treeSwingLeft 5s ease-in-out infinite;

    animation-delay:
      3.2s,
      4.4s;
}

.oa-scene .tree-grow-right {
    position:absolute;

    right:-40px;
    bottom:120px;

    width:220px;

    z-index:15;

    opacity:0;

    transform-origin:bottom right;

    animation:
        treeGrowRight 1.2s ease-out forwards,
        treeSwingRight 5s ease-in-out infinite;

    animation-delay:
        2.2s,
        3.4s;
}

@keyframes treeGrowLeft{
    0%{
        opacity:0;
        transform:translateY(150px) scale(.3);
    }

    100%{
        opacity:.7;
        transform:translateY(0) scale(1);
    }
}

@keyframes treeGrowRight{
    0%{
        opacity:0;
        transform:translateY(150px) scale(.3);
    }

    100%{
        opacity:.7;
        transform:translateY(0) scale(1);
    }
}

@keyframes treeSwingLeft{
    0%{ transform:rotate(-2deg); }
    50%{ transform:rotate(2deg); }
    100%{ transform:rotate(-2deg); }
}

@keyframes treeSwingRight{

    0%{
        transform:rotate(1deg);
    }

    50%{
        transform:rotate(-1deg);
    }

    100%{
        transform:rotate(1deg);
    }

}

.oa-scene /* ORNAMEN ATAS */

.orn-top {
    position:absolute;

    top:-120px;
    left:0;

    width:100%;

    z-index:60;

    opacity:0;

    animation:ornTopDown .7s ease-out forwards;
    animation-delay:2.8s;
}

@keyframes ornTopDown{

    from{
        top:-120px;
        opacity:0;
    }

    to{
        top:0;
        opacity:1;
    }
}

.oa-scene /* BUNGA SAMPING KIRI */

.flower-side-left {
    position:absolute;

    left:-20px;
    bottom:220px;

    width:190px;

    z-index:12;

    opacity:0;

    animation:flowerSideLeft 1.5s ease-out forwards;
    animation-delay:3.2s;
}

@keyframes flowerSideLeft{

    0%{
        opacity:0;
        transform:
            translateY(120px)
            scale(.7);
    }

    70%{
        opacity:1;
        transform:
            translateY(-10px)
            scale(1.08);
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

.oa-scene /* BUNGA SAMPING KANAN */

.flower-side-right {
    position:absolute;

    right:-20px;
    bottom:220px;

    width:190px;

    z-index:12;

    opacity:0;

    animation:flowerSideRight 1.5s ease-out forwards;
    animation-delay:3.2s;
}

@keyframes flowerSideRight{

    0%{
        opacity:0;
        transform:
            translateY(120px)
            scale(.7);
    }

    70%{
        opacity:1;
        transform:
            translateY(-10px)
            scale(1.08);
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

.oa-scene .bird-left {
    position:absolute;

    top:140px;
    left:-120px;

    width:90px;

    z-index:65;

    opacity:0;

    animation:birdLeftFly 2s ease-out forwards;
    animation-delay:3s;
}

@keyframes birdLeftFly{

    0%{
        opacity:0;
        left:-120px;
        transform:scale(.7) rotate(-15deg);
    }

    100%{
        opacity:1;
        left:25px;
        transform:scale(1) rotate(0deg);
    }
}

.oa-scene .bird-right {
    position:absolute;

    top:140px;
    right:-120px;

    width:90px;

    z-index:65;

    opacity:0;

    animation:birdRightFly 2s ease-out forwards;
    animation-delay:3s;
}

@keyframes birdRightFly{

    0%{
        opacity:0;
        right:-120px;
        transform:scale(.7) rotate(15deg);
    }

    100%{
        opacity:1;
        right:25px;
        transform:scale(1) rotate(0deg);
    }
}

.oa-scene .frame {
    position:absolute;

    left:50%;
    top:95px;

    width:92%;

    transform:translateX(-50%);

    z-index:70;
}

.oa-scene .frame-fill {
    width:100%;
    display:block;

    opacity:0;

    animation:frameFillMove 2s ease forwards;
    animation-delay:4s;
}

@keyframes frameFillMove{

    0%{
        opacity:0;
        transform:scale(.3);
    }

    60%{
        opacity:1;
        transform:scale(1.05);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

.oa-scene .frame-line{
    position:absolute;
    left:0;
    top:0;
    width:100%;

    opacity:0;

    animation:frameLine 2.5s ease-in-out forwards;
    animation-delay:5.5s;
}



@keyframes frameLine{

    0%{
        opacity:0;
    }

    30%{
        opacity:.15;
    }

    60%{
        opacity:.45;
    }

    80%{
        opacity:.75;
    }

    100%{
        opacity:1;
    }

}

@keyframes sceneMove{
}
/* ===== OPENING ANIMATION (#openingAnim) FRAME CAPTION — TIDAK DIUBAH =====
   Masih dipakai oleh overlay #openingAnim (belum disentuh, di luar cakupan
   Hero/Cover). Section Hero Jawa memakai .cs-frame-caption sendiri (di bawah). */

/* Ending of the animation: the two names + the event date, shown inside the frame. */
.oa-scene .frame-caption{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  width:74%;
  text-align:center;
  z-index:80;
  opacity:0;
  animation:fcIn 1.6s ease forwards;
  animation-delay:6.4s;
  pointer-events:none;
}
.oa-scene .fc-eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color:var(--ua-color-secondary-deep);
  margin:0;
}
.oa-scene .fc-names{
  font-family:var(--font-script);
  font-style:italic;
  font-weight:700;
  font-size:30px;
  line-height:1.1;
  color:var(--ua-color-primary-strong);
  margin:8px 0 6px;
}
.oa-scene .fc-rule{
  display:block;
  width:54px;
  height:1px;
  margin:8px auto;
  background:var(--ua-color-accent-muted);
}
.oa-scene .fc-date{
  font-family:var(--font-display);
  letter-spacing:.20em;
  font-size:13px;
  color:var(--ua-color-primary-strong);
  margin:0;
}
@keyframes fcIn{
  from{ opacity:0; transform:translate(-50%,-44%); }
  to  { opacity:1; transform:translate(-50%,-50%); }
}

 /* ===========================
   AYAT
=========================== */

.ayat-section{
    background:var(--ua-background-section-dark);
    padding:80px 20px;
}

.ayat-card{
    max-width:480px;
    margin:auto;
    background:var(--ua-background-ayat-surface);
    border-radius:40px;
    overflow:hidden;
    box-shadow:var(--ua-shadow-card-warm);
}

/* FOTO */

.ayat-photo{
   height:400px;
    overflow:hidden;
}

.ayat-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ISI */

.ayat-content{

    position:relative;

    padding:60px 45px;

    text-align:center;

    background:var(--ua-gradient-ayat-content);

    background-size:cover;

    background-position:center;
}

/* bunga samar */

.ayat-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("assets/decor/moza-flower-bottom.png") center bottom no-repeat;

    background-size:100%;

    opacity:.12;

    pointer-events:none;
}

.ayat-title{
    position:relative;
    z-index:2;
    font-size:52px;
    color:var(--ua-color-primary-strong);
    font-family:var(--font-script);
    margin-bottom:16px;
    line-height:1;
}

.ayat-text{
    position:relative;
    z-index:2;
    font-size:16px;
    line-height:2;
    color:var(--ua-color-info);
    font-style:italic;
    margin-bottom:24px;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
}

.ayat-source{
    position:relative;
    z-index:2;
    font-size:24px;
    color:var(--ua-color-ink-strong);
    font-weight:700;
}

/* awal */

.ayat-card-anim{
    opacity:0;
    transition:opacity .8s ease;
}

.ayat-photo-anim{
    opacity:0;
    transform:translateY(-80px);
    transition:1s ease;
}

.ayat-content-anim{
    opacity:0;
    transform:translateY(60px);
    transition:1s ease .25s;
}

/* saat tampil */

.ayat-card-anim.in{
    opacity:1;
}

.ayat-photo-anim.in{
    opacity:1;
    transform:translateY(0);
}

.ayat-content-anim.in{
    opacity:1;
    transform:translateY(0);
}

/* ===========================
   AYAT — namespace visual Jawa01
   (class engine ayat-section/ayat-card-anim/ayat-photo-anim/ayat-content-anim
   dipertahankan untuk ayatObserver di script.js; seluruh tampilan di-override
   lewat class kedua .ayat-jawa* di bawah ini)
=========================== */

.ayat-jawa{
    background:var(--ua-gradient-solid-section);
    padding:64px 24px;
}

.ayat-jawa-card{
    max-width:480px;
    border-radius:28px;
    box-shadow:var(--ua-shadow-card-deep);
}

.ayat-jawa-photo{
    height:360px;
}

.ayat-jawa-content{
    padding:48px 36px 44px;
    background:var(--ua-background-section);
}

.ayat-jawa-content::before{
    background:url("assets/decor/batik.png") center no-repeat;
    background-size:220px;
    opacity:.08;
}

/* Watermark wayang sesuai storyboard 03-profile.jpg — di belakang teks,
   batik di atas tetap jadi layer paling belakang (::before), wayang di atasnya (::after) */
.ayat-jawa-content::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("assets/decor/wayang-left.png"), url("assets/decor/wayang-right.png");
    background-repeat:no-repeat, no-repeat;
    background-position:left -30px center, right -30px center;
    background-size:210px auto, 210px auto;
    opacity:.12;
    pointer-events:none;
    display:none;
}

.ayat-ornament{
    position:absolute;
    left:-30px;
    top:50%;
    width:210px;
    height:auto;
    opacity:.12;
    transform:translateY(-50%);
    pointer-events:auto;
    z-index:18;
}

.ayat-ornament-anim{
    transition:1s ease .25s;
}

.ayat-jawa-title{
    font-size:46px;
    color:var(--ua-color-primary);
    letter-spacing:.02em;
}

.ayat-jawa-text{
    color:var(--ua-text-body);
    font-family:var(--font-body);
    max-width:300px;
}

.ayat-jawa-source{
    color:var(--ua-color-primary-deep);
    font-family:var(--font-display);
    letter-spacing:.03em;
}

.ayat-jawa .ayat-photo-anim,
.ayat-jawa .ayat-content-anim{
    transition-timing-function:var(--ease);
}

/* ============================================================
   BUNGA — dikendalikan penuh oleh JS (entrance + float + parallax).
   Matikan keyframe lama (translate/rotate) khusus bunga agar tidak
   dobel dengan float dari JS. Posisi & ukuran TIDAK diubah.
   ============================================================ */
.mz-bunga-l,
.mz-bunga-r{
  animation: none !important;   /* hentikan mzFloat/mzSwing untuk bunga */
  translate: none !important;   /* channel float lama dinetralkan */
  rotate: none !important;      /* channel swing lama dinetralkan   */
  transform-origin: bottom center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
 
/* ============================================
   ORNAMEN MEMPELAI
   ============================================ */

/* Ornamen kiri */
.orn-left{
    position:absolute;
    left:0;
    top:40px;
    width:90px;
    z-index:2;
    pointer-events:none;
}

/* Ornamen kanan */
.orn-right{
    position:absolute;
    right:0;
    top:40px;
    width:90px;
    z-index:2;
    pointer-events:none;
}

/* Bunga kiri bawah */
.flower-bottom-left{
    position:absolute;
    left:-10px;
    bottom:0;
    width:160px;
    z-index:2;
    transform-origin:bottom left;
    animation:flowerSwingLeft 6s ease-in-out infinite;
}

/* Bunga kanan bawah */
.flower-bottom-right{
    position:absolute;
    right:-10px;
    bottom:0;
    width:160px;
    z-index:2;
    transform-origin:bottom right;
    animation:flowerSwingRight 6s ease-in-out infinite;
}

/* =====================================================================
   MEMPELAI — KARTU "YANG BERBAHAGIA" (redesain sesuai referensi image 3)
   - Kartu berbingkai emas ganda
   - Foto melengkung (arch/pigura) dengan ring emas + bunga lili di kaki
   - Songket + bunga sudut atas, sulur emas samping, bunga sudut bawah
   - Semua bunga bergoyang kiri-kanan (sway) terus-menerus
   CATATAN: angka posisi (top/left/width) bersifat awal — sesuaikan sedikit
   di browser dengan ukuran asli file PNG di folder /assets.
   ===================================================================== */
.couple-v2{
  padding:0;
  background:var(--ua-background-section);
  overflow:hidden;            /* cegah scrollbar dari bunga yang meluber */
}
.couple-v2 .cardframe{
  position:relative;
  max-width:480px;
  margin:0 auto;
  padding:92px 26px 104px;    /* ruang songket atas & bunga bawah */
  background:var(--ua-background-section);
  isolation:isolate;
  overflow:hidden;
}
/* garis bingkai emas ganda mengelilingi kartu */
.couple-v2 .cardframe::before{
  content:"";
  position:absolute; inset:10px;
  border:1.5px solid var(--ua-color-secondary-deep);
  box-shadow:var(--ua-shadow-frame-border);
  pointer-events:none; z-index:18;
}

/* konten di atas semua dekorasi */
.couple-v2 .cf-body{ position:relative; z-index:3; padding-top:26px; }
.couple-v2 .cf-body .body-text{ margin-top:4px; max-width:300px; }
.couple-v2 .cv-intro-title{
  font-family:var(--font-script, var(--font-display)); font-style:italic;
  font-size:30px; line-height:1.15; color:var(--ua-color-primary);
  max-width:300px; margin:0 auto 12px;
}
.couple-v2 .cv-heading{ margin-bottom:30px; }   /* batalkan gap 120px lama */

/* ---- songket + bunga sudut atas ---- */
.couple-v2 .cf-top{ position:absolute; top:0; left:0; width:100%; z-index:2; pointer-events:none; }
.couple-v2 .cf-songket{ display:block; width:100%; }
.couple-v2 .cf-topflower{ position:absolute; top:-4px; width:auto; height:92px; }
.couple-v2 .cf-topflower-l{ left:-6px;  transform-origin:top left; }
.couple-v2 .cf-topflower-r{ right:-6px; transform-origin:top right; }

/* ---- medali bunga kecil ---- */
.couple-v2 .cf-medal{ position:absolute; width:34px; z-index:2; pointer-events:none; }
.couple-v2 .cf-medal-l{ left:16px;  top:46%; }
.couple-v2 .cf-medal-r{ right:16px; top:46%; }

/* ---- bunga sudut bawah ---- */
.couple-v2 .cf-botflower{ position:absolute; bottom:0; width:176px; z-index:4; pointer-events:none; }
.couple-v2 .cf-botflower-l{ left:-10px;  transform-origin:bottom left; }
.couple-v2 .cf-botflower-r{ right:-10px; transform-origin:bottom right; }

/* ---- bingkai foto melengkung (tanpa bunga di kaki foto) ---- */
.couple-v2 .couple-block{ margin-top:34px; }
.couple-v2 .photo-frame{ position:relative; width:170px; margin:0 auto 8px; }
.couple-v2 .cphoto{
  position:relative;
  width:170px; height:232px; margin:0 auto;
  overflow:hidden;
  border-radius:120px 120px 16px 16px;     /* bentuk arch */
  border:2px solid var(--ua-color-secondary);
  box-shadow:var(--ua-shadow-image-ring);
  background:var(--ua-background-section);
}
.couple-v2 .cphoto img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ===========================
   GROW-IN — utilitas entrance "tumbuh dari luar layar" dipakai bersama oleh
   Couple & Event (storyboard terbaru). Memakai properti CSS independen
   `translate`/`scale` (BUKAN `transform`) supaya tidak bentrok dengan
   `rotate` yang dipakai animasi goyang (.sway-l/.sway-r) — keduanya jalan
   bersamaan tanpa saling menimpa. Class "in" ditambahkan oleh <script> baru
   di akhir index.html (IntersectionObserver, tidak mengubah script.js lama).
=========================== */
.grow-in{
  translate: var(--gx, 0px) var(--gy, 0px);
  scale: var(--gs, .5);
  opacity: 0;
  will-change: translate, rotate, scale; /* jaga browser tetap compositing rotate (sway) setelah transisi translate/scale selesai — pola sama seperti .mz-bunga-l Palembang */
  transition: translate 1.2s cubic-bezier(.25,.85,.3,1.15),
              scale 1.2s cubic-bezier(.25,.85,.3,1.15),
              opacity 1s ease;
}
.grow-in.in{
  translate: 0 0;
  scale: 1;
  opacity: 1;
}
.bg-zoom{ transition: background-size 1.3s cubic-bezier(.25,.85,.3,1.05); }
@media (prefers-reduced-motion: reduce){
  .grow-in{ transition:none; translate:0 0; scale:1; opacity:1; }
  .bg-zoom{ transition:none; }
}

/* ===========================
   COUPLE — namespace visual Jawa01
   (class engine couple-v2 dipertahankan; class reveal generik rv/rv-l/rv-r/rv-z/stagger
   tetap dipakai apa adanya supaya observer reveal generik tetap jalan)
   Posisi dekorasi diambil presisi dari Couple.psd (canvas 961x2136):
   Bunga-bawah top:0 full-width, Bunga-L/R top:12.5% w:14.3%,
   Buput-L bottom:6% w:26.7%, Buput-R bottom:10.4% w:34.6%, A9 bottom:-8.6% full-width.
=========================== */
.couple-jawa .cardframe::before{ display:none; } /* bingkai emas ganda ala Palembang tidak dipakai — storyboard Jawa polos krem + bunga sudut */
/* Background scene untuk kartu mempelai. */
.couple-jawa .cardframe{
  /* wash krem transparan di atas cover.png supaya pudar/berkabut seperti PSD,
     bukan tampil tajam/solid seperti sebelumnya */
  background:
    var(--ua-gradient-couple-background-wash),
    var(--ua-background-section);
}
.couple-jawa .couple-adat-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  z-index:0;
}
.couple-jawa .cf-deco{
  position:absolute;
  pointer-events:none;
  z-index:2;
}
.couple-jawa .cf-deco-bawah{ top:-28px; left:0; width:100%; } /* ganti aset ke Bunga-atas.png yang sudah orientasi benar; digeser naik supaya rapat ke tepi atas card, tidak menyisakan celah */
.couple-jawa .cf-deco-bungaL{ top:12.5%; left:0; width:14.3%; }
.couple-jawa .cf-deco-bungaR{ top:12.5%; left:87.3%; width:14.3%; }
.couple-jawa .cf-deco-buputL{ bottom:6%; left:-1.9%; width:26.7%; }
.couple-jawa .cf-deco-buputR{ bottom:6%; right:-1.9%; width:26.7%; } /* dikoreksi: posisi asli layer "Buput-R.png" di PSD ternyata di tengah (kesalahan file sumber) — posisi visual benar mengikuti "Layer 17" yang mirror presisi Buput-L di pojok kanan */
.couple-jawa .cf-deco-a9{ bottom:-8.6%; left:0; width:100%; }
/* Kupu-kupu tambahan di area bunga bawah, sesuai referensi gambar */
.couple-jawa .cf-deco-kupu-l,
.couple-jawa .cf-deco-kupu-r{ bottom:14%; width:60px; z-index:3; }
.couple-jawa .cf-deco-kupu-l{ left:8%; }
.couple-jawa .cf-deco-kupu-r{ right:8%; }
/* Ukuran frame foto diukur presisi dari komposit Couple.psd (area cream fill 355x479px
   pada canvas 961x2136 -> 177x239px pada lebar app 480px) */
.couple-jawa .photo-frame{ width:177px; }
.couple-jawa .cphoto{ width:177px; height:239px; }

/* ===========================
   EVENT — namespace visual Jawa01 (class engine event-section dipertahankan)
   Ukuran & posisi arch-card diukur presisi dari komposit Event.psd (canvas 1960x4644,
   pill gold-border area bbox 153,214-1788,4401 -> width 400px pada app 480px lebar).
   frame/event.png: zoom-IN (mulai lebih kecil, membesar berhenti tepat 100% — sesuai
   storyboard revisi terbaru, bukan zoom-out). Posisi bunga presisi dari Event.psd:
   Bunga-L top:21.2% left:0 w:20.4%, Bunga-R top:51.6% left:79.6% w:20.4%.
=========================== */
.event-jawa{
  background:var(--ua-gradient-solid-section);
}
.event-jawa .arch-card{
  width:83.4%;
  max-width:400px;
  background-image:url("assets/frame/event.png");
  background-position:center;
  background-repeat:no-repeat;
  background-color:transparent;
  backdrop-filter:none;
  border:0;
  box-shadow:none;
}
.event-jawa .arch-card.bg-zoom{ background-size:130%; }
.event-jawa .arch-card.bg-zoom.in{ background-size:180%; } /* dibesarkan dari 120% -> 180%: 120% masih menyisakan tepi arch-card kosong (keliatan cincin emas ganda) karena rasio arch-card dinamis (tinggi mengikuti panjang teks) tidak selalu pas dengan rasio crop pill di PSD. 180% memastikan gambar selalu menutupi penuh tanpa celah. */
@media (max-width:479px){
  .event-jawa .arch-card{
    width:100%;
    max-width:340px;
    padding-left:18px;
    padding-right:18px;
  }
}
.event-jawa-flower{
  position:absolute;
  width:20.36%; /* presisi dari Event.psd: 399px / canvas 1960px */
  pointer-events:none;
  z-index:2;
}
/* 4 bunga: pasangan kiri-kanan di baris acara_1 (top 21.23%) & acara_2 (top 51.62%) */
.event-jawa-flower-l1{ top:21.23%; left:0%; }
.event-jawa-flower-r1{ top:21.23%; left:79.64%; }
.event-jawa-flower-l2{ bottom:17%; left:0%; }
.event-jawa-flower-r2{ bottom:17%; left:79.64%; }

/* Ornamen gebyok ukir kayu — membingkai atas & bawah arch-card, posisi & lebar
   mengikuti proporsi asli Event.psd (canvas 1960px lebar = lebar app 480px) */
.event-jawa-gbyok{
  position:absolute;
  left:0;
  width:100%;
  z-index:4;
  pointer-events:none;
}
.event-jawa-gbyok-atas{ top:0; }
.event-jawa-gbyok-bawah{ bottom:0; }

/* ===========================
   LIVE STREAMING — namespace visual Jawa01 (class engine live-section/data-feature
   dipertahankan; desain visual diganti total mengikuti Live Streaming.psd —
   posisi presisi dari bbox layer PSD, canvas 1920x2472)
=========================== */
.live-jawa{
  background:var(--ua-background-section);
  position:relative;
  overflow:hidden;
  padding-top:120px; /* jarak aman supaya Bunga-atas tidak menimpa teks VIRTUAL/Live Streaming */
}
.live-jawa .eyebrow,
.live-jawa .heading{
  position:relative;
  z-index:5; /* teks selalu di atas dekorasi, jaga-jaga kalau posisi dekorasi meleset */
}
.live-jawa-deco{
  position:absolute;
  pointer-events:none;
  z-index:2;
}
/* Bunga-atas di layer PALING atas (z-index tertinggi) supaya siluetnya utuh &
   bersih; Bunga-L/R di belakangnya sebagai pengisi, mencegah sambungan/seam
   bersudut tajam yang muncul kalau urutannya terbalik */
.live-jawa-bunga-atas{ top:-20px; left:0.5%; width:106.9%; z-index:4; }
.live-jawa-bunga-l{ top:19.26%; left:-2.03%; width:14.84%; z-index:18; }
.live-jawa-bunga-r{ top:21.84%; right:-2.14%; width:14.84%; z-index:18; }
.live-jawa-kupu-l{ top:27.23%; left:12.81%; width:13.96%; z-index:3; }
.live-jawa-kupu-r{ top:28.64%; right:9.79%; width:13.96%; z-index:3; }
/* Wayang & A9 dianchor ke BOTTOM (bukan top%) — tinggi section ini dinamis
   mengikuti panjang teks live-desc, jauh lebih pendek dari asumsi tinggi
   penuh canvas PSD, jadi top% saja bikin posisinya meleset/ketutup. Anchor
   ke bottom memastikan tetap presisi membingkai tepi bawah section berapa
   pun tinggi section-nya — sama seperti pola yang dipakai di Couple/Event. */
.live-jawa-wayang-l{ bottom:7.73%; left:0; width:25.57%; }
.live-jawa-wayang-r{ bottom:4.94%; right:-0.05%; width:25.57%; }
.live-jawa-a9{ bottom:-15.17%; left:0.1%; width:99.95%; }

/* ===========================
   GALLERY — namespace visual Jawa01 (class engine gallery-section/carousel dipertahankan)
=========================== */
.gallery-jawa{
  background:var(--ua-gradient-solid-section);
}
.gallery-jawa .eyebrow{ color:var(--ua-color-secondary-pale); }
.gallery-jawa .heading{ color:var(--ua-theme-solid-foreground); margin-bottom:16px; }
.gallery-jawa .body-text{ color:var(--ua-theme-solid-muted); }
.gallery-jawa .carousel-track > div{ border-radius:12px; }
.gallery-jawa .carousel-dots span{ background:var(--ua-overlay-gallery); }
.gallery-jawa .carousel-dots span.active{ background:var(--ua-background-section); }

/* ===========================
   VIDEO PREWEDDING — namespace visual Jawa01 (class engine video-section/mz-*/iframe
   dipertahankan; TIDAK ADA storyboard untuk section ini — treatment default mengikuti
   Live Streaming yang bersebelahan agar konsisten, sampai ada storyboard resmi)
=========================== */
.video-jawa.framed::after{ display:none; }
.video-jawa .mz-songket-a,
.video-jawa .mz-songket-b,
.video-jawa .mz-orn-l,
.video-jawa .mz-orn-r,
.video-jawa .mz-burung-l,
.video-jawa .mz-burung-r,
.video-jawa .mz-kupu,
.video-jawa .mz-land,
.video-jawa .mz-bunga-l,
.video-jawa .mz-bunga-r{
  display:none;
}
.video-jawa .mz-pohon-l{
  background-image:url("assets/decor/tree-left.png");
  width:170px;
}
.video-jawa .mz-pohon-r{
  background-image:url("assets/decor/tree-right.png");
  width:170px;
}

/* ===========================
   LOVE STORY — namespace visual Jawa01 (class engine lovestory-section/timeline
   dipertahankan). Desain diganti total mengikuti love story.psd — pola identik
   dengan Live Streaming (aset & animasi grow-in/sway sama), ditambah 1 layer
   baru: cover.png sebagai background section pada opacity 33%.
   Posisi presisi dari bbox layer PSD, canvas 1920x3136.
=========================== */
.lovestory-jawa{
  background:var(--ua-background-section);
  position:relative;
  overflow:hidden;
  padding-top:120px;
}
.lovestory-jawa .eyebrow,
.lovestory-jawa .heading,
.lovestory-jawa .timeline{
  position:relative;
  z-index:5;
}
.lovestory-jawa-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.6;
  z-index:0;
  pointer-events:none;
}
.lovestory-jawa-deco{
  position:absolute;
  pointer-events:none;
  z-index:2;
}
.lovestory-jawa-bunga-atas{ top:-20px; left:0.5%; width:106.9%; z-index:4; }
.lovestory-jawa-bunga-l{ top:14.54%; left:-1.35%; width:14.32%; z-index:18; }
.lovestory-jawa-bunga-r{ top:16.55%; right:-1.88%; width:14.32%; z-index:18; }
.lovestory-jawa-kupu-l{ top:17.73%; left:10.52%; width:13.49%; z-index:3; }
.lovestory-jawa-kupu-r{ top:20.63%; right:11.25%; width:13.49%; z-index:3; }
.lovestory-jawa-wayang-l{
    bottom:4%;
    left:0;
    width:25.57%;
}
.lovestory-jawa-wayang-r{
    bottom:1.5%;
    right:-0.05%;
    width:25.57%;
}
.lovestory-jawa-a9{ bottom:-15.17%; left:0.1%; width:99.95%; }

/* ===========================
   RSVP — namespace visual Jawa01 (class engine rsvp-form/rsvpForm/field id dipertahankan
   — mekanisme submit di script.js tidak disentuh). Background scenic penuh
   (bg-jawa01.gif) + rumah.png, posisi presisi dari RSCV.psd
   (layer bg-jawa01 + bridge-jawa01, canvas 1919x3800).
=========================== */
.rsvp-jawa{
  position:relative;
  overflow:hidden;
}
.rsvp-jawa-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.25;
  z-index:0;
  pointer-events:none;
}
.rsvp-jawa-rumah{
  position:absolute;
  top:31.8%;
  left:-1.5%;
  width:102.45%;
  opacity:.7;
  z-index:18;
  pointer-events:none;
}
.rsvp-jawa-icon{
  display:block;
  width:84px;
  margin:0 auto 14px;
  position:relative;
  z-index:5;
}
.rsvp-jawa .rsvp-form,
.rsvp-jawa .rsvp-list,
.rsvp-jawa .eyebrow,
.rsvp-jawa .heading,
.rsvp-jawa .body-text{
  position:relative;
  z-index:5;
}

/* ===========================
   WEDDING GIFT — namespace visual Jawa01 (class engine bankcard/btn-copy dipertahankan
   — mekanisme copy-to-clipboard di script.js tidak disentuh)
=========================== */
.gift-jawa{
  background:var(--ua-gradient-solid-section);
}
.gift-jawa.framed::after{ display:none; }
.gift-jawa .mz-songket-a,
.gift-jawa .mz-songket-b,
.gift-jawa .mz-orn-l,
.gift-jawa .mz-orn-r,
.gift-jawa .mz-burung-l,
.gift-jawa .mz-burung-r,
.gift-jawa .mz-kupu,
.gift-jawa .mz-land,
.gift-jawa .mz-pohon-l,
.gift-jawa .mz-pohon-r,
.gift-jawa .mz-bunga-l,
.gift-jawa .mz-bunga-r{
  display:none;
}
.gift-jawa-icon{
  display:block;
  width:56px;
  margin:0 auto 10px;
  filter:brightness(0) invert(1);
}
.gift-jawa .eyebrow{ color:var(--ua-color-secondary-pale); }
.gift-jawa .heading{ color:var(--ua-theme-solid-foreground); }
.gift-jawa .body-text{ color:var(--ua-theme-solid-muted); }

/* ===========================
   CLOSING — namespace visual Jawa01 (class engine closing dipertahankan)
   Unsplash eksternal Palembang diganti foto lokal (subjek sama seperti storyboard:
   pasangan payung — pakai assets/default-cover.jpg yang sudah ada, dipakai juga di Cover)
=========================== */
.closing-jawa{
  background:
    var(--ua-gradient-closing),
    url("/templates/ua-master/assets/default-cover.jpg") center/cover no-repeat;
}

/* [QA Bugfix Bug 2 -- "Closing photo tidak update"] Background Penutup:
   slideshow multi-foto (maks. 2) dengan nilai visual yang telah disetujui.
   Elemen .closing-slideshow dibuat via JS
   (script.js) HANYA bila client mengunggah foto di Dashboard (Foto
   Tampilan -> "Background Penutup"). Bila kosong, elemen tidak pernah
   dibuat dan Closing tetap memakai background default .closing-jawa di
   atas (TIDAK diubah). Overlay gradasi memakai stop warna yang SAMA
   dengan gradient .closing-jawa di atas, supaya karakter visual template
   tidak berubah. */
.closing-slideshow{
  position:absolute; inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.cs-slide{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.6s ease-in-out;
  will-change:opacity, transform;
}
.cs-slide.active{
  opacity:1;
  animation:jawa01CsZoom 12s ease-in-out infinite alternate;
}
@keyframes jawa01CsZoom{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.12); }
}
.cs-overlay{
  position:absolute; inset:0;
  background:var(--ua-gradient-closing);
}
.closing.has-slideshow .closing-inner{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){
  .cs-slide, .cs-slide.active{ animation:none; transition:opacity .3s; transform:none; }
}

/* =====================================================================
   ANIMASI GOYANG — bunga bergoyang kiri-kanan terus-menerus.
   Memakai properti `rotate` (bukan `transform`) supaya tidak menimpa
   `transform:scaleX(-1)` pada bunga yang dicerminkan.
   sway-l = engsel kiri-bawah, sway-r = engsel kanan-bawah.
   ===================================================================== */
@keyframes swayL{ 0%,100%{ rotate:-2.4deg; } 50%{ rotate:2.4deg; } }
@keyframes swayR{ 0%,100%{ rotate: 2.4deg; } 50%{ rotate:-2.4deg; } }
.sway-l{ animation:swayL 6s   ease-in-out infinite; }
.sway-r{ animation:swayR 6.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .sway-l,.sway-r{ animation:none; rotate:0deg; }
}

/* =====================================================================
   SECTION BARU + KARTU BANK + GERAK BERLAWANAN (counter-scroll)
   Tema Palembang: maroon + emas + krem, konsisten dgn undangan.
   ===================================================================== */

/* ---- dasar counter-scroll (gerak via properti `translate` di JS,
        supaya tidak menimpa `transform` milik animasi reveal) ---- */
.px-a, .px-b{ will-change:translate; }
@media (prefers-reduced-motion: reduce){
  .px-a, .px-b{ translate:none !important; }
}

/* =========================== LIVE STREAMING =========================== */
.live-card{
  position:relative; z-index:18;
  max-width:340px; margin:26px auto 0;
  background:var(--ua-gradient-card);
  border:1px solid var(--ua-color-secondary-pale);
  border-radius:var(--radius-card);
  padding:32px 26px 28px;
  box-shadow:var(--ua-shadow-live-card);
  text-align:center;
}
.live-card::before{
  content:""; position:absolute; left:26px; right:26px; top:15px; height:3px;
  background:var(--ua-gradient-rule-horizontal);
}
.live-desc{ font-size:16px; line-height:1.75; color:var(--ua-text-description); margin:4px 0 22px; }
.live-btn svg{ width:18px; height:18px; }

/* ============================ LOVE STORY ============================= */
.lovestory-section .timeline{
  position:relative; max-width:360px; margin:30px auto 0; padding-left:6px; text-align:left;
}
.lovestory-section .timeline::before{
  content:""; position:absolute; left:18px; top:8px; bottom:8px; width:2px;
  background:var(--ua-gradient-timeline-line);
}
.tl-item{
  position:relative; z-index:18; margin:0 0 16px 42px;
  background:var(--ua-gradient-card);
  border:1px solid var(--ua-color-secondary-pale); border-radius:14px;
  padding:16px 18px; box-shadow:var(--ua-shadow-timeline-item);
}
.tl-item::before{
  content:""; position:absolute; left:-32px; top:20px; width:12px; height:12px;
  border-radius:50%; background:var(--ua-color-primary);
  box-shadow:var(--ua-shadow-timeline-dot);
}
.tl-year{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:22px; color:var(--ua-color-primary); margin-bottom:6px;
}
.tl-text{ font-size:14.5px; line-height:1.7; color:var(--ua-text-description); }

/* ====================== KARTU BANK (gaya kartu) ====================== */
.gift-cards{ margin-top:28px; display:flex; flex-direction:column; gap:18px; align-items:center; width:100%; }
.bankcard{
    position:relative; z-index:18; overflow:hidden;
    width:100%; max-width:344px; aspect-ratio:1.62 / 1;
    border-radius:24px; padding:18px 20px;

    background:var(--ua-gradient-card-bank);

    border:1px solid var(--ua-border-bank-card);

    box-shadow:var(--ua-shadow-bank-card);

    color:var(--ua-text-card);
    display:flex; flex-direction:column; justify-content:space-between;
}
.bankcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--ua-gradient-bank-highlight);
}
.bankcard-top{ display:flex; justify-content:space-between; align-items:center; }
.bankcard-bank{ font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--ua-color-primary-deep); }

/* [QA UI FIX — Bank Card] .bankcard-logo SEBELUMNYA cuma font-* (tanpa box
   model apa pun); ukuran/posisi kotak logo ditentukan SENDIRI-SENDIRI oleh
   .logo-bca (punya padding+border-radius) vs .logo-mandiri (tidak punya
   sama sekali) -- dua kartu jadi tidak sejajar/tidak konsisten. Sekarang
   box model (min-width/height/padding/alignment) dipindah ke sini supaya
   SAMA di kedua kartu apa pun bank-nya; .logo-bca/.logo-mandiri tinggal
   beda warna identitas bank, bukan beda ukuran/posisi. */
.bankcard-logo{
  font-weight:800; font-size:16px; font-style:italic; letter-spacing:.01em;
}
.logo-bca{ background:var(--ua-color-bank-bca); color:var(--ua-background-surface); padding:3px 8px; border-radius:5px; }
.logo-mandiri{ color:var(--ua-color-bank-mandiri); }

/* [QA UI FIX — Bank Card] Logo bank KUSTOM (bank_1_logo_style/
   bank_2_logo_style, diisi PublicTemplateRenderer::logoStyle() lewat
   atribut style="" inline -- lihat Batch QA Bugfix Bug 3) SEBELUMNYA tetap
   duduk DI ATAS background-color badge bawaan (.logo-bca biru/.logo-mandiri
   kosong) karena inline style hanya menimpa background-image, bukan
   background-color -- akibatnya logo custom terjepit badge warna bank
   default di belakangnya. Selector atribut ini mendeteksi SATU-SATUNYA
   penanda logo kustom terisi (background-image ada di inline style) dan
   melucuti background-color + padding + border-radius bawaan, supaya logo
   asli klien tampil kecil & bersih tanpa sisa badge -- ukuran/posisi kotak
   tetap konsisten karena tetap mewarisi min-width/height dari .bankcard-logo
   di atas. */
.bankcard-logo[style*="background-image"]{
  display:inline-block;
  width:96px;
  height:38px;
  background-color:transparent;
  padding:0;
  border-radius:0;
  /* Logo bank sering diunggah dalam canvas PNG/WebP persegi dengan area
     transparan luas. `contain` mengecilkan seluruh canvas (bukan artwork
     logo), sehingga BNI/BCA/BRI/Mandiri tampak kecil. `cover` tetap menjaga
     rasio gambar, mengisi panggung logo yang sama, dan hanya memotong ruang
     transparan di sekeliling artwork. */
  /* The renderer supplies `contain` inline. This must win without changing
     the shared renderer/data mapping, otherwise transparent square uploads
     shrink the actual horizontal bank mark to the height of this stage. */
  background-size:cover !important;
  background-repeat:no-repeat;
  background-position:center right;
  color:transparent;
}

.bankcard-numrow{ margin-top:4px; }

/* [QA UI FIX — Bank Card] .bankcard-label SEBELUMNYA rgba(var(--ua-background-surface-rgb),.72)
   (putih transparan) -- warisan langsung dari Palembang, yang .bankcard-nya
   BERLATAR GELAP (color:var(--ua-background-surface) di root .bankcard, lihat public/templates/
   palembang/style.css baris 2397-2400). .bankcard jawa01 JUSTRU berlatar
   krem TERANG (gradient var(--ua-background-card-soft) -> var(--ua-background-card-end), color:var(--ua-text-card)) -- teks putih
   transparan di atas krem terang nyaris tidak terbaca (kontras jauh di
   bawah ambang WCAG AA). Diganti warna coklat gelap solid, mengikuti
   konvensi warna teks sekunder yang SUDAH dipakai di file ini sendiri utk
   latar terang (.tl-text/.live-desc: color:var(--ua-text-description)) -- kontras aman,
   konsisten dengan bahasa desain jawa01 yang sudah ada. */
.bankcard-label{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ua-text-label); margin-bottom:3px; }
.bankcard-num{ font-size:21px; letter-spacing:.14em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bankcard-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.bankcard-name{ font-size:15px; font-weight:600; overflow-wrap:anywhere; }

/* [QA UI FIX — Bank Card] .bankcard-copy SEBELUMNYA "kartu kaca" putih-atas-
   putih (background rgba(var(--ua-background-surface-rgb),.16) + teks putih + border putih
   transparan) -- sama seperti .bankcard-label, warisan dari Palembang yang
   .bankcard-nya gelap. Di atas .bankcard jawa01 yang krem terang, tombol ini
   nyaris tak terlihat (kontras sangat rendah). Diganti jadi tombol solid
   memakai var(--ua-color-primary) (identitas warna utama jawa01, dipakai luas di file
   ini) dengan teks putih -- kontras tinggi & jelas terlihat sebagai tombol
   interaktif. State :hover & .copied (emas) TIDAK diubah -- .copied sudah
   punya kontras baik (emas + teks maroon gelap) sejak awal. */
.bankcard-copy{
  flex:0 0 auto; cursor:pointer; font-size:13px;
  background:var(--ua-button-primary-background); color:var(--ua-background-surface);
  border:1px solid var(--ua-button-primary-background); border-radius:var(--radius-pill); padding:6px 16px;
  transition:.2s;
}
.bankcard-copy:hover{ background:var(--ua-button-primary-hover-background); border-color:var(--ua-button-primary-hover-background); }
.bankcard-copy.copied{ background:var(--ua-color-secondary); color:var(--ua-color-primary-copied); border-color:var(--ua-color-secondary); }
.gift-cards .bankcard{ text-align:left; margin-left:auto; margin-right:auto; }
.gift-cards .bankcard .bankcard-label{ text-align:left; }
@media (max-width:374px){
  .gift-cards .bankcard{ aspect-ratio:auto; min-height:184px; padding:16px; gap:10px; }
  .gift-cards .bankcard-num{ font-size:18px; letter-spacing:.1em; }
}

/* cegah scrollbar horizontal dari gerak counter-scroll */
body{ overflow-x:hidden; }

/* ============================ VIDEO PREWEDDING ============================ */
.video-wrap{
  position:relative; z-index:18;
  width:100%; max-width:none; margin:26px auto 0;   /* dilebarkan: ikut lebar section */
  aspect-ratio:16 / 9;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--ua-color-secondary-pale);
  box-shadow:var(--ua-shadow-video);
  background:var(--ua-color-black);
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.video-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ua-background-section); font-size:14px; background:var(--ua-gradient-video-empty);
}
.video-wrap iframe[src]:not([src=""]) + .video-empty{ display:none; }

/* animasi pembuka tidak boleh menahan gesture scroll/tap */
#openingAnim.oa-show{ pointer-events:none; }

/* tombol di section acara ikut counter-scroll: jangan transisikan `translate`
   (supaya gerak parallax-nya crisp), tapi efek hover tetap halus */
.event-section .btn-pill{
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), filter .12s ease, transform .12s ease;
}

/* FIX: di dalam .arch-card ada backdrop-filter + transform (reveal-scale) yang
   membuat elemen anak tidak ter-repaint saat properti `translate` berubah ketika
   scroll. Promosikan ke layer sendiri agar gerak counter-scroll terlihat.
   (Aman: elemen ini tidak punya transform reveal sendiri.) */
.event-section .px-a,
.event-section .px-b{ transform:translateZ(0); backface-visibility:hidden; }

/* =====================================================================
   BINGKAI EMAS untuk section Gift & Video (samakan dgn kartu mempelai)
   Garis emas ganda membingkai isi, di bawah pita songket.
   (Atur inset bila perlu: top untuk turun di bawah songket.)
   ===================================================================== */
.section.framed{ position:relative; }
.section.framed::after{
  content:""; position:absolute;
  inset:96px 14px 28px;            /* top 96px = tepat di bawah songket */
  border:1.5px solid var(--ua-color-secondary-deep);
  box-shadow:var(--ua-shadow-frame-border);
  pointer-events:none; z-index:18;
  border-radius:4px;
}

/* [QA UI FIX — Bug: "double arch" di section Acara] RCA: .event-jawa
   .arch-card (baris ~2544) sudah memakai background-image
   asset frame event sebagai bingkai kartu -- gambar itu SENDIRI SUDAH
   punya garis lengkung emas tipis yang di-bake langsung ke dalam PNG
   (dikonfirmasi visual: tepi oval frame event memang bergaris emas).
   Rule di bawah ini (SEBELUM fix) menambahkan box-shadow 3-lapis
   ("cincin emas mengelilingi kartu oval") DI ATAS gambar yang sudah
   berbingkai emas sendiri -- hasilnya dua garis lengkung emas
   bertumpuk/berdekatan ("double arch"), persis gejala yang dilaporkan.
   border-color:var(--ua-color-secondary) di sini juga tidak berefek apa pun (border-
   width sudah 0 dari .event-jawa .arch-card{border:0}), jadi aman
   dihapus sekaligus. Drop-shadow kedalaman (0 10px 30px) TETAP
   dipertahankan lewat .arch-card dasar (baris 651) yang tidak disentuh. */