/* ==========================================================================
   UNDANGAN 14 — MAJELIS RAJA SEHARI ADAT MELAYU
   Palet: Hijau Zamrud Songket Diraja, Kuning Diraja 24K & Gading Kuning Langsat
   ========================================================================== */

:root {
  /* Royal Malay Emerald / Songket Zamrud (Dark Sections) */
  --zamrud-950: #041812;
  --zamrud-900: #07281F;
  --zamrud-800: #0B3D2E;
  --zamrud-700: #115742;
  --zamrud-600: #167055;

  /* Kuning Diraja & Benang Emas Suasa 24K */
  --gold-50:  #FFFDF2;
  --gold-100: #FFF8DC;
  --gold-200: #F8DE82;
  --gold-300: #E6B93E;
  --gold-400: #C6931E;
  --gold-500: #966A0E;

  /* Gading Kuning Langsat / Tepak Sirih (Light Sections) */
  --gading-50:  #FFFDF8;
  --gading-100: #FBF6E8;
  --gading-200: #F2E7CC;
  --gading-300: #E2D1A8;

  /* Text Colors */
  --ink-dark:  #10261E;
  --ink-body:  #2B453B;
  --ink-muted: #567066;
  --ink-light: #FAF7EE;

  /* Typography */
  --font-display: "Cinzel Decorative", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-script:  "Great Vibes", cursive;
  --font-sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout & Transitions */
  --stream-width: 480px;
  --ease-luxury:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--zamrud-950);
  color: var(--ink-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   2. AMBIENT PARTICLES: BUNGA RAMPAI & BERAS KUNYIT DIRAJA
   ========================================================================== */
.melayu-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
}

.rampai-drop {
  position: absolute;
  top: -32px;
  width: var(--size, 11px);
  height: var(--size, 11px);
  opacity: 0;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FFF8DC 50%, #E6B93E 100%);
  clip-path: polygon(50% 0%, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0% 50%, 34% 34%);
  filter: drop-shadow(0 2px 6px rgba(230, 185, 62, 0.55));
  animation: rampaiFall var(--dur, 13s) linear var(--delay, 0s) infinite;
}

.kunyit-mote {
  position: absolute;
  bottom: -20px;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF8DC 0%, #E6B93E 62%, transparent 100%);
  box-shadow: 0 0 10px rgba(230, 185, 62, 0.85);
  opacity: 0;
  animation: kunyitRise var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes rampaiFall {
  0% {
    transform: translate3d(0, -30px, 0) rotate(0deg) scale(0.85);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.65;
  }
  100% {
    transform: translate3d(var(--sway, 38px), 106vh, 0) rotate(360deg) scale(1.05);
    opacity: 0;
  }
}

@keyframes kunyitRise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 0.82;
  }
  75% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--sway, -26px), -95vh, 0) scale(1.15);
    opacity: 0;
  }
}

/* ==========================================================================
   3. GATE COVER — TIRAI PEMBUKA BALAIRUNG SERI ADAT MELAYU
   ========================================================================== */
.gate-cover {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow: hidden;
  background-color: var(--zamrud-950);
  transition:
    transform 1.15s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.95s ease;
}

.gate-cover.is-opened {
  transform: translateY(-102%);
  opacity: 0;
  pointer-events: none;
}

.gate-cover.is-hidden {
  display: none !important;
}

/* Flipped Texture in ::before, Unflipped Bottom Gradient in ::after */
.gate-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.gate-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../asset/bg-songket-melayu-zamrud.jpg") center / cover no-repeat;
  transform: scaleY(-1);
  filter: brightness(0.84) saturate(1.12);
}

.gate-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(230, 185, 62, 0.16) 0%, rgba(7, 40, 31, 0.52) 56%, rgba(4, 24, 18, 0.92) 100%),
    linear-gradient(180deg, transparent 0%, rgba(5, 29, 21, 0.62) 64%, rgba(3, 18, 13, 0.96) 100%);
}

/* Top Tirai Kelingkan & Lampu Kandil Istana Maimun + Corner Cempaka + Standing Bunga Manggar */
.gate-tirai-top,
.hero-tirai-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 104%;
  max-width: none;
  z-index: 2;
  pointer-events: none;
  opacity: 0.94;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.gate-corner {
  position: absolute;
  width: clamp(92px, 21vw, 142px);
  z-index: 3;
  pointer-events: none;
  opacity: 0.94;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.gate-corner--tl {
  top: 6px;
  left: 6px;
}

.gate-corner--tr {
  top: 6px;
  right: 6px;
  transform: scaleX(-1);
}

.gate-manggar {
  position: absolute;
  bottom: 18px;
  width: clamp(58px, 14vw, 84px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  transform-origin: bottom center;
  animation: manggarSway 5.8s ease-in-out infinite alternate;
}

.gate-manggar--left {
  left: clamp(4px, 2vw, 14px);
}

.gate-manggar--right {
  right: clamp(4px, 2vw, 14px);
  transform: scaleX(-1);
  animation-name: manggarSwayMirror;
}

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

@keyframes manggarSwayMirror {
  0%   { transform: scaleX(-1) rotate(-2deg); }
  100% { transform: scaleX(-1) rotate(2.2deg); }
}

/* Gate Central Content Stage */
.gate-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Portal Singgasana Melayu & Bahtera Lancang Kuning (Shared by Cover & Hero) */
.gate-portal-wrap {
  position: relative;
  width: clamp(204px, 50vw, 242px);
  margin: 0 auto 10px;
  padding-top: 8px;
}

.gate-selembayung-bg {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 126%;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.58));
}

.gate-singgasana-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 560;
  z-index: 2;
}

.gate-portrait-window {
  position: absolute;
  inset: 10% 16.5% 12.8% 16.5%;
  border-radius: 50% 50% 18px 18px / 40% 40% 16px 16px;
  overflow: hidden;
  background: var(--zamrud-900);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.gate-portrait-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.gate-singgasana-frame {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}

.gate-couple-script {
  font-family: var(--font-script);
  font-size: clamp(3.15rem, 11vw, 4.15rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--gold-100);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
  margin-bottom: 6px;
}

.gate-couple-script span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72em;
  color: var(--gold-300);
}

.gate-date-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 20px;
  border-radius: 18px;
  background: rgba(7, 40, 31, 0.78);
  border: 1px solid rgba(230, 185, 62, 0.52);
  color: var(--gold-100);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
  margin-bottom: 14px;
}

.gate-date-pill .gate-date-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gold-200);
  opacity: 0.95;
  letter-spacing: 0.03em;
}

.gate-guest-box {
  width: 100%;
  max-width: 325px;
  padding: 13px 18px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(11, 61, 46, 0.88) 0%, rgba(4, 24, 18, 0.94) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.65);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 248, 220, 0.25);
}

.gate-guest-label {
  display: block;
  font-size: 0.71rem;
  color: rgba(255, 248, 220, 0.78);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.gate-guest-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-100);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   4. BUTTONS (KUNING DIRAJA & SONGKET ZAMRUD OUTLINE)
   ========================================================================== */
.btn-melayu-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid #FFF9E2;
  background: linear-gradient(135deg, #F8DE82 0%, #E0AE30 48%, #9A6B10 100%);
  color: #07231A;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(230, 185, 62, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.28s var(--ease-luxury), box-shadow 0.28s var(--ease-luxury), filter 0.28s ease;
}

.btn-melayu-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(230, 185, 62, 0.5);
}

.btn-melayu-gold:active {
  transform: translateY(0);
}

.btn-melayu-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(230, 185, 62, 0.8);
  background: rgba(7, 40, 31, 0.76);
  color: var(--gold-100);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.25s var(--ease-luxury), background-color 0.25s ease, border-color 0.25s ease;
}

.btn-melayu-outline:hover {
  transform: translateY(-2px);
  background: rgba(20, 107, 82, 0.88);
  border-color: var(--gold-100);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 0.8rem;
}

.btn-xs {
  padding: 7px 14px;
  font-size: 0.76rem;
}

.btn-full {
  width: 100%;
}

/* ==========================================================================
   5. FLOATING CONTROLS: TOP-RIGHT MUSIC FAB & BOTTOM DOCKBAR
   ========================================================================== */
.music-fab {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 95;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-300);
  background: radial-gradient(circle at 35% 30%, var(--zamrud-700) 0%, var(--zamrud-950) 84%);
  color: var(--gold-100);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.music-fab:hover {
  transform: scale(1.08);
  border-color: var(--gold-100);
}

.music-fab-disc {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(230, 185, 62, 0.45);
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--gold-100);
}

.music-fab.is-playing .music-fab-disc i {
  animation: zapinSpin 8s linear infinite;
}

@keyframes zapinSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Floating Bottom Dock — Royal Emerald & Gold (Clean Top Edge) */
.floating-dock {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 90;
  width: min(92vw, 430px);
  padding: 6px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 61, 46, 0.95) 0%, rgba(4, 24, 18, 0.98) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.65);
  box-shadow:
    0 16px 36px rgba(2, 12, 9, 0.72),
    inset 0 1px 0 rgba(255, 248, 220, 0.24);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  backdrop-filter: blur(12px);
}

.dock-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: 12px;
  color: rgba(250, 247, 238, 0.74);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background 0.28s var(--ease-luxury),
    color 0.28s ease,
    transform 0.28s var(--ease-luxury);
}

.dock-link i {
  font-size: 0.96rem;
  transition: transform 0.28s var(--ease-luxury);
}

.dock-link:hover {
  color: var(--gold-100);
}

.dock-link.is-active {
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 100%);
  color: var(--zamrud-950);
  box-shadow:
    inset 0 0 0 1px rgba(255, 253, 242, 0.75),
    0 4px 12px rgba(230, 185, 62, 0.35);
}

.dock-link.is-active i {
  transform: translateY(-1px) scale(1.06);
}

/* ==========================================================================
   6. DESKTOP STAGE: AMBIENT WINGS + 480PX CENTERED STREAM
   ========================================================================== */
.melayu-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background-color: var(--zamrud-950);
}

.melayu-ambient-wings {
  display: none;
}

.melayu-stream {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--stream-width);
  background-color: var(--gading-100);
  box-shadow: 0 0 65px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

@media (min-width: 768px) {
  .gate-cover {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--stream-width);
    transform: translateX(-50%);
    border-left: 1.5px solid rgba(230, 185, 62, 0.48);
    border-right: 1.5px solid rgba(230, 185, 62, 0.48);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.82);
  }

  .gate-cover.is-opened {
    transform: translate(-50%, -102%);
    opacity: 0;
  }

  .music-fab {
    top: 16px;
    right: max(18px, calc(50% - (var(--stream-width) / 2) + 14px));
  }

  .melayu-ambient-wings {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }

  .wings-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 50%, rgba(11, 61, 46, 0.35) 0%, rgba(4, 24, 18, 0.92) 100%),
      url("../asset/bg-songket-melayu-zamrud.jpg") center / cover no-repeat;
    filter: brightness(0.68) saturate(1.1);
  }

  .wings-corner {
    position: absolute;
    width: clamp(120px, 13vw, 185px);
    opacity: 0.78;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
    will-change: transform, opacity;
    transform-origin: center center;
  }

  .wings-corner--tl {
    top: 18px;
    left: 18px;
    animation: wingsCornerTL 8s ease-in-out infinite alternate;
  }

  .wings-corner--tr {
    top: 18px;
    right: 18px;
    transform: scaleX(-1);
    animation: wingsCornerTR 8s ease-in-out 1.2s infinite alternate;
  }

  .wings-corner--bl {
    bottom: 18px;
    left: 18px;
    transform: scaleY(-1);
    animation: wingsCornerBL 8.5s ease-in-out 0.6s infinite alternate;
  }

  .wings-corner--br {
    bottom: 18px;
    right: 18px;
    transform: scale(-1, -1);
    animation: wingsCornerBR 8.5s ease-in-out 1.8s infinite alternate;
  }

  .wings-manggar {
    position: absolute;
    top: 50%;
    width: clamp(68px, 7vw, 102px);
    opacity: 0.85;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
    will-change: transform, filter;
  }

  .wings-manggar--left {
    left: max(24px, calc((50vw - (var(--stream-width) / 2) - 96px) / 2));
    transform: translateY(-50%);
    transform-origin: center top;
    animation: wingsManggarLeft 7.5s ease-in-out infinite alternate;
  }

  .wings-manggar--right {
    right: max(24px, calc((50vw - (var(--stream-width) / 2) - 96px) / 2));
    transform: translateY(-50%) scaleX(-1);
    transform-origin: center top;
    animation: wingsManggarRight 7.5s ease-in-out infinite alternate;
  }

  @keyframes wingsManggarLeft {
    0% {
      transform: translateY(-50%) translate3d(0, -9px, 0) rotate(-1.5deg);
      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 6px rgba(230, 185, 62, 0.2));
    }
    50% {
      transform: translateY(-50%) translate3d(-3px, 7px, 0) rotate(1.4deg) scale(1.02);
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 16px rgba(230, 185, 62, 0.42));
    }
    100% {
      transform: translateY(-50%) translate3d(2px, -3px, 0) rotate(-0.6deg);
      filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 10px rgba(230, 185, 62, 0.28));
    }
  }

  @keyframes wingsManggarRight {
    0% {
      transform: translateY(-50%) scaleX(-1) translate3d(0, -9px, 0) rotate(-1.5deg);
      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 6px rgba(230, 185, 62, 0.2));
    }
    50% {
      transform: translateY(-50%) scaleX(-1) translate3d(3px, 7px, 0) rotate(1.4deg) scale(1.02);
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 16px rgba(230, 185, 62, 0.42));
    }
    100% {
      transform: translateY(-50%) scaleX(-1) translate3d(-2px, -3px, 0) rotate(-0.6deg);
      filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 10px rgba(230, 185, 62, 0.28));
    }
  }

  @keyframes wingsCornerTL {
    0% {
      transform: translate3d(0, 0, 0) rotate(0deg);
      opacity: 0.78;
    }
    50% {
      transform: translate3d(3px, 3px, 0) rotate(1.5deg) scale(1.02);
      opacity: 0.92;
    }
    100% {
      transform: translate3d(-1px, 2px, 0) rotate(-0.8deg);
      opacity: 0.82;
    }
  }

  @keyframes wingsCornerTR {
    0% {
      transform: scaleX(-1) translate3d(0, 0, 0) rotate(0deg);
      opacity: 0.78;
    }
    50% {
      transform: scaleX(-1) translate3d(3px, 3px, 0) rotate(1.5deg) scale(1.02);
      opacity: 0.92;
    }
    100% {
      transform: scaleX(-1) translate3d(-1px, 2px, 0) rotate(-0.8deg);
      opacity: 0.82;
    }
  }

  @keyframes wingsCornerBL {
    0% {
      transform: scaleY(-1) translate3d(0, 0, 0) rotate(0deg);
      opacity: 0.78;
    }
    50% {
      transform: scaleY(-1) translate3d(3px, 3px, 0) rotate(1.5deg) scale(1.02);
      opacity: 0.92;
    }
    100% {
      transform: scaleY(-1) translate3d(-1px, 2px, 0) rotate(-0.8deg);
      opacity: 0.82;
    }
  }

  @keyframes wingsCornerBR {
    0% {
      transform: scale(-1, -1) translate3d(0, 0, 0) rotate(0deg);
      opacity: 0.78;
    }
    50% {
      transform: scale(-1, -1) translate3d(3px, 3px, 0) rotate(1.5deg) scale(1.02);
      opacity: 0.92;
    }
    100% {
      transform: scale(-1, -1) translate3d(-1px, 2px, 0) rotate(-0.8deg);
      opacity: 0.82;
    }
  }

  .melayu-stream {
    border-left: 1.5px solid rgba(230, 185, 62, 0.42);
    border-right: 1.5px solid rgba(230, 185, 62, 0.42);
  }
}

/* ==========================================================================
   7. SECTION SHELLS, HEADERS & BRIDGES (2D WAVE ANIMATION)
   ========================================================================== */
.sec {
  position: relative;
  padding: 68px 22px 62px;
  overflow: hidden;
}

.sec-inner {
  position: relative;
  z-index: 3;
}

/* Dark Sections: Songket Melayu Zamrud */
.sec--songket {
  background-color: var(--zamrud-900);
  color: var(--ink-light);
}

.sec--songket::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../asset/bg-songket-melayu-zamrud.jpg") center / cover no-repeat;
  opacity: 0.34;
  z-index: 0;
  pointer-events: none;
}

.sec--songket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(20, 107, 82, 0.28) 0%, rgba(4, 24, 18, 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Light Sections: Ukiran Awan Larat Gading Kuning Langsat */
.sec--gading {
  background-color: var(--gading-100);
  color: var(--ink-body);
}

.sec--gading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../asset/bg-ukiran-melayu-gading.jpg") center / cover no-repeat;
  opacity: 0.42;
  z-index: 0;
  pointer-events: none;
}

.sec--gading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.72) 0%, rgba(251, 246, 232, 0.82) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Section Headers */
.sec-header {
  text-align: center;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}

.eyebrow--emerald {
  color: var(--zamrud-700);
}

.eyebrow--gold {
  color: var(--gold-200);
}

.sec-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

.sec-title--dark {
  color: var(--ink-dark);
}

.sec-title--light {
  color: var(--gold-100);
}

.seri-melayu-rule {
  width: 118px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--zamrud-700) 22%, var(--gold-300) 50%, var(--zamrud-700) 78%, transparent 100%);
}

.sec-desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  max-width: 380px;
  margin: 0 auto;
}

.sec-desc--light {
  color: rgba(250, 247, 238, 0.84);
}

/* Section Bridge — 2D Wave Slide (Horizontal + Vertical) */
.section-bridge {
  position: relative;
  z-index: 3;
  margin-top: 36px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 6px 0;
}

.bridge-melayu {
  width: min(88%, 350px);
  opacity: 0.94;
  will-change: transform;
  animation: melayuBridgeWave 4.6s ease-in-out infinite alternate;
}

@keyframes melayuBridgeWave {
  0% {
    transform: translate3d(-14px, 2px, 0);
  }
  50% {
    transform: translate3d(0px, -4px, 0);
  }
  100% {
    transform: translate3d(14px, 2px, 0);
  }
}

/* ==========================================================================
   8. HERO SECTION (#beranda)
   ========================================================================== */
.sec--hero {
  padding-top: 64px;
  padding-bottom: 44px;
  text-align: center;
}

.hero-corner {
  position: absolute;
  top: 12px;
  width: clamp(86px, 20vw, 126px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.88;
}

.hero-corner--tl { left: 10px; }
.hero-corner--tr { right: 10px; transform: scaleX(-1); }

.hero-portal-wrap {
  margin-bottom: 14px;
}

.hero-couple-names {
  font-family: var(--font-script);
  font-size: clamp(3.1rem, 11vw, 4rem);
  font-weight: 400;
  color: var(--gold-100);
  line-height: 1.1;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  margin-bottom: 8px;
}

.hero-couple-names span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72em;
  color: var(--gold-300);
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(255, 248, 220, 0.88);
  max-width: 350px;
  margin: 0 auto 18px;
}

.hero-date-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.date-banner-line {
  width: 36px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-300));
}

.date-banner-line:last-child {
  background: linear-gradient(90deg, var(--gold-300), transparent);
}

.date-banner-text {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-200);
}

/* Countdown Ribbon */
.countdown-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  max-width: 370px;
  margin: 0 auto 22px;
}

.cd-box {
  padding: 12px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 87, 66, 0.78) 0%, rgba(4, 24, 18, 0.92) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.62);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 248, 220, 0.22);
}

.cd-box strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--gold-100);
  line-height: 1.15;
}

.cd-box span {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-200);
  margin-top: 2px;
}

/* ==========================================================================
   9. SALAM, AYAT & PANTUN MELAYU (.tepak-scroll-card)
   ========================================================================== */
.sec--tepak {
  padding-top: 84px;
}

.tepak-scroll-card {
  position: relative;
  padding: 72px 22px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F7EED6 100%);
  border: 2px solid rgba(198, 147, 30, 0.58);
  box-shadow:
    0 16px 38px rgba(7, 40, 31, 0.12),
    inset 0 0 0 5px rgba(255, 253, 248, 0.85);
  text-align: center;
}

.tepak-crown {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 158px;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(7, 40, 31, 0.25));
}

.tepak-bismillah {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--zamrud-700);
  margin-bottom: 4px;
}

.tepak-greeting {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 12px;
  line-height: 1.4;
}

.tepak-intro {
  font-size: 0.86rem;
  color: var(--ink-body);
  margin-bottom: 18px;
}

/* Clean Quote Box Without Left/Right Colored Borders */
.tepak-verse {
  padding: 16px 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(17, 87, 66, 0.06);
  border: none;
}

.verse-translation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-dark);
  line-height: 1.55;
  margin-bottom: 8px;
}

.verse-source {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--zamrud-700);
}

.pantun-pill {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.65);
  color: var(--gold-100);
}

.pantun-pill p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

.pantun-pill span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* ==========================================================================
   10. MEMPELAI PRIA & WANITA (#mempelai)
   ========================================================================== */
.sec--couple {
  padding-top: 108px;
}

.sec-corner {
  position: absolute;
  width: clamp(88px, 20vw, 126px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}

.sec-corner--tl {
  top: 12px;
  left: 10px;
  animation: cornerPulseTL 5.2s ease-in-out infinite alternate;
}

.sec-corner--br {
  bottom: 12px;
  right: 10px;
  animation: cornerPulseBR 5.2s ease-in-out infinite alternate;
}

@keyframes cornerPulseTL {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.06) rotate(2deg); }
}

@keyframes cornerPulseBR {
  0%   { transform: scale(-1, -1) rotate(0deg); }
  100% { transform: scale(-1.06, -1.06) rotate(2deg); }
}

.couple-showcase {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.melayu-couple-card {
  width: 100%;
  padding: 26px 20px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, #FFFDF9 0%, #F7EDD2 100%);
  border: 2px solid rgba(198, 147, 30, 0.56);
  box-shadow:
    0 16px 36px rgba(7, 40, 31, 0.12),
    inset 0 0 0 4px rgba(255, 253, 248, 0.9);
  text-align: center;
  position: relative;
}

.mc-royal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1px solid var(--gold-300);
  color: var(--gold-100);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.mc-royal-badge i {
  color: var(--gold-300);
}

.mc-portrait-stage {
  position: relative;
  width: 216px;
  margin: 0 auto 18px;
  padding-top: 32px;
}

.mc-tengkolok-halo {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 252px;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(198, 147, 30, 0.38));
}

/* Bride's Gandik & Hanging Jurai Melur Ear-Chains drape alongside the frame */
.mc-halo--gandik {
  top: -20px;
  width: 262px;
  z-index: 3;
}

.mc-arch-frame {
  position: relative;
  z-index: 2;
  width: 184px;
  height: 234px;
  margin: 0 auto;
  border-radius: 92px 92px 32px 32px;
  padding: 5px;
  background: linear-gradient(180deg, #FFF8DC 0%, #E6B93E 50%, #0B3D2E 100%);
  box-shadow: 0 12px 28px rgba(7, 40, 31, 0.24);
  overflow: hidden;
}

.mc-arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 87px 87px 27px 27px;
  border: 2.5px solid #FFFFFF;
}

.mc-fullname {
  font-family: var(--font-serif);
  font-size: 1.78rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 6px;
  line-height: 1.2;
}

.mc-lineage {
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.mc-lineage strong {
  color: var(--zamrud-800);
}

.mc-ig-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.72);
  color: var(--gold-100);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(7, 40, 31, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-ig-pill i {
  font-size: 0.96rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.5px);
}

.mc-ig-pill span {
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.02em;
}

.mc-ig-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 40, 31, 0.28);
}

.couple-knot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.knot-tampuk-manggis {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--zamrud-700) 0%, var(--zamrud-950) 100%);
  border: 2.5px solid var(--gold-300);
  outline: 2px dashed rgba(230, 185, 62, 0.55);
  outline-offset: 4px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(7, 40, 31, 0.28);
}

.knot-tampuk-manggis span {
  font-family: var(--font-script);
  font-size: 1.95rem;
  color: var(--gold-100);
}

/* ==========================================================================
   11. RANGKAIAN ACARA — PAVILIUN BALAIRUNG SERI (#acara)
   ========================================================================== */
.event-pavilion-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 26px;
}

.balairung-event-card {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11, 61, 46, 0.92) 0%, rgba(4, 24, 18, 0.96) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.68);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 248, 220, 0.24);
  overflow: hidden;
  text-align: center;
}

.bec-roof {
  padding: 0;
  background: radial-gradient(circle at 50% 0%, rgba(230, 185, 62, 0.2) 0%, transparent 72%);
}

.bec-roof img {
  width: 100%;
  margin: 0 auto;
}

.bec-body {
  padding: 10px 20px 24px;
}

.bec-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-200);
  margin-bottom: 4px;
}

.bec-title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  color: var(--gold-100);
  margin-bottom: 14px;
}

.bec-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.bec-meta-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(4, 24, 18, 0.65);
  border: 1px solid rgba(230, 185, 62, 0.35);
  text-align: left;
}

.bec-meta-box i {
  font-size: 1.15rem;
  color: var(--gold-300);
  width: 24px;
  text-align: center;
}

.bec-meta-box small {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 248, 220, 0.72);
}

.bec-meta-box strong {
  display: block;
  font-size: 0.86rem;
  color: var(--gold-100);
}

.bec-venue {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 248, 220, 0.05);
  margin-bottom: 16px;
}

.bec-venue i {
  color: var(--gold-300);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.bec-venue strong {
  display: block;
  font-size: 0.92rem;
  color: var(--gold-100);
  margin-bottom: 3px;
}

.bec-venue p {
  font-size: 0.8rem;
  color: rgba(250, 247, 238, 0.8);
}

/* Live Streaming Banner */
.livestream-banner {
  padding: 22px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(17, 87, 66, 0.9) 0%, rgba(5, 29, 21, 0.96) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.6);
  text-align: center;
}

.ls-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.22);
  border: 1px solid rgba(252, 165, 165, 0.55);
  color: #FCA5A5;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.ls-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px #EF4444;
}

.livestream-banner h3 {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  color: var(--gold-100);
  margin-bottom: 6px;
}

.livestream-banner p {
  font-size: 0.82rem;
  color: rgba(250, 247, 238, 0.82);
  margin-bottom: 14px;
}

/* ==========================================================================
   12. PERJALANAN CINTA KAMI (TANPA GARIS PENGHUBUNG VERTIKAL)
   ========================================================================== */
.melayu-story-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.story-lancaran-card {
  border-radius: 22px;
  background: #FFFDF9;
  border: 1.5px solid rgba(198, 147, 30, 0.52);
  box-shadow: 0 12px 28px rgba(7, 40, 31, 0.1);
  overflow: hidden;
}

.slc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.slc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-luxury);
}

.story-lancaran-card:hover .slc-media img {
  transform: scale(1.04);
}

.slc-date-chip {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1px solid var(--gold-300);
  color: var(--gold-100);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.slc-content {
  padding: 18px 20px 20px;
}

.slc-chapter {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--zamrud-700);
  margin-bottom: 4px;
}

.slc-content h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 6px;
}

.slc-content p {
  font-size: 0.85rem;
  color: var(--ink-body);
}

/* ==========================================================================
   13. GALERI MOMEN BAHAGIA (#galeri — SOLID WHITE BORDER ON PHOTOS)
   ========================================================================== */
.cinema-frame {
  margin-bottom: 20px;
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-500) 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.cinema-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
}

.cinema-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.melayu-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.mg-tile {
  position: relative;
  padding: 0;
  border-radius: 16px;
  border: 3.5px solid #ffffff;
  background: var(--zamrud-900);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  transition: transform 0.35s var(--ease-luxury), box-shadow 0.35s ease;
}

.mg-tile--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}

.mg-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-luxury);
}

.mg-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
}

.mg-tile:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   14. AMPLOP & TANDA KASIH (GIFT TABS & SONGKET ATM CARD)
   ========================================================================== */
.gift-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.gift-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(198, 147, 30, 0.55);
  background: #FFFDF8;
  color: var(--ink-dark);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.gift-tab-btn.is-active {
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border-color: var(--gold-300);
  color: var(--gold-100);
  box-shadow: 0 8px 18px rgba(7, 40, 31, 0.22);
}

.gift-panel[hidden] {
  display: none !important;
}

.songket-atm-card {
  position: relative;
  padding: 22px 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 20%, rgba(230, 185, 62, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1.5px solid rgba(230, 185, 62, 0.72);
  color: var(--gold-100);
  box-shadow: 0 16px 34px rgba(7, 40, 31, 0.26);
}

.atm-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.atm-chip {
  width: 44px;
  height: auto;
}

.atm-bank-logo {
  height: 26px;
  width: auto;
  filter: brightness(1.15);
}

.atm-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 248, 220, 0.74);
  margin-bottom: 4px;
}

.atm-number {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-100);
  margin-bottom: 18px;
}

.atm-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.atm-holder-label {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 248, 220, 0.72);
}

.atm-holder-name {
  font-size: 0.92rem;
  color: #FFFFFF;
}

.parcel-card {
  padding: 24px 20px;
  border-radius: 22px;
  background: #FFFDF8;
  border: 1.5px solid rgba(198, 147, 30, 0.55);
  text-align: center;
  box-shadow: 0 12px 28px rgba(7, 40, 31, 0.1);
}

.parcel-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(17, 87, 66, 0.1);
  color: var(--zamrud-700);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
}

.parcel-card h3 {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  color: var(--ink-dark);
  margin-bottom: 6px;
}

.parcel-recipient {
  font-size: 0.84rem;
  color: var(--ink-body);
  margin-bottom: 6px;
}

.parcel-address {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

/* ==========================================================================
   15. RSVP & WISHES FEED (#ucapan — UNIFORM SUBTLE BORDER ON WISH CARDS)
   ========================================================================== */
.rsvp-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.score-pill {
  padding: 12px 14px;
  border-radius: 16px;
  background: #FFFDF8;
  border: 1.5px solid rgba(198, 147, 30, 0.5);
  text-align: center;
}

.score-pill strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--zamrud-800);
}

.score-pill span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.rsvp-card {
  padding: 22px 18px;
  border-radius: 22px;
  background: #FFFDF8;
  border: 1.5px solid rgba(198, 147, 30, 0.55);
  box-shadow: 0 12px 28px rgba(7, 40, 31, 0.1);
  margin-bottom: 20px;
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(17, 87, 66, 0.26);
  background: #FAF6EC;
  color: var(--ink-dark);
  font-size: 0.86rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--zamrud-700);
  box-shadow: 0 0 0 3px rgba(17, 87, 66, 0.14);
}

.wishes-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 390px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Uniform Subtle Border — NO Thick Left Border */
.wish-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: #FFFDF9;
  border: 1px solid rgba(198, 147, 30, 0.38);
  box-shadow: 0 4px 14px rgba(7, 40, 31, 0.06);
}

.wish-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.wish-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-dark);
}

.wish-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.wish-badge--hadir {
  background: rgba(17, 87, 66, 0.14);
  color: var(--zamrud-800);
}

.wish-badge--absen {
  background: rgba(180, 83, 9, 0.14);
  color: #9A3412;
}

.wish-text {
  font-size: 0.84rem;
  color: var(--ink-body);
  margin-bottom: 6px;
}

.wish-time {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   16. PENUTUP 100VH BALAIRUNG SERI (#penutup)
   ========================================================================== */
.sec--closing {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 68px 22px 124px;
  text-align: center;
  position: relative;
  background-color: var(--zamrud-950);
}

/* Subtle Black Gradient from Bottom to Top (Gradasi Hitam Tipis dari Bawah ke Atas) */
.sec--closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.18) 60%, transparent 82%),
    radial-gradient(circle at 50% 25%, rgba(20, 107, 82, 0.28) 0%, rgba(4, 24, 18, 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Corner Ornaments Placed Exactly at Bottom-Left & Bottom-Right Under Dockbar */
.closing-corner {
  position: absolute;
  bottom: 0;
  width: clamp(96px, 24vw, 142px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.88;
}

.closing-corner--bl {
  left: 0;
  transform: scaleY(-1);
  transform-origin: bottom left;
  animation: closingCornerBL 5.2s ease-in-out infinite alternate;
}

.closing-corner--br {
  right: 0;
  transform: scale(-1, -1);
  transform-origin: bottom right;
  animation: closingCornerBR 5.2s ease-in-out infinite alternate;
}

@keyframes closingCornerBL {
  0%   { transform: scaleY(-1) rotate(0deg); }
  100% { transform: scale(1.06, -1.06) rotate(-2deg); }
}

@keyframes closingCornerBR {
  0%   { transform: scale(-1, -1) rotate(0deg); }
  100% { transform: scale(-1.06, -1.06) rotate(2deg); }
}

.closing-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.closing-selembayung {
  width: min(78%, 242px);
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.closing-portrait-ring {
  width: 138px;
  height: 138px;
  margin: 0 auto 18px;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF8DC 0%, #E6B93E 50%, #966A0E 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.closing-portrait-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
}

.closing-thanks {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-200);
  margin-bottom: 4px;
}

.closing-couple {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 10vw, 3.6rem);
  font-weight: 400;
  color: var(--gold-100);
  margin-bottom: 10px;
}

.closing-couple span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72em;
  color: var(--gold-300);
}

.closing-message {
  font-size: 0.85rem;
  color: rgba(250, 247, 238, 0.84);
  margin-bottom: 12px;
}

.closing-salam {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--gold-200);
  margin-bottom: 16px;
}

.closing-pantun-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(11, 61, 46, 0.82);
  border: 1px solid rgba(230, 185, 62, 0.55);
  color: var(--gold-100);
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 22px;
}

.closing-footer {
  font-size: 0.72rem;
  color: rgba(250, 247, 238, 0.6);
}

/* ==========================================================================
   17. NATIVE <dialog closedby="any"> LIGHTBOX & TOAST
   ========================================================================== */
.lightbox-modal {
  margin: auto;
  padding: 0;
  border: 1.5px solid rgba(230, 185, 62, 0.7);
  border-radius: 22px;
  background: rgba(4, 24, 18, 0.96);
  color: var(--gold-100);
  width: min(92vw, 440px);
  max-height: 88vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.lightbox-modal::backdrop {
  background-color: rgba(2, 12, 9, 0.82);
  backdrop-filter: blur(6px);
}

.lb-shell {
  padding: 14px;
}

.lb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lb-counter {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-200);
}

.lb-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(230, 185, 62, 0.55);
  background: rgba(17, 87, 66, 0.65);
  color: var(--gold-100);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: #020F0B;
}

.lb-stage img {
  max-height: 64vh;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

.lb-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(230, 185, 62, 0.65);
  background: rgba(4, 24, 18, 0.78);
  color: var(--gold-100);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-nav-btn--prev { left: 10px; }
.lb-nav-btn--next { right: 10px; }

.lb-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--gold-100);
  margin-top: 10px;
}

/* Toast Notification */
.portal-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 150;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zamrud-800) 0%, var(--zamrud-950) 100%);
  border: 1.5px solid var(--gold-300);
  color: var(--gold-100);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

/* ==========================================================================
   18. TWO-WAY SCROLL REVEAL & GATE ANIMATIONS (EXACT UNDANGAN_1 SYSTEM)
   ========================================================================== */
.reveal,
.reveal-fade,
.reveal-scale,
.reveal-left,
.reveal-right {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 2.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal       { transform: translateY(36px); }
.reveal-fade  { transform: translateY(18px); }
.reveal-scale { transform: scale(0.92) translateY(20px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal.is-revealed,
.reveal-fade.is-revealed,
.reveal-scale.is-revealed,
.reveal-left.is-revealed,
.reveal-right.is-revealed,
.reveal.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal.active,
.reveal-fade.active,
.reveal-scale.active,
.reveal-left.active,
.reveal-right.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.delay-75  { transition-delay: 0.12s; }
.delay-100 { transition-delay: 0.20s; }
.delay-150 { transition-delay: 0.28s; }
.delay-200 { transition-delay: 0.36s; }
.delay-250 { transition-delay: 0.44s; }
.delay-300 { transition-delay: 0.56s; }

@keyframes gateFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gate-anim-photo { animation: gateFadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.gate-anim-1     { animation: gateFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
.gate-anim-2     { animation: gateFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both; }
.gate-anim-3     { animation: gateFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.56s both; }
.gate-anim-4     { animation: gateFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.70s both; }
.gate-anim-5     { animation: gateFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.84s both; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade,
  .reveal-scale,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bridge-melayu,
  .gate-manggar,
  .closing-manggar,
  .wings-corner,
  .wings-manggar {
    animation: none !important;
  }
}